• PrestaShop Pomoc. Tworzenie sklepów internetowych PrestaShop. Grafika, moduły, wdrożenie, aktualizacje oraz rozbudowa sklepów internetowych.

    Polskie Wsparcie PrestaShop
    Pomoc PrestaShop

PrestaShop POLSKIE WSPARCIE Sklepy internetowe PrestaShop POTRZEBNA POMOC ?

POMOC - ROZBUDOWA - NAPRAWY - AKTUALIZACJE - KONFIGURACJA - TWORZENIE SKLEPÓW

zapraszamy do kontaktu:   axp@prodo.pl / tel. 888 537 633

 

Jak zwiększyć na całą stronę pole opisu produktu

 

opis produktu w sklepie presta 1.7 to wąski pasek po prawej stronie, przy długiej treści opisu powoduje rozciągnięcie strony w dół i jest mało czytelny dla odwiedzających.

 

 

presta opis produktu jako wąski pasek

 

 

Jednak w prosty sposób możemy rozciągnąć tekst na całą szerokość strony, a więc zaczynamy.

 

Szerszy opis produktu dla wersji powyżej 1.7.0.5

 

Zaloguj się na FTP do katalogu:

themes/classic/templates/catalog/product.tpl

edytujemy plik product.tpl

odszukując w nim kod

 

{block name='product_tabs'}
    <div class="tabs">
        <ul class="nav nav-tabs">
            {if $product.description}
                <li class="nav-item">
                    <a class="nav-link{if $product.description} active{/if}" data-toggle="tab" href="#description">
                        {l s='Description' d='Shop.Theme.Catalog'}
                    </a>
                </li>
            {/if}
            <li class="nav-item">
                <a class="nav-link{if !$product.description} active{/if}" data-toggle="tab" href="#product-details">
                    {l s='Product Details' d='Shop.Theme.Catalog'}
                </a>
            </li>
            {if $product.attachments}
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#attachments">
                        {l s='Attachments' d='Shop.Theme.Catalog'}
                    </a>
                </li>
            {/if}
            {foreach from=$product.extraContent item=extra key=extraKey}
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#extra-{$extraKey}">{$extra.title}</a>
                </li>
            {/foreach}
        </ul>
 
        <div class="tab-content" id="tab-content">
            <div class="tab-pane fade in{if $product.description} active{/if}" id="description">
                {block name='product_description'}
                    <div class="product-description">{$product.description nofilter}</div>
                {/block}
            </div>
 
            {block name='product_details'}
                {include file='catalog/_partials/product-details.tpl'}
            {/block}
 
            {block name='product_attachments'}
                {if $product.attachments}
                    <div class="tab-pane fade in" id="attachments">
                        <section class="product-attachments">
                            <h3 class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</h3>
                            {foreach from=$product.attachments item=attachment}
                                <div class="attachment">
                                    <h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4>
                                    <p>{$attachment.description}</p
                                    <a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">
                                        {l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
                                    </a>
                                </div>
                            {/foreach}
                        </section>
                    </div>
                {/if}
            {/block}
 
            {foreach from=$product.extraContent item=extra key=extraKey}
            <div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}>
            {$extra.content nofilter}
        </div>
        {/foreach}
    </div>
{/block}

 

 

zaznaczamy i kopiujemy kod do schowka myszki

wycinamy powyższy kod

następnie odszukujemy fragment kodu:

 

{block name='product_accessories'}
 {if $accessories}
  <section class="product-accessories clearfix">
   <h3 class="h5 text-uppercase">{l s='You might also like' d='Shop.Theme.Catalog'}</h3>
   <div class="products">
    {foreach from=$accessories item="product_accessory"}
     {block name='product_miniature'}
      {include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory}
     {/block}
    {/foreach}
   </div>
  </section>
 {/if}
{/block}

i przed pozycją

{block name='product_accessories'}

 

wklejamy wcześniej skopiowany i wykasowany kod bloku {block name='product_tabs'}

 

Szerszy opis produktu dla wersji starszej niż 1.7.0.5

