Jump to content

Modifier la position de la déscription produits PRESTASHOP


Recommended Posts

Salut à tous, au départ avec le CMS de PRESTASHOP la colonne de description PRODUIT se situé en dessous du bouton d’achat et des customs réassurances ,

Donc coté droit de l’écran, par contre si nous avons une déscription plutôt longue toute la partie gauche en dessous de l’image PRODUIT se trouve avec un grand vide.

Je voudrai centrer ce bloc de texte (description) au centre de façon à harmoniser l'ensemble.

Je suppose que les modifications sont à faire au niveau du fichier thème .CSS mais je le parcours de haut en bas , je n’arrive pas tomber sur les lignes à modifier. ,

Par ou rechercher ?

Share this post


Link to post
Share on other sites

Bonjour.

Le bloc de description produit est une div html dont la class est : "tabs" elle mème contenue dans l'élément de class:  product-information. Le problème est que cet élément est à son tour contenu dans un élément qui fait office de colone à droit de la fiche produit.

En css il serait bien sure possible de passé outre et d'effectivement centrer votre élément en le faisant déborder de ses conteneur.

Hélas ce n'est pas le bon reflexe car résponsive oblige,  votre élément adopterait un comportement inadéquat selon les différente tailles d'écran sur lesquels il se trouve affiché.

En outre il n'est pas conseillé de toucher au fichier theme.css (sauf si vous ètes développeur et maitrisez saas et les principes de cascades, d'héritages css...)

