Comment utiliser les échantillons configurables de Magento 1.9.1.0 dans le thème du package par défaut (ou un thème personnalisé)?

MISE À JOUR: Ma réponse prend désormais en charge le changement automatisé de l'image de base du produit après le swatch. Vous pouvez également trouver un tutoriel plus détaillé sur la façon de procéder, y compris plus d'images ici .

Magento CE 1.9.1.0 est livré avec une nouvelle fonctionnalité très intéressante: des échantillons configurables. Malheureusement, cela n'est disponible que pour le package RWD, fourni avec l'installation par défaut de Magento. Il s'agit d'une question à réponse automatique sur la façon de rendre les échantillons configurables Magento disponibles pour le package par défaut. Pour tous ceux qui souhaitent intégrer les échantillons configurables dans un thème personnalisé, ces informations peuvent également être utiles.

Remarque 1: Il s'agit d'un guide d'introduction sur la façon de rendre les échantillons configurables disponibles pour le package par défaut de Magento. Cela pourrait (mais peut ne pas fonctionner) pour chaque thème personnalisé. Sauvegardez toujours vos fichiers d'origine (et votre base de données) avant d'apporter des modifications.

Remarque 2: les échantillons fonctionnent (capture d'écran ci-dessous), mais je n'ai pas encore obtenu l'image du produit à changer automatiquement avec les échantillons. J'essaierai de voir cela quand j'aurai du temps.

N'hésitez pas à contribuer en commentant et en faisant des suggestions!

1. Copiez le dossier

   app/design/frontend/RWD/default/template/configurableswatches/

   et son contenu

   app/design/frontend/DEFAULT/default/template/

   (ou votre dossier de modèle de package)

2. Copiez le fichier

   app/design/frontend/RWD/default/template/catalog/product/view/type/options/configurable.phtml

   à

   app/design/frontend/DEFAULT/default/template/catalog/product/view/type/options/

   (ou votre dossier de modèle de package)

3. Copiez le fichier

   app/design/frontend/RWD/default/template/catalog/product/view/media.phtml

   à

   app/design/frontend/DEFAULT/default/template/catalog/product/view/

   (ou votre dossier de modèle de package)

4. Copiez les dossiers

   skin/frontend/RWD/default/js/configurableswatches/
   skin/frontend/RWD/default/js/lib/
   

   et leur contenu

   skin/frontend/DEFAULT/default/js/

   (ou votre dossier d'habillage de package)

5. Copiez les fichiers

   skin/frontend/RWD/default/js/app.js
   skin/frontend/RWD/default/js/minicart.js
   skin/frontend/RWD/default/js/slideshow.js
   

   à

   skin/frontend/DEFAULT/default/js/

   (ou votre dossier d'habillage de package)

6. Copiez le fichier

   app/design/frontend/RWD/default/layout/configurableswatches.xml

   à

   app/design/frontend/DEFAULT/default/layout/

   (ou votre dossier de présentation de package)

7. Créer le fichier

   app/design/frontend/DEFAULT/default/layout/local.xml

Si votre dossier de présentation de package contient déjà un local.xmlfichier, ne le remplacez pas. Jetez un œil aux modifications à l'étape suivante et copiez-les dans votre version du local.xmlfichier.

8. Ouvrez local.xmlet ajoutez le code suivant:

   <?xml version="1.0"?>
   <layout>
   
       <default>
   
           <reference name="head">
   
                   <action method="addJs"><script>lib/jquery/jquery-1.10.2.min.js</script></action>
                   <action method="addJs"><script>lib/jquery/noconflict.js</script></action>
   
                   <action method="addItem"><type>skin_js</type><name>js/lib/modernizr.custom.min.js</name></action>
                   <action method="addItem"><type>skin_js</type><name>js/lib/selectivizr.js</name></action>
                   <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.js</name></action>
                   <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.addListener.js</name></action>
                   <action method="addItem"><type>skin_js</type><name>js/lib/enquire.js</name></action>
                   <action method="addItem"><type>skin_js</type><name>js/app.js</name></action>
                   <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.min.js</name></action>
                   <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.swipe.min.js</name></action>
                   <action method="addItem"><type>skin_js</type><name>js/slideshow.js</name></action>
                   <action method="addItem"><type>skin_js</type><name>js/lib/imagesloaded.js</name></action>
           <action method="addItem"><type>skin_js</type><name>js/minicart.js</name></action>
   
           </reference>
   
       </default>
   
       <catalog_product_view>
   
           <reference name="head">
   
               <action method="addItem"><type>skin_js</type><script>js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js</script></action>
   
           </reference>
   
           <reference name="product.info.media">
   
               <block type="core/text_list" name="product.info.media.after" as="after" />
   
           </reference>
   
       </catalog_product_view>
   
       <PRODUCT_TYPE_configurable>
   
           <reference name="product.info.options.configurable">
   
               <block type="core/text_list" name="product.info.options.configurable.renderers" as="attr_renderers">
                           <block type="configurableswatches/catalog_product_view_type_configurable_swatches" template="configurableswatches/catalog/product/view/type/options/configurable/swatches.phtml" />
               </block>
               <block type="core/text_list" name="product.info.options.configurable.after" as="after">
               <block type="core/template" template="configurableswatches/catalog/product/view/type/configurable/swatch-js.phtml" />
               </block>
   
           </reference>
   
       </PRODUCT_TYPE_configurable>
   
   </layout>
   

9. Ajoutez le CSS suivant à votre fichier styles.css :

   /* ============================================ *
    * Configurable Swatches
    * ============================================ */
   /* Clears */
   .clearfix:after,
   .configurable-swatch-list:after,
   .product-view .product-options .swatch-attr:after {
     content: '';
     display: table;
     clear: both;
   }
   
   /* General Swatch Styling */
   .swatch-link,
   .swatch-label {
     display: block;
     border-radius: 3px;
     font-size: 14px;
     text-align: center;
     color: #636363;
     text-decoration: none;
     box-sizing: content-box;
   }
   
   .swatch-link {
     border: 1px solid #cccccc;
     margin: 0 0 3px;
   }
   .swatch-link img {
     border-radius: 2px;
   }
   .swatch-link:hover {
     cursor: pointer;
     text-decoration: none;
   }
   .swatch-link .x {
     display: none;
     text-indent: -999em;
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     background: url(../images/bg_x.png) center no-repeat transparent;
     z-index: 10;
   }
   .swatch-link.has-image .swatch-label {
     position: relative;
   }
   .swatch-link.has-image img {
     position: absolute;
     top: 0;
     left: 0;
   }
   
   .swatch-label {
     border: 1px solid #fff;
     margin: 0;
     white-space: nowrap;
     background: #f4f4f4;
   }
   
   .configurable-swatch-list {
     margin-left: -3px;
     zoom: 1;
     clear: both;
     -webkit-transform: translateZ(0px);
   }
   .configurable-swatch-list li {
     float: left;
     zoom: 1;
     margin: 0 0 0 3px;
   }
   .products-grid .configurable-swatch-list li {
     display: inline-block;
     float: none;
     margin: 0;
     vertical-align: top;
   }
   .configurable-swatch-list .not-available .x {
     display: block;
   }
   .configurable-swatch-list .not-available .swatch-link {
     border-color: #ededed;
     position: relative;
   }
   .configurable-swatch-list .not-available .swatch-link.has-image img {
     opacity: 0.4;
     filter: alpha(opacity=40);
   }
   .configurable-swatch-list .not-available .swatch-label {
     color: #aaa;
     background: #fff;
   }
   .configurable-swatch-list .wide-swatch .swatch-label {
     padding: 0 6px;
   }
   .configurable-swatch-list .not-available a:focus {
     outline: 0;
   }
   
   #narrow-by-list dd .configurable-swatch-list li {
     margin: 0 0 0 3px;
     width: 47%;
   }
   #narrow-by-list dd .swatch-link {
     border: none;
     line-height: 25px;
     margin-right: 2px;
     text-align: left;
   }
   #narrow-by-list dd .swatch-link.has-image {
     line-height: inherit;
   }
   #narrow-by-list dd .swatch-link:hover .swatch-label {
     border-color: #3399cc;
   }
   #narrow-by-list dd .swatch-label {
     background: #f4f4f4;
     border: 1px solid #cccccc;
     border-radius: 3px;
     display: block;
     float: left;
     line-height: 1.5em;
     margin: 0 5px 0 0;
     padding: 1px 5px;
     white-space: nowrap;
   }
   #narrow-by-list dd .swatch-label img {
     border: 1px solid #fff;
     border-radius: 3px;
     box-sizing: content-box;
   }
   #narrow-by-list dd .has-image .swatch-label {
     padding: 0;
   }
   
   @media only screen and (max-width: 770px) {
     #narrow-by-list dd .configurable-swatch-list li:nth-child(odd) {
       clear: left;
     }
   }
   .currently .swatch-current {
     position: relative;
   }
   .currently .swatch-current .btn-remove {
     margin-top: -10px;
     position: absolute;
     right: 0;
     top: 50%;
   }
   .currently .swatch-current span {
     display: block;
     float: left;
   }
   .currently .swatch-link {
     display: inline-block;
     margin: 0 0 0 3px;
   }
   .currently .swatch-link:hover {
     border-color: #cccccc;
     cursor: default;
   }
   
   /* Other Swatch States */
   .configurable-swatch-list .hover .swatch-link,
   .configurable-swatch-list .selected .swatch-link,
   .swatch-link:hover {
     border-color: #3399cc;
   }
   
   .configurable-swatch-box {
     background: none !important;
   }
   .configurable-swatch-box select.swatch-select {
     display: none;
   }
   .configurable-swatch-box .validation-advice {
     margin: 0 0 5px;
     background: #df280a;
     padding: 2px 5px !important;
     font-weight: bold;
     color: #fff !important;
     float: left;
     display: block;
     border-radius: 3px;
   }
   .product-view .product-img-box .product-image img {
       max-width: 100%;
       max-height: 750px;
       margin: 0px auto;
   }
   .product-view .product-img-box .product-image-zoom {
       z-index: 0;
   }
   .product-view .product-image-thumbs img {
       max-width: 100%;
       max-height: 100%;
   }
   

