Jak korzystać z konfigurowalnych próbek Magento 1.9.1.0 w domyślnym motywie pakietu (lub motywie niestandardowym)?

AKTUALIZACJA: Moja odpowiedź obsługuje teraz automatyczną zmianę obrazu podstawowego produktu po próbce. Możesz również znaleźć bardziej szczegółowy samouczek, jak to zrobić, w tym więcej zdjęć tutaj .

Magento CE 1.9.1.0 ma nową, bardzo ładną funkcję: Konfigurowalne próbki. Niestety jest to dostępne tylko dla pakietu RWD, który jest dostarczany z domyślną instalacją Magento. To jest odpowiedź na pytanie, w jaki sposób udostępnić konfigurowalne próbki Magento dla pakietu domyślnego. Dla każdego, kto chce zintegrować konfigurowalne próbki z niestandardowym motywem, te informacje mogą się również przydać.

Uwaga 1: To ma być wprowadzający przewodnik, jak udostępnić Konfigurowalne próbki dla domyślnego pakietu Magento. To może (ale nie musi) działać dla każdego niestandardowego motywu. Zawsze wykonuj kopię zapasową oryginalnych plików (i bazy danych) przed wprowadzeniem jakichkolwiek zmian.

Uwaga 2: Próbki działają (zrzut ekranu poniżej), ale nie dostałem jeszcze automatycznej zmiany obrazu produktu wraz z próbkami. Spróbuję to sprawdzić, kiedy znajdę trochę czasu.

Zapraszamy do komentowania i zgłaszania sugestii!

1. Skopiuj folder

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

   i jego treść do

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

   (lub folder szablonu pakietu)

2. Skopiuj plik

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

   do

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

   (lub folder szablonu pakietu)

3. Skopiuj plik

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

   do

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

   (lub folder szablonu pakietu)

4. Skopiuj foldery

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

   i ich treść do

   skin/frontend/DEFAULT/default/js/

   (lub folder skórki paczki)

5. Skopiuj pliki

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

   do

   skin/frontend/DEFAULT/default/js/

   (lub folder skórki paczki)

6. Skopiuj plik

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

   do

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

   (lub folder układu pakietu)

7. Utwórz plik

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

Jeśli folder układu pakietu już zawiera local.xmlplik, nie zastępuj go. Przejrzyj zmiany w następnym kroku i skopiuj je do swojej wersji local.xmlpliku.

8. Otwórz local.xmli dodaj następujący kod:

   <?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. Dodaj następujący plik css do pliku 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. Skopiuj plik

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

    do

    skin/frontend/DEFAULT/default/images/

Twoje rozwiązanie jest świetne, ale nie pokazuje próbki koloru na liście kategorii lub siatce. Tutaj dodaję rozwiązanie, aby to pokazać, przetestowane na Magento 1.9.2.4.

W: app / design / frontend / CUSTOM-THEME / template / catalog / product add follow line in list.phtml

1 - najpierw pokaż w widoku listy, sprawdź, czy tam, jeśli nie, zaktualizuj lub zmień (linia nr 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>

Alternatywnie można użyć tego:

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

dostosuj rozmiar obrazu.

2 - po „getRatingSummary” = koniec php jeśli =, wokół linii 53, dodaj to:

                        <?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 - dokonaj tej samej zmiany w widoku wiązki wokół linii 120 i 152.

4 - na końcu pliku dodaj to:

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

To było bardzo pomocne! Mam dodatkowe szczegóły, przez które mogłem przejść, aby przełączyć obraz do pracy.

1. Skopiuj plik

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

   do

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

   lub niestandardowy motyw

2. Skopiuj następującą listę plików:

   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)

   do

   app/skin/frontend/DEFAULT/default/js

   lub niestandardowy motyw

3. Aby dołączyć te nowe skrypty, edytuj aplikację / design / frontend / DEFAULT / default / layout / page.xml (najpierw wykonaj kopię zapasową tego pliku i upewnij się, że scalisz zmiany, jeśli wykonasz aktualizacje, ponieważ domyślny motyw zostanie nadpisany)

   Dodaj po wierszu 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>

   Dodaj po wierszu 50 (wiersz 52, jeśli już dodałeś powyższe dwa wiersze):

       <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. Usuń sekcję / * Obrazy produktu * / z pliku styles.css (wokół linii 783-803) i wklej następujący CSS z pliku 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;
   }

Wreszcie, dzięki niektórym optymalizacjom do ElevateZoom dzięki Google i znalezieniu następującego postu na blogu BelVG autorstwa Mishel Soiko , byłem w stanie zmodyfikować i wykorzystać więcej ustawień dla ElevateZoom, takich jak wewnętrzne powiększenie lub przesunięcie okna powiększenia itp. Chciałem też, aby obraz miał wyskakujące fancybox po kliknięciu, co włączyłem z pomocą powyższego bloga w komentarzach.

1. Otwórz plik app.js skopiowany wcześniej do motywu

   Powyżej linii 1153 ( var ProductMediaManager = {), wklej (skopiowane z powyższego linku do bloga BelVG):

   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
   }

   Jeśli chcesz wyskakujące okienko fantazyjne, powyżej linii 1227 wklej:

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

   Uwaga, musisz mieć bibliotekę js fancybox ładującą się po jQuery w page.xml lub w innym miejscu w twoim motywie

   Na koniec zmień to, co jest teraz linią 1232 (jeśli zrobiłeś oba wklejania z góry) z:

   image.elevateZoom();

   do:

   image.elevateZoom(settings);

Przegląd wszystkich ustawień zoomera znajduje się na oficjalnej stronie opisującej ustawienia ElevateZoom

I to powinno zadziałać. Jeśli pracujesz z niestandardowym motywem (tak jak ja), możesz mieć więcej do zrobienia.