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

28

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.

wprowadź opis zdjęcia tutaj

Zapraszamy do komentowania i zgłaszania sugestii!

Format
źródło
Link dodany w pytaniu nie działa: bemaged.com/en/blog/use-magento-swatches-in-custom-theme
Mukesh Chapagain

Odpowiedzi:

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

  1. 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>
  2. 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%;
    }
  3. Skopiuj plik

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

    do

    skin/frontend/DEFAULT/default/images/
Format
źródło
1
Jak dodałbyś próbki do poszczególnych produktów w katalogu / produkcie / liście? W ramach domyślnej RWD możesz wybierać różne próbki bezpośrednio stąd, bez konieczności klikania w produkt. Oczywiście musisz włączyć to ustawienie w backendzie: „Atrybut produktu do użycia dla próbek na liście produktów”.
Joe
Ponadto polecam dodanie .product-image-zoom.zoom-available .gallery-image { display: none; } .product-image-zoom.zoom-available .gallery-image.visible { display: block; }do końca CSS, ponieważ bez niego zobaczysz ostatni dodany obraz produktu podczas odwiedzania produktu, ale po najechaniu myszą zobaczysz główny obraz.
SebiF
1
Galeria Obraz nie zmienia się po kliknięciu koloru próbki, czy możesz mi powiedzieć, jak to zrobić?
Tahir Yasin
2

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();
    }
}
?>
Joso
źródło
1

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.

Mikrofon
źródło
Przy nieco innym podejściu mogłem również uruchomić automatyczne przełączanie obrazów. W moim podejściu używam local.xmldo ładowania wszystkich .jsplików headna stronie. Zaktualizuję swoją odpowiedź, kiedy znajdę trochę czasu. Do tego czasu można znaleźć szczegółowy poradnik napisałem o tym, jak to zrobić tutaj .
ForMat,
0 głosów w dół Konfigurowalne próbki nie zmienią obrazu produktu konfigurowalnego Sprawdź to, ravichomal.blogspot.in/2015/12/…
Ravi Chomal