Zaloguj się na FTP do katalogu:

themes/classic/templates/catalog/product.tpl

edytujemy plik product.tpl

odszukując w nim kod

 

{block name='product_tabs'}
    <div class="tabs">
        <ul class="nav nav-tabs">
            {if $product.description}
                <li class="nav-item">
                    <a class="nav-link{if $product.description} active{/if}" data-toggle="tab" href="#description">
                        {l s='Description' d='Shop.Theme.Catalog'}
                    </a>
                </li>
            {/if}
            <li class="nav-item">
                <a class="nav-link{if !$product.description} active{/if}" data-toggle="tab" href="#product-details">
                    {l s='Product Details' d='Shop.Theme.Catalog'}
                </a>
            </li>
            {if $product.attachments}
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#attachments">
                        {l s='Attachments' d='Shop.Theme.Catalog'}
                    </a>
                </li>
            {/if}
            {foreach from=$product.extraContent item=extra key=extraKey}
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#extra-{$extraKey}">{$extra.title}</a>
                </li>
            {/foreach}
        </ul>
 
        <div class="tab-content" id="tab-content">
            <div class="tab-pane fade in{if $product.description} active{/if}" id="description">
                {block name='product_description'}
                    <div class="product-description">{$product.description nofilter}</div>
                {/block}
            </div>
 
            {block name='product_details'}
                {include file='catalog/_partials/product-details.tpl'}
            {/block}
 
            {block name='product_attachments'}
                {if $product.attachments}
                    <div class="tab-pane fade in" id="attachments">
                        <section class="product-attachments">
                            <h3 class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</h3>
                            {foreach from=$product.attachments item=attachment}
                                <div class="attachment">
                                    <h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4>
                                    <p>{$attachment.description}</p
                                    <a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">
                                        {l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
                                    </a>
                                </div>
                            {/foreach}
                        </section>
                    </div>
                {/if}
            {/block}
 
            {foreach from=$product.extraContent item=extra key=extraKey}
            <div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}>
            {$extra.content nofilter}
        </div>
        {/foreach}
    </div>
{/block}

zaznaczamy i kopiujemy kod do schowka myszki

wycinamy powyższy kod

następnie odszukujemy fragment kodu:

 

{block name='product_accessories'}
 {if $accessories}
  <section class="product-accessories clearfix">
   <h3 class="h5 text-uppercase">{l s='You might also like' d='Shop.Theme.Catalog'}</h3>
   <div class="products">
    {foreach from=$accessories item="product_accessory"}
     {block name='product_miniature'}
      {include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory}
     {/block}
    {/foreach}
   </div>
  </section>
 {/if}
{/block}

i przed pozycją

{block name='product_accessories'}

 

wklejamy wcześniej skopiowany i wykasowany kod bloku {block name='product_tabs'}

efekt po zmianach:

wąski pasek opis produktu powiększony

 

 Na koniec warto zadbać o responsywność zdjęć dodawanych w pole opisu w rozszerzonej wersji w tym celu edytujemy plik css szablonu

../themes/classic/assets/css/theme.css

i dodajemy funkcję img w pozycji

tab-content> item
img {
     display: block;
     max-width: 100%;
     height: auto;}

po modyfikacji kod wygląda tak:

tab-content>.active{display:block;}
img{
    display: block;
    max-width: 100%;
    height: auto;}
.navbar{position:relative;padding:.5rem 1rem}

warto też na samym dole dopisać kod w pliku

../themes/classic/assets/css/custom.css

dopisujemy

tab-content>.active{display:block;}
img{
    display: block;
    max-width: 100%;
    height: auto;}
.navbar{position:relative;padding:.5rem 1rem}

co pozwoli nam zachować zmiany w css w razie ewentualnej aktualizacji presty do wyższej wersji.

 

Jeżeli potrzebujesz wdrożenia tej zmiany w swoim sklepie PrestaShop zapraszamy !

tel: 888 537 633

e-mail: axp@prodo.pl