Magento 1.9.1.0 डिफ़ॉल्ट पैकेज थीम (या कस्टम थीम) में कॉन्फ़िगर करने योग्य स्विचेस का उपयोग कैसे करें?


28

अद्यतन: मेरा जवाब अब स्वैच के बाद उत्पाद आधार छवि के स्वचालित परिवर्तन का समर्थन करता है। आप यह भी कर सकते हैं कि यहां और अधिक छवियों सहित यह कैसे करना है

Magento CE 1.9.1.0 एक बहुत अच्छी नई सुविधा के साथ आता है: विन्यास योग्य नमूने। दुर्भाग्य से, यह केवल RWD पैकेज के लिए उपलब्ध है, जो कि डिफ़ॉल्ट Magento इंस्टॉलेशन के साथ आता है। यह एक स्व-उत्तरित प्रश्न है कि कैसे डिफ़ॉल्ट पैकेज के लिए Magento के विन्यास योग्य नमूने उपलब्ध कराए जाएँ। जो कोई भी कॉन्फ़िगर करने योग्य स्विचेस को कस्टम थीम में एकीकृत करना चाहता है, उसके लिए यह जानकारी काम में आ सकती है।

नोट 1: इसका मतलब यह है कि मैगेंटो के डिफॉल्ट पैकेज के लिए कॉन्फिगरेबल स्विचेस कैसे उपलब्ध कराया जाए, इस पर यह एक प्रारंभिक गाइड है। यह प्रत्येक कस्टम थीम के लिए काम कर सकता है (लेकिन नहीं कर सकता)। हमेशा कोई भी बदलाव करने से पहले अपनी मूल फाइलों (और डेटाबेस) का बैकअप लें।

नोट 2: स्वैचेस काम करते हैं (नीचे स्क्रीन शॉट), लेकिन मुझे अभी तक स्वैग के साथ-साथ स्वचालित रूप से बदलने के लिए उत्पाद छवि नहीं मिली। मैं कोशिश करूंगा और कुछ समय मिलने पर इस पर गौर करूंगा।

यहाँ छवि विवरण दर्ज करें

टिप्पणी करके और सुझाव देने के लिए स्वतंत्र महसूस करें!


आपके द्वारा प्रश्न में जोड़ा गया लिंक काम नहीं कर रहा है: bemaged.com/en/blog/use-magento-swatches-in-custom-theme
मुकेश

जवाबों:


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. अपनी शैली में निम्नलिखित सीएसएस जोड़ें। फाइल:

    /* ============================================ *
     * 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
आप कैटलॉग / उत्पाद / सूची में अलग-अलग उत्पादों में स्वैच कैसे जोड़ेंगे? डिफ़ॉल्ट आरडब्ल्यूडी के भीतर आप उत्पाद में क्लिक किए बिना सीधे यहां से विभिन्न स्वैच का चयन करने में सक्षम हैं। बेशक, आपको बैकएंड में सेटिंग को सक्षम करना होगा: "उत्पाद सूची में उपयोग के लिए उत्पाद की विशेषता को पहले"।
जो

इसके अलावा, मैं .product-image-zoom.zoom-available .gallery-image { display: none; } .product-image-zoom.zoom-available .gallery-image.visible { display: block; }CSS के अंत में जोड़ने की सलाह दूंगा, क्योंकि इसके बिना, आप किसी उत्पाद पर जाते समय अंतिम जोड़ी गई उत्पाद छवि देखेंगे, लेकिन जब होवर करेंगे, तो आपको मुख्य छवि दिखाई देगी।
सेबीएफ

1
गैलरी छवि स्वैच रंग के क्लिक पर नहीं बदल रही है, क्या आप मुझे बता सकते हैं कि इसे कैसे काम करना है?
ताहिर यासीन

2

आपका समाधान बहुत अच्छा है, लेकिन श्रेणी सूची या ग्रिड में रंग नहीं दिखाना है। यहां मैं इसे दिखाने के लिए समाधान जोड़ता हूं, जो मैगनेटो 1.9.2.4 पर परीक्षण किया गया है।

इन: ऐप / डिज़ाइन / फ्रंटएंड / कस्टम-थीम / टेम्पलेट / कैटलॉग / उत्पाद सूची में लाइन का अनुसरण करें।

1 - सूची दृश्य में दिखाने के लिए, यह देखें कि क्या ऐसा है, यदि नहीं, तो ओ परिवर्तन (aroud 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>

वैकल्पिक रूप से इसका उपयोग कर सकते हैं:

            <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 समाप्ति के बाद यदि =, पंक्ति 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. इन नई लिपियों को शामिल करने के लिए, ऐप / डिज़ाइन / फ्रंटएंड / DEFAULT / डिफ़ॉल्ट / लेआउट / 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 के बाद जोड़ें (पंक्ति 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 फ़ाइल (लाइनों 783-803 के आसपास) और 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;
    }

अंतिम, लेकिन कम से कम, Google के लिए एलिवेटज़ूम के लिए कुछ अनुकूलन और मिशेल सोइको द्वारा BelVG ब्लॉग पर निम्नलिखित पोस्ट खोजने के लिए , मैं एलिवेटज़ूम के लिए अधिक सेटिंग्स का लाभ उठाने और सक्षम करने में सक्षम था जैसे कि आंतरिक ज़ूम या ज़ूम विंडो की ऑफ़सेट , आदि इसके अलावा, मैं चाहता था कि छवि को क्लिक करते समय एक पॉपअप फैंसीबॉक्स मिले, जिसे मैंने टिप्पणियों में उपरोक्त ब्लॉग की मदद से सक्षम किया।

  1. उस ऐप को खोलें, जिसे आपने पहले अपने थीम पर कॉपी किया था

    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
    }

    यदि आप फैंसीबॉक्स पॉपअप चाहते हैं, तो अब जो लाइन 1227 है, उस पर पेस्ट करें:

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

    ध्यान दें, आपको अपने पेज में jQuery के बाद फैंसीबॉक्स js लाइब्रेरी लोड करने की आवश्यकता होगी। अपने विषय में xml या कहीं और

    अंत में, संशोधित करें कि अब क्या पंक्ति 1232 है (यदि आपने ऊपर से दोनों पेस्टिंग की है):

    image.elevateZoom();

    सेवा मेरे:

    image.elevateZoom(settings);

सभी ज़ूमर सेटिंग्स के अवलोकन के लिए करते हुए बताया कि आधिकारिक पृष्ठ की जाँच elevateZoom सेटिंग

और इसे काम करना चाहिए। यदि आप एक कस्टम विषय के साथ काम कर रहे हैं (जैसा कि मैं था) तो आपके पास करने के लिए अधिक हो सकता है।


थोड़ा अलग दृष्टिकोण के साथ मैं स्वचालित छवि स्विचिंग को भी काम में लाने में सक्षम था। अपने दृष्टिकोण में मैं पेज की local.xmlसभी .jsफाइलों को लोड करने के लिए उपयोग कर रहा हूं head। कुछ समय मिलने पर मैं अपने उत्तर को अपडेट करूंगा। तब तक आप एक विस्तृत ट्यूटोरियल पा सकते हैं जो मैंने लिखा था कि यह कैसे करना है
फॉरमैट

0 डाउन वोट कॉन्फ़िगर करने योग्य स्विचेस
रवि
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.