كيفية استخدام الماجنتو 1.9.1.0 حوامل شكلي في موضوع الحزمة الافتراضية (أو موضوع مخصص)?

magento.stackexchange https://magento.stackexchange.com//questions/45948

سؤال

تحديث: إجابتي تدعم الآن التغيير الآلي لقاعدة المنتج صورة بعد سواتش.يمكنك أيضا العثور على برنامج تعليمي أكثر تفصيلا حول كيفية للقيام بذلك بما في ذلك المزيد من الصور هنا.

الماجنتو سي 1.9.1.0 يأتي مع ميزة جديدة لطيفة جدا:حوامل شكلي.لسوء الحظ ، هذا متاح فقط لحزمة رود ، التي تأتي مع تثبيت الماجنتو الافتراضي.هذا هو السؤال أجاب النفس على كيفية جعل الماجنتو شكلي حوامل المتاحة للحزمة الافتراضية.لمن يريد دمج حوامل شكلي في موضوع مخصص ، قد تأتي هذه المعلومات في متناول اليدين كذلك.

الملاحظة 1: من المفترض أن يكون هذا دليلا تعريفيا حول كيفية جعل الحوامل القابلة للتكوين متاحة لحزمة الماجنتو الافتراضية.هذا يمكن (ولكن قد لا) العمل لكل موضوع مخصص.قم دائما بعمل نسخة احتياطية من ملفاتك الأصلية (وقاعدة البيانات) قبل إجراء أي تغييرات.

الملاحظة 2: تعمل الحوامل (لقطة الشاشة أدناه) ، لكنني لم أحصل بعد على صورة المنتج للتغيير تلقائيا مع الحوامل.سأحاول أن ننظر في هذا عندما أجد بعض الوقت.

enter image description here

لا تتردد في المساهمة من خلال التعليق وتقديم الاقتراحات!

هل كانت مفيدة؟

المحلول

  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/

نصائح أخرى

الحل الخاص بك هو رائع ولكن لا تظهر حامل اللون في قائمة الفئة أو الشبكة.هنا أضف الحل لإظهاره، تم اختباره على Magento 1.9.2.4.

في: التطبيق / التصميم / الواجهة الأمامية / المخصص / المخصص / النموذج / الكتالوج / المنتج إضافة خط متبوعة في list.phtml

1 - أولا أن تظهر في عرض القائمة، والتحقق مما إذا كان هناك هذا، إذا لم يكن هناك، تحديث o تغيير (خط Aroud 39): giveacodicetagpre.

في البديل يمكن استخدام هذا: giveacodicetagpre.

ضبط تغيير حجم الصورة.

2 - بعد "getratingsummary"= نهاية PHP إذا كان=، حول السطر 53، أضف هذا: giveacodicetagpre.

3 - اجعل نفس التغيير في عرض Gird حول السطر 120 و 152.

4 - في نهاية الملف أضف هذا: giveacodicetagpre.

هذا كان مفيدا جدا!لدي بعض تفاصيل إضافية أن كنت قادرا على العمل من خلال الحصول على صورة التحول إلى العمل.

  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 (خط 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. إزالة /* صور المنتج */ من قسم الأساليب.css ملف (حول خطوط 783-803) ولصق في 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;
}

وأخيرا وليس آخرا, بعض التحسينات إلى elevateZoom بفضل جوجل و إيجاد منصب التالية في BelVG بلوق من قبل Mishel Soiko, كنت قادرا على تعديل و الاستفادة من المزيد من إعدادات elevateZoom مثل الداخلية التكبير أو تعويض من نافذة التكبير ، إلخ.أيضا أردت الصورة أن يكون المنبثقة fancybox عند النقر عليها ، أنا ممكن مع مساعدة من فوق المدونة أسفل في التعليقات.

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

    ملاحظة سوف تحتاج إلى أن يكون fancybox مكتبة js التحميل بعد مسج في الخاص page.xml أو في أي مكان في الموضوع الخاص بك

    وأخيرا تعديل ما هو الآن خط 1232 (إذا كنت فعلت كل pastings من فوق) من:

    image.elevateZoom();

    إلى:

    image.elevateZoom(settings);

للحصول على لمحة عامة عن جميع إعدادات المكبر ، راجع الصفحة الرسمية تصف elevateZoom الإعدادات

وينبغي الحصول على عمل.إذا كنت تعمل مع سمة مخصصة (كما كنت) قد يكون لديك المزيد من القيام به.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى magento.stackexchange
scroll top