Principe et configuration du module Configurable Swatches

  • De le 25 novembre 2014
  • Difficulté : 1/4

Principe et configuration du module Configurable Swatches Depuis les versions CE 1.9.1.0 et EE 1.14.1.0, il est nativement possible d'afficher les images associées aux produits enfants pour un produit configurable. Sur les fiches produits et pages catégories, lors de la sélection de l'attribut (par exemple la couleur), l'image est automatiquement modifiée.

Présentation et démonstration

Fonctionnalité très attendue, Magento propose avec la version CE 1.9.1.0 et la version EE 1.14.1.0 le configurable swatches.

Il est donc maintenant possible (sans développer ou acheter un module supplémentaire) de proposer aux internautes de visualiser l'image représentant exactement les options sélectionnées pour le produit : couleur, forme, taille...

Le swatch peut être utilisé avec n'importe quel attribut. Pour vous faire une petite idée de cette fonctionnalité :

Magentix Demo Store : Configurable Swatches

La navigation par filtre en Ajax n'est pas native, c'est un module faisant l'objet d'un autre article : une navigation par filtre en Ajax

Attention : le module Configurable Swatches n'est proposé que pour le thème Rwd (Responsive). La principale raison est je pense l'utilisation de jQuery pour le swatch, non disponible sur le thème "classique" par défaut.

Prérequis

  • Magento CE >= 1.9.1.0 ou Magento EE >= 1.14.1.0
  • jQuery (version 1.10.2 par défaut avec le thème rwd)
  • Fichiers templates et layout "Configurable Swatches" disponibles dans le thème default du package rwd
  • Fichiers Javascript "Configurable Swatches" disponibles dans le skin default du package rwd

Page catégorie

Sur la page catégorie, 2 façon de visualiser l'image du produit simple.

La première, en sélectionnant l'attribut souhaité juste au dessous de l'image principale (dans cet exemple la couleur) :

Category configurable swatches

L'image par défaut si aucune option n'est sélectionnée est celle du produit configurable (base image).

La deuxième, en filtrant sur l'attribut. Dans ce cas, les images correspondantes sont affichées pour l'ensemble des produits :

Category configurable swatches

Fiche produit

Sur la fiche produit, il suffira de sélectionner l'option souhaitée avant l'ajout au panier :

Product configurable swatches

Activer le configurable swatches

L'activation s'effectue depuis la configuration de la plateforme :

  • System > Configuration > Catalog > Configurable Swatches
Configurable swatches configuration

Activez l'option puis sélectionnez l'attribut sur lequel vous souhaitez utiliser le swatch. Sur la fiche produit les attributs peuvent être cumulés lorsque le configurable est construit selon plusieurs attributs, par exemple la couleur et la taille. Chaque produit simple peut donc avoir une image unique par combinaison.

Associer les images

Méthode 1 :

Ajouter depuis le produit configurable les images portant le même label que l'option de l'attribut.

Configurable swatches configuration

Les labels des options sont administrables depuis le menu Catalog > Attributes > Manage Attributes. Pour l'attribut Color :

Color Attribute

Méthode 2 :

Ajouter pour chacun des produits simples l'image correspondante, définie en Base Image.

Configurable swatches configuration

Pour afficher l'image dans la grille des produits du backoffice, consultez l'article ajouter des colonnes à la grille produits sans surcharge

Cette méthode permet d'utiliser des combinaisons d'options d'attributs pour les visuels. Par exemple une image différente pour Rouge - S et Rouge - M.

Notez qu'à partir du moment où un seul des produits simple contient l'image de la couleur concernée, le bon visuel est correctement récupéré. Cela est valable uniquement si un seul attribut est utilisé pour le configurable swatches (ici la couleur). Par exemple :

  • T-shirt bleu S : image-t-shirt-bleu.jpg
  • T-shirt bleu M : aucune
  • T-shirt bleu L : aucune
Product configurable swatches tip

Si vous utilisez cette méthode, adoptez une règle stricte, par exemple "Associer l'image uniquement à la plus petite taille disponible".

Si une image est associée au produit configurable avec le label correspond (méthode 1), celle-ci a priorité.

Utiliser un visuel à la place du label

Les étiquettes peuvent être remplacées par un visuel. Au lieu d'afficher le label de l'option de l'attribut, il est possible d'utiliser une image.

Il suffit pour cela de placer les images dans le dossier media/wysiwyg/swatches/, et de nommer le fichier png de la même manière que l'option de l'attribut. Par exemple :

  • media/wysiwyg/swatches/
  • pink.png
  • red.png
  • blue.png

Nous obtenons alors :

Color Swatches Images

Si le label de l'option est renseigné pour le store local, celui-ci a priorité. A défaut ce sera la valeur "admin" qui sera utilisée. Tous les caractère spéciaux autres que a-z et 0-9 sont à remplacer par des tirets dans le nom de l'image.

