If Free Shipping Replace Text with Free instead of $0.00 in Magento 2
-
02-01-2021 - |
質問
I am trying to customize the shopping cart page, If customer select Free Shipping Shipping Method needs to replace Free instead of $0.00. For this stuff, I followed steps.
Customized the root/vendor/magento/module-checkout/view/frontend/web/template/cart/totals/shipping.html, but it's not affecting.
Can you please suggest me how to do this.
解決 2
Finally, I solved my self.
requirejs-config.js
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
var config = {
map: {
'*': {
'Magento_Tax/js/view/checkout/summary/shipping':'Namespace_Modulename/js/view/checkout/summary/shipping',
'Magento_Tax/template/checkout/cart/totals/shipping':'Namespace_Modulename/template/checkout/cart/totals/shipping'
}
}
};
shipping.js
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
/*jshint browser:true jquery:true*/
/*global alert*/
define(
[
'jquery',
'Magento_Checkout/js/view/summary/shipping',
'Magento_Checkout/js/model/quote'
],
function ($, Component, quote) {
var displayMode = window.checkoutConfig.reviewShippingDisplayMode;
return Component.extend({
defaults: {
displayMode: displayMode,
template: 'VLCSolutions_FreeShippingTxt/checkout/summary/shipping'
},
/* Added my functions */
isFreeShipping:function(){
var carrierCode = quote.shippingMethod().carrier_code;
if(carrierCode == "customerpickup"){
return true;
}else{
return false;
}
},
getText:function(){
return "Free";
}
});
}
);
shipping.html
<!-- Added custom functions with core function -->
<!-- ko if: isFreeShipping() -->
<tr class="totals shipping excl">
<th class="mark" scope="row">
<span class="label" data-bind="i18n: title"></span>
<span class="value" data-bind="text: getShippingMethodTitle()"></span>
</th>
<td class="amount">
<span class="price" style="color:red;font-weight:bold;font-size:16px;" data-bind="text: getText(), attr: {'data-th': title}"></span>
</td>
</tr>
<!-- /ko -->
<!-- ko ifnot: isFreeShipping() -->
<tr class="totals shipping excl">
<th class="mark" scope="row">
<span class="label" data-bind="i18n: title"></span>
<span class="value" data-bind="text: getShippingMethodTitle()"></span>
</th>
<td class="amount">
<span class="price" data-bind="text: getValue(), attr: {'data-th': title}"></span>
</td>
</tr>
<!-- /ko -->
It's worked for me. If anyone has better answer update this or post new answer.
他のヒント
You should not change the root/vendor files. Try to create a module/theme to change the required file: http://devdocs.magento.com/guides/v2.2/architecture/archi_perspectives/components/modules/mod_intro.html
When i tried to change that area i had to overried the file root/vendor/magento/module-tax/view/frontend/web/template/checkout/cart/totals/shipping.html
More simple.
requirejs-config.js
var config = {
config: {
mixins: {
'Magento_Checkout/js/view/summary/shipping': {
'Namespace_Modulename/js/checkout-shipping-mixin': true
}
}
}
};
\Namespace\Modulename\view\frontend\web\js\checkout-shipping-mixin.js
define([], function () {
var mixin = {
/**
* @return {*}
*/
getValue: function () {
var price;
if (!this.isCalculated()) {
return this.notCalculatedMessage;
}
price = this.totals()['shipping_amount'];
if (price === 0) {
return 'free';
}
return this.getFormattedPrice(price);
}
};
return function (shipping) {
return shipping.extend(mixin);
};
});