Modifica del testo del pulsante "Aggiungi al carrello" in Magento 2.1.0 (Sostituzione del file js)


13


Ho modificato il testo "Aggiungi al carrello" in "Voglio questo" sostituendo " vendor\magento\module-catalog\view\frontend\templates\product\list.phtml".
Ma quando faccio clic sul pulsante "Lo voglio" (ovvero "Aggiungi al carrello"), il prodotto viene aggiunto al carrello e quindi di nuovo il testo "Aggiungi al carrello" appare sul pulsante.

Penso che il prodotto venga aggiunto tramite una chiamata Ajax, ecco perché un testo appena aggiunto non viene visualizzato dopo la chiamata Ajax e viene visualizzato il testo "Aggiungi al carrello".

Ho provato questo:

Ho creato un'estensione personalizzata Ved_Mymodule .

Ho verificato che l'estensione è attiva.

Successivamente ho seguito questi passaggi:

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

Sto cercando di stampare messaggi fittizi nella console.

Dopo questo: ho eseguito la distribuzione di contenuti statici. Reindicizza i dati. Cache pulita e lavata.

Ma i cambiamenti non stanno comparendo.


Si prega di rinominare requirejs-config.jse correggere la posizione app/code/Ved/Mymodule/view/frontend/requirejs-config.js.
Khoa TruongDinh

Le modifiche vengono apportate come hai detto, ma non hanno ancora avuto successo. Ma se eseguo l'override tramite tema, allora funziona.
vedu,

Risposte:


10

Devi sovrascrivere il file js dal percorso

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

Per

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

Devi modificare il testo che desideri da questo file.

Fammi sapere se hai qualche domanda.


Grazie mille, ha funzionato. In precedenza, stavo cercando di sovrascriverlo utilizzando un modulo personalizzato (l'ho menzionato nella mia domanda) ma non ha funzionato. Copiando il file sul mio tema ha funzionato. Ma non dimenticare di eseguire il fuoco: php bin / magento setup: upgrade
vedu,

@Suresh Chikani perché js è meglio del traduttore di lingue?
Birjitsinh Zala,

Qualche volta il codice di traduzione CSV non funziona. In questo caso devi passare al testo JS.
Suresh Chikani,

7

devi sostituire, catalog-add-to-cart.js dal percorso,

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

Il testo sta cambiando da qui dopo una chiamata Ajax. puoi cambiare il testo qui.


6

Il testo è stato modificato da Javascript dopo la chiamata Ajax. Possiamo dare un'occhiata:

vendor / Magento / module-catalogo / view / frontend / web / js / catalogo-add-to-cart.js

Per la migliore pratica, utilizzare mixinsper "sostituzione":

Possiamo creare un modulo e quindi aggiungere questi file:

app / code / Venditore / modulo / immagine / frontend / requirejs-config.js

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

app / code / Venditore / modulo / view / frontend / web / js / catalogo-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;
        };
    });

Ho provato i tuoi passi ma non ho avuto successo. Ho modificato la mia domanda con il mio codice.
vedu,

1
@Khoa TruongDinh Perfect working.
Vithal Bariya,

Questo ha funzionato per me.
55840

2

Nota: il seguito è stato testato in 2.1.7


La sostituzione di qualsiasi file core è considerata una cattiva pratica.

È possibile semplicemente passare i parametri nella funzione catalogAddToCart che si trova nella parte inferiore di list.phtml

Se guardi (non modificare o copiare) il file catalog-add-to-cart.js vedrai che accetta i parametri.

vendor / Magento / module-catalogo / view / frontend / web / js / catalogo-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: ''
},

Successivamente apri list.phtml nel tuo tema

app / design / frontend / Namespace / tema / Magento_Catalog / modello / prodotto / list.phtml

Verso la fine della pagina troverai

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

Aggiungi semplicemente parametri alla funzione ...

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

Nel mio caso ho quindi aggiunto una traduzione per "Aggiungi al carrello" in en_GB.csv ma questo potrebbe non essere adatto al tuo scopo, quindi vai avanti e modificalo direttamente qui.


2

Per favore prova questo ... Per tradurre il testo di "Aggiungi al carrello", "Aggiungi ..." e "Aggiunto" dalla risposta json segui i passaggi seguenti.

Passaggio 1: per le modifiche è necessario nella pagina Elenco prodotti. Vai al percorso del file app / design / frontend / Your_Theme_Namespace / Theme_Name / Magento_Catalog / templates / product / list.phtml e sostituisci il codice sottostante on line attorno a 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>

Passaggio 2: per le modifiche è necessaria la pagina di visualizzazione del prodotto. Vai al percorso del file app / design / frontend / Your_Theme_Namespace / Theme_Name / Magento_Catalog / templates / product / view / addtocart.phtml e sostituisci il codice on line intorno a 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>

Esegui sotto i comandi:

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

  2. php bin / magento cache: flush Ho provato questo e funziona per me.


1

È possibile estendere l'aggiunta del catalogo al carrello anziché sovrascrivere l'intero file. Ciò ti consentirà di ignorare determinate funzioni e aggiungere opzioni personalizzate per soddisfare le tue esigenze: sembra che tu voglia farlo.

Questo è un approccio migliore in quanto utilizza la funzionalità originale e quindi cambia ciò di cui hai bisogno anziché copiare tutto.

Assicurati solo di richiederlo nel tuo catalogo personalizzato e aggiungi al carrello JS come mostrato in questo esempio.

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

Ho usato questa soluzione con successo per modificare il carrello JS, spero che questo aiuti!


0

Farlo con il file CSV è il modo migliore e più semplice in Magento 2!

  1. Crea la cartella i18n nel tuo modulo personalizzato come:

    app / code / Venditore / modulo / i18n

  2. Crea qui il file en_US.csv e scrivi Etichetta che desideri modificare come:

    "Add to Cart","Custom Label"

Puoi cambiare un buon numero di etichette in questo modo come:

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

Bello vedere altre risposte :)

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.