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

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

Pregunta

ACTUALIZAR: 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 hacer esto, incluidas más imágenes. aquí.

Magento CE 1.9.1.0 viene con una característica nueva muy interesante:Muestras configurables.Desafortunadamente, esto sólo está disponible para el paquete RWD, que viene con la instalación predeterminada de Magento.Esta es una pregunta de respuesta propia 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 pretende ser 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 no) funcionar para todos los temas personalizados.Siempre haga una copia de seguridad de sus archivos originales (y de su base de datos) antes de realizar cualquier cambio.

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

enter image description here

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

¿Fue útil?

Solución

  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 de su 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 de su 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 de su paquete)

  4. Copiar 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 aspectos de su paquete)

  5. Copiar 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 aspectos de su 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 de su paquete)

  7. Crea el archivo

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

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

  1. Abrir local.xml y agregue 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. Añade el siguiente CSS a tu estilos.css archivo:

    /* ============================================ *
 * 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/

Otros consejos

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

En: APLICACIÓN / DESIGN / FRONTEND / TEMA / TEMA PERSONALIZADA / CATÁLOGO / CATÁLOGO / ADJUNTO DE PRODUCTOS SEGUIR LA LINEA EN LIST.PHTML

1 - Primero en mostrar en la vista de lista, verifique si hay esto, si no, actualice O cambie (AROD 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>

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: haga el mismo cambio en la vista de Gorro alrededor de la línea 120 y 152.

4 - En el extremo 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 a los que pude trabajar para que la conmutación de la imagen funcione.

  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 su 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 su tema personalizado

  3. Para incluir estos nuevos scripts, editar aplicación / diseño / frontend / predeterminado / predeterminado / diseño / página.xml (haga una copia de seguridad de este archivo primero y asegúrese de combinar los cambios si hace actualizaciones como el tema predeterminado se sobrescribiría)

    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>

    Agregar 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. Eliminar la / * Imágenes del producto * / Sección de su archivo styles.csss (alrededor de las líneas 783-803) y pegue en el siguiente CSS desde el archivo RWD STYLES.CSSS: < / p> 

    * 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;
}

    Último, pero no menos importante, algunas optimizaciones a la elevadora gracias a Google y encontrar el siguiente post en Belvg Blog por Mishel Soiko , pude modificar y aprovechar más configuraciones para el elevatezoom, como el zoom interno o el desplazamiento de la ventana del zoom, etc. . Además, quería que la imagen tenga un fancybox emergente cuando haga clic, lo que he permitido con la ayuda del blog anterior hacia abajo en los comentarios.

    1. abre ese archivo app.js que copió a su tema antes

      sobre la línea 1153 (var ProductMediaManager = {), pegar en (copiado desde el enlace Belvg Blog anteriormente): 

      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 siguiente, ¿cuál es ahora la línea 1227, pegue en: 

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

      NOTA, deberá tener la carga de la biblioteca de FancyBox JS después de JQUERY en su página.xml o en otro lugar de su tema

      Finalmente, modifique lo que ahora es la línea 1232 (si hiciste ambos pastos desde arriba) desde: 

      image.elevateZoom();

      a: 

      image.elevateZoom(settings);

      Para obtener una visión general de todas las configuraciones de Zoomer, consulte la página oficial que describe la configuración de elevatezoom

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

Licenciado bajo: CC-BY-SA con atribución
No afiliado a magento.stackexchange
scroll top