Bagaimana cara menggunakan Magento 1.9.1.0 Swatch yang Dapat Dikonfigurasi dalam Tema paket default (atau tema khusus)?


28

PEMBARUAN: Jawaban saya sekarang mendukung perubahan otomatis pada gambar basis produk setelah swatch. Anda juga dapat menemukan tutorial yang lebih rinci tentang cara melakukan ini termasuk lebih banyak gambar di sini .

Magento CE 1.9.1.0 hadir dengan fitur baru yang sangat bagus: Confatchable Swatches. Sayangnya, ini hanya tersedia untuk paket RWD, yang dilengkapi dengan instalasi Magento default. Ini adalah pertanyaan yang dijawab sendiri tentang cara membuat Magento Configurable Swatch tersedia untuk paket Default. Bagi siapa pun yang ingin mengintegrasikan Swatch yang Dapat Dikonfigurasi ke dalam tema khusus, info ini mungkin berguna juga.

Catatan 1: Ini dimaksudkan sebagai panduan pengantar tentang bagaimana membuat Swatch yang Dapat Dikonfigurasi tersedia untuk paket Default Magento. Ini bisa (tetapi mungkin tidak) berfungsi untuk setiap tema khusus. Selalu buat cadangan file asli Anda (dan basis data) sebelum melakukan perubahan.

Catatan 2: Swatch berfungsi (tangkapan layar di bawah), tapi saya belum mendapatkan gambar produk untuk berubah secara otomatis bersama dengan swatch. Saya akan mencoba dan melihat ini ketika saya menemukan waktu.

masukkan deskripsi gambar di sini

Silakan berkontribusi dengan berkomentar dan memberikan saran!


Tautan yang Anda tambahkan dalam pertanyaan tidak berfungsi: bemaged.com/en/blog/use-magento-swatches-in-custom-theme
Mukesh Chapagain

Jawaban:


27
  1. Salin foldernya

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

    dan isinya untuk

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

    (atau folder templat paket Anda)

  2. Salin file tersebut

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

    untuk

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

    (atau folder templat paket Anda)

  3. Salin file tersebut

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

    untuk

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

    (atau folder templat paket Anda)

  4. Salin foldernya

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

    dan konten mereka untuk

    skin/frontend/DEFAULT/default/js/

    (atau folder skin paket Anda)

  5. Salin file

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

    untuk

    skin/frontend/DEFAULT/default/js/

    (atau folder skin paket Anda)

  6. Salin file tersebut

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

    untuk

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

    (atau folder tata letak paket Anda)

  7. Buat file

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

