Afficher tout le nom du produit div.product.description

prestaprojet · September 15, 2021

Bonjour,

J'utilise Prestashop 1.7.7.3

Les noms de mes articles sont parfois long et ne s'affichent pas entièrement dans le module produit phare ou autre module de prestashop natifs qui ont pour but d'afficher les produits.

Sauriez-vous svp comment je peux faire pour ne pas avoir d'afficher uniquement par exemple sur

Quote

#products .product-title, .featured-products .product-title, .product-accessories .product-title, .product-miniature .product-title

"Nom produits est le ..."

c'est à dire 20 caractères espaces compris + 3 petits points.

J'aimerais pouvoir réaliser un retour à ligne par exemple qui permettrait d'afficher tout le nom de mon produit et ne pas avoir les 3 petits points.

J'ai essayé la commande css white-space sur #products .product-title, ou sur a, mais ça n'a pas fonctionné.

Qu'en dites-vous svp ou que proposeriez-vous ?

Merci d'avance pour votre aide

:-)

Mediacom87 · September 15, 2021

Bonjour,

peut être que cet article répondra à votre besoin https://www.mediacom87.fr/afficher-le-titre-complet-des-produits/

prestaprojet · September 15, 2021

Bonjour Mediacom87,

Merci pour ce retour et cette réactivité !

En effet, je pense que ça peut tout à fait m'aider.

Cependant, dans le fichier que tu indiques :

Quote

themes > votre_theme > templates > catalog > _partials > product.tpl

à cette adresse, j'ai un fichier products.tpl

dont le contenu est ci-dessous ne retouve pas la partie que tu indiques à modifier

Quote

{**
* 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 <[email protected]>
* @copyright Since 2007 PrestaShop SA and Contributors
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
*}
<div id="js-product-list">
{include file="catalog/_partials/productlist.tpl" products=$listing.products cssClass="row"}

{block name='pagination'}
{include file='_partials/pagination.tpl' pagination=$listing.pagination}
{/block}

<div class="hidden-md-up text-xs-right up">
<a href="#header" class="btn btn-secondary">
{l s='Back to top' d='Shop.Theme.Actions'}
<i class="material-icons"></i>
</a>
</div>
</div>

Sinon j'ai aussi à cette adresse

Quote

themes > votre_theme > templates > catalog > product.tpl

un autre fichier product.tpl

dont le contenu est le suivant :

Quote

{**
* 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 [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 http://www.prestashop.com for more information.
*
* @author PrestaShop SA <[email protected]>
* @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>

   {* HOOK DE REASSURANCE DEPLACE EN DESSOUS DE DESCRIPTION ET DANS UNE NOUVELLE DIV*}
   <div id="REASSURANCE_tabs_block" class="row">
<div class="col-xs-12">
   {block name='hook_display_reassurance'}
{hook h='displayReassurance'}
{/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'}

{/block}
</footer>
{/block}
</section>

{/block}

Merci d'avance pour votre aide

:-)

Mediacom87 · September 15, 2021

après, je donne le code pour les template de base si vous utilisez un template personnaliser il faut bien entendu adapter ce qui est expliqué.

prestaprojet · September 15, 2021

En effet j'ai personnalisé certaines parties grâce à des tuto.

Et au juste j'ai comparé avec les fichiers du thème Classique et non de mon Child mais je ne trouve pas non plus les parties de codes dont tu fais référence.

Que faire ou quelle orientation envisager dans ce cas ?

Merci d'avance pour votre aide

🙂

Mediacom87 · September 15, 2021

pas la moindre idée puisque vous ne communiquez aucune information.

Vous ne donnez pas de lien, pas de version, pas de modifications effectuées donc ... je ne sais pas seul vous pouvez répondre à votre problématique puisque tout est encore dans votre tête et nul part ailleurs.

prestaprojet · September 16, 2021

Bonjour Mediacom87,

Merci pour ce retour

Concernant la version, je l'indique dans mon premier message : " J'utilise Prestashop 1.7.7.3 "

A propos des modifications réalisées, j'ai expliqué que c'est à partir de tuto ceci dit je complète qu'il s'agit que d'ajout de partie de code et non de suppression ou modification du code existant et natif. Aussi cette modification intervient dans le fichier

themes > votre_theme > templates > catalog > product.tpl

qui n'est pas celui que vous préconisez pour la modif.

Aussi est entre commentaire dans ce fichier {* HOOK DE REASSURANCE DEPLACE EN DESSOUS DE DESCRIPTION ET DANS UNE NOUVELLE DIV*}. correspondant à la modif réalisée.

Pour finir, j'ai aussi placé le code des fichiers suivant :

themes > votre_theme > templates > catalog > _partials > product.tpl => celui que vous préconisé de modifier.

et

themes > votre_theme > templates > catalog > product.tpl => pour info

Donc tous les éléments que vous m'indiquez étaient bien édité dans mon post.

Merci d'avance pour votre aide

:-)

Mediacom87 · September 16, 2021

Vous avez raison, je n'avais pas indiqué le bon chemin pour le fichier

ce n'est pas

themes > votre_theme > templates >  catalog > _partials > product.tpl

mais

themes > votre_theme > templates >  catalog > _partials > miniatures > product.tpl

Tutoriel corrigé

prestaprojet · September 16, 2021

Exactement

C'est ce dont je me suis rendu compte après t'avoir écris en cherchant plus en détail où pouvait se trouver ce fichier.

Car je sais que tu es souvent de bon conseil mais des fois les erreurs sont partout d'où l'intérêt de mieux inspecter.

Ce qui m'a mis la puce à l'oreille aussi est que sur le chemin que tu indiques initialement ( qui n'est pas bon ) le fichier product est avec un s.

Donc je viens de réaliser les modif dans le bon fichier au bon chemin et sur le bon fichier et ça fonctionne.

Sauf que, je pense qu'il est préférable d'ajouter peut-être un petit conseil à savoir de déplacer le bloc dans le cas où certains comme moi ont ajouté un bouton ajouté + une case pour incrémenter la quantité. Et donc de le déplacer le block nom de produit après le bouton ajouté ainsi l'alignement reste correcte pour une meilleur lecture du site.

A ce sujet, je rencontre une autre problématique donc je vais poster un nouveau sujet.

En tout cas merci

:-)

Sign In

Afficher tout le nom du produit div.product.description

Recommended Posts

prestaprojet

Link to comment

Share on other sites

Mediacom87

Link to comment

Share on other sites

prestaprojet

Link to comment

Share on other sites

Mediacom87

Link to comment

Share on other sites

prestaprojet

Link to comment

Share on other sites

Mediacom87

Link to comment

Share on other sites

prestaprojet

Link to comment

Share on other sites

Mediacom87

Link to comment

Share on other sites

prestaprojet

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com