[PrestaShop 1.7] Fiche produit en fullscreen

PrestaShop
  • Accueil
  • Blog
  • [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

prestashop fiche produit full width
La fiche produit du thème Classic de PrestaShop 1.7 n’est pas optimisée !

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">
           %<br>
20            <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 nam<br>
e='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;
}

[Edit du 03/02/2020, merci Mathieu] Pour garder des images responsive dans la description de votre fiche produit, ajoutez une ligne de CSS dans le fichier www/themes/classic/assets/css/custom.css :
/*Images responsive dans les tabs de la fiche produit*/
.product-description img{
	max-width: 100%;
	height: auto;
}

Et le résultat est immédiat :
prestashop fiche produit full width
La fiche produit du thème PrestaShop 1.7 avec la description en pleine largeur

Le travail indiqué ici est évidemment responsive avec une affichage simple mais optimale pour mobil et tablette :
prestashop fiche produit full width
Le rendu sur mobile est simple et efficace !

 

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 !
 

22 commentaires sur “[PrestaShop 1.7] Fiche produit en fullscreen

  1. Hello,
    Aahaha génial, justement je devais préparer une vidéo pour proposer exactement cette optimisation… tu l’as fait, bon ben je peux que dire félicitation ! Par défaut c’est un peu trop compact… c’est vrai que ça manque clairement de visibilité.
    Ta bannière de billet m’a bien fait rire c’est exactement mon genre d’esprit… comme quoi on peut faire des choses en étant expert, mais sans trop se prendre au sérieux.
    A bientôt !

    1. Hello Germain,
      J’ai eu tellement de personnes qui ont demandé ce tuto que je me suis finalement motivé à le préparer.
      Et totalement d’accord pour faire les choses bien sans se prendre au sérieux 😀
      Bonne journée !

  2. Merci beaucoup pour ton tuto. je l’ai fais et réussis. j’ai dû remplacer l’ancien fichier product.tpl par le tiens et jai fais un peu de touche css.

  3. Salut !
    Si en plus tu nous fais un tuto pour avoir les images de la description en responsive, je t’épouse ! 😉
    (parce que je ne trouve nulle part comment gérer la chose)
    Bisous ! ^^

    1. Bonjour,
      Sans demander quoique se soit en retour si ce n’est un merci et peu être un vote sur l’article, il suffit d’ajouter du css :
      #product_tabs_block img{max-width: 100%;height: auto;}

    2. Bon alors, petite checklist de fin d’année :
      -le vote c’est fait (j’ai mis 5 étoiles, hein. On vote utile, quoi ;-))
      -le merci en retour était plus ou moins inclus dans la demande, délicatement planqué dans une demande en mariage doublée de quelques bisous. Mais au risque de me répéter : merci !
      -je m’en vais de ce pas tester cette solution, même si depuis j’ai fait du chemin et découvert les joies de la classe img-fluid, la simplicité mérite le détour.
      Sur ce, bonne année à tous ! (et particulièrement au créateur de ce site)

      1. Bonjour El Manu,
        Ahah j’ai tellement aimé la blague que j’ai répondu le 31/12 ^^
        Merci pour ce commentaire en tout cas et à très vite 😉
        Bonne année !

  4. Bonjour, un grand merci. A peine j’ai pensé mettre cette partie en pleine page je suis tombé sur votre tuto. le résultat est parfait.

  5. Bonjour, un grand merci pour ce tuto, j’ai juste une question, dans l’affichage mobile comment mettre (détails du produit) sur la même ligne à coté de (description) ? merci

    1. Bonjour Henix,
      On peut essayer de les avoir sur la même ligne mais le souci c’est qu’il faudra que le texte des onglets soit tout petit.
      Voici le css à appliquer sur mobile :
      [code]
      @media screen and (max-width: 768px){
      .tabs .nav-tabs {
      border: none;
      border-bottom: 2px solid #f1f1f1;
      display: flex;
      flex-wrap: wrap;
      }
      .tabs .nav-tabs .nav-item {
      float: left;
      margin-bottom: -.125rem;
      width: 49%;
      font-size: 10px;
      text-align: center;
      }
      }
      [/code]
      A bientôt 🙂

  6. Bonjour Arnaud, j’ai remplacer mon fichier par le votre et pas de modification dans ma fiche produit, je suis en V 1.7.5.1 en local via wamp
    Merci de me dire ou peut être le souci
    Cordialement

  7. Désolé pour mon précédent message, j’étais pas dans le bon dossier des différents sites que je test sur mon pc
    Le tutto fonctionne bien
    Merci Arnaud

  8. Bonjour Arnaud,
    C’est la deuxième fois que je tente le tuto sur ma version 1.7.5 de Prestashop et ça ne fonctionne toujours pas. Est-ce que tu pourrais m’aider stp ? J’ai bien ajouter les div et le CSS mais ça reste sur une colonne bien à droite. Et maintenant j’ai même mes produits complémentaires et avis qui sont sur une colonne à droite (alors qu’ils étaient en pleine page avant). Merci d’avance pour tes lumières 🙂 !
    Thomas

  9. Salut Arnaud
    pareil avec la version 1.7.6.1, j’essaye ton tuto avec la version de base du theme
    et ça me mets une erreur 500
    c’est très bête de mettre autant de vide :/
    merci à toi en tout cas

      1. Avec plaisir, tu peux laisser un commentaire sur Google si tu le souhaite : g.page/freelanceprestashopwordpress/review

  10. Bonjour Arnaud,
    Tout d’abord merci pour ton tuto !
    J’ai fait les changements sur mon site mais lorsque j’ajoute des images dans la description je perd la reponsivité de l’image sur mobile.
    Tu n’as pas oublié une ligne dans le code ???
    Je te remercie par avance pour ton soutient

Laisser un commentaire

Consultez les autres articles