Pour un produit donné, il est possible d'utiliser un visuel spécifique, comme une texture. Il faut pour cela ajouter le visuel directement depuis la galerie d'image du produit configurable, en suffixant le label par -swatch. Soit {option}-swatch.

Color Swatches Specific Image

Principe

Un objet Json est créé contenant l'ensemble des images susceptibles d'être affichées. Sur une fiche produit cela ne pose pas forcement de problème, mais prenez garde sur vos pages catégories si elles contiennent de nombreux produits et de nombreuses combinaisons. Bien qu'un seul attribut soit proposé sur les pages catégories, le Json est construit de la même façon que pour les fiches produits.

Si vous souhaitez utiliser un visuel différent par combinaison (méthode 2), pour 20 produits avec 4 couleurs et 5 tailles :

  • 4 x 5 = 20
  • 20 x 20 = 400

Le Json contiendra les combinaisons pour générer 400 images, soit pas mal de ko en plus dans votre page. Cela ressemblera à (pour 1 produit) :

ConfigurableMediaImages

<script type="text/javascript">
$j(document).on('product-media-loaded', function() {
ConfigurableMediaImages.init('small_image');
ConfigurableMediaImages.setImageFallback(1,$j.parseJSON('{"option_labels":{
"yellow":{"configurable_product":{"small_image":null,"base_image":null},"products":["2","6","10"]},
"red":{"configurable_product":{"small_image":null,"base_image":null},"products":["3","7","11"]},
"green":{"configurable_product":{"small_image":null,"base_image":null},"products":["4","8","12"]},
"blue":{"configurable_product":{"small_image":null,"base_image":null},"products":["5","9","13"]}},"small_image":{"2":"http:\/\/domain.com\/media\/catalog\/product\/cache\/1\/small_image\/210x\/602f0fa2c1f0d1ba5e241f914e856ff9\/i\/m\/imperial-women-yellow_2.jpg",
"3":"http:\/\/domain.com\/media\/catalog\/product\/cache\/1\/small_image\/210x\/602f0fa2c1f0d1ba5e241f914e856ff9\/i\/m\/imperial-women-red_2.jpg",
"4":"http:\/\/domain.com\/media\/catalog\/product\/cache\/1\/small_image\/210x\/602f0fa2c1f0d1ba5e241f914e856ff9\/i\/m\/imperial-women-green_2.jpg",
"5":"http:\/\/domain.com\/media\/catalog\/product\/cache\/1\/small_image\/210x\/602f0fa2c1f0d1ba5e241f914e856ff9\/i\/m\/imperial-women-blue_2.jpg",
"6":"http:\/\/domain.com\/media\/catalog\/product\/cache\/1\/small_image\/210x\/602f0fa2c1f0d1ba5e241f914e856ff9\/i\/m\/imperial-women-yellow_1.jpg",
"7":"http:\/\/domain.com\/media\/catalog\/product\/cache\/1\/small_image\/210x\/602f0fa2c1f0d1ba5e241f914e856ff9\/i\/m\/imperial-women-red_1.jpg",
"8":"http:\/\/domain.com\/media\/catalog\/product\/cache\/1\/small_image\/210x\/602f0fa2c1f0d1ba5e241f914e856ff9\/i\/m\/imperial-women-green_1.jpg",
"9":"http:\/\/domain.com\/media\/catalog\/product\/cache\/1\/small_image\/210x\/602f0fa2c1f0d1ba5e241f914e856ff9\/i\/m\/imperial-women-blue_1.jpg",
"10":"http:\/\/domain.com\/media\/catalog\/product\/cache\/1\/small_image\/210x\/602f0fa2c1f0d1ba5e241f914e856ff9\/i\/m\/imperial-women-yellow.jpg",
"11":"http:\/\/domain.com\/media\/catalog\/product\/cache\/1\/small_image\/210x\/602f0fa2c1f0d1ba5e241f914e856ff9\/i\/m\/imperial-women-red.jpg",
"12":"http:\/\/domain.com\/media\/catalog\/product\/cache\/1\/small_image\/210x\/602f0fa2c1f0d1ba5e241f914e856ff9\/i\/m\/imperial-women-green.jpg",
"13":"http:\/\/domain.com\/media\/catalog\/product\/cache\/1\/small_image\/210x\/602f0fa2c1f0d1ba5e241f914e856ff9\/i\/m\/imperial-women-blue.jpg",
"1":"http:\/\/domain.com\/media\/catalog\/product\/cache\/1\/small_image\/210x\/602f0fa2c1f0d1ba5e241f914e856ff9\/i\/m\/imperial-women-yellow_3.jpg"},
"base_image":[]}'));
</script>

Documentation

La documentation officielle est disponible sur la base de connaissance :

Configurable Swatches Guide for Magento EE 1.14.1 and Magento CE 1.9.1

commentaires

Commentez cet article : Principe et configuration du module Configurable Swatches