วิธีการเขียนฟังก์ชั่นวิดเจ็ตใหม่ด้วย mixins Magento 2.1.1


17

เรามี swatch-renderer.js

ในไฟล์นี้มีวิดเจ็ตบางส่วน

....
    $.widget('mage.SwatchRenderer', {
....

    /**
     * @private
     */
    _init: function () {
        if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '') {
            this._sortAttributes();
            this._RenderControls();
        } else {
            console.log('SwatchRenderer: No input data received');
        }
    },

    /**
     * @private
     */
    _sortAttributes: function () {
        this.options.jsonConfig.attributes = _.sortBy(this.options.jsonConfig.attributes, function (attribute) {
            return attribute.position;
        });
    },

ฉันต้องการเขียนหน้าที่บางอย่างของมันใหม่

วิธีที่เหมาะสมทำอย่างไร?

คำอธิบายในไลบรารีวีโอไอพีนั้นไม่ได้เกิดขึ้นจริงอีกต่อไปพวกมันเชื่อมโยงกับชั้นเรียนที่ใช้วิธีการอื่น (ฉันกำลังพูดถึง place-order.js / place-order-mixin.js) และตัวอย่างที่อธิบายไม่ได้อธิบายวิธีการเขียนฟังก์ชั่นวิดเจ็ต

คำตอบ:


38

requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Swatches/js/swatch-renderer': {
                'path/to/your/mixin': true
            }
        }
    }
};

path / to / / mixin.js ของคุณ

define([
    'jquery'
], function ($) {
    'use strict';

    return function (widget) {

        $.widget('mage.SwatchRenderer', widget, {
            _Rebuild: function () {
                console.log('Hello from rebuild', arguments);
                return this._super();
            }
        });

        return $.mage.SwatchRenderer;
    }
});

3

แก้ไข: คำตอบของฉันไม่ได้ใช้ mixins เพื่อความรู้ของฉัน mixins ทำงานเฉพาะวิธีการเขียนและคุณสมบัติ ในกรณีของคุณมันคือ JS บริสุทธิ์ที่ถูกเรียกโดยตรงนอกเมธอด

คุณสามารถทำได้ผ่านโมดูล

ในVendor/Module/view/frontend/requirejs-config.jsคุณสามารถเพิ่มต่อไปนี้:

var config = {
    map: {
        '*': {
            'Magento_Swatches/js/swatch-renderer':'Vendor_Module/js/swatch-renderer'
        }
    }
};

จากนั้นคุณสามารถสร้างVendor/Module/view/frontend/web/js/swatch-renderer.jsไฟล์โดยคัดลอกswatch-renderer.jsไฟล์ต้นฉบับและแก้ไขเนื้อหาตามสิ่งที่คุณต้องการทำ


ราฟาเอลขอโทษที่ไม่ตอบสนองเป็นเวลานาน ไม่มีเวลาว่าง ในคำอื่น ๆ ไม่มีวิธีที่เหมาะสมในการเขียนวิธีการเครื่องมือ? เขียนใหม่แบบเต็มสมบูรณ์เท่านั้น ฉันหมายความว่าหาก magento อัปเดตไฟล์ที่มีอยู่ - เราจะต้องอัปเดตการเขียนใหม่ของเรา
zhartaunik

@zhartaunik เป็นไปได้ทั้งหมดที่จะเขียนวิธีการใช้ widget โดยใช้มิกซ์อิน ปัญหาในกรณีของคุณคือไฟล์ swatch-renderer ไม่มีวิธีการใด ๆ มันเป็นหนึ่งสคริปต์เดียว เพราะการที่เราไม่สามารถใช้มิกซ์อินได้จึงต้องเขียนใหม่ทั้งหมด AFAIK เป็นวิธีเดียวที่จะทำได้
Raphael at Digital Pianism

@RaphaelatDigitalPianism ฉันเพิ่งพยายามทำสิ่งเดียวกับที่คุณอธิบาย แต่ได้รับอย่างต่อเนื่องUncaught TypeError: base is not a constructor- ความคิดใด ๆ ทำไม? ขอบคุณ
Tom Burman

คุณควรจะสามารถที่จะเขียนSwatchRendererเครื่องมือที่มีฟังก์ชั่น mixin เพราะที่ผ่านมามีที่สิ้นสุดdefine return $.mage.SwatchRenderer;ผมไม่ทราบว่าเกี่ยวกับเครื่องมืออื่น ๆ SwatchRendererTooltipที่กำหนดไว้ในไฟล์เดียวกัน
ปิดบัง
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.