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

28

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.

ingrese la descripción de la imagen aquí

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

Formato
fuente
El enlace que agregó en la pregunta no funciona: bemaged.com/en/blog/use-magento-swatches-in-custom-theme
Mukesh Chapagain

Respuestas:

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

  1. 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>
  2. 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%;
    }
  3. Copia el archivo

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

    a

    skin/frontend/DEFAULT/default/images/
Formato
fuente
1
¿Cómo agregaría las muestras a los productos individuales en Catálogo / Producto / Lista? Dentro del RWD predeterminado, puede seleccionar las diferentes muestras directamente desde aquí sin tener que hacer clic en el producto. Por supuesto, primero debe tener habilitada la configuración en el backend: "Atributo de producto a usar para muestras en listado de productos".
Joe
Además, recomendaría agregar .product-image-zoom.zoom-available .gallery-image { display: none; } .product-image-zoom.zoom-available .gallery-image.visible { display: block; }al final del CSS, ya que sin él, verá la última imagen del producto agregado al visitar un producto, pero al pasar el mouse, verá la imagen principal.
SebiF
1
La imagen de la galería no cambia al hacer clic en el color de la muestra, ¿puede decirme cómo hacer que funcione?
Tahir Yasin
2

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

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.

Micro
fuente
Con un enfoque un poco diferente, pude hacer que el cambio de imagen automatizado funcionara también. En mi enfoque, estoy usando local.xmlpara cargar todos los .jsarchivos en headla página. Actualizaré mi respuesta cuando encuentre algo de tiempo. Hasta entonces, puede encontrar un tutorial detallado que escribí sobre cómo hacer esto aquí .
ForMat
0 voto negativo Las Muestras Configurables no cambiarán la imagen del producto configurable. Por favor revise esto, ravichomal.blogspot.in/2015/12/…
Ravi Chomal