[PrestaShop 1.7] Fiche produit en fullscreen

Après de nombreux retours, je vous propose aujourd'hui un rapide tutoriel PrestaShop pour obtenir une fiche produit sur toute la largeur autrement dit " full width " .

Constat : peu de lisibilité du contenu avec PrestaShop 1.7

Par défaut, PrestaShop 1.7 propose une fiche produit avec deux colonnes pour les photos et le bloc achat dans un premier bloc, pour du vide et les tabs avec description / détails / caractéristiques.

Oui, vous avez bien lu " du vide " !

Je ne comprend pas trop cette structure de page qui n'optimise pas une colonne gauche tout simplement vide. On aurait pu y placer les produits associés ou ventes croisées aussi mais on va plutôt afficher les onglets description / détails / caractéristiques en pleine largeur.

Tuto PrestaShop : intégration de la fiche produit en largeur 100%

Ce tuto PrestaShop a été intégré sous la version 1.7.2.4.

Pensez à bien forcer la compilation et désactiver les caches durant l'intégration 🙂

Attachez vos ceintures car ça va aller vite ! Ouvrez le fichier www/themes/classic/templates/catalog/product.tpl et modifiez le fichier en isolant {block name='product_tabs'} par une nouvelle div comme suit :

{** * 2007-2017 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License 3.0 (AFL-3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * https://opensource.org/licenses/AFL-3.0 * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@prestashop.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to http://www.prestashop.com for more information. * * @author PrestaShop SA <contact@prestashop.com> * @copyright 2007-2017 PrestaShop SA * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) * International Registered Trademark & Property of PrestaShop SA *} {extends file=$layout} {block name='head_seo' prepend} <link rel="canonical" href="{$product.canonical_url}"> {/block} {block name='head' append} <meta property="og:type" content="product"> <meta property="og:url" content="{$urls.current_url}"> <meta property="og:title" content="{$page.meta.title}"> <meta property="og:site_name" content="{$shop.name}"> <meta property="og:description" content="{$page.meta.description}"> <meta property="og:image" content="{$product.cover.large.url}"> <meta property="product:pretax_price:amount" content="{$product.price_tax_exc}"> <meta property="product:pretax_price:currency" content="{$currency.iso_code}"> <meta property="product:price:amount" content="{$product.price_amount}"> <meta property="product:price:currency" content="{$currency.iso_code}"> {if isset($product.weight) & ($product.weight != 0)} <meta property="product:weight:value" content="{$product.weight}"> <meta property="product:weight:units" content="{$product.weight_unit}"> {/if} {/block} {block name='content'} <section id="main" itemscope itemtype="https://schema.org/Product"> <meta itemprop="url" content="{$product.url}"> <div class="row"> <div class="col-md-6"> {block name='page_content_container'} <section class="page-content" id="content"> {block name='page_content'} {block name='product_flags'} <ul class="product-flags"> {foreach from=$product.flags item=flag} <li class="product-flag {$flag.type}">{$flag.label}</li> {/foreach} </ul> {/block} {block name='product_cover_thumbnails'} {include file='catalog/_partials/product-cover-thumbnails.tpl'} {/block} <div class="scroll-box-arrows"> <i class="material-icons left"></i> <i class="material-icons right"></i> </div> {/block} </section> {/block} </div> <div class="col-md-6"> {block name='page_header_container'} {block name='page_header'} <h1 class="h1" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1> {/block} {/block} {block name='product_prices'} {include file='catalog/_partials/product-prices.tpl'} {/block} <div class="product-information"> {block name='product_description_short'} <div id="product-description-short-{$product.id}" itemprop="description">{$product.description_short nofilter}</div> {/block} {if $product.is_customizable & count($product.customizations.fields)} {block name='product_customization'} {include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations} {/block} {/if} <div class="product-actions"> {block name='product_buy'} <form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh"> <input type="hidden" name="token" value="{$static_token}"> <input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id"> <input type="hidden" name="id_customization" value="{$product.id_customization}" id="product_customization_id"> {block name='product_variants'} {include file='catalog/_partials/product-variants.tpl'} {/block} {block name='product_pack'} {if $packItems} <section class="product-pack"> <h3 class="h4">{l s='This pack contains' d='Shop.Theme.Catalog'}</h3> {foreach from=$packItems item="product_pack"} {block name='product_miniature'} {include file='catalog/_partials/miniatures/pack-product.tpl' product=$product_pack} {/block} {/foreach} </section> {/if} {/block} {block name='product_discounts'} {include file='catalog/_partials/product-discounts.tpl'} {/block} {block name='product_add_to_cart'} {include file='catalog/_partials/product-add-to-cart.tpl'} {/block} {block name='product_additional_info'} {include file='catalog/_partials/product-additional-info.tpl'} {/block} {block name='product_refresh'} <input class="product-refresh ps-hidden-by-js" name="refresh" type="submit" value="{l s='Refresh' d='Shop.Theme.Actions'}"> {/block} </form> {/block} </div> {block name='hook_display_reassurance'} {hook h='displayReassurance'} {/block} </div> </div> </div> <div id="product_tabs_block" class="row"> <div class="col-xs-12"> {block name='product_tabs'} <div class="tabs"> <ul class="nav nav-tabs" role="tablist"> {if $product.description} <li class="nav-item"> <a class="nav-link{if $product.description} active{/if}" data-toggle="tab" href="#description" role="tab" aria-controls="description" {if $product.description} aria-selected="true"{/if}>{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" role="tab" aria-controls="product-details" {if !$product.description} aria-selected="true"{/if}>{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" role="tab" aria-controls="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}" role="tab" aria-controls="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" role="tabpanel"> {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" role="tabpanel"> <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}" role="tabpanel" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}> {$extra.content nofilter} </div> {/foreach} </div> </div> {/block} </div> </div> {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} {block name='product_footer'} {hook h='displayFooterProduct' product=$product category=$category} {/block} {block name='product_images_modal'} {include file='catalog/_partials/product-images-modal.tpl'} {/block} {block name='page_footer_container'} <footer class="page-footer"> {block name='page_footer'} <!-- Footer content --> {/block} </footer> {/block} </section> {/block}

Notez les modifications entre la ligne 150 et 236 du fichier modifié. J'ai aussi ajouté un id " product_tabs_block " pour pouvoir apporter du style si besoin.

Et d'ailleurs, j'ajoute une ligne de CSS dans le fichier www/themes/classic/assets/css/custom.css :

/*Style du bloc des tabs de la fiche produit*/ #product_tabs_block{ margin-bottom: 2rem; }

Et le résultat est immédiat :

Le travail indiqué ici est évidemment responsive avec une affichage simple mais optimale pour mobil et tablette :

Fichiers pour intégration de la fiche produit

Vous avez donc simplement et rapidement optimiser la lecture de votre fiche produit ce qui peut améliorer votre taux de conversion.

Voici les fichiers à télécharger pour réaliser le tuto PrestaShop :

Et le tuto en vidéo 🙂

A bientôt pour un nouveau tuto PrestaShop !

Mots clés : prestashop, prestashop 1.7, tuto prestashop, tutorial prestashop, tutoriel prestashop

Vous avez aimé cet article ? Notez-le avec les étoiles ! Merci !