Jump to content
snipgot

Nombre caractere titre version mobile

Recommended Posts

Bonsoir,

Je cherche à réduire le nombre de caractères du titre sur les miniatures produits uniquement sur V mobile.

Dans miniatures.products.tpl il y a :           <span class="h3 product-title block" itemprop="name"><a href="{$product.url}">{$product.name|truncate:30:'...'}</a></span>

Comment faire pou mettre par exemple 20 sur mobile uniquement ?

Share this post


Link to post
Share on other sites

Bonjour,

Personnellement je ne connais pas de moyen de différencier les deux donc je prendrais le problème plus haut : je ferais un span pour la version desktop (avec le truncate à 30 donc) et un span pour le mobile (avec 20), le tout avec des média queries dans le css pour afficher et cacher les versions en fonction du device utilisé.

Je ne sais pas si je suis très clair ;)

 

A.

Share this post


Link to post
Share on other sites

Bonjour, merci pour votre réponse.

Donc il ne faut pas changer le code mais juste la CSS. Je m'en doutais mais n'étant pas développeur si une ligne de code pouvait régler le problème...

Pourriez-vous m'aider pour faire cette modification ?

 

  • Like 1

Share this post


Link to post
Share on other sites
il y a une heure, snipgot a dit :

Bonjour, problème toujours d'actualité.

 

La réponse donnée par jlm est aussi toujours d'actualité ;)

Share this post


Link to post
Share on other sites

Bonjour,

voici le complément de la solution incomplète proposée ci-dessus

 

<span class="h3 product-title block" itemprop="name">
	<a href="{$product.url}">
	<span class="hidden-xs hidden-sm">{$product.name|truncate:30:'...'}</span>
	<span class="hidden-md hidden-lg">{$product.name|truncate:20:'...'}</span>
	</a>
</span> 

Explication :

le SPAN avec les classes suivantes sera masqué sur que les petits écrans : hidden-xs hidden-sm

le SPAN avec les classes suivantes sera masqué que sur les plus gros érans : hidden-md hidden-lg


Vous pouvez déplacer le hidden-sm dans le 2emes span si besoin.

 

En espérant avoir pu vous aider

 

Share this post


Link to post
Share on other sites

Bonsoir, merci pour votre réponse.

Le code actuel : 

      <div class="product-description">
        {block name='product_name'}
          <span class="h3 product-title block" itemprop="name"><a href="{$product.url}">
		  <span class="hidden-xs hidden-sm">{$product.name|truncate:30:'...'}</span>
		  <span class="hidden-md hidden-lg">{$product.name|truncate:20:'...'}</span>
		  </a></span>
        {/block}

J'ai un double affichage des titres produits.

Share this post


Link to post
Share on other sites

Essayez avec ce code css,

à mettre dans product_list.css (ou ailleurs, peu importe) :

 

@media (max-width: 767px) {	
	.product-description .hidden-xs  	{display: block; }
	.product-description .hidden-sm 	{display: block; }
	.product-description .hidden-md 	{display: none; }
	.product-description .hidden-lg 	{display: none; }
}
@media (min-width: 768px) {
	.product-description .hidden-xs  	{display: none; }
	.product-description .hidden-sm 	{display: none; }
	.product-description .hidden-md 	{display: block; }
	.product-description .hidden-lg 	{display: block; }
}

 

Share this post


Link to post
Share on other sites

Merci Christophe Boix d'avoir apporté un complément à la réponse, je n'ai pas pu repasser sur le forum plus tôt :)

N'hésitez pas à nous dire si votre souci est résolu,

 

A.

Edited by jlm-diffusion (see edit history)
  • Thanks 1

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

×
×
  • Create New...

Important Information

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