การเปลี่ยนข้อความปุ่ม“ หยิบใส่ตะกร้า” ใน Magento 2.1.0 (การแทนที่ไฟล์ js)

ฉันเปลี่ยนข้อความ "ใส่ในรถเข็น" เป็น "ฉันต้องการสิ่งนี้" โดยแทนที่ " vendor\magento\module-catalog\view\frontend\templates\product\list.phtml"
แต่เมื่อฉันคลิกที่ปุ่ม "ฉันต้องการสิ่งนี้" (เช่น "เพิ่มในรถเข็น") สินค้าจะถูกเพิ่มลงในรถเข็นจากนั้นข้อความ "เพิ่มลงในรถเข็น" จะปรากฏบนปุ่ม

ฉันคิดว่าผลิตภัณฑ์ถูกเพิ่มเข้ามาผ่านการโทร ajax นั่นคือสาเหตุที่ข้อความที่เพิ่มใหม่ไม่แสดงหลังจากการโทร ajax และข้อความ "เพิ่มลงในตะกร้า" แสดงขึ้น

ฉันได้ลองสิ่งนี้แล้ว:

ฉันสร้างส่วนขยายที่กำหนดเองVed_Mymoduleแล้ว

ฉันตรวจสอบว่าส่วนขยายนั้นเปิดใช้งานอยู่

หลังจากนั้นฉันทำตามขั้นตอนเหล่านี้:

app / รหัส / Ved / MyModule / view / ส่วนหน้า / requirejs-config.js:

var config = {
    map: {
        '*': {
            catalogAddToCart:'Ved_Mymodule/js/customCatalogAddToCart'
        }
    }
};

app / รหัส / Ved / MyModule / view / ส่วนหน้า / เว็บ / js / customCatalogAddToCart.js:

define([
    'jquery',
    'mage/translate',
    'jquery/ui'
], function($, $t) {
    "use strict";

$.widget('Ved_Mymodule.customCatalogAddToCart',$.mage.catalogAddToCart, {

    //Override function
    disableAddToCartButton: function(form) {
        var addToCartButtonTextWhileAdding = this.options.addToCartButtonTextWhileAdding || $t('Adding...');
        var addToCartButton = $(form).find(this.options.addToCartButtonSelector);
        addToCartButton.addClass(this.options.addToCartButtonDisabledClass);
        addToCartButton.find('span').text(addToCartButtonTextWhileAdding);
        addToCartButton.attr('title', addToCartButtonTextWhileAdding);
        console.log('Hello 1');
    },

    enableAddToCartButton: function(form) {
        var addToCartButtonTextAdded = this.options.addToCartButtonTextAdded || $t('Added');
        var self = this,
            addToCartButton = $(form).find(this.options.addToCartButtonSelector);

        addToCartButton.find('span').text(addToCartButtonTextAdded);
        addToCartButton.attr('title', addToCartButtonTextAdded);

        setTimeout(function() {
            var addToCartButtonTextDefault = 'heya..'; //self.options.addToCartButtonTextDefault || $t('Add to Cart..');
            addToCartButton.removeClass(self.options.addToCartButtonDisabledClass);
            addToCartButton.find('span').text(addToCartButtonTextDefault);
            addToCartButton.attr('title', addToCartButtonTextDefault);
        }, 1000);

        console.log('Hello 2');
    }

});

return $.Ved_Mymodule.customCatalogAddToCart;
});

ฉันพยายามพิมพ์ข้อความจำลองในคอนโซล

หลังจากนี้: ฉันได้เรียกใช้การปรับใช้เนื้อหาแบบคงที่ สร้างดัชนีข้อมูลอีกครั้ง แคชทำความสะอาดและล้างออก

แต่การเปลี่ยนแปลงไม่ปรากฏขึ้น

คุณต้องแทนที่ไฟล์ js จากพา ธ

vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js  

ถึง

app/design/frontend/YourTheme/Packadge/Magento_Catalog/web/js/catalog-add-to-cart.js

คุณต้องเปลี่ยนข้อความที่คุณต้องการจากไฟล์นี้

แจ้งให้เราทราบหากคุณมีข้อสงสัยใด ๆ

คุณต้องลบล้าง catalog-add-to-cart.js จากพา ธ

vendor/magento/module-catalog/view/frontend/web/js

ข้อความกำลังเปลี่ยนจากที่นี่หลังจากโทร ajax คุณสามารถเปลี่ยนข้อความได้ที่นี่

ข้อความที่เปลี่ยนแปลงโดย Javascript หลังจากการโทร Ajax เราสามารถดู:

ผู้ขาย / วีโอไอพี / โมดูลแคตตาล็อก / view / ส่วนหน้า / เว็บ / js / แคตตาล็อกเพิ่มการ cart.js

