Magento Asked on November 20, 2021
I add an custom checkbox html to Magento checkout page
First, I add the Hello component to the checkout XML. This use Hello_Widget/checkout/shipping/widget
as HTML template and Hello_Widget/js/view/checkout/shipping/widget
as javascript file.
// checkout_index_index.xml
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<!-- Modifying an existing step-->
<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">
<!-- LOOK HERE ONLY-->
<item name="hello_input" xsi:type="array">
<item name="component" xsi:type="string">Hello_Widget/js/view/checkout/shipping/widget</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Hello_Widget/checkout/shipping/widget</item>
<item name="title" xsi:type="string" translate="true">HelloInput</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
// widget.html: This is the HTML with simple checkout input
// widget.js: This is javascript file
define([
'Magento_Checkout/js/view/summary/abstract-total',
'Magento_Checkout/js/model/totals'
], function (Component, totals) {
"use strict";
return Component.extend({
/** Some code here **/
/**
* Is display reward points totals
*
* @return {boolean}
*/
isDisplayed: function() {
return true
},
/**
* Click handler
*/
onClick: function () {
console.log('click from HELLO') // WATCH HERE
// HERE want to call the PHP function to add isChecked: true to the Magento Session
},
});
});
Note that I extend the abstract-total
for some reasons and you don’t need to care about it now. When I click the checkbox, I can use jQuery to listen to the event (see onClick function).Here I want to call the PHP function to add isChecked: true
to the Magento Session. The onClick function in javascript file should trigger the handleCheckbox
in PHP file and pass the checkbox value
// Some PHP file (I think I could be some block)
class CustomBlock {
constructor(Session) {...}
handleCheckbox(value) {session.setValue(array([isChecked => value]))} // sth like this
}
Could you guys show me how to do it? Thanks
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP