hi everyone and welcome to an,introduction to shopify web books,web books are a way for shopify to,communicate an event that takes place on,our store,to an api that we manage let's say a,user buys an item on our store,we want to get details of that purchase,we can simply register a web hook on,shopify,and whenever a purchase is made we get,details of that purchase,sent to our api through a webhook,request,now there are three things you need for,you to set up a web book connection,first you,need a shopify store obviously then you,need an api that the request is going to,be sent to,and you need an endpoint on that api,that the,webhook request is going to target so,i have an api written in node.js here in,visual studio code,as you can see it has a root endpoint,that says welcome to the awesome users,api,that can be anything then this,endpoint just below the root endpoint,shopify dash web hook dash request that,is the endpoint that we're going to be,calling,with our shopify web hook is it has to,be a post request because the web book,request is going to be served as a post,request,so with this up the first thing,i'm going to do is to bring up the,cli i'm going to shut this down just to,make sure that any changes i made,kick in just clear the screen and start,my local server with npm start,so now we have the server running at,localhost port,3000. naturally web book requests are,not going to be sent to a local host,you need an https url to be able to,receive your web books,so we need to find a way to make this,publicly available,and with an https endpoint to do that,we're going to be making use of,ng rock ngroc is a tool that proxies,requests from the web to our local,server,to a tunneling system to get ngoc,serving our api i'm just going to open,another tab,ensure that the api is running and mark,the port our api has gone at about 3000.,here i'm just going to run at the root,of the project,mpx ngrok,http 3000,hit enter and wait for android to do,at the end of this process we're going,to get an https,url that will be publicly available on,the internet,now that ngoc is done simply copy the,https,version of the url as you can see,several urls are printed here but you,did the https version,to receive your web book requests just,going to pull up my server,or my browser rather this is my shopify,store,open the tab and test that this,url points to my server,as you can see the welcome to the,awesome users api is printed on the,screen so we have,ngrok successfully tunneling the,requests to my local server,so once you have that the next thing is,to go to your shopify admin page,go to your shopify admin page that would,be the name of your store.myshopify.com,admin you go to admin page and you look,for settings,is down at the left hand side here so,you click on settings,once the settings page comes up click on,notifications,then scroll down down down down down,down down,and you'll see the web books section as,you can see i haven't created anywhere,book,so i'm just going to click on the,creator book button,and which event,am i going to be requesting web books to,be sent to my server,click the drop down and i'm going to be,picking cut update,so that i don't have to check out before,i see some activity so i'm just going to,click cut,update so anytime the cart is updated,anytime the user adds an item to,the shopping shopping cart or delete an,item from the shopping cart,i get a request sent to my endpoint so,click that,i want it to be in json format now the,url,the url that we need to point our web,hook request to,just going to click this tab and copy,the root url from here,update this then go into my application,code,vs code and copy this endpoint,as you can see what this endpoint simply,does is console.log the request so,you're just going to print the request,to,the cli so go back to the shopify store,and add the endpoint remove the,extra for slash there web api version,unstable,i just use the latest,all delicious and rc release candidate,okay so we saved that and as you can see,webhook saved successfully so,once there's a cat update this web,is going to make a request to this,endpoint in json format,good so let's test that out we're going,to,be expecting a printout,in the cli here whenever you request,hits the endpoint,so let's go to our store,click a product i'm just going to click,this casual shirt,and as that comes up i'm going to click,add to cart,and as you can see i have one casual,shirt in my,shopping cart let's see if we have,gotten the web book request already,go to the cli open it no request yet,let's go to the cart let's view the cart,and see if the request is going to be,fired when we update the cart,so i'm just going to increase the,quantity,once again i'm going to check if we have,a request already yeah as you can see,we have a request fired as we updated,the cat,the request was fired and printed on the,cli,i think two requests actually came,because i updated the card twice,but as you can see we have some activity,here the request body is a whole lot,i'll just scroll up and see if we can,get like a dot,body that will be easier to read,so as seen here in one of the requests,we have a dot body property or,we have a body property so i'm just,going to go back to my code,vs code and just say rec dot,body just change this to dot body,then uh i need to,kill my server and start it once again,pm start,you don't need to update ng grog that,works fine,so we have the server back up and now,let's update the cart once again,i see the request body so i'm just going,to drop this down to,two once i do that,let's inspect our cli yeah,a request comes in and it was look at,this request,you can see the line items there's a,line items array there's an id and a,token also attached to the,body of the request so,if we look close we can see the price of,the item,and we can also see the vendor that,stick it out store that is my store,and the line price because we have two,items we now have,10 that's a double of five so,as you can see in this video we've seen,how to create a web book on shopify,and receive the request to an https,endpoint on a server that we manage,if this video has been of help remember,to hit the like button and also,subscribe to our channel for more videos,on processing webhooks
Congratulation! You bave finally finished reading what is a webhook shopify and believe you bave enougb understending what is a webhook shopify
Come on and read the rest of the article!