Accueil > 3 Problèmes > Problème d’affichage des attributs de Prestashop dans Internet Explorer

Problème d’affichage des attributs de Prestashop dans Internet Explorer

Aujourd’hui je suis confronté à un problème d’affichage des attributs (ou déclinaison) dans ma boutique Prestashop.

Exposé du problème d’affichage des attributs :

Voici ce que j’ai et qui va bien avec Firefox :

Affichage attributs Prestashop Firefox

Voici l’affichage des mêmes données dans Internet Explorer 8 :

Prestashop IE

Comme on peut voir dans cet exemple, IE8 et Firefox ne réagissent pas du tout de la même façon. Dans les 2 cas, j’utilise le thème par défaut livré avec Prestashop.

Cela doit pouvoir se régler avec des CSS mais je ne suis pas un as du tout dans ce domaine.

Idées pour le CSS :

  • Élargir la taille de la liste déroulante dans IE.
  • Déplacer un peu vers la gauche  l’ensemble article et quantité de manière à laisser plus de place (en largeur) à la liste déroulante.
  • Virer le mot « article » pour gagner de la place.

Sources de cette partie :

Code Html :

<!-- attributes -->
<div id="attributes">
<p>
<label for="group_1">Article :</label>
<select name="group_1" id="group_1" onchange="javascript:findCombination();">
<option value="22">8mm wei&szlig; / blau pro Meter</option>
<option value="47">10mm wei&szlig; / blau pro Meter</option>
<option value="2">10mm wei&szlig; / rot pro Meter</option>
<option value="28">10mm schwarz pro Meter</option>
<option value="9">12mm wei&szlig; / blau pro Meter</option>
<option value="3">12mm wei&szlig; / rot pro Meter</option>
</select>
</p>
</div>
<!-- quantity wanted -->
<p id="quantity_wanted_p">
<label>Menge:</label>
<input type="text" name="qty" id="quantity_wanted" class="text" value="1" size="2" maxlength="3" />
</p>

Solution trouvée :

Virer l’étiquette de l’attribut

Dans le fichier du thème product.tpl je vire la ligne #241 :

<label for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'} :</label>

Utiliser 99% de la largeur pour #primary_block form#buy_block select

Dans global.css

Remplacer les lignes initiales (à partir de la ligne 1930)

#primary_block form#buy_block label,#primary_block form#buy_block select{
display:block;
width:47%;
float:left;
}

Par

#primary_block form#buy_block label{
display:block;
width:47%;
float:left;
}
#primary_block form#buy_block select{
display:block;
width:99%;
float:left;
}

Résultat sur l’affichage d’une déclinaison :

  1. décembre 4, 2009 à 11:50

    Je te conseille de mettre tes attributs sur 2 lignes et d’augmenter la taille de la liste déroulante.

  2. avril 1, 2011 à 11:11

    simplifie toi la tache, avec ce module.
    http://xn--crating-cya.com/product.php?id_product=56

  1. décembre 11, 2009 à 2:45
  2. mai 26, 2010 à 1:01

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :