デフォルトパッケージテーマ(またはカスタムテーマ)でMagento 1.9.1.0構成可能スウォッチを使用する方法


28

更新:私の答えは、スウォッチ後の製品ベースイメージの自動変更をサポートするようになりました。また、ここでより多くの画像を含む、これを行う方法に関するより詳細なチュートリアルを見つけることができ ます

Magento CE 1.9.1.0には、設定可能なスウォッチという非常に優れた新機能が搭載されています。残念ながら、これはデフォルトのMagentoインストールに付属するRWDパッケージでのみ利用可能です。これは、Magento Configurable Swatchesをデフォルトパッケージで利用可能にする方法に関する自己回答の質問です。Configurable Swatchesをカスタムテーマに統合する場合は、この情報も役立ちます。

注1:これは、Magentoのデフォルトパッケージで構成可能なスウォッチを使用できるようにする方法の概要ガイドです。これは、すべてのカスタムテーマで機能する可能性があります(ただし機能しない場合があります)。変更を行う前に、必ず元のファイル(およびデータベース)をバックアップしてください。

注2:スウォッチは機能します(下のスクリーンショット)が、スウォッチに合わせて製品画像が自動的に変更されるまでには至っていません。時間があれば、これを調べてみます。

ここに画像の説明を入力してください

コメントして提案してください!


質問に追加したリンクが機能していません:bemaged.com/en/blog/use-magento-swatches-in-custom-theme
Mukesh Chapagain

回答:


27
  1. フォルダーをコピーする

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

    とその内容

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

    (またはパッケージテンプレートフォルダー)

  2. ファイルをコピーする

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

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

    (またはパッケージテンプレートフォルダー)

  3. ファイルをコピーする

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

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

    (またはパッケージテンプレートフォルダー)

  4. フォルダーをコピーする

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

    とその内容

    skin/frontend/DEFAULT/default/js/

    (またはパッケージスキンフォルダー)

  5. ファイルをコピーする

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

    skin/frontend/DEFAULT/default/js/

    (またはパッケージスキンフォルダー)

  6. ファイルをコピーする

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

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

    (またはパッケージレイアウトフォルダー)

  7. ファイルを作成する

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

パッケージレイアウトフォルダに既にlocal.xmlファイルが含まれている場合は、上書きしないでください。次のステップで変更を確認し、local.xmlファイルのバージョンにそれらをコピーします。

  1. local.xml次のコードを開いて追加します。

    <?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. 次のcssを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. ファイルをコピーする

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

    skin/frontend/DEFAULT/default/images/

1
カタログ/製品/リストの個々の製品にスウォッチをどのように追加しますか?デフォルトのRWD内では、製品をクリックすることなく、ここからさまざまなスウォッチを直接選択できます。もちろん、最初に「製品リストのスウォッチに使用する製品属性」の設定をバックエンドで有効にする必要があります。
ジョー14

さらに.product-image-zoom.zoom-available .gallery-image { display: none; } .product-image-zoom.zoom-available .gallery-image.visible { display: block; }、CSSの最後に追加することをお勧めします。CSSがないと、製品にアクセスしたときに最後に追加された製品画像が表示されますが、ホバーするとメイン画像が表示されます。
SebiF

1
スウォッチの色をクリックしてもギャラリー画像は変わりません。どのように機能させるか教えてください。
タヒルヤシン

2

ソリューションは優れていますが、カテゴリリストまたはグリッドに色見本を表示しません。ここでは、magento 1.9.2.4。でテストしたソリューションを追加して表示します。

In:app / design / frontend / CUSTOM-THEME / template / catalog / product add list.phtmlの次の行

1-リストビューで最初に表示し、存在するかどうかを確認します。存在しない場合は、変更を更新します(aroud行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>

代わりにこれを使用できます:

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

画像のサイズ変更を調整します。

2-"getRatingSummary" = php end if =の後、53行目付近に以下を追加します。

                        <?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-120行目と152行目の周りのガードビューに同じ変更を加えます。

4-ファイルの最後にこれを追加します:

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

これはとても役に立ちました!画像の切り替えを機能させるためにやり遂げることができた詳細がいくつかあります。

  1. ファイルをコピーする

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

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

    またはカスタムテーマ

  2. 次のファイルのリストをコピーします。

    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)
    

    app/skin/frontend/DEFAULT/default/js

    またはカスタムテーマ

  3. これらの新しいスクリプトを含めるには、app / design / frontend / DEFAULT / default / layout / page.xmlを編集します(最初にこのファイルのバックアップを作成し、デフォルトのテーマが上書きされるため、更新を行う場合は必ず変更をマージします)

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

    行50の後に追加します(上記の2行を既に追加している場合は行52):

        <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. styles.cssファイルから/ * Product Images * /セクションを削除し(783-803行目)、RWD styles.cssファイルから次の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;
    }
    

最後になりましたが、elevateZoomの最適化はGoogleのおかげであり、Mishel SoikoのBelVG Blogで次の投稿を見つけました。内部ズームやズームウィンドウのオフセットなど、elevateZoomの設定を変更して活用することができました。また、クリックしたときに画像にポップアップのファンシーボックスを持たせたいと考えました。これは、上記のブログのコメントを参考にして有効にしました。

  1. 前にテーマにコピーしたapp.jsファイルを開きます

    行1153(var ProductMediaManager = {)の上に貼り付けます(上記の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
    }
    

    fancyboxポップアップが必要な場合は、上記の行1227で、以下を貼り付けます。

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

    注意、page.xmlまたはテーマの別の場所でjQueryの後にfancybox jsライブラリをロードする必要があります。

    最後に、現在の1232行目を変更します(上から両方の貼り付けを行った場合)。

    image.elevateZoom();

    に:

    image.elevateZoom(settings);

すべてのズーム設定の概要については、elevateZoom設定を説明する公式ページをご覧ください。

そして、それが機能するはずです。(私がそうであったように)カスタムテーマで作業している場合は、さらにやることがあります。


少し異なるアプローチで、自動画像切り替えも機能させることができました。私のアプローチでは、ページのlocal.xmlすべての.jsファイルをロードするために使用しheadています。時間があれば、回答を更新します。それまでは、ここでこれを行う方法について書いた詳細なチュートリアルを見つけることができます。
ForMat 14

設定可能なスウォッチが設定可能製品に画像を変更習慣投票ダウン0これを確認してください、 ravichomal.blogspot.in/2015/12/...
ラヴィChomal
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.