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

magento.stackexchange https://magento.stackexchange.com//questions/45948

Question

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

Magento CE 1.9.1.0 est livré avec une nouvelle fonctionnalité très intéressante :É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.

Note 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 pas) fonctionner pour chaque thème personnalisé.Sauvegardez toujours vos fichiers d'origine (et votre base de données) avant d'apporter des modifications.

Note 2: Les échantillons fonctionnent (capture d'écran ci-dessous), mais je n'ai pas encore réussi à faire changer automatiquement l'image du produit avec les échantillons.J'essaierai d'examiner cela quand j'aurai le temps.

enter image description here

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

Était-ce utile?

La solution

  1. Copiez le dossier

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

    et son contenu à 

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

    (ou le dossier de votre 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 le dossier de votre 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 le dossier de votre 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 le dossier skin de votre 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 le dossier skin de votre package)

  6. Copiez le fichier

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

    à

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

    (ou votre dossier de mise en page de package)

  7. Créer le fichier

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

Si votre dossier de mise en page de package contient déjà un local.xml fichier, ne le remplacez pas.Jetez un coup d’œil aux changements à l’étape suivante et copiez-les dans votre version de l' local.xml déposer.

  1. S'ouvrir local.xml et 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>

  2. Ajoutez le CSS suivant à votre styles.css déposer:

    /* ============================================ *
 * 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%;
}

  3. Copiez le fichier

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

    à

    skin/frontend/DEFAULT/default/images/

Autres conseils

Votre solution est géniale mais ne montre pas l'échantillon de couleur dans la liste des catégories ou la grille.Ici, j'ajoute la solution pour le montrer, testé sur Magento 1.9.2.4.

in: app / conception / frontend / personnalisé-thème / Modèle / Catalogue / Produit Ajouter une ligne suivie dans list.phtml

1 - premier à afficher dans la vue de la liste, vérifiez s'il y y a là-bas, si non, Mise à jour o Modification (Aroud Line 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>

Dans alternative peut 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>

Ajustez l'image Redimensionner.

2 - Après "gettratingummary"= extrémité PHP si=, 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 - Faites le même changement à la lunette de la ligne 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();
    }
}
?>

Cela a été très utile !J'ai quelques détails supplémentaires sur lesquels j'ai pu travailler pour que le changement 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 (faites 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é)

    Ajoutez 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>

    Ajoutez 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 styles.css (autour des lignes 783-803) et collez le CSS suivant à partir du 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, quelques optimisations d'elevateZoom grâce à Google et en trouvant le post suivant sur Blog BelVG par Mishel Soiko, j'ai pu modifier et profiter de plus de paramètres pour l'elevateZoom comme le zoom interne ou le décalage de la fenêtre de zoom, etc.De plus, je voulais que l'image ait une boîte de fantaisie contextuelle lorsque je clique dessus, que j'ai activée avec l'aide du blog ci-dessus dans les commentaires.

  1. Ouvre ça app.js fichier 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 la fenêtre contextuelle Fancybox, au-dessus de ce qui est maintenant la ligne 1227, collez :

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

    Notez que vous devrez charger 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 par le haut) à partir de :

    image.elevateZoom();

    à:

    image.elevateZoom(settings);

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

Et cela devrait le faire fonctionner.Si vous travaillez avec un thème personnalisé (comme je l'étais), vous aurez peut-être plus à faire.

Licencié sous: CC-BY-SA avec attribution
Non affilié à magento.stackexchange
scroll top