jacques.thomas Posted January 26, 2021 Share Posted January 26, 2021 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 ? Link to comment Share on other sites More sharing options...
Remy FRK Corp Posted January 26, 2021 Share Posted January 26, 2021 (edited) 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 March 14, 2021 by Remy FRK Corp (see edit history) 1 Link to comment Share on other sites More sharing options...
jacques.thomas Posted January 27, 2021 Author Share Posted January 27, 2021 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 ? 1 Link to comment Share on other sites More sharing options...
Remy FRK Corp Posted January 27, 2021 Share Posted January 27, 2021 (edited) En revanche attention car normalement 1 sujet = 1 topic (c'est la règle du forum) nous risquons de nous éloigner du sujet. Edited February 3, 2021 by Remy FRK Corp (see edit history) Link to comment Share on other sites More sharing options...
jacques.thomas Posted January 29, 2021 Author Share Posted January 29, 2021 (edited) 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"></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}" 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 January 29, 2021 by jacques.thomas (see edit history) Link to comment Share on other sites More sharing options...
Remy FRK Corp Posted January 29, 2021 Share Posted January 29, 2021 (edited) 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 Edited February 1, 2021 by Remy FRK Corp (see edit history) Link to comment Share on other sites More sharing options...
jacques.thomas Posted January 30, 2021 Author Share Posted January 30, 2021 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. Link to comment Share on other sites More sharing options...
Remy FRK Corp Posted February 1, 2021 Share Posted February 1, 2021 (edited) 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 March 14, 2021 by Remy FRK Corp (see edit history) Link to comment Share on other sites More sharing options...
jacques.thomas Posted March 13, 2021 Author Share Posted March 13, 2021 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 !! Link to comment Share on other sites More sharing options...
PatriceJV Posted December 31, 2023 Share Posted December 31, 2023 (edited) En fait il faut lire pour PS1.7.8.9 Dans product.tpl placez les 3 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 3 nouvelles balises fermantes </div> juste après celui ci (vous pouvez mettre un commentaire à coté pour vous en rappelé au besoin 3 balises DIV et pas 2 à ajouter/supprimer sans avoir besoin de modifier le css Edited December 31, 2023 by PatriceJV (see edit history) Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now