le fichier prévu afin de procéder aux customisations css est : custom.css. (mais bon là...l'utilisera t on ?)

Cela ne s’arrête pas là, pour l'opération souhaité il faudra à mon sens intervenir également au niveau du fichier .tpl afin de replacer l' élément html de manière plus opportune.

Ce qui implique également de travailler sur un thème enfant (duplicata par exemple de votre theme classic) car tout fichier modifié directement sur le theme d'origine PS se verra supprimer en cas de mise à jour.

Donc

étape 1 >> si ce n'est pas le cas créer votre theme "enfant" (pour pouvoir faire vos modification en toute sécurité)

étape 2>> modifier le html des fichiers .tpl  (pour placer l'élement souhaité hors de son conteneur d'origine !!! en faisant attention car une bonne partie de la fiche produit utilise des fonctions "dynamique" afin de gerer l'affichage entre autre des déclinaisons.)

étape 3 >>modifier votre css via le fichier custom.css ?

(tout au long de ces opération vous pouvez revenir sur le forum afin de soliciter +de précisions)

Après ce n'est que mon idée sur la question, d'autres auront peut ètre plus simple à proposer...

 

 

Autres solution si vous  ètes moyennement chaud pour fair par vous mème : demander cette intervention à l'un des nombreux pro, présent sur le forum qui vous réaliserons sans soucis le changement pour pas si cher que ca.

Un Eolia, Mediacom87, Divine, solsol69, Prestachamps par exemple.

Bon courrage à vous

 

Edited by Remy FRK Corp (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

 Merci pour les infos Remy, on va tenter le coup !

Je tourne sur une version en locale qui me sert de bac à sable, c’est justement fait pour ça...

Première étape, premier problème 😀

Je créer un thème enfant comme suit :

Création d'un dossier var/www/prestashop/themes/classic-child

Dans ce même dossier je créer un dossier config dans lequel je place un fichier theme.yml

le fichier se compose de la manière suivante :

parent: classic
name: classic-child
display_name: Custom Theme
version: 1.0.0
assets:
    use_parent_assets: true

Ensuite quand je me connecte au CMS/Apparence/thème et logo il y a bien un thème supplémentaire nommé Custom Theme Version 1.0.0 J’utilise le thème et retourne sur le site, cela me donne une page blanche, je clique sur F12 et dans l’inspecteur je n’ai rien, tout est vide, head, body vide totale…

Il y a une erreur quelque part ou c’est tout simplement parce que mon dossier var/www/prestashop/themes/classic-child est vide mis à part le fichier config/theme.yml ?

  • Like 1

Share this post


Link to post
Share on other sites

Pour éviter des problèmes j’ai simplement nommé le dossier enfants comme suite

var/www/prestashop/themes/child

Concernant le fichier theme.yml

parent: classic

name: child

display_name: Child theme

version: 1.0.0

assets:

use_parent_assets: true

 

Mais l’origine du dysfonctionnement du problème sur le thème enfant venait je pense d’un problème d’autorisation en écriture pour le groupe.

Le temps de faire de la prod en local j’ai ouvert l’open bar sur les autorisations, donc autorisations en lecture, écriture et exécution pour l’utilisateur et le groupe sur la totalité du dossier Prestashop. Question sécurité on verra plus tard au moment de mettre le dossier en ligne. On va éviter d’ajouter des couches de problèmes, allons au plus simple.

Donc on passe à la deuxième partie, modification du fichier .tpl Je suppose qu’on parle du fichier product.tpl situé dans :

var/www/prestashop/themes/classic/templates/catolog/product.tpl

Si c’est le bon fichier j’en fais une copie dans le dossier enfant donc :

var/www/prestashop/themes/child/templates/catalog/product.tpl

Quand je modifie le fichier product.tpl au niveau du thème enfant on peut apercevoir les modifications sur le fiche produit en visionnant le site en local, preuve que le thème enfant fais bien son boulot.

On 1/27/2021 at 8:45 PM, Remy FRK Corp said:

étape 2>> modifier le html des fichiers .tpl  (pour placer l'élement souhaité hors de son conteneur d'origine !!! en faisant attention car une bonne partie de la fiche produit utilise des fonctions "dynamique" afin de gerer l'affichage entre autre des déclinaisons.)

Alors là je suis un peu perdu, parce que je voie vraiment pas comment faire…. Modifier les couleurs de fond sur le fichier theme.css était assé simple, surtout avec l’explorateur que fournie Mozilla.

Voici à quoi ressemble mon fichier product.tpl

{**
 * Copyright since 2007 PrestaShop SA and Contributors
 * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
 *
 * 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.md.
 * 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 [email protected] 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 https://devdocs.prestashop.com/ for more information.
 *
 * @author    PrestaShop SA and Contributors <contact@prestashop.com>
 * @copyright Since 2007 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 *}
{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}">
  {if $product.show_price}
    <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}
  {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 product-container">
      <div class="col-md-6">
        {block name='page_content_container'}
          <section class="page-content" id="content">
            {block name='page_content'}
              {include file='catalog/_partials/product-flags.tpl'}

              {block name='product_cover_thumbnails'}
                {include file='catalog/_partials/product-cover-thumbnails.tpl'}
              {/block}
              <div class="scroll-box-arrows">
                <i class="material-icons left">&#xE314;</i>
                <i class="material-icons right">&#xE315;</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}" class="product-description" 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">
                        <p class="h4">{l s='This pack contains' d='Shop.Theme.Catalog'}</p>
                        {foreach from=$packItems item="product_pack"}
                          {block name='product_miniature'}
                            {include file='catalog/_partials/miniatures/pack-product.tpl' product=$product_pack showPackProductsPrice=$product.show_price}
                          {/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}

                  {* Input to refresh product HTML removed, block kept for compatibility with themes *}
                  {block name='product_refresh'}{/block}
                </form>
              {/block}

            </div>

            {block name='hook_display_reassurance'}
              {hook h='displayReassurance'}
            {/block}

            {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">
                         <p class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</p>
                         {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>
    </div>

    {block name='product_accessories'}
      {if $accessories}
        <section class="product-accessories clearfix">
          <p class="h5 text-uppercase">{l s='You might also like' d='Shop.Theme.Catalog'}</p>
          <div class="products" itemscope itemtype="http://schema.org/ItemList">
            {foreach from=$accessories item="product_accessory" key="position"}
              {block name='product_miniature'}
                {include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory position=$position}
              {/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}

 

Edited by jacques.thomas (see edit history)

Share this post


Link to post
Share on other sites

Bonsoir Jaques

Dans product.tpl placez les 2 balises fermantes </div> (lignes 233 et 234 normalement cf screenshot) en commentaires ou avec <!-- --> ou {* *} ou supprimez les...

puis remontez jusqu'au block Reasurance et placez 2 nouvelles balises fermantes </div> juste après celui ci (vous pouvez mettre un commentaire à coté pour vous en rappelé au besoin

...normalement cela devrait suffire à libérer votre élément (nous avons été au plus simple il y à d'autres approches possibles...) .

ensuite c'est au niveau du css que ça se passe...d’ailleurs attention sur ce point il y a une subtilité à ne pas raté malgré le fait que normalement après la modif html vous pourriez avoir la sensation que c'est déja tout bon, je vous invite à bien regarder ce qu'il se passe :)

 

Capture d’écran 2021-01-29 à 21.42.34.png

Capture d’écran 2021-01-29 à 21.54.10.png

Edited by Remy FRK Corp (see edit history)

Share this post


Link to post
Share on other sites

Cela fonctionne, par contre maintenant le bloc englobe l’entièreté de la fiche, donc l’image produite, produit le prix, le bloc de reassurance la description tout…

Il faut maintenant ajouter du code au niveau du fichier costum.css ? Celui ci est actuellement vide si je ne fais pas d’erreur.

SITE.png

Share this post


Link to post
Share on other sites

Réponse: la subtilité c'était Bootstrap....

A ce stade ou vous décidez que bootstrap c'est pas votre "truc" et filez dans le custom.css pour placer :

   .page-product .tabs {
    overflow: hidden;
    width: 100%;
    }

Ou  Bouboot est votre ami et vous retournez dans le fichier.tpl pour replacer l'élément de class: tabs dans le contexte ... 

        <div class="row">
  			<div class="col-lg-12">
                {block name='product_tabs'}
                ...
      		</div>
    	</div>

et non y'avait pas besoin de css... :) 

Edited by Remy FRK Corp (see edit history)

Share this post


Link to post
Share on other sites

  • 1 month later...

Salut Remy,

Je déterre le poste et te remercie pour tes infos mais actuellement je suis surchargé par la partie physique du commerce. Donc pour le site, j’ai tout mis en stand-by et quand j’aurai de nouveau le temps je me replongerais sérieusement dessus.

Bien sûr, je ne manquerai pas de venir poster la suite du résultat sur le forum. Mais dans l’immédiat ça doit attendre :)

 

Encore merci à toi et à bientôt !!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More