Magento 2.1.0 में "कार्ट में जोड़ें" बटन टेक्स्ट को बदलना (ओवरराइडिंग js फ़ाइल)

Question

मैंने "मैं चाहता हूं कि यह" "ओवरराइडिंग" करके पाठ को "कार्ट में जोड़ें" में बदल दिया है vendor\magento\module-catalog\view\frontend\templates\product\list.phtml।
लेकिन, जब मैं "मुझे यह चाहिए" (यानी "कार्ट में जोड़ें") बटन पर क्लिक करता है, तो उत्पाद को कार्ट में जोड़ा जाता है और फिर बटन पर "कार्ट में जोड़ें" टेक्स्ट दिखाई देता है।

मुझे लगता है कि उत्पाद को अजाक्स कॉल के माध्यम से जोड़ा जाता है, यही कारण है कि अजाक्स कॉल के बाद एक नया जोड़ा पाठ प्रदर्शित नहीं हो रहा है और "कार्ट में जोड़ें" पाठ प्रदर्शित हो रहा है।

मैंने यह कोशिश की है:

मैंने एक कस्टम एक्सटेंशन Ved_Mymodule बनाया है ।

मैंने जाँच की है कि एक्सटेंशन सक्रिय है।

उसके बाद मैंने इन चरणों का पालन किया:

एप्लिकेशन / कोड / वेद / Mymodule / देखें / दृश्यपटल / requirejs-config.js:

var config = {
    map: {
        '*': {
            catalogAddToCart:'Ved_Mymodule/js/customCatalogAddToCart'
        }
    }
};

एप्लिकेशन / कोड / वेद / Mymodule / देखें / दृश्यपटल / वेब / 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;
});

मैं कंसोल में डमी संदेश मुद्रित करने का प्रयास कर रहा हूं।

इसके बाद: मैंने स्थैतिक सामग्री को चला दिया है। डेटा को फिर से लिखना। कैश साफ और फ्लश।

लेकिन बदलाव दिखाई नहीं दे रहे हैं।

Comments

कृपया नाम बदलें requirejs-config.jsऔर स्थान सही करें app/code/Ved/Mymodule/view/frontend/requirejs-config.js।

— खोआ TruongDinh

आपके द्वारा कहा गया परिवर्तन किया जाता है लेकिन फिर भी कोई सफलता नहीं मिलती है। लेकिन अगर मैं थीम के माध्यम से ओवरराइड करता हूं तो यह काम कर रहा है।

— vedu

Answer 1

आपको पथ से 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

आपको वह टेक्स्ट बदलना होगा जो आप इस फाइल से चाहते हैं।

यदि आपके पास कोई प्रश्न है तो मुझे बताएं।

Comments

बहुत-बहुत धन्यवाद, इसने काम किया। पहले, मैं एक कस्टम मॉड्यूल का उपयोग करके इसे ओवरराइड करने की कोशिश कर रहा था (मैंने अपने प्रश्न में इसका उल्लेख किया है) लेकिन यह काम नहीं किया। मेरे विषय पर फ़ाइल कॉपी करके यह काम किया। लेकिन आग लगाना न भूलें: php bin / magento सेटअप: नवीनीकरण

— vedu

@ सुरेश चिकानी क्यों जेएस बेहतर है तो भाषा अनुवादक?

— बिरजीतसिंह ज़ला

कुछ समय से CSV अनुवाद कोड काम नहीं कर रहा है। इस स्थिति में आपको JS टेक्स्ट में बदलना होगा।

— सुरेश चिकानी

Answer 2

आपको ओवरराइड करने की आवश्यकता है, पथ से कैटलॉग-ऐड-टू-कार्ट.जेएस,

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

अजाक्स कॉल के बाद पाठ यहाँ से बदल रहा है। आप यहां पाठ बदल सकते हैं।

Answer 3

अजाक्स कॉल के बाद जावास्क्रिप्ट द्वारा पाठ को बदल दिया गया। हम देख सकते हैं:

विक्रेता / Magento / मॉड्यूल-सूची / देखें / दृश्यपटल / वेब / js / सूची-ऐड करने वाली cart.js

सर्वोत्तम अभ्यास के लिए, mixins"ओवरराइडिंग" के लिए उपयोग करना चाहिए :

