¿Cómo utilizar Magento 1.9.1.0 Muestras configurables en el tema del paquete predeterminado (o un tema personalizado)?

ACTUALIZACIÓN: Mi respuesta ahora admite el cambio automatizado de la imagen base del producto después de la muestra. También puede encontrar un tutorial más detallado sobre cómo hacerlo, incluidas más imágenes aquí .

Magento CE 1.9.1.0 viene con una nueva característica muy agradable: muestras configurables. Desafortunadamente, esto solo está disponible para el paquete RWD, que viene con la instalación predeterminada de Magento. Esta es una pregunta auto respondida sobre cómo hacer que las muestras configurables de Magento estén disponibles para el paquete predeterminado. Para cualquiera que quiera integrar las Muestras configurables en un tema personalizado, esta información también puede ser útil.

Nota 1: Esta es una guía introductoria sobre cómo hacer que las muestras configurables estén disponibles para el paquete predeterminado de Magento. Esto podría (pero puede que no) funcionar para cada tema personalizado. Siempre haga una copia de seguridad de sus archivos originales (y de la base de datos) antes de realizar cualquier cambio.

Nota 2: Las muestras funcionan (captura de pantalla a continuación), pero todavía no conseguí que la imagen del producto cambiara automáticamente junto con las muestras. Intentaré investigar esto cuando encuentre algo de tiempo.

¡Siéntase libre de contribuir comentando y haciendo sugerencias!

1. Copia la carpeta

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

   y su contenido para

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

   (o la carpeta de la plantilla del paquete)

2. Copia el archivo

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

   a

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

   (o la carpeta de la plantilla del paquete)

3. Copia el archivo

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

   a

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

   (o la carpeta de la plantilla del paquete)

4. Copia las carpetas

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

   y su contenido para

   skin/frontend/DEFAULT/default/js/

   (o la carpeta de la máscara del paquete)

5. Copia los archivos

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

   a

   skin/frontend/DEFAULT/default/js/

   (o la carpeta de la máscara del paquete)

6. Copia el archivo

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

   a

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

   (o la carpeta de diseño del paquete)

7. Crea el archivo

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

Si la carpeta de diseño del paquete ya contiene un local.xmlarchivo, no lo sobrescriba. Eche un vistazo a los cambios en el siguiente paso y cópielos a su versión del local.xmlarchivo.

8. Abre local.xmly agrega el siguiente código:

   <?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. Agregue el siguiente css a su archivo 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. Copia el archivo

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

    a

    skin/frontend/DEFAULT/default/images/

su solución es excelente, pero no muestra una muestra de color en la lista de categorías o en la cuadrícula. Aquí agrego la solución para mostrarla, probada en magento 1.9.2.4.

En: app / design / frontend / CUSTOM-THEME / template / catalog / product agrega la línea seguida en list.phtml

1: primero para mostrar en la vista de lista, verifique si esto, si no, se actualiza o cambia (línea 39 de aroud):

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

En alternativa puede usar esto:

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

ajustar el tamaño de la imagen.

2 - después de "getRatingSummary" = php end if =, alrededor de la línea 53, agregue esto:

                        <?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: realice el mismo cambio en la vista de ceñido alrededor de las líneas 120 y 152.

4 - al final del archivo agregue esto:

 <?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();
    }
}
?>

Esto fue muy útil! Tengo algunos detalles adicionales con los que pude trabajar para que la imagen cambiara a trabajar.

1. Copia el archivo

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

   a

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

   o tu tema personalizado

2. Copie la siguiente lista de archivos:

   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)

   a

   app/skin/frontend/DEFAULT/default/js

   o tu tema personalizado

3. Para incluir estos nuevos scripts, edite app / design / frontend / DEFAULT / default / layout / page.xml (primero haga una copia de seguridad de este archivo y asegúrese de combinar los cambios si realiza actualizaciones, ya que el tema predeterminado se sobrescribirá)

   Agregar después de la línea 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>

   Agregue después de la línea 50 (línea 52 si ya ha agregado las dos líneas anteriores):

       <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. Elimine la sección / * Imágenes del producto * / de su archivo styles.css (alrededor de las líneas 783-803) y pegue el siguiente CSS del archivo 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;
   }

Por último, pero no menos importante, algunas optimizaciones para elevateZoom gracias a Google y al encontrar la siguiente publicación en el Blog BelVG de Mishel Soiko , pude modificar y aprovechar más configuraciones para elevateZoom, como el zoom interno o el desplazamiento de la ventana de zoom , etc. Además, quería que la imagen tuviera una ventana emergente de fantasía cuando se hacía clic, lo que habilité con la ayuda del blog anterior en los comentarios.

1. Abra el archivo app.js que copió a su tema anteriormente

   Por encima de la línea 1153 ( var ProductMediaManager = {), pegue (copiado del enlace del blog BelVG anterior):

   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 desea la ventana emergente de fancybox, en lo que ahora es la línea 1227, pegue:

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

   Tenga en cuenta que deberá cargar la biblioteca fancybox js después de jQuery en su page.xml o en cualquier otro lugar de su tema

   Finalmente, modifique lo que ahora es la línea 1232 (si hizo ambas pegadas desde arriba) desde:

   image.elevateZoom();

   a:

   image.elevateZoom(settings);

Para obtener una descripción general de todas las configuraciones del zoom, consulte la página oficial que describe las configuraciones de elevateZoom

Y eso debería hacerlo funcionar. Si está trabajando con un tema personalizado (como yo), es posible que tenga más que hacer.