สำหรับแนวทางปฏิบัติที่ดีที่สุดควรใช้mixinsสำหรับ "การเอาชนะ":

เราสามารถสร้างโมดูลแล้วเพิ่มไฟล์เหล่านี้:

app / รหัส / ผู้ขาย / โมดูล / view / ส่วนหน้า / requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Catalog/js/catalog-add-to-cart': {
                'Vendor_Module/js/catalog-add-to-cart-mixin': true
            }
        }
    }
};

app / รหัส / ผู้ขาย / โมดูล / view / ส่วนหน้า / เว็บ / js / แคตตาล็อกเพิ่มไปยังรถเข็น mixin.js

define([
        'jquery',
        'mage/translate',
        'jquery/ui'
    ],
    function ($, $t) {
        'use strict';

        return function (target) {
            $.widget('mage.catalogAddToCart', target, {
                options: {
                    addToCartButtonTextWhileAdding: $t('Adding Testing...'),
                    addToCartButtonTextAdded: $t('Added Testing'),
                    addToCartButtonTextDefault: $t('Add to Cart Testing')
                }
            });

            return $.mage.catalogAddToCart;
        };
    });

หมายเหตุ:ด้านล่างได้รับการทดสอบใน 2.1.7

การเอาชนะไฟล์หลักใด ๆ ถือเป็นการปฏิบัติที่ไม่ดี

คุณสามารถส่งพารามิเตอร์ไปยังฟังก์ชัน catalogAddToCart ซึ่งสามารถพบได้ที่ด้านล่างของ list.phtml

หากคุณดู (อย่าแก้ไขหรือคัดลอก) ที่ไฟล์ catalog-add-to-cart.js คุณจะเห็นว่ามันยอมรับพารามิเตอร์

ผู้ขาย / วีโอไอพี / โมดูลแคตตาล็อก / view / ส่วนหน้า / เว็บ / js / แคตตาล็อกเพิ่มการ cart.js

options: {
    processStart: null,
    processStop: null,
    bindSubmit: true,
    minicartSelector: '[data-block="minicart"]',
    messagesSelector: '[data-placeholder="messages"]',
    productStatusSelector: '.stock.available',
    addToCartButtonSelector: '.action.tocart',
    addToCartButtonDisabledClass: 'disabled',
    addToCartButtonTextWhileAdding: '',
    addToCartButtonTextAdded: '',
    addToCartButtonTextDefault: ''
},

ถัดไปเปิด list.phtml ภายในธีมของคุณ

app / ออกแบบ / ส่วนหน้า / Namespace ธีม / / Magento_Catalog / แม่แบบ / สินค้า / list.phtml

ที่ด้านล่างของหน้าคุณจะพบ

<?php if (!$block->isRedirectToCartEnabled()) : ?>
    <script type="text/x-magento-init">
    {
        "[data-role=tocart-form], .form.map.checkout": {
            "catalogAddToCart": {}
            }
        }
    </script>
<?php endif; ?>

เพียงเพิ่มพารามิเตอร์ในฟังก์ชัน ...

<?php if (!$block->isRedirectToCartEnabled()) : ?>
    <script type="text/x-magento-init">
    {
        "[data-role=tocart-form], .form.map.checkout": {
            "catalogAddToCart": {
                "addToCartButtonTextDefault" : "<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>"
            }
        }
    }
    </script>
<?php endif; ?>

ในกรณีของฉันฉันได้เพิ่มการแปลสำหรับ 'ใส่ในรถเข็น' ภายในen_GB.csvแต่สิ่งนี้อาจไม่เหมาะกับวัตถุประสงค์ของคุณดังนั้นไปข้างหน้าและแก้ไขได้โดยตรงที่นี่

โปรดลองสิ่งนี้ ... ในการแปลข้อความ "เพิ่มลงในรถเข็น", "กำลังเพิ่ม ... " และ "เพิ่ม" โดยการตอบสนอง json ทำตามขั้นตอนด้านล่าง

ขั้นตอนที่ 1: สำหรับความต้องการการเปลี่ยนแปลงในหน้ารายการผลิตภัณฑ์ ไปที่แอพพา ธ ไฟล์ / ออกแบบ / ส่วนหน้า / Your_Theme_Namespace / Theme_Name / Magento_Catalog / แม่แบบ / ผลิตภัณฑ์ / list.phtml และแทนที่รหัสด้านล่างในบรรทัดที่ประมาณ 121

<script type="text/x-magento-init">
{
    "[data-role=tocart-form], .form.map.checkout": {
        "catalogAddToCart": {
            "product_sku": "<?php /* @escapeNotVerified */  echo $_product->getSku() ?>",
            "addToCartButtonTextDefault": "<?php echo __('Add to Cart'); ?>",
            "addToCartButtonTextWhileAdding": "<?php echo __('Adding...'); ?>",
            "addToCartButtonTextAdded": "<?php echo __('Added'); ?>"
        }
    }
 }
