Nombre caractere titre version mobile

[snipgot]

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 ?

[Universal Hobbies]

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.

[snipgot]

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 ?

 

[snipgot]

Bonjour, problème toujours d'actualité.

[Johann Corbel]

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é

[snipgot]

Bonjour,

Comme indiqué plus haut je ne l'ai pas comprise.

[Johann Corbel]

alors il faut poster une demande de prestations dans la rubrique "appel d'offre"

[Christophe Boix]

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

 

[snipgot]

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.

[Christophe Boix]

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; }
}

 

[snipgot]

Merci beaucoup

[Universal Hobbies]

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 January 23, 2018 by jlm-diffusion (see edit history)