Cambio del texto del botón "Agregar al carrito" en Magento 2.1.0 (Anulación del archivo js)


13


He cambiado el texto "Agregar al carrito" a "Quiero esto" anulando " vendor\magento\module-catalog\view\frontend\templates\product\list.phtml".
Pero cuando hago clic en el botón "Quiero esto" (es decir, "Agregar al carrito"), el producto se agrega al carrito y luego aparece nuevamente el texto "Agregar al carrito" en el botón.

Creo que el producto se agrega a través de una llamada ajax, es por eso que un texto recién agregado no se muestra después de la llamada ajax y se muestra el texto "Agregar al carrito".

He intentado esto:

He creado una extensión personalizada Ved_Mymodule .

He comprobado que la extensión está activa.

Después de eso seguí estos pasos:

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

Estoy tratando de imprimir mensajes ficticios en la consola.

Después de esto: he ejecutado la implementación de contenido estático. Reindexar los datos. Caché limpiado y enjuagado.

Pero los cambios no están apareciendo.


Cambie el nombre requirejs-config.jsy corrija la ubicación app/code/Ved/Mymodule/view/frontend/requirejs-config.js.
Khoa TruongDinh

Los cambios se realizan como dijiste pero aún no hay éxito. Pero si anulo a través del tema, entonces está funcionando.
vedu

Respuestas:


10

Tienes que anular el archivo js de la ruta

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

A

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

Tiene que cambiar el texto que desea de este archivo.

Avísame si tienes alguna consulta.


Muchas gracias, funcionó. Anteriormente, estaba tratando de anularlo usando un módulo personalizado (lo he mencionado en mi pregunta) pero no funcionó. Al copiar el archivo a mi tema funcionó. Pero no olvide hacer fuego: configuración de bin bin / magento: actualización
vedu

@Suresh Chikani ¿por qué js es mejor que el traductor de idiomas?
Birjitsinh Zala

En algún momento, el código de traducción CSV no funciona. En este caso, debe cambiar a texto JS.
Suresh Chikani

7

necesita anular, catalog-add-to-cart.js de la ruta,

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

El texto está cambiando desde aquí después de la llamada ajax. Puedes cambiar el texto aquí.


6

El texto cambió por Javascript después de la llamada Ajax. Podemos echar un vistazo:

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

Para la mejor práctica, debe usar mixinspara "anular":

Podemos crear un módulo y luego agregar estos archivos:

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

Intenté tus pasos pero no obtuve ningún éxito. He editado mi pregunta con mi código.
vedu

1
@Khoa TruongDinh Perfecto trabajo.
Vithal Bariya

Esto me funcionó.
55840

2

Nota: lo siguiente ha sido probado en 2.1.7


Anular cualquier archivo principal se considera una mala práctica.

Simplemente puede pasar parámetros a la función catalogAddToCart que se puede encontrar en la parte inferior de list.phtml

Si observa (no edite ni copie) en el archivo catalog-add-to-cart.js, verá que acepta parámetros.

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: ''
},

A continuación, abra list.phtml dentro de su tema

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

Hacia la parte inferior de la página encontrarás

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

Simplemente agregue parámetros a la función ...

<?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 mi caso, luego agregué una traducción para 'Agregar al carrito' en en_GB.csv, pero puede que no sea adecuada para su propósito, así que continúe y edítela aquí directamente.


2

Intente esto ... Para traducir el texto de la respuesta "Agregar al carrito", "Agregar ..." y "Agregado" por json, siga los pasos a continuación.

Paso 1: para cambios necesarios en la página de lista de productos Vaya a la aplicación de ruta de archivo / design / frontend / Your_Theme_Namespace / Theme_Name / Magento_Catalog / templates / product / list.phtml y reemplace el siguiente código en línea alrededor de 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>

Paso 2: para cambios necesita la página de vista del producto Vaya a la aplicación de ruta de archivo / diseño / frontend / Your_Theme_Namespace / Theme_Name / Magento_Catalog / templates / product / view / addtocart.phtml y reemplace el código en línea alrededor de 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>

Ejecute los siguientes comandos:

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

  2. php bin / magento cache: flush He intentado esto y está funcionando para mí.


1

Puede extender el catálogo agregar al carrito en lugar de anular todo el archivo. Esto le permitirá anular ciertas funciones y agregar opciones personalizadas para satisfacer sus necesidades; parece que quiere hacer esto.

Este es un mejor enfoque, ya que utiliza la funcionalidad original y luego cambia lo que necesita en lugar de copiar todo.

Solo asegúrese de requerirlo dentro de su catálogo personalizado, agregue al carrito JS como se muestra en este ejemplo.

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

He usado esta solución con éxito para editar el carrito JS, ¡espero que esto ayude!


0

¡Hacerlo por archivo CSV es la mejor y más simple forma en Magento 2!

  1. Cree la carpeta i18n en su módulo personalizado como:

    aplicación / código / proveedor / módulo / i18n

  2. Cree aquí el archivo en_US.csv y escriba la etiqueta que desea cambiar como:

    "Add to Cart","Custom Label"

Puede cambiar un número bastante bueno de etiquetas de esta manera como:

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

Es bueno ver otras respuestas :)

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.