10. Copiez le fichier

    skin/frontend/RWD/default/images/bg_x.png

    à

    skin/frontend/DEFAULT/default/images/

votre solution est excellente mais ne montre pas l'échantillon de couleur dans la liste des catégories ou la grille. Ici j'ajoute la solution pour la montrer, testée sur magento 1.9.2.4.

Dans: app / design / frontend / CUSTOM-THEME / template / catalogue / product add Ligne suivie dans list.phtml

1 - d'abord pour afficher dans la vue de liste, vérifiez si cela, sinon, mettez à jour ou changez (vers la ligne 39):

<?php $_imgSize = 300; ?>
            <img id="product-collection-image-<?php echo $_product->getId(); ?>"
                 src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize($_imgSize); ?>"
                 alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
        </a>

Vous pouvez également utiliser ceci:

            <img id="product-collection-image-<?php echo $_product->getId(); ?>"
          src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(230,279); ?>" class="small-image" 
          alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />             

        </a>

ajuster redimensionner l'image.

2 - après "getRatingSummary" = php end if =, autour de la ligne 53, ajoutez ceci:

                        <?php
                    // Provides extra blocks on which to hang some features for products in the list
                    // Features providing UI elements targeting this block will display directly below the product name
                    if ($this->getChild('name.after')) {
                        $_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
                        foreach ($_nameAfterChildren as $_nameAfterChildName) {
                            $_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
                            $_nameAfterChild->setProduct($_product);
                            echo $_nameAfterChild->toHtml();
                        }
                    }
                    ?>

3 - effectuez le même changement en vue de contour autour des lignes 120 et 152.

4 - à la fin du fichier ajoutez ceci:

 <?php
// Provides a block where additional page components may be attached, primarily good for in-page JavaScript
if ($this->getChild('after')) {
    $_afterChildren = $this->getChild('after')->getSortedChildren();
    foreach ($_afterChildren as $_afterChildName) {
        $_afterChild = $this->getChild('after')->getChild($_afterChildName);
        //set product collection on after blocks
        $_afterChild->setProductCollection($_productCollection);
        echo $_afterChild->toHtml();
    }
}
?>

C'était très utile! J'ai quelques détails supplémentaires sur lesquels j'ai pu travailler pour que la commutation d'image fonctionne.

1. Copiez le fichier

   app/design/frontend/RWD/default/template/catalog/product/view/media.phtml

   à

   app/design/frontend/DEFAULT/default/template/catalog/product/view/

   ou votre thème personnalisé

2. Copiez la liste de fichiers suivante:

   app/skin/frontend/RWD/default/js/app.js
   app/skin/frontend/RWD/default/js/slideshow.js
   app/skin/frontend/RWD/default/js/lib/* (all files and the elevatezoom folder)
   

   à

   app/skin/frontend/DEFAULT/default/js

   ou votre thème personnalisé

3. Pour inclure ces nouveaux scripts, modifiez app / design / frontend / DEFAULT / default / layout / page.xml (effectuez d'abord une sauvegarde de ce fichier et assurez-vous de fusionner les modifications si vous effectuez des mises à jour car le thème par défaut serait écrasé)

   Ajouter après la ligne 38:

   <action method="addJs"><script>lib/jquery/jquery-1.10.2.min.js</script></action>
   <action method="addJs"><script>lib/jquery/noconflict.js</script></action>
   

   Ajouter après la ligne 50 (ligne 52 si vous avez déjà ajouté les deux lignes ci-dessus):

       <action method="addItem"><type>skin_js</type><name>js/lib/modernizr.custom.min.js</name></action>
       <action method="addItem"><type>skin_js</type><name>js/lib/selectivizr.js</name></action>
       <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.js</name></action>
       <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.addListener.js</name></action>
       <action method="addItem"><type>skin_js</type><name>js/lib/enquire.js</name></action>
       <action method="addItem"><type>skin_js</type><name>js/app.js</name></action>
       <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.min.js</name></action>
       <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.swipe.min.js</name></action>
       <action method="addItem"><type>skin_js</type><name>js/slideshow.js</name></action>
       <action method="addItem"><type>skin_js</type><name>js/lib/imagesloaded.js</name></action>
   

4. Supprimez la section / * Product Images * / de votre fichier styles.css (autour des lignes 783-803) et collez le CSS suivant dans le fichier RWD styles.css:

   * Product Images */
   .product-img-box {
     width: 50%;
     float: left;
   }
   .product-img-box .product-name h1 {
     border: 0;
   }
   .product-img-box .product-image {
     margin-bottom: 10px;
   }
   .product-img-box .product-image img {
     max-width: 100%;
     max-height: 750px;
     margin: 0px auto;
   }
   
   @media only screen and (max-width: 479px) {
     .product-img-box .product-image img {
       max-height: 450px;
     }
   }
   .product-image-gallery {
     position: relative;
   }
   .product-image-gallery .gallery-image {
     display: none;
   }
   .product-image-gallery .gallery-image.visible {
     display: block;
   }
   .product-image-gallery .gallery-image.visible.hidden {
     visibility: hidden;
   }
   .product-image-gallery:before, .product-image-gallery:after {
     content: '';
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
     display: none;
   }
   .product-image-gallery:before {
     background-color: white;
     opacity: 0.8;
     z-index: 2;
   }
   .product-image-gallery:after {
     background-image: url("../images/opc-ajax-loader.gif");
     background-repeat: no-repeat;
     background-position: center;
     z-index: 3;
   }
   .product-image-gallery.loading {
     position: relative;
   }
   .product-image-gallery.loading:before, .product-image-gallery.loading:after {
     display: block;
   }
   
   .product-image-thumbs li {
     display: inline-block;
   }
   .product-image-thumbs li:first-child {
     margin-left: -1px;
   }
   .product-image-thumbs a {
     display: inline-block;
     border: 1px solid transparent;
   }
   
   .no-touch .product-image-thumbs a:hover {
     border-color: #c7c7c7;
   }
   