हम एक मॉड्यूल बना सकते हैं, और फिर इन फ़ाइलों को जोड़ सकते हैं:

एप्लिकेशन / कोड / विक्रेता / मॉड्यूल / देखें / दृश्यपटल / requirejs-config.js

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

एप्लिकेशन / कोड / विक्रेता / मॉड्यूल / देखें / दृश्यपटल / वेब / js / सूची-ऐड करने वाली गाड़ी-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;
        };
    });

Comments

मैंने आपके चरणों की कोशिश की, लेकिन कोई सफलता नहीं मिली। मैंने अपने कोड के साथ अपना प्रश्न संपादित किया है।

— vedu

@ Khoa TruongDinh परफेक्ट काम कर रहे हैं।

— विट्ठल बारिया

यह मेरे लिए काम किया है।

— 55840

Answer 4

नोट: नीचे 2.1.7 में परीक्षण किया गया है

---

किसी भी कोर फ़ाइलों को ओवरराइड करना बुरा अभ्यास माना जाता है।

आप बस कैटलॉग में सूचीबद्ध कर सकते हैंAadToCart फ़ंक्शन जो list.phtml के नीचे की ओर पाया जा सकता है

यदि आप देखने के लिए सूची-ऐड करने वाली cart.js पर (संपादित या कॉपी नहीं करते हैं) फ़ाइल आप देखेंगे कि यह पैरामीटर स्वीकार करता है।

विक्रेता / Magento / मॉड्यूल-सूची / देखें / दृश्यपटल / वेब / js / सूची-ऐड करने वाली 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: ''
},

अपने विषय के भीतर अगली खुली सूची.phtml

एप्लिकेशन / डिजाइन / दृश्यपटल / नाम स्थान / विषय / Magento_Catalog / टेम्पलेट / उत्पाद / 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 के भीतर 'Add to Cart' के लिए एक अनुवाद जोड़ा, लेकिन यह आपके उद्देश्य के लिए फिट नहीं हो सकता है इसलिए आगे बढ़ें और इसे सीधे यहां संपादित करें।

Answer 5

कृपया इसे आज़माएं ... नीचे दिए गए चरणों का पालन करके json प्रतिसाद द्वारा "कार्ट में जोड़ें", "जोड़ना ..." और "जोड़ा" के पाठ का अनुवाद करने के लिए।

चरण 1: उत्पाद सूची पृष्ठ में परिवर्तन की आवश्यकता है। फ़ाइल पथ ऐप / डिज़ाइन / फ्रंटेंड / Your_Theme_Namespace / Theme_Name / Magento_Catalog / टेम्पलेट्स / उत्पाद / सूची.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: परिवर्तनों के लिए उत्पाद दृश्य पृष्ठ की आवश्यकता है। फ़ाइल पथ ऐप / डिज़ाइन / फ्रंटेंड / Your_Theme_Namespace / Theme_Name / Magento_Catalog / टेम्पलेट्स / उत्पाद / दृश्य / 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 सेटअप: स्थिर-सामग्री: परिनियोजित en_US ja_JP zh_Hans_CN

2. php bin / magento कैश: फ्लश मेरे पास यह कोशिश है और यह मेरे लिए काम कर रहा है।

Answer 6

आप पूरी फ़ाइल को ओवरराइड करने के बजाय कैटलॉग ऐड को कार्ट में बढ़ा सकते हैं। यह आपको कुछ कार्यों को ओवरराइड करने और अपनी आवश्यकताओं के अनुरूप कस्टम विकल्पों में जोड़ने की अनुमति देगा - ऐसा लगता है कि आप ऐसा करना चाहते हैं।

यह एक बेहतर तरीका है क्योंकि यह मूल कार्यक्षमता का उपयोग करता है और फिर आप सब कुछ कॉपी करने के बजाय आपको जो चाहिए उसे बदल देते हैं।

जैसा कि इस उदाहरण में दिखाया गया है, बस अपने कस्टम कैटलॉग कार्ट में जोड़ें।

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

मैंने जेएस को संपादित करने के लिए इस समाधान का सफलतापूर्वक उपयोग किया है, आशा है कि यह मदद करता है!

Answer 7

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"

अन्य उत्तर देखने के लिए अच्छा है :)