Magento 2.1.0에서“장바구니에 추가”버튼 텍스트 변경 (js 파일 재정의)


13


""를 재정 의하여 "장바구니에 추가"텍스트를 "원합니다 vendor\magento\module-catalog\view\frontend\templates\product\list.phtml"로 변경했습니다.
그러나 "I want this"(예 : "장바구니에 추가") 버튼을 클릭하면 제품이 카트에 추가 된 다음 다시 "장바구니에 추가"텍스트가 버튼에 나타납니다.

나는 제품이 아약스 호출을 통해 추가되었다고 생각한다. 그것이 아약스 호출과 "장바구니에 추가"텍스트가 표시된 후에 새로 추가 된 텍스트가 표시되지 않는 이유이다.

나는 이것을 시도했다 :

사용자 지정 확장명 Ved_Mymodule 을 만들었습니다 .

확장 프로그램이 활성화되어 있는지 확인했습니다.

그 후 나는 다음 단계를 따랐다.

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

콘솔에서 더미 메시지를 인쇄하려고합니다.

이 후 : 정적 콘텐츠 배포를 실행했습니다. 데이터를 다시 색인화하십시오. 캐시를 청소하고 플러시했습니다.

그러나 변화는 나타나지 않습니다.


이름을 바꾸고 requirejs-config.js위치를 수정하십시오 app/code/Ved/Mymodule/view/frontend/requirejs-config.js.
Khoa TruongDinh

말한대로 변경되었지만 여전히 성공하지는 않습니다. 그러나 테마를 통해 재정의하면 작동합니다.
vedu

답변:


10

경로에서 js 파일을 재정의해야합니다

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

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

이 파일에서 원하는 텍스트를 변경해야합니다.

문의 사항이 있으면 알려주세요.


대단히 감사합니다. 효과가있었습니다. 이전에는 사용자 정의 모듈을 사용하여 재정의하려고했지만 (내 질문에 언급 했음) 작동하지 않았습니다. 내 테마로 파일을 복사하면 효과가있었습니다. 그러나 화재를 잊지 마십시오 : PHP bin / magento setup : upgrade
vedu

@Suresh Chikani 왜 JS가 언어 번역기보다 나은가요?
Birjitsinh Zala

CSV 변환 코드가 작동하지 않는 경우가 있습니다. 이 경우 JS 텍스트로 변경해야합니다.
Suresh Chikani

7

경로에서 catalog-add-to-cart.js를 재정의해야합니다.

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

아약스 호출 후 텍스트가 여기에서 변경됩니다. 여기에서 텍스트를 변경할 수 있습니다.


6

Ajax 호출 후 텍스트가 Javascript로 변경되었습니다. 우리는 볼 수 있습니다 :

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

모범 사례를 mixins위해 "재정의"에 사용해야 합니다.

모듈을 만든 다음 다음 파일을 추가 할 수 있습니다.

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

나는 당신의 단계를 시도했지만 성공하지 못했습니다. 코드로 질문을 편집했습니다.
vedu

1
@Khoa TruongDinh 완벽한 작업.
Vithal Bariya

이것은 나를 위해 일했습니다.
55840

2

참고 : 아래는 2.1.7에서 테스트되었습니다.


핵심 파일을 재정의하는 것은 나쁜 습관으로 간주됩니다.

list.phtml의 맨 아래에있는 catalogAddToCart 함수에 매개 변수를 전달할 수 있습니다.

catalog-add-to-cart.js 파일 을 보면 (편집 또는 복사하지 않음) 파일이 매개 변수를 허용 함을 알 수 있습니다.

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

테마 내에서 열린 다음 list.phtml

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

페이지 하단으로

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

함수에 매개 변수를 추가하기 만하면됩니다 ...

<?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_GB.csv에 '장바구니에 추가'에 대한 번역을 추가 했지만 이것은 귀하의 목적에 맞지 않을 수 있으므로 여기에서 직접 편집하십시오.


2

json 응답으로 "장바구니에 추가", "추가 중 ..."및 "추가 된"텍스트를 번역하려면 다음 단계를 따르십시오.

1 단계 : 제품 목록 페이지에서 변경 사항이 필요한 경우 app / design / frontend / Your_Theme_Namespace / Theme_Name / Magento_Catalog / templates / product / list.phtml 파일 경로로 이동하여 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>

2 단계 : 변경하려면 제품보기 페이지가 필요합니다. app / design / frontend / Your_Theme_Namespace / Theme_Name / Magento_Catalog / templates / product / view / addtocart.phtml 파일 경로로 이동하여 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>

아래 명령을 실행하십시오.

  1. PHP bin / magento 설정 : 정적 내용 : deploy en_US ja_JP zh_Hans_CN

  2. php bin / magento cache : flush 나는 이것을 시도했고 그것은 나를 위해 일하고있다.


1

전체 파일을 재정의하는 대신 카탈로그 추가를 장바구니에 확장 할 수 있습니다. 이를 통해 특정 기능을 재정의하고 필요에 따라 사용자 정의 옵션을 추가 할 수 있습니다.

이것은 원래 기능을 사용하고 모든 것을 복사하는 대신 필요한 것을 변경하기 때문에 더 나은 방법입니다.

이 예제에 표시된대로 사용자 정의 카탈로그 내에서 장바구니 JS에 추가해야합니다.

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

이 솔루션을 성공적으로 사용하여 장바구니 JS를 편집했습니다. 도움이 되길 바랍니다.


0

CSV 파일로 작업하는 것이 Magento 2에서 가장 쉽고 간단한 방법입니다!

  1. 다음 과 같이 사용자 정의 모듈에서 i18n 폴더를 작성하십시오 .

    앱 / 코드 / 공급 업체 / 모듈 / i18n

  2. 여기에 파일 en_US.csv 를 작성하고 다음과 같이 변경하려는 레이블을 작성하십시오 .

    "Add to Cart","Custom Label"

다음과 같은 방법으로 꽤 많은 수의 레이블을 변경할 수 있습니다.

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

다른 답변을 보는 것이 좋습니다 :)

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.