Magento 2 Web API Call: Today we will learn how to use the Magento 2 webapi as Ajax request in Magento 2 for Fetching, saving and for any operation in your module.
Magento 2 webapi : To know about Magento Web Api please refer to our wonderful blog WEB API .
You can use the Magento WebApi on any page. But here I am going to Guide you , how to use in Customer registration page.
If you are new to Magento 2 then first please refer to Magento 2’s basic Directory Structure.
1 : I am assuming that you have a basic idea of Magento 2 Structure and Web API now.
so let start with the create Layout handle.
Create handle in this location : app/code/<namespace>/<module_name>/view/frontend/layout/customer_account_create.xml and paste the below code :
<?xml version="1.0"?> <!-- /** * Webkul Software. * * @category Webkul * @package Webkul_Ajaxwebapi * @author Webkul * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com) * @license https://store.webkul.com/license.html */ --> <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="customer_form_register"> <action method="setTemplate"> <argument name="template" xsi:type="string">Webkul_Ajaxwebapi::customer/form/ajaxcall.phtml</argument> </action> <arguments> <argument name="jsLayout" xsi:type="array"> <item name="components" xsi:type="array"> <item name="ajaxlist-content" xsi:type="array"> <item name="component" xsi:type="string">Webkul_Ajaxwebapi/js/ajaxcall</item> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Webkul_Ajaxwebapi/ajaxcall</item> </item> </item> </item> </argument> </arguments> </referenceBlock> </body> </page>
In above I have used knockout Component you can do this with widgets as well.
2: Now add Script in ajaxcall.phtml
<script type="text/x-magento-init"> { "*": { "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?> } } </script>
3 : Create webapi.xml in this location app/code/<namespace>/<module_name>/etc/webapi.xml
<?xml version="1.0"?> <!-- /** * Webkul Software. * * @category Webkul * @package Webkul_Ajaxwebapi * @author Webkul * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com) * @license https://store.webkul.com/license.html */ --> <routes xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Webapi:etc/webapi.xsd"> <route url="/V1/ajax/save/" method="POST"> <service class="Webkul\Ajaxwebapi\Api\AjaxSaveInterface" method="ajaxSave"/> <resources> <resource ref="anonymous"/> </resources> </route> </routes>
4 : Create service contract in this location app/code/<namespace>/<module_name>/Api/XyzInterface.php
<?php /** * Webkul Software. * * @category Webkul * @package Webkul_Ajaxwebapi * @author Webkul * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com) * @license https://store.webkul.com/license.html */ namespace Webkul\Ajaxwebapi\Api; interface AjaxSaveInterface { /** * Returns string * * @api * @param string $ajaxval * @return string */ public function ajaxSave($ajaxval); }
5 : create file for dependencies in this location : app/code/<namespace>/<module_name>/etc/di.xml
<?xml version="1.0"?> <!-- /** * Webkul Software. * * @category Webkul * @package Webkul_Ajaxwebapi * @author Webkul * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com) * @license https://store.webkul.com/license.html */ --> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <preference for="Webkul\Ajaxwebapi\Api\AjaxSaveInterface" type="Webkul\Ajaxwebapi\Model\Ajax\AjaxSaveManagement" /> </config>
6 : Create a Model and Implement the Interface defined (I hope you are aware of it else check Repositories ).
<?php /** * Webkul Software. * * @category Webkul * @package Webkul_Ajaxwebapi * @author Webkul * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com) * @license https://store.webkul.com/license.html */ namespace Webkul\Ajaxwebapi\Model\Ajax; use Webkul\Ajaxwebapi\Api\AjaxSaveInterface; class AjaxSaveManagement implements AjaxSaveInterface { /** * Returns string * * @api * @param string $ajaxval * @return string */ public function ajaxSave($ajaxval) { try{ return "Saved"; }catch(\Exception $e){ } } }
Step 7
Api call : In Magento two we have a javascript module named as mage/storage , this class or module is used for ajax calling, here is the sample code to use it .
/** * Webkul Software. * * @category Webkul * @package Webkul_Ajaxwebapi * @author Webkul * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com) * @license https://store.webkul.com/license.html */ define([ 'jquery', 'mage/translate', 'mage/storage' 'uiComponent', 'ko', 'Magento_Ui/js/modal/alert' ], function ( $, $t, storage, Component, ko, alert ) { 'use strict'; return Component.extend({ initialize: function () { //#ajaxcall button id selector $('#ajaxcall').on('click',function(){ if($('#ajaxcallvalue').val()){ var serviceUrl,payload; /** * Save values . */ serviceUrl = 'rest/V1/ajax/save'; payload = { ajaxval: $('#ajaxcallvalue').val() }; storage.post( serviceUrl, JSON.stringify(payload) ).done(function (response) { alert({ content: $t('Action Successfully completed.') }); }).fail(function (response) { alert({ content: $t('There was error during saving data') }); }); } }); } }) });
The above is the complete sample. by which you can use the Magento knockout storage module for any operation of Ajax.
Note: Run the above JS code on any event. I have used a button and a text box for a sample.
Please read the links as well that I have added in between the blog If not checked yet.
That was much about the Magento 2 Web API Call.
You can also check our complete Magento 2 extensions.
Hope this will help and if you have any queries then feel free to ask below in the comment section.
2 comments
You can get it from the “response” variable inside the done method.
In the above example “response” variable will have a value “saved”.
So if you want to get it into some another variable, then you can do like this:-
let someOtherVar = response;
And if you are returning an array form the from the “ajaxSave” method,
then make sure to encode it into Json and then return.
Example:-
public function ajaxSave($ajaxval)
{
try{
return json_encode([“id” => “Abcd234”]);
}catch(\Exception $e){
}
}
then inside the done function, you can get the id like this:-
let id = response.id;