Jika folder tata letak paket Anda sudah berisi local.xmlfile, maka jangan menimpanya. Lihat perubahan di langkah berikutnya dan salin ke versi local.xmlfile Anda.

  1. Buka local.xmldan tambahkan kode berikut:

    <?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. Tambahkan css berikut ke file styles.css Anda :

    /* ============================================ *
     * 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. Salin file tersebut

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

    untuk

    skin/frontend/DEFAULT/default/images/

1
Bagaimana Anda menambahkan carikan ke masing-masing produk pada Katalog / Produk / Daftar? Dalam RWD default, Anda dapat memilih swatch yang berbeda langsung dari sini tanpa harus mengklik ke dalam produk. Tentu saja, Anda harus memiliki pengaturan yang diaktifkan di backend: "Atribut Produk untuk Digunakan untuk Swatch di Daftar Produk" terlebih dahulu.
Joe

Selain itu, saya akan merekomendasikan .product-image-zoom.zoom-available .gallery-image { display: none; } .product-image-zoom.zoom-available .gallery-image.visible { display: block; }untuk menambahkan ke ujung CSS, karena tanpa itu, Anda akan melihat gambar produk yang ditambahkan terakhir ketika mengunjungi suatu produk, tetapi ketika melayang, Anda akan melihat gambar utama.
SebiF

1
Gambar Galeri tidak berubah saat klik warna carikan, bisakah Anda memberi tahu saya bagaimana cara membuatnya berfungsi?
Tahir Yasin

2

solusi Anda hebat tetapi tidak menunjukkan carikan warna dalam daftar kategori atau kisi. Di sini saya menambahkan solusi untuk menunjukkannya, diuji pada magento 1.9.2.4.

Di: app / design / frontend / CUSTOM-THEME / template / catalog / produk tambahkan baris yang diikuti di list.phtml

1 - pertama yang ditampilkan dalam tampilan daftar, periksa apakah ada, jika tidak, perbarui atau ubah (pada baris 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>

Alternatifnya bisa menggunakan ini:

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

sesuaikan ukuran gambar.

2 - setelah "getRatingSummary" = php end if =, di sekitar baris 53, tambahkan ini:

                        <?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 - buat perubahan yang sama untuk tampilan gird di sekitar baris 120 dan 152.

4 - di akhir file tambahkan ini:

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

1

Ini sangat membantu! Saya memiliki beberapa detail tambahan yang dapat saya kerjakan agar pengalihan gambar berfungsi.

  1. Salin file tersebut

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

    untuk

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

    atau tema khusus Anda

  2. Salin daftar file berikut:

    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)

    untuk

    app/skin/frontend/DEFAULT/default/js

    atau tema khusus Anda

  3. Untuk menyertakan skrip baru ini, edit aplikasi / desain / frontend / DEFAULT / default / layout / page.xml (buat cadangan file ini terlebih dahulu dan pastikan untuk menggabungkan perubahan jika Anda melakukan pembaruan karena tema default akan ditimpa)

    Tambahkan setelah baris 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>

    Tambahkan setelah baris 50 (baris 52 jika Anda sudah menambahkan dua baris di atas):

        <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. Hapus bagian / * Gambar Produk * / dari file styles.css Anda (sekitar baris 783-803) dan tempelkan CSS berikut dari file styles.css RWD:

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

Terakhir, namun tidak kalah pentingnya, beberapa optimisasi pada elevateZoom berkat Google dan menemukan pos berikut di BelVG Blog oleh Mishel Soiko , saya dapat memodifikasi dan memanfaatkan lebih banyak pengaturan untuk elevateZoom seperti zoom internal atau offset jendela zoom , dll. Juga, saya ingin gambar memiliki fancybox popup ketika diklik, yang saya aktifkan dengan bantuan dari blog di atas di komentar.

  1. Buka file app.js yang Anda salin sebelumnya ke tema Anda

    Di atas baris 1153 ( var ProductMediaManager = {), tempel di (disalin dari tautan blog BelVG di atas):

    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
    }

    Jika Anda ingin munculan fancybox, di atas apa yang sekarang baris 1227, rekatkan:

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

    Catatan, Anda harus memiliki pustaka fancys js memuat setelah jQuery di halaman Anda.xml atau di tempat lain dalam tema Anda

    Terakhir, ubah apa yang sekarang menjadi baris 1232 (jika Anda melakukan kedua paste dari atas) dari:

    image.elevateZoom();

    untuk:

    image.elevateZoom(settings);

Untuk tinjauan umum dari semua pengaturan zoomer, lihat halaman resmi yang menjelaskan Pengaturan elevateZoom

Dan itu seharusnya membuatnya bekerja. Jika Anda bekerja dengan tema khusus (seperti saya), Anda mungkin harus melakukan lebih banyak.


Dengan pendekatan yang sedikit berbeda, saya dapat mengaktifkan peralihan gambar otomatis juga. Dalam pendekatan saya, saya menggunakan local.xmluntuk memuat semua .jsfile di headhalaman. Saya akan memperbarui jawaban saya ketika saya menemukan waktu. Sampai saat itu, Anda dapat menemukan tutorial terperinci yang saya tulis tentang cara melakukan ini di sini .
ForMat

0 pilihan suara Configurable Swatches tidak akan mengubah gambar pada produk yang dapat dikonfigurasi. Silakan periksa ini, ravichomal.blogspot.in/2015/12/...
Ravi Chomal
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.