Mengubah teks tombol “Tambahkan ke troli” di Magento 2.1.0 (Mengganti file js)

Saya telah mengubah teks "Tambahkan ke troli" menjadi "Saya ingin ini" dengan menimpa " vendor\magento\module-catalog\view\frontend\templates\product\list.phtml".
Tetapi, ketika saya mengklik tombol "Saya ingin ini" (yaitu "Tambahkan ke troli"), produk ditambahkan ke troli dan kemudian lagi "Tambahkan ke troli" teks muncul pada tombol.

Saya pikir produk ditambahkan melalui panggilan ajax, itu sebabnya teks yang baru ditambahkan tidak muncul setelah panggilan ajax dan teks "Tambahkan ke troli" ditampilkan.

Saya sudah mencoba ini:

Saya telah membuat ekstensi khusus Ved_Mymodule .

Saya telah memeriksa ekstensi yang aktif.

Setelah itu saya ikuti langkah-langkah ini:

app / code / Ved / Mymodule / view / frontend / requireejs-config.js:

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

app / code / Ved / Mymodule / view / frontend / web / 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;
});

Saya mencoba mencetak pesan tiruan di konsol.

Setelah ini: Saya telah menjalankan penyebaran konten statis. Reindex data. Cache dibersihkan dan disiram.

Tetapi perubahan tidak muncul.

Anda harus mengganti file js dari path

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

Untuk

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

Anda harus mengubah teks yang Anda inginkan dari file ini.

Beri tahu saya jika Anda memiliki pertanyaan.

Anda perlu mengganti, katalog-tambahkan-ke-cart.js dari path,

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

Teks berubah dari sini setelah panggilan ajax. Anda dapat mengubah teks di sini.

Teks diubah oleh Javascript setelah panggilan Ajax. Kita bisa melihatnya:

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

Untuk praktik terbaik, sebaiknya gunakan mixinsuntuk "mengganti":

Kita dapat membuat modul, dan kemudian menambahkan file-file ini:

app / code / Vendor / Module / view / frontend / requireejs-config.js

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

app / code / Vendor / Module / view / frontend / web / js / catalog-add-to-cart-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;
        };
    });

Catatan: di bawah ini telah diuji di 2.1.7

Meng-override file inti dianggap praktik buruk.

Anda cukup mengirimkan parameter ke fungsi catalogAddToCart yang dapat ditemukan di bagian bawah list.phtml

Jika Anda melihat (jangan mengedit atau menyalin) pada file catalog-add-to-cart.js Anda akan melihat bahwa ia menerima parameter.

vendor / magento / module-catalog / view / frontend / web / js / catalog-add-to-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: ''
},

Selanjutnya buka list.phtml di dalam tema Anda

app / design / frontend / Namespace / theme / Magento_Catalog / template / produk / list.phtml

Ke bagian bawah halaman Anda akan menemukan

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

Cukup tambahkan parameter ke fungsi ...

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

Dalam kasus saya, saya kemudian menambahkan terjemahan untuk 'Tambahkan ke Troli' dalam en_GB.csv tetapi ini mungkin tidak sesuai untuk tujuan Anda jadi silakan mengeditnya di sini secara langsung.

Silakan coba ini ... Untuk menerjemahkan teks dari "Tambahkan ke troli", "Menambahkan ..." dan "Ditambahkan" oleh json, ikuti langkah-langkah di bawah ini.

Langkah 1: Untuk Perubahan perlu di halaman Daftar produk. Buka file path app / design / frontend / Your_Theme_Namespace / Theme_Name / Magento_Catalog / templates / product / list.phtml dan ganti kode di bawah ini secara online sekitar 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>

Langkah 2: Untuk perubahan perlu halaman tampilan Produk. Buka file path app / design / frontend / Your_Theme_Namespace / Theme_Name / Magento_Catalog / templates / product / view / addtocart.phtml dan ganti kode on line sekitar 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>

Jalankan perintah di bawah ini:

1. setup php bin / magento: static-content: deploy en_US ja_JP zh_Hans_CN

2. php bin / magento cache: flush Saya telah mencoba ini dan ini berfungsi untuk saya.

Anda dapat memperluas katalog tambah ke keranjang alih-alih mengganti seluruh file. Ini akan memungkinkan Anda untuk menimpa fungsi tertentu dan menambahkan opsi khusus yang sesuai dengan kebutuhan Anda - sepertinya Anda ingin melakukan ini.

Ini adalah pendekatan yang lebih baik karena menggunakan fungsi asli dan kemudian Anda mengubah apa yang Anda butuhkan daripada menyalin semuanya.

Pastikan untuk mengharuskannya di katalog khusus Anda, tambahkan ke keranjang JS seperti yang ditunjukkan dalam contoh ini.

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

Saya telah menggunakan solusi ini dengan sukses untuk mengedit keranjang JS, semoga ini membantu!

Melakukannya dengan file CSV adalah cara terbaik dan paling sederhana di Magento 2!

1. Buat folder i18n di modul khusus Anda sebagai:

   app / code / Vendor / Module / i18n

2. Buat di sini file en_US.csv dan tulis Label yang ingin Anda ubah sebagai:

   "Add to Cart","Custom Label"

Anda dapat mengubah jumlah label yang cukup baik dengan cara ini seperti:

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

Bagus melihat jawaban lain :)