[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 !
 

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

  1. Bonjour,

    Merci beaucoup pour ton tuto. Je l’ai fait et réussis sans problème. Mais la ligne dans le CSS custom ne semble pas fonctionner pour moi, la section produits accessoires est collée au bloc description. J’ai bien vidé les caches etc mais rien à faire aucun marge ne s’ajoute entre les deux… Une idée ?

    Merci d’avance et bonne journée !

    1. Bonjour,
      Merci pour votre commentaire.
      Si les blocs sont collés, vous pouvez ajouter un margin-top: 15px au bloc suivant.
      Bon courage 🙂

  2. Bonjour Arnaud,

    Alors j’ai refais la manipulation mais maintenant je me retrouve avecune fiche où la descrption longue n’est pas visible , il y a bien les 2 onglets description + détails, mais on doit cliquer dessu pour que le texte s’affiche….J’ai loupé un truc svp ?
    Merci
    Corinne

    1. Bonjour Corinne,
      Impossible de dire ce qu’il en est sans être dans le code, mais sinon remplacez le fichier par celui fourni dans l’article.

  3. Merci pour la réponse Arnaud et désolée pour les fautes de frappes (médocs).
    Je suis sur le thème Classic Rocket.
    Encore merci 😉

  4. Bonjour Arnaus,
    Merci pour ce super tuto et je suis d’accord sur le fait que c’est aussi pour moi plus logique que ce soit en pleine largeur 😉.
    Mais j’ai la tête dans les choux car je ne sais pas si je dois remplacer tout mon fichier tpl par le tien ou remplecer juste une partie ?? Pareil pour le CSS….
    Je ne sais pas si je suis bien claire dans mes propos..😂
    Meric

    1. Bonjour Corinne,
      Merci pour le commentaire !
      Chaque thème étant différent, il faut adapter avec votre thème.
      Vous pouvez aussi faire une sauvegarde et ensuite remplacer le tpl et compléter le css.
      Bon courage

  5. Bonjour,
    Version 1.7.8.4 est même problème rencontré que Emilie.
    dans le product.tpl de cette version j’ai cette ligne :

    alors que dans la version 1.7
    elle est de cette façon

    que vous avez remplacez par
    c’est peut-être la raison pour la quelle rien ne se passe pour les version 1.7.8 … ?

    i don’t know,
    en tout cas merci à vous et tous les autres qui propose ce genre d’astuce 😉 !

  6. Bonjour,

    J’essaie depuis plusieurs heures de suivre votre tuto, je n’ai pas d’erreur 500 ou autres, mais cela ne fonctionne pas, l’affichage est toujours le même (bloc à droite). J’ai bien changé le product.tpl et le custom.css mais je n’ai pas de changement. Cache vidé, testé sur plusieurs navigateurs. Je suis sur 1.7.8.6 cette version est elle compatible avec votre tuto ?

    Merci d’avance pour votre réponse

    1. Bonjour Emilie,
      Merci pour le commentaire,
      Vérifiez que vos fichiers sont bien modifiés sur le serveur.
      Ensuite, vérifiez que le cache dans PrestaShop est bien désactivé et la compilation forcée.

  7. Bonjour à tous,
    qq à tester avec une version 1.7.7.1 ? car pour ma part j’ai une erreur 500.
    merci d’avance pour vos retours

    1. Bonjour Gilles,
      Testé fonctionnel, activez le mode debug pour en savoir plus sur l’erreur 😉

  8. Bonjour,

    J’ai un problème, le full screen s’applique, mais le texte n’est pas visible. Si je clique sur l’onglet fiche technique puis denouveau sur l’onglet, ce coup-ci le texte s’affiche.
    Je ne comprends pas pourquoi, je suis débutant et je suis sur la 1.7.8.
    Avez-vous une solution ?

    Bien à vous,
    Alexis

  9. Je me réponds à moi même,
    bien pensé à vider le cache, pour ma part même après avoir gardé le cache désactivé, il a fallu que je supprime les dossiers DEV et PROD su serveur,

    Mais bonne nouvelle ça fonctionne
    Merci 🙂

  10. Bonjour,
    Je viens de passer en 1.7.7.5 et ça ne fonctionne pas.
    J’ai fait la modification rien ne se passe, et j’ai remplacé le fichier par le tien, e là non plus rien ne fonctionne, toujorus pas en full width.
    Tu aurais une solution ?
    Merci 🙂

  11. Bonjour,

    Merci beaucoup pour ce tuto c’est parfait !
    Quand j’ai copié le code au début, ça n’a pas fonctionné, il y avait une erreur, ma page n’était plus accessible.
    Du coup en récupérant ton fichier cela a bien fonctionné, merci 🙂

  12. Bonjour,
    merci pour le tuto,
    mais rencontre un petit probleme sur le description produit et details du produit, mon texte ou mon image et collé a description il manquerait une marge ou autre afin de descendre l’image ou le texte dans les 2 onglets. Esce que j’aurais loupé quelque chose ?
    voici le lien ou vous pourrez voir le soucie https://www.sr-solutions.fr/produits/22-mallette-multi-games-s.html
    En vous remerciant par avance de votre retour

    1. Bonjour,
      Dans ce cas et selon votre thème, vous pouvez ajouter un margin-top sur l’élément .tabs .tab-pane

  13. Bonjour et merci pour votre tuto, très utile 🙂

    Juste un petit souci, si je prends votre TPL direct et que je mets le CSS en palce tout est nickel. Mais le product.tpl évolue en fonction des version et j’ai voulu ajouter uniquement les modifications.
    Donc ok pour les deux premiers div, par contre je ne trouve nulle pas où les rajouter. Donc je me me retourve avec une page qui ne fonctionne pas, vue qu’il manque des DIV.
    Merci pour votre aide, et bonne continuation

    1. Bonjour Patrick,
      Avec plaisir et merci pour le commentaire !
      Quelle est votre version de PrestaShop avant tout ?

  14. 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

    1. Bonjour Mathieu,
      Merci pour ton retour, l’article est à jour à présent 🙂

  15. 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. j ai directement intégrer tes deux fichier en téléchargement
      et là ça fonctionne
      merci pour ton travail

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

  16. 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

    1. Bonjour Thomas,
      Pour du cas particulier, je t’invite à me faire un mail avec l’url du site web 😉

  17. 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

  18. 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

  19. 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 🙂

  20. 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.

  21. 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)

    3. 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 !

  22. 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.

  23. 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 !

Laisser un avis

Consultez les autres articles