Menu Close
    Start a Project Request quote Reading list Switch to dark mode

    How to use web API call in Magento 2

    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 in 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 this Guide to know the Magento 2’s basic Directory Structure.

    Step 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 :

    In above I have used knockout Component you can do this with widgets as well.

    step 2 : Create webapi.xml in this location app/code/<namespace>/<module_name>/etc/webapi.xml

    Step 3 : Create service contract in this location app/code/<namespace>/<module_name>/Api/XyzInterface.php

    Step 4 :  Create Model and Implement the Interface defined (I hope you must be aware with it if now than follow this Guide Repositories ) .

    Step 5 :  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 .

    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 button and a text box for sample.
    Please read the links as well that I have added in between the blog If not checked yet.

    Hope this will help and if you have any Query then feel free to ask below in the comment section.

    . . .


    Add Your Comment

    Be the first to comment.

    Back to Top
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again