Using reference link how to add custom block at shipping methods below in onepage checkout?, I am able to create additional shipping block on the bottom.
But, I would like to show content only, when the shipping method is selected. When a shipping method is selected by the customer, the cursor should go to additional information and custom fields and the user should enter the data.
When we select another shipping method, the information related to that should come if present else the div should get hidden.
Same like http://excellencemagentoblog.com/blog/2011/11/07/magento-advanced-shipping-method-development/ in Magento 2. I had implemented it in Magento 1.
-
Could you please share your Magento 1 implementation with me?Tareq– Tareq2024年05月29日 01:18:50 +00:00Commented May 29, 2024 at 1:18
1 Answer 1
First, you define a new element in shippingAdditional by creating file view/frontend/layout/checkout_index_index.xml like this
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAdditional" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">shippingAdditional</item>
<item name="children" xsi:type="array">
<item name="carrier_custom" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/view/checkout/shipping/carrier_custom</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Then create file view/frontend/web/js/view/checkout/shipping/carrier_custom.js as this
define([
'jquery',
'ko',
'uiComponent',
'Magento_Checkout/js/model/quote'
], function (,ドル ko, Component, quote) {
'use strict';
return Component.extend({
defaults: {
template: 'Vendor_Module/checkout/shipping/carrier_custom'
},
initObservable: function () {
this.selectedMethod = ko.computed(function() {
var method = quote.shippingMethod();
var selectedMethod = method != null ? method.carrier_code + '_' + method.method_code : null;
return selectedMethod;
}, this);
return this;
},
});
});
And then create a file view/frontend/web/template/checkout/shipping/carrier_custom.html
<div id="my-carrier-custom-block-wrapper" data-bind="visible: selectedMethod() == 'mycarrier_mymethod'">
<p data-bind="i18n: 'This is custom block shown only when selected specific method'"></p>
</div>
Basically XML file tells checkout to initiate js file which is an uiComponent. It initiates knockout template and uses selectedMethod function to get the value of the currently selected shipping (carrier_method). If the value is what you want it will show the block. You can modify it according to your needs, ie. checking only selected carrier. Because selectedMethod is defined as knockout.computed() it will get re-evaluated every time user changes the carrier because quote.shippingMethod() is an observable.
i updated because the template path was wrong
-
I have a text area in the custom block. How to save the data entered in the textarea to the quote and order.santhoshnsscoe– santhoshnsscoe2017年10月10日 07:42:56 +00:00Commented Oct 10, 2017 at 7:42
Explore related questions
See similar questions with these tags.