</script>

ขั้นตอนที่ 2: สำหรับการเปลี่ยนแปลงจำเป็นต้องมีหน้ามุมมองผลิตภัณฑ์ ไปที่แอพพา ธ ไฟล์ / ออกแบบ / ส่วนหน้า / Your_Theme_Namespace / Theme_Name / Magento_Catalog / แม่แบบ / ผลิตภัณฑ์ / ดู / addtocart.phtml และแทนที่รหัสในบรรทัดที่ประมาณ 54

 <script>
    require([
        'jquery',
        'mage/mage',
        'Magento_Catalog/product/view/validation',
        'Magento_Catalog/js/catalog-add-to-cart'
    ], function ($) {
        'use strict';
        $('#product_addtocart_form').mage('validation', {
            radioCheckboxClosest: '.nested',
            submitHandler: function (form) {
                var widget = $(form).catalogAddToCart({
                    bindSubmit: false,
                    "addToCartButtonTextDefault": "<?php echo __('Add to Cart'); ?>",
                    "addToCartButtonTextWhileAdding": "<?php echo __('Adding...'); ?>",
                    "addToCartButtonTextAdded": "<?php echo __('Added'); ?>"
                });

                widget.catalogAddToCart('submitForm', $(form));

                return false;
            }
        });
    });
</script>

เรียกใช้คำสั่งด้านล่าง:

1. การตั้งค่า php bin / magento: เนื้อหาคงที่: ปรับใช้ en_US ja_JP zh_Hans_CN

2. php bin / magento cache: flush ฉันได้ลองแล้วมันใช้งานได้สำหรับฉัน

คุณสามารถขยายแคตาล็อกให้ใส่ในรถเข็นแทนการแทนที่ไฟล์ทั้งหมด สิ่งนี้จะช่วยให้คุณสามารถแทนที่ฟังก์ชั่นบางอย่างและเพิ่มตัวเลือกที่กำหนดเองเพื่อให้เหมาะกับความต้องการของคุณ - ดูเหมือนว่าคุณต้องการทำสิ่งนี้

นี่เป็นวิธีที่ดีกว่าเพราะใช้ฟังก์ชั่นดั้งเดิมจากนั้นคุณเปลี่ยนสิ่งที่คุณต้องการแทนที่จะคัดลอกทุกอย่าง

เพียงให้แน่ใจว่าจะต้องใช้มันในแคตตาล็อกที่กำหนดเองของคุณเพิ่มในรถเข็น JS ดังแสดงในตัวอย่างนี้

requirejs-config.js

var config = {
    map: {
        '*': {
            catalogAddToCart:'Ved_Mymodule/js/customCatalogAddToCart'
        }
    }
};

customCatalogAddToCart.js

define([
    'jquery',
    'mage/translate',
    'jquery/ui',
    'Magento_Catalog/js/catalog-add-to-cart' // Important, require the original!
], function($, $t) {
    'use strict';

    $.widget('Ved_Mymodule.catalogAddToCart', $.mage.catalogAddToCart, {
        options: {
            customOption: 'hello!'
        },

        enableAddToCartButton: function(form) {

            console.log('extended the original add to cart.');
            console.log('my new option', this.options.customOption);

        }
    });

    return $.Ved_Mymodule.catalogAddToCart;
});

ฉันใช้โซลูชันนี้เรียบร้อยแล้วในการแก้ไขรถเข็น JS หวังว่าจะช่วยได้!

การทำมันด้วยไฟล์ CSV เป็นวิธีที่ดีที่สุดและง่ายที่สุดใน Magento 2!

1. สร้างโฟลเดอร์i18nในโมดูลที่กำหนดเองของคุณเป็น:

   app / รหัส / ผู้ขาย / โมดูล / i18n

2. สร้างไฟล์en_US.csvที่นี่ และเขียนป้ายกำกับที่คุณต้องการเปลี่ยนเป็น:

   "Add to Cart","Custom Label"

คุณสามารถเปลี่ยนป้ายกำกับจำนวนค่อนข้างดีด้วยวิธีนี้เช่น:

"Add to Cart","Add to Order"
"Go to Checkout","Complete Order"
"Shopping Cart","Current Order"
"Proceed to Checkout","Proceed to Confirm"
"Summary","Details"
"Estimate Shipping and Tax","Aproximate Sum"
"You added %1 to your shopping cart.","Successfully added %1 to your current order."
"Add Your Review","Add Review"

ดีที่เห็นคำตอบอื่น :)