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.
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:
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.
tel: 888 537 633
e-mail: axp@prodo.pl