How To Use Knockout JS On Custom Template In Adobe Commerce (Magento 2)<\/a><\/p>\n\n\n\n
we are going save data using ajax request and updated customer list automatically on our custom template.<\/p>\n\n\n\n
1. In our previous blog, i have create Webkul\/Knockout\/view\/frontend\/web\/template\/knockout-test.html<\/strong> file.<\/p>\n\n\n\n Let’s open it again and create a simple form.<\/p>\n\n\n\n 2. We also created Webkul\/Knockout\/view\/web\/js\/custom-component.js<\/strong> file, open it and update.<\/p>\n\n\n\n In this file we have defined ‘Webkul_Knockout\/js\/action\/save-customer’<\/strong> which is responsible for making ajax request to server.<\/p>\n\n\n\n I have created save<\/strong> function here, which is validating form and sending the form 3. Now lets create this action js file.<\/p>\n\n\n\n In this file we have made a ajax request to server, but what is storage<\/strong> here. open pub\/static\/frontend\/Magento\/luma\/en_US\/mage\/storage.js<\/strong> you will find some methods here: get, post, put,delete<\/strong><\/p>\n\n\n\n When ajax request to server it returns data, and saved in totalCustomer<\/strong> Observable Array.<\/p>\n\n\n\n totalCustomer<\/strong> is defined in Webkul\/Knockout\/view\/frontend\/web\/js\/custom-component.js file which is passes as param.<\/p>\n\n\n\n Finally, create Controller.<\/p>\n\n\n\n 4. Webkul\/Knockout\/Controller\/Ajax\/Save.php<\/p>\n\n\n\n We can see that i have created simple controller which is only saving data, and collecting all from the database table that is showing below:<\/p>\n\n\n\n When this response comes on action js file save-customer.js<\/strong> its assign the whole data to totalCustomer<\/strong> observableArray.<\/p>\n\n\n\n Now see in Webkul\/Knockout\/view\/frontend\/web\/js\/custom-component.js<\/strong> there is method getTotalCustomer<\/strong> Now run php\/magento setup:static-content:deploy command.<\/p>\n\n\n\n When you open your custom phtml file, you will see a form.<\/p>\n\n\n\n For any technical support, please reach out to us at support@webkul.com<\/a>. Additionally, discover various solutions to upgrade your online store’s functionality by visiting the Adobe Commerce modules<\/a> page.<\/p>\n\n\n\n If you need expert consultation or wish to develop bespoke features, Hire Adobe Commerce Developers<\/a> for your project.<\/p>\n\n\n\n Thanks for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"<div class="customcomponent-wrapper" data-block="customcomponent">\n <div class="block-content">\n <form data-role="save"\n data-bind="submit:save"\n method="post">\n <div class="fieldset"\n data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">\n <div class="field field-email required">\n <label class="label" for="save-email"><span data-bind="i18n: 'Email Address'"><\/span><\/label>\n <div class="control">\n <input type="email"\n class="input-text"\n id="save-email"\n name="email"\n data-validate="{required:true}" \/>\n <\/div>\n <\/div>\n <div class="field field-name required">\n <label for="login-name" class="label"><span data-bind="i18n: 'Customer Name'"><\/span><\/label>\n <div class="control">\n <input type="text"\n class="input-text"\n id="login-name"\n name="name"\n data-validate="{required:true}"\n autocomplete="off"\/>\n <\/div>\n <\/div>\n <\/div>\n <div class="actions-toolbar">\n <input name="context" type="hidden" value="checkout" \/>\n <div class="primary">\n <button type="submit" class="action action-save secondary"><span data-bind="i18n: 'Save Record'"><\/span><\/button>\n <\/div>\n <\/div>\n <\/form>\n <\/div>\n <table>\n <thead>\n <th data-bind="i18n: 'Customer Name'"><\/th>\n <th data-bind="i18n: 'Customer Email'"><\/th>\n <\/thead>\n <tbody data-bind="foreach: getTotalCustomer()">\n <tr>\n <td data-bind="text: name"><\/td>\n <td data-bind="text: email"><\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n<\/div><\/pre>\n\n\n\ndefine([\n 'jquery',\n 'uiComponent',\n 'mage\/validation',\n 'ko',\n 'Webkul_Knockout\/js\/action\/save-customer',\n ], function ($, Component, validation, ko, saveAction) {\n 'use strict';\n var totalCustomer= ko.observableArray([]);\n return Component.extend({\n defaults: {\n template: 'Webkul_Knockout\/knockout-test'\n },\n\n initialize: function () {\n this._super();\n },\n save: function (saveForm) {\n var self = this;\n var saveData = {},\n formDataArray = $(saveForm).serializeArray();\n\n formDataArray.forEach(function (entry) {\n saveData[entry.name] = entry.value;\n });\n\n if($(saveForm).validation()\n && $(saveForm).validation('isValid')\n ) {\n saveAction(saveData, totalCustomer).always(function() {\n console.log(totalCustomer());\n });\n }\n },\n getTotalCustomer: function () {\n return totalCustomer;\n }\n });\n }\n);<\/pre>\n\n\n\n
data to Webkul_Knockout\/js\/action\/save-customer<\/strong> action using saveAction().<\/p>\n\n\n\n\/*global define,alert*\/\ndefine(\n [\n 'ko',\n 'jquery',\n 'mage\/storage',\n 'mage\/translate',\n ],\n function (\n ko,\n $,\n storage,\n $t\n ) {\n 'use strict';\n return function (customerData, totalCustomer) {\n return storage.post(\n 'knockout\/ajax\/save',\n JSON.stringify(customerData),\n false\n ).done(\n function (response) {\n if (response) {\n totalCustomer([]);\n $.each(response, function (i, v) {\n totalCustomer.push(v);\n });\n }\n }\n ).fail(\n function (response) {\n }\n );\n };\n }\n);<\/pre>\n\n\n\n
storage is nothing but a another jQuery model which already have defined some ajax request methods itself.<\/p>\n\n\n\n<?php\nnamespace Webkul\\Knockout\\Controller\\Ajax;\n\nuse Magento\\Customer\\Api\\AccountManagementInterface;\nuse Magento\\Framework\\App\\ObjectManager;\nuse Magento\\Framework\\Exception\\LocalizedException;\n\nclass Save extends \\Magento\\Framework\\App\\Action\\Action\n{\n\n \/**\n * @var \\Magento\\Framework\\Json\\Helper\\Data $helper\n *\/\n protected $helper;\n\n \/**\n * @var \\Magento\\Framework\\Controller\\Result\\JsonFactory\n *\/\n protected $resultJsonFactory;\n\n \/**\n * @var \\Magento\\Framework\\Controller\\Result\\RawFactory\n *\/\n protected $resultRawFactory;\n\n\n \/**\n * Initialize Login controller\n *\n * @param \\Magento\\Framework\\App\\Action\\Context $context\n * @param \\Magento\\Customer\\Model\\Session $customerSession\n * @param \\Magento\\Framework\\Json\\Helper\\Data $helper\n * @param AccountManagementInterface $customerAccountManagement\n * @param \\Magento\\Framework\\Controller\\Result\\JsonFactory $resultJsonFactory\n * @param \\Magento\\Framework\\Controller\\Result\\RawFactory $resultRawFactory\n *\/\n public function __construct(\n \\Magento\\Framework\\App\\Action\\Context $context,\n \\Magento\\Framework\\Json\\Helper\\Data $helper,\n \\Magento\\Framework\\Controller\\Result\\JsonFactory $resultJsonFactory,\n \\Magento\\Framework\\Controller\\Result\\RawFactory $resultRawFactory\n ) {\n parent::__construct($context);\n $this->helper = $helper;\n $this->resultJsonFactory = $resultJsonFactory;\n $this->resultRawFactory = $resultRawFactory;\n }\n public function execute()\n {\n $model = $this->_objectManager->create('Webkul\\Knockout\\Model\\CustomerData');\n $credentials = $this->helper->jsonDecode($this->getRequest()->getContent());\n $model->setData($credentials)->save();\n \n $collection = $model->getCollection();\n foreach ($collection as $data) {\n $response[] = ['name' => $data->getName(), 'email' => $data->getEmail()];\n }\n \/** @var \\Magento\\Framework\\Controller\\Result\\Json $resultJson *\/\n $resultJson = $this->resultJsonFactory->create();\n return $resultJson->setData($response);\n }\n}<\/pre>\n\n\n\n![\"image-92\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/01\/image-92.png\")
<\/figure>\n\n\n\n
which is called in Webkul\/Knockout\/view\/frontend\/web\/template\/knockout-test.html<\/strong> file.<\/p>\n\n\n\n![\"Knockout](\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Screenshot.png\")
<\/figure>\n\n\n\n