Thay đổi văn bản Thêm vào giỏ hàng Văn bản nút nút trong Magento 2.1.0 (Ghi đè tệp js)


13


Tôi đã thay đổi văn bản "Thêm vào giỏ hàng" thành "Tôi muốn điều này" bằng cách ghi đè " vendor\magento\module-catalog\view\frontend\templates\product\list.phtml".
Nhưng, khi tôi nhấp vào nút "Tôi muốn cái này" (tức là "Thêm vào giỏ hàng"), sản phẩm được thêm vào giỏ hàng và sau đó lại xuất hiện dòng chữ "Thêm vào giỏ hàng" trên nút.

Tôi nghĩ rằng sản phẩm được thêm thông qua cuộc gọi ajax, đó là lý do tại sao một văn bản mới được thêm vào không hiển thị sau khi cuộc gọi ajax và văn bản "Thêm vào giỏ hàng" được hiển thị.

Tôi đã thử điều này:

Tôi đã tạo một phần mở rộng tùy chỉnh Ved_Mymodule .

Tôi đã kiểm tra rằng phần mở rộng đang hoạt động.

Sau đó tôi làm theo các bước sau:

ứng dụng / mã / Ved / Mymodule / view / frontend / allowjs-config.js:

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

ứng dụng / mã / 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;
});

Tôi đang cố gắng để in tin nhắn giả trong bảng điều khiển.

Sau này: Tôi đã chạy triển khai nội dung tĩnh. Reindex dữ liệu. Cache được làm sạch và tuôn ra.

Nhưng những thay đổi không xuất hiện.


Vui lòng đổi tên requirejs-config.jsvà sửa vị trí app/code/Ved/Mymodule/view/frontend/requirejs-config.js.
Khoa TruongDinh

Thay đổi được thực hiện như bạn nói nhưng vẫn không thành công. Nhưng nếu tôi ghi đè qua chủ đề thì nó đang hoạt động.
vedu

Câu trả lời:


10

Bạn phải ghi đè tệp js từ đường dẫn

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

Đến

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

Bạn phải thay đổi văn bản mà bạn muốn từ tập tin này.

Hãy cho tôi biết nếu bạn có bất kỳ câu hỏi.


Cảm ơn bạn rất nhiều, nó đã làm việc. Trước đây, tôi đã cố gắng ghi đè nó bằng cách sử dụng một mô-đun tùy chỉnh (tôi đã đề cập đến nó trong câu hỏi của tôi) nhưng nó không hoạt động. Bằng cách sao chép tập tin vào chủ đề của tôi, nó đã làm việc. Nhưng đừng quên thực hiện: cài đặt php bin / magento: nâng cấp
vedu

@Suresh Chikani tại sao js tốt hơn dịch ngôn ngữ?
Birjitsinh Zala

Đôi khi mã CSV dịch không hoạt động. Trong trường hợp này, bạn phải thay đổi thành văn bản JS.
Suresh Chikani

7

bạn cần ghi đè, danh mục-add-to-cart.js từ đường dẫn,

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

Văn bản đang thay đổi từ đây sau cuộc gọi ajax. bạn có thể thay đổi văn bản ở đây.


6

Văn bản đã thay đổi bởi Javascript sau cuộc gọi Ajax. Chúng ta có thể xem:

nhà cung cấp / magento / module-catalog / view / frontend / web / js / catalog-add-to-cart.js

Để thực hành tốt nhất, nên sử dụng mixinscho "ghi đè":

Chúng tôi có thể tạo một mô-đun, sau đó thêm các tệp này:

ứng dụng / mã / Nhà cung cấp / Mô-đun / chế độ xem / frontend / allowjs-config.js

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

ứng dụng / mã / Nhà cung cấp / Mô-đun / xem / 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;
        };
    });

Tôi đã thử các bước của bạn nhưng không nhận được bất kỳ thành công. Tôi đã chỉnh sửa câu hỏi của tôi với mã của tôi.
vedu

1
@Khoa TruongDinh Làm việc hoàn hảo.
Vithal Bariya

Điều này được làm việc cho tôi.
55840

2

Lưu ý: dưới đây đã được thử nghiệm trong 2.1.7


Ghi đè bất kỳ tập tin cốt lõi được coi là thực hành xấu.

Bạn chỉ có thể truyền tham số vào hàm catalogAddToCart có thể được tìm thấy ở cuối danh sách.

Nếu bạn nhìn (không chỉnh sửa hoặc sao chép) vào tệp danh mục-add-to-cart.js, bạn sẽ thấy rằng nó chấp nhận các tham số.

nhà cung cấp / 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: ''
},

Tiếp theo mở list.phtml trong chủ đề của bạn

ứng dụng / thiết kế / frontend / Namespace / theme / Magento_Catalog / template / sản phẩm / list.phtml

Về phía dưới cùng của trang bạn sẽ tìm thấy

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

Chỉ cần thêm tham số cho hàm ...

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

Trong trường hợp của tôi, sau đó tôi đã thêm một bản dịch cho 'Thêm vào giỏ hàng' trong en_GB.csv nhưng điều này có thể không phù hợp với mục đích của bạn, vì vậy hãy tiếp tục và chỉnh sửa trực tiếp tại đây.


2

Vui lòng thử điều này ... Để dịch văn bản của "Thêm vào giỏ hàng", "Thêm ..." và "Đã thêm" bằng phản hồi json, hãy làm theo các bước dưới đây.

Bước 1: Để thay đổi cần trong trang danh sách sản phẩm. Đi tới ứng dụng đường dẫn tệp / thiết kế / frontend / Your_Theme_Namespace / Theme_Name / Magento_Catalog / samples / sản phẩm / list.phtml và thay thế mã bên dưới trên dòng khoảng 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>

Bước 2: Để thay đổi cần trang Xem sản phẩm. Đi tới ứng dụng đường dẫn tệp / thiết kế / frontend / Your_Theme_Namespace / Theme_Name / Magento_Catalog / samples / sản phẩm / view / addtocart.phtml và thay thế mã trên dòng khoảng 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>

Chạy các lệnh dưới đây:

  1. Thiết lập php bin / magento: static-content: triển khai en_US ja_JP zh_Hans_CN

  2. php bin / magento cache: flush Tôi đã thử cái này và nó hoạt động với tôi.


1

Bạn có thể mở rộng danh mục thêm vào giỏ hàng thay vì ghi đè toàn bộ tệp. Điều này sẽ cho phép bạn ghi đè một số chức năng nhất định và thêm vào các tùy chọn tùy chỉnh cho phù hợp với nhu cầu của bạn - có vẻ như bạn muốn làm điều này.

Đây là một cách tiếp cận tốt hơn vì nó sử dụng chức năng ban đầu và sau đó bạn thay đổi những gì bạn cần thay vì sao chép mọi thứ.

Chỉ cần đảm bảo yêu cầu nó trong danh mục tùy chỉnh của bạn thêm vào giỏ hàng JS như trong ví dụ này.

Yêu cầu-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;
});

Tôi đã sử dụng giải pháp này thành công để chỉnh sửa giỏ hàng JS, hy vọng điều này sẽ giúp!


0

Làm điều đó bằng tệp CSV là cách tốt nhất và đơn giản nhất trong Magento 2!

  1. Tạo thư mục i18n trong mô-đun tùy chỉnh của bạn như:

    ứng dụng / mã / Nhà cung cấp / Mô-đun / i18n

  2. Tạo ở đây tệp en_US.csv và viết Nhãn mà bạn muốn thay đổi là:

    "Add to Cart","Custom Label"

Bạn có thể thay đổi số lượng nhãn khá tốt bằng cách này như sau:

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

Thật tốt khi thấy câu trả lời khác :)

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.