Magento 2.1.0で「カートに追加」ボタンのテキストを変更する(jsファイルをオーバーライドする)


13


「カートに追加」のテキストを「」に変更して「これが欲しい」に変更しましたvendor\magento\module-catalog\view\frontend\templates\product\list.phtml
しかし、「これが欲しい」(つまり「カートに追加」)ボタンをクリックすると、製品がカートに追加され、再び「カートに追加」というテキストがボタンに表示されます。

製品はajax呼び出しを介して追加されると思います。そのため、ajax呼び出しの後に新しく追加されたテキストが表示されず、「カートに追加」テキストが表示されます。

私はこれを試しました:

カスタム拡張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
コアトゥオンディン16

あなたが言ったように変更が行われますが、まだ成功していません。しかし、テーマを介してオーバーライドすると、動作します。
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は言語翻訳者よりも優れているのですか?
ビルジシンザラ

CSV変換コードが機能しない場合があります。この場合、JSテキストに変更する必要があります。
スレシュChikani

7

パスからcatalog-add-to-cart.jsをオーバーライドする必要があります。

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

ajax呼び出しの後、テキストはここから変化しています。ここでテキストを変更できます。


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完璧な作業。
ヴィタルバリヤ

これは私のために働いています。
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 setup:static-content: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を次のように作成します。

    app / code / Vendor / Module / 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.