shopify scripttags how to use

hi my name is lee welcome to alpha web,design thank you for tuning in in this,video i want to show you how you can,post script tags to your store,and um script tags are used to load,remote javascript files to the,storefront of your shopify store,in this video i will use a completely,fresh,application if you want to know how you,can create,a shopify app with,laravel and then you can just click,either here or here,somewhere the link is going to be posted,and,yeah so let's jump right in okay so here,i am at the dashboard of my development,store as you can see there are no apps,installed as of yet that is because the,script tags will be,posted by the time um you install the,app to your store,and um let's just take a quick look at,the documentation of the script tags so,here you have all of those different,endpoints for your script tags you can,of course post a script tag which,creates a new one and,there are different methods uh if you,want to,see all of the script tags maybe you,want to just take a look at a specific,script tag if you have the id or you can,count the number that you have installed,on your on your store,if you take a look at the script tag,object you will see that every tag has,an id and of course every script tag,also needs a source because what you,want to do is you want to,load some remote javascript code,and you also have to set that source of,the remote javascript code which will,usually be,the directory of your somewhere loaded,in inside of your app but we will get to,that later,so for example if i go to my store i,could go here type in,admin,api script tags,and i will see that of course i have an,empty array of script tags because there,are,no script tags loaded,right now,so let's jump right into the code and,see how we can actually do that,so here i am at my vs code installation,i have already downloaded um the laravel,package from oc said and we are ready to,go the first thing that we want to do,is we want to go to resources,javascript and,we want to create that remote javascript,file that we want to load into,our storefront so let's just say we want,to call it um,script tag just for the sake of this,video,and we want to,give it a console log,and say,hi from,script tag,js,and at the end of this video we will see,uh we we should see,this,console log at the storefront of our,online store,now we have to go over to our,webpack.mix and add our script tag js,all right,so now that we have added this to our,webpack,if we now run,npm,run dev it should be compiled to the,public directory,and as we can see now we have the script,tag js right here okay,great,so,next we want to go to,our configuration file so we type in we,search for shopify dash app.php,come here,and we have to configure a couple of,things,first of all we want to add some,api scopes to our app,so we will also need read script tags,and write script tags,if we go,to the documentation of the shopify,apis exoscopes,and we search in that list for,the script tag then we can see here,that we can,copy this,paste it in here and now our app also,has,the the rights to read and write script,tags,we will have to scroll down or also,search for,script tags in here,and here we can see that we have an,array,uh that we that is right now commented,out,and in that array we can set the script,tags that we need so let's,delete the comment,and,here we can see that we can set the,source,for our,javascript file,as we can see they hard-coded um,the url of the app,which is a bad idea,for our example,you should always get the url or your,app url out of your,environment file,out of your env file so,we can,delete this and,we want to say env okay i could have,shouldn't have deleted the env but okay,so,let's say emv,and say,app,url,and we want to concatenate that with,the path to our javascript file which,will be at,js,slash,script tag,dot js,okay,we're done with the configuration,and to further understand what's going,on i want to scroll down and show you,this,so,um,those script tags that we just,configured will be loaded inside of a,job queue so we have multiple top queues,webhooks which is,not necessary right now and after,authenticate which is also not necessary,right now but among others script tags,will also be loaded inside of a,job queue so,by the time you will install your app,inside of your shopify store,there will be a,laravel will create a job cue with your,script tags and then,that queue will be,processed,what after the installation,so we will now have to configure those,uh that job queue inside laravel so the,first thing to configure,is that we want to go to,the env file and look for queue,connection and we want to set it to,database,so that,otherwise we would have some performance,issues and if we,set that q connection to database that,job queue will be processed by the,database okay you could also leave it at,default but then um your app would wait,until all of the jobs are processed and,then it will continue but if we set it,to database then the app will,continue to load and do all of the,processing of the jobs in the background,within the database,but if you,set this connection to database you will,also have to,create a new migration file so you will,have to uh create a job table in your,database,and so let's,create a,config,a migration file first it's a php,artisan,queue,table,it will say migration created,successfully let's take a look,if that is correct,we can see here database migration and,now we can see here,we have a create chops table,which is correct so,if we take a look at our database,we do not have that jobs table yet,because we haven't,migrated,yet,php artisan,migrate,so it migrated our jobs table we can,take a look,and here we have our chops table so it,worked correctly,the next thing we want to do is say,php,artisan,queue,listen,so that way we,wait for a queue,to be created and the way we create that,queue for,laravel to be processed,is,by installing our app so let's go back,to our shopify,dashboard,let me go to my partners account,because there i have my shopify apps,look for my apps,and i will go to my script tag app,i will select the store,select this development store right here,oh yeah this is also a,error that you might see,if you see this error this usually means,that,if you go back to your,database,this error will occur if you have not,deleted,this user from the database so if you,delete this right here,then you will have to do the same,process again,go back to partners,go to your apps,script tag select a store,now you can say install the app,here we can see that my app is installed,so if we go back to,vs code now,we can now see,that the script tag installer was,processing and that it now says,processed,okay so that means that the script tag,should now,be,uh installed,in our shopify app so we can now say,admin,and take a look at the,api,here we have,the script tag,so that is good,if we now go to the storefront,take a look right here,and,go to the console,we can see hi from script tech js which,is the console log from uh,the script tag that we set right here,and now of course we can use all of the,javascript,code that we want,i think that vanilla javascript is,recommended right here for example if,you use a library,like,jquery that will just bloat up,the site too much and i mean you can do,anything that you can do in jquery you,can do it in vanilla javascript as well,so,it is recommended to keep things as,lightweight as possible for to maintain,the,user experience of this,store right here i mean you don't want,uh,users or you don't want customers to,uh install your app and then the,performance of their,store will drop down dramatically,but that's just a side note you can do,whatever you want okay,so yeah but that's basically how you can,install script tags or use script tags,uh within your app,and i hope this video was informative,and,i hope you leave a like and subscribe,and see you in the next one,bye bye

Congratulation! You bave finally finished reading shopify scripttags how to use and believe you bave enougb understending shopify scripttags how to use

Come on and read the rest of the article!