Magazine Ebusiness

[PrestaShop 1.7] Fiche produit en fullscreen

Publié le 16 novembre 2017 par Amerigeau @arnaudmerigeau

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 !


Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

  • OM – Mercato : Balotelli va bien s’engager avec le club !

    Les bonnes nouvelles s'enchaînement du côté de l'Olympique de Marseille. Alors que l'officialisation du transfert de Caleta-Car devrait intervenir aujourd'hui,... Lire la suite

    Il y a 5 heures, 41 minutes par   Yannc83
    FOOTBALL, SPORT
  • under-the-silver-lake-official-trailer

    under-the-silver-lake-official-trailer

    On aura beaucoup glosé sur les similitudes entre le dernier-né de David Cameron Mitchell, réalisateur de l’acclamé It Follows, et Southland Tales de... Lire la suite

    Il y a 5 heures, 49 minutes par   Julien Leray
    CINÉMA
  • Nouveau tag du lecteur

    J'ai repéré ce tag sur le blog Les Quotidiennes de Val et j'ai trouvé que c'était une bonne idée pour se retrouver après cette période sans blogging. Pour... Lire la suite

    Il y a 6 heures, 12 minutes par   Arieste
    CULTURE, LIVRES
  • Carte Scrap #1106

    Carte Scrap #1106

    Hello, une petite carte masculine ça vous tente ? J’ai réalisé cette carte pour l’anniversaire de mon mari, pas évident comme exercice. Lire la suite

    Il y a 6 heures, 14 minutes par   Monique
    CUISINE, RECETTES
  • Le Design Social Club, un ensemble de techniques au service du dessein

    Design Social Club, ensemble techniques service dessein

    Le Design Social Club, une unité de production pluridisciplinaire basée en France présente une liste non exhaustive de travaux de recherche expérimentale. Lire la suite

    Il y a 6 heures, 42 minutes par   Vincent Espritdesign
    CONSO, DÉCORATION, DESIGN ET ARCHITECTURE
  • Le poids du monde est amour de David THOMAS

    poids monde amour David THOMAS

    ♥♥♥ "Le bonheur est pour bientôt. Il est dans notre désir de vivre." Au début on se dit que le fil est perdu, que l'auteur ne réussira pas à retrouver la... Lire la suite

    Il y a 7 heures par   Lecturissime
    CULTURE, LIVRES
  • Courgettes aux légumes et persillade

    Courgettes légumes persillade

    Si vous réalisez une de mes recettes m'envoyer ( christellerobin7@gmail.com ) les photos (ou si vous avez un blog le lien de votre recette) pour une petite... Lire la suite

    Il y a 8 heures, 13 minutes par   Poupoule38
    CUISINE, RECETTES

A propos de l’auteur


Amerigeau 143 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte