Zmiana tekstu przycisku „Dodaj do koszyka” w Magento 2.1.0 (przesłanianie pliku js)

Zmieniłem tekst „Dodaj do koszyka” na „Chcę to”, zastępując „ vendor\magento\module-catalog\view\frontend\templates\product\list.phtml”.
Ale kiedy kliknę przycisk „Chcę to” (tzn. „Dodaj do koszyka”), produkt zostanie dodany do koszyka, a następnie ponownie przycisk „Dodaj do koszyka” pojawi się na przycisku.

Myślę, że produkt jest dodawany poprzez wywołanie ajax, dlatego nowo dodany tekst nie wyświetla się po wywołaniu ajax i wyświetla się tekst „Dodaj do koszyka”.

Próbowałem tego:

Utworzyłem niestandardowe rozszerzenie Ved_Mymodule .

Sprawdziłem, czy rozszerzenie jest aktywne.

Następnie wykonałem następujące kroki:

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

Próbuję wydrukować fałszywe wiadomości w konsoli.

Następnie: uruchomiłem wdrażanie zawartości statycznej. Ponownie indeksuj dane. Pamięć podręczna wyczyszczona i opróżniona.

Ale zmiany się nie pojawiają.

Musisz zastąpić plik js ze ścieżki

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

Do

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

Musisz zmienić tekst, który chcesz z tego pliku.

Daj mi znać, jeśli masz jakieś zapytanie.

musisz zastąpić katalog z katalogu add-to-cart.js ze ścieżki,

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

Tekst zmienia się stąd po wywołaniu ajax. możesz zmienić tekst tutaj.

Tekst zmieniony przez Javascript po wywołaniu Ajax. Możemy spojrzeć:

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

Aby uzyskać najlepszą praktykę, należy użyć opcji mixins„zastępowania”:

Możemy stworzyć moduł, a następnie dodać te pliki:

app / code / Vendor / Module / view / frontend / Requjs-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;
        };
    });

Uwaga: poniżej przetestowano w 2.1.7

Przesłanianie podstawowych plików jest uważane za złą praktykę.

Możesz po prostu przekazać parametry do funkcji catalogAddToCart, która znajduje się na dole list.phtml

Jeśli spojrzysz (nie edytujesz ani nie kopiujesz) na plik catalog-add-to-cart.js, zobaczysz, że akceptuje on parametry.

vendor / magento / module-catalogue / 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: ''
},

Następnie otwórz list.phtml w swoim motywie

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

W dolnej części strony znajdziesz

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

Po prostu dodaj parametry do funkcji ...

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

W moim przypadku dodałem tłumaczenie „Dodaj do koszyka” w pliku en_GB.csv, ale może to nie pasować do twojego celu, więc zrób to bezpośrednio tutaj.

Spróbuj tego ... Aby przetłumaczyć tekst odpowiedzi „Dodaj do koszyka”, „Dodawanie ...” i „Dodane” przez odpowiedź json, wykonaj poniższe czynności.

Krok 1: W celu wprowadzenia zmian na stronie Lista produktów. Przejdź do ścieżki pliku app / design / frontend / Your_Theme_Namespace / Theme_Name / Magento_Catalog / templates / product / list.phtml i zamień poniżej kodu w linii około 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>

Krok 2: Do zmian potrzebna jest strona podglądu produktu. Przejdź do ścieżki pliku app / design / frontend / Your_Theme_Namespace / Theme_Name / Magento_Catalog / templates / product / view / addtocart.phtml i zamień kod on-line około 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>

Uruchom poniższe polecenia:

1. konfiguracja php bin / magento: zawartość statyczna: wdrożyć en_US ja_JP zh_Hans_CN

2. php bin / magento cache: flush Próbuję tego i działa dla mnie.

Możesz rozszerzyć katalog dodając do koszyka zamiast nadpisywania całego pliku. Umożliwi to zastąpienie niektórych funkcji i dodanie niestandardowych opcji odpowiadających Twoim potrzebom - wygląda na to, że chcesz to zrobić.

Jest to lepsze podejście, ponieważ wykorzystuje oryginalną funkcjonalność, a następnie zmieniasz to, czego potrzebujesz, zamiast kopiować wszystko.

Upewnij się, że wymaga tego w niestandardowym katalogu dodaj do koszyka JS, jak pokazano w tym przykładzie.

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

Z powodzeniem zastosowałem to rozwiązanie do edycji koszyka JS, mam nadzieję, że to pomoże!

Wykonanie tego za pomocą pliku CSV jest najlepszym i najprostszym sposobem w Magento 2!

1. Utwórz folder i18n w niestandardowym module jako:

   app / code / Vendor / Module / i18n

2. Utwórz tutaj plik en_US.csv i napisz Etykietę , którą chcesz zmienić jako:

   "Add to Cart","Custom Label"

W ten sposób możesz zmienić całkiem niezłą liczbę etykiet:

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

Dobrze widzieć inne odpowiedzi :)