Enfin, mais non des moindres, certaines optimisations de l'elevateZoom grâce à Google et en trouvant le billet suivant sur BelVG Blog par Mishel Soiko , j'ai pu modifier et profiter de plus de paramètres pour l'elevateZoom tels que le zoom interne ou le décalage de la fenêtre de zoom , etc. En outre, je voulais que l'image ait une boîte de dialogue contextuelle lorsqu'elle est cliquée, que j'ai activée avec l'aide du blog ci-dessus dans les commentaires.

1. Ouvrez le fichier app.js que vous avez copié plus tôt dans votre thème

   Au-dessus de la ligne 1153 ( var ProductMediaManager = {), collez-le (copié à partir du lien du blog BelVG ci-dessus):

   var settings = {
   
       // set tint background
       tint:true,
       tintColour:'#F90',
       tintOpacity:0.5,
   
       // Size
       zoomWindowHeight: 300,
       zoomWindowWidth: 400,
       borderSize: 0,
   
       // Position
       zoomWindowOffetx: 10,
       zoomWindowOffety: 0,
   
       // Additional settings for Zoomer positioning.
       // zoomWindowPosition: 1,
       // zoomType: "inner",
   
       // Fade-in speed settings
       zoomWindowFadeIn: 500,
       zoomWindowFadeOut: 500,
       lensFadeIn: 500,
       lensFadeOut: 500,
   
       // Ability to zoom by using the mouse scroll.
       scrollZoom : true,
   
       // inertia - my favorite one 
       easing: true
   }
   

   Si vous voulez que le popup fancybox, au-dessus de ce qui est maintenant la ligne 1227, collez-le:

   $j(".product-image-gallery").on("click", function(e) {
       var src = $j('.product-image img.visible').attr('src');
   $j.fancybox(src);
   });
   

   Remarque, vous devrez avoir le chargement de la bibliothèque fancybox js après jQuery dans votre page.xml ou ailleurs dans votre thème

   Enfin, modifiez ce qui est maintenant la ligne 1232 (si vous avez fait les deux collages ci-dessus) à partir de:

   image.elevateZoom();

   à:

   image.elevateZoom(settings);

Pour un aperçu de tous les paramètres du zoom, consultez la page officielle décrivant les paramètres elevateZoom

Et cela devrait le faire fonctionner. Si vous travaillez avec un thème personnalisé (comme je l'étais), vous pouvez avoir plus à faire.