how to mount shopify vues

what's up youtube today to celebrate the,release of my new class,shopify theme development with vue.js,i'm going to share a quick tutorial on,how we can use,vue.js with shopify's own predictive,search api,to create a dynamic product search page,vue.js is a front-end javascript,framework that we can use to build,interactive user interfaces i'm talking,about interfaces where the interactions,happen,purely on the front end using vue.js,is my preferred way to create purely,front-end interactions,as it's much more efficient than opting,out of a framework and much simpler to,use in my opinion,compared to other frameworks like react,or angular,all we have to do is include a script,tag to bring in the vue.js script,create an options object and then pass,that into a create,app method it's that simple now instead,of writing long lines of javascript,or having to wait for annoying page,reloads we can set up a data structure,bind that to our html structure and then,dynamically update the data,all on the front end in today's video,i'm going to share one example of using,vue.js,in shopify theme development and that is,to create a product search page,for our shopify theme we'll learn how to,quickly set up a vue.js,app retrieve a list of items from the,search api,and then update the list of those items,based on the value,passed in to the search bar by a user so,without further ado let's jump onto the,computer and let's get started,all right so i'm going to start off this,tutorial inside the usual spot,inside my development store chris,testing shop,you can see here that i've already,loaded in view class theme into the live,theme,this is the theme code that we use,throughout the skillshare class,and i'm going to be using it for today's,tutorial as well,if you'd like to access this theme code,and use it as well,you can go to my github page,dodd github.comchristopherdodd look for,view class theme,under this drop down here you can see,there's a few different branches that,represent,different stages of completed code in,the project as we go through in the,skillshare class,i'm going to add another branch here for,when we complete the code in today's,tutorial,for the search page so check out this,repo when you're watching the video,and you should be able to see the,completed code for today's video,in there as well okay if you haven't yet,installed,this theme code onto your shopify store,you can simply click,this button download the zip and then,upload it,straight to your store via this button,all right but i've already got it here,in my store if i click on actions and,then view,you can see we've got a very simple,theme nothing on the home page,we just got a product page for shopping,a t-shirt,a collection page and a cart page,now this is all interactive using view,this is what we do in the,skillshare class so if you want to know,how,i actually went about this that's all in,the skillshare class,but i thought in this video what i would,do is add a search page here as well,and the reason why it makes sense to use,view,to create the search page is because we,can get all the data for the search,through an ajax api that will return,json,so that means that we can get all the,data through the front end,without having to reload the page and,view,makes it really easy to take data and,update ui,all right so to learn how the predictive,search api works,we can just search for shopify,predictive search api in google,i've misspelled it there but you can see,here it's the first result that comes up,you're just looking for this page on the,shopify documentation,here you can see where the endpoint is,and the different parameters that go in,and if we scroll down here is an example,of the response,that you'll get back all right so this,is perfect we just need to create a view,app and plug,this api into it and then we can create,a nice interactive,search page okay this will be in the,search page branch,so if you want to check out that code,that's where you'll find it otherwise,i'm just going to copy across,the code now,all right so all the css is in there now,i'm going to close that css file,and what we're going to have to do is,create a custom page template to load in,this,search page so i'm going to head to our,templates folder,click new file create an alternate page,template,so the syntax goes like this page dot,name of the alternate template,dot liquid and inside here i'm going to,open up,a div with the id of search and then,below it,open up some script tags which is where,we're going to put our,view code all right now before we,actually write the view code i'm going,to,load this alternate template into an,actual page,so inside our store we're going to have,to go to pages,click add page i'm going to call this,search and then here i'm going to select,the alternate template which is page dot,search,keep in mind guys that this needs to,exist on,the live theme so if you're currently,working with,this theme on a preview add a template,with the,suffix of page.search to the live theme,as well this is something we learned in,my first skillshare class on the subject,called shopify theme development all,right i'll hit save on that,and now i'm going to click view page and,as you can see there's nothing there yet,because we haven't written pretty much,any code yet,all right so one more thing before i,create the view instance,is there's a very handy tool that i,highly recommend,as you can see here i'm using the,browser google chrome,i'm not sure what the options are on the,browser you're using,but for chrome we can download something,called,the vue dev tools so i'm going to head,to chrome web store,go into here search for view dev tools,and as you can see here we've got two,we've got this one with all the reviews,and then this one with less reviews and,a beta flag,on the view logo here so the difference,between these two is this one works with,view version one and two and this one,works with,version three of view now in this,tutorial and in the skillshare class i,use,view three so for that we're going to,need to,use this version of the dev tools if,you're of course,using view version two or one then you,can use this,but if you're following along completely,from scratch and you want to use the,latest version,of you definitely use this one,all right so as you can see i've already,got this added to my chrome extensions,and to show you that it's there i'm,going to press command,option i to open up my dev tools and,i'll have to click on this to see all my,tabs but you can see the last one is,view,i'm going to click on that let me zoom,in so you can see,easier as you can see here i'm inside my,header app here so i've got a header,instance,if we head on to the product page you,can see that we've got header and,product,if i head into the cart page you can see,we've got two,view apps header and cart so what we're,going to do,is on the search page create an app,that'll go underneath header and that'll,be our app to do the search,okay don't get confused by the term app,here we can have multiple,view apps on the one website if we were,creating a single page application,then there would of course just be one,app but because we're plugging,vue into different pages of our website,into different parts,of an existing website then we can write,the code,separately for each area okay alright so,let's get started writing some vue.js,code i'll just direct you to the,reference here,in case you get lost at any point this,is the viewjs reference,just make sure that you're looking at,the right,version of documentation so here it says,you're browsing the documentation for,v2 click here for v3 so,that's a little gotcha there so as you,can see the website looks exactly the,same,but we've just got v3 in front okay and,here you go,into the docs right here is your,reference for everything,vue.js version 3. let's head over to our,code editor now and,actually write some code i'm going to be,doing this using the options api,approach there is a new approach in view,3 called the composition api,but we're sticking with the options api,which is,the standard one that we used in view,one and view,two okay so that involves creating a,options object i'm going to call this,search page,options i'm just going to open up an,empty object for now,and then to create the actual app i'm,going to create an app,store in this variable called search,page and we just need to,view create app load in those search,page options,as the argument and then let's mount,that to our dom,so by putting in the selector id search,it's going to mount it to this html,right here,just a reminder before we actually load,this up you're going to have to include,the code for view as well if you haven't,already,so inside my layout file you can see,here i've got a script tag,for bringing in view if you want to,learn how to do that,you can go into installation of the,documentation,and then scroll down there is this nice,little script tag,that you can just paste in but as you,can see i've already got that included,inside my view class theme that's just,if you're going to be,doing your own theme you're going to,have to definitely bring in that code,okay all right so now that being said,we should be able to view this view app,inside our dev tools now so if i refresh,the page,on our search page click over here you,can see we've got,app two now that's not a very,user-friendly name so,in our options object i'm going to add,in,the name of search page this is just for,our purposes on the dev side,to see what the app is called all right,refresh the page over here and we want,to switch from header,to search page now you can see we are,accessing a view,app on this page but of course there is,currently,nothing else inside this options object,so we're going to need to populate that,right now so how this is going to work,is we're going to have a search field,and then we're going to have search,results so i'm going to build some html,right now inside our div in addition to,having the id of search i'm going to,give this the class of container,this is already set up in our css and,then i'm going to,create a div with the class of search,box,inside i'm going to create an input,field,with the type of text the placeholder of,search term and then i'm going to put in,an,empty label here we'll populate this a,little later,with view data the next thing is i'm,going to create a h1,a heading for search results and then,create a div for the search result so,i'm going to give this div the class,of search results and i'll show you how,to create the,loop of search results in just a second,okay so that's our little,boilerplate code there refresh the page,there you can see the styles that i've,put in the css,already applying there okay alright so,how this is going to work,is inside our instance we're going to,store some data we're going to store,the search term and we're going to store,the items that are returned,from the api okay so how we do that,in vue.js is creating this data function,inside the options object,and this data function will return an,object,all right now initially before we run a,request,to the api we're going to have empty,data so let's just set up,that right now i'm going to create an,items array,because that's what we're going to be,cycling through and i'm also going to,actually before that have a search,term string as well i'm also going to,add a loading state here,and let's just set that to true because,i want to,search something on page load so let's,just put in here a search term of,shoes and so when this page loads,because,items are empty and they're going to be,populated on page load,we can set loading to true and you'll,see why this is,important in just a second all right so,saving that,and refreshing our page over here we can,now see in the dev tools,that we've got data showing up we've got,an items array that's empty,loading is set to true and search term,is,shoes okay so we've got our data set up,or at least the beginnings of it,now what i want to do is create a method,that will actually do our,search so i'm going to add,another parameter here called methods,open up this object,and create a method that is simply going,to be called search,and inside it i'm going to add an,argument of,term okay so that'll be the search term,now every time we run search it's going,to be an asynchronous request to the api,so at first loading should be set to,true,okay then once the api request,comes back we can set loading to false,all right so let's go over to the,documentation for the predictive search,api,and copy some code from there predictive,search,api shopify,heading back to the reference here if i,scroll down you can see,some example code using fetch you can,also see,an example called using jquery we might,as well use the fetch version that way,we don't have to use jquery if we don't,want to i'm going to copy this,bring this over into the search method,indent a little and down here i'm going,to remove the code in here,and what i want to do instead is just do,a console log,of product suggestions and see what,comes back from the api,okay let me just indent this some more,now the other thing we're going to have,to do is as you can see here in this,query,we're going to query flannel so,obviously that needs to change i'm going,to,change this string to backticks so we,can insert our own,variables and instead i'm going to put,the search term here,so remember we put the term through,in here in our method so this is now,going to go,into this api endpoint here,so hopefully you've had some experience,with ajax apis in the past,but essentially what we're doing here is,using the fetch method,to hit this endpoint and then when the,response comes back,where jason parsing it and then we're,taking that response,and working with it all right so,obviously,when we hit this last then it is,finished loading,so we're going to set this.loading equal,to false,alright so that should be enough to get,us started the only thing here is we,actually need to run this method,so what i'm going to do is tap into,something in view called a life cycle,hook,this is basically an event for different,parts of the life cycle of the view,instance all right so,two common ones are created and mounted,i'm going to use the created lifecycle,hook,it is a method on this options object,and essentially any code we put in here,is going to be run,when the instance is created so,essentially on page load,so here i'm going to put this search,and then for the search term i'm going,to reference,this search term so the argument that's,going to be sent through as the term,here in this method is whatever is,currently set on the data of the,instance,which is going to be shoes on page load,okay,so i'm going to head back to our page,let's move the reference over there,refresh the page and what we're doing is,we're not actually updating our view,instance yet,we've just console logged the response,so if i head into console,you can see we've got a response back,from the api with four items,here you can see all the different data,for the four,items that come back from the search,term,shoes okay now of course console logging,them isn't going to help us much with,our search page here what we want to do,is get them to actually show up on the,page,so instead of a console log what i'm,going to do is,load these product suggestions into,the items array of our instance data,okay,this dot items equals product,suggestions,now when we save and reload the page we,won't have that console log but if we go,back to our view instance,you can see here that we now have the,items loaded into the,data of our view instance and that now,allows us,to data bind them to elements on the,page,all right so what we're going to do now,is build this search results section,let's head back to the code and inside,here,what i'm going to do is first add a v if,up here now essentially what this does,is,this element will only show if this,condition is true,so that's how we do an if statement,basically in view js,and what i want to ensure is that,items.length,is greater than zero because if,items.length isn't greater than zero,we don't have any items coming back and,nothing will display anyway,so what i want to do is if that's the,case,create a else statement here,and so this will trigger if that,statement isn't true,and in that instance there's only really,two possibilities,one it's loading or two there were no,results that came back from the search,so i'm gonna nest an if statement in,here,and say v if loading then,we're gonna write this basic loading,indicator just loading with three dots,and then put the v else there of,your search returned,no matches okay so back inside here what,i'm going to do is create a loop,and how we do that in view we combine it,with html,i'm going to give all these classes,based on what i've set up in the,css we want to create as many of these,divs as there are,items in the array so how we do that is,add an attribute,called v4 and then inside we do item in,items,and now we can reference each object in,that array,okay so now i'm going to open up an a,tag,and then inside i'm going to add an,image tag,the class of search item,image and the title here of,search item title and now what i'm going,to do is add in,dynamic values based on this object to,populate,these html elements the way i do that,is by putting a colon in front of the,attribute to make it dynamic,so usually in your anchor tag you would,have a href and then you would put in,an explicit value what we can do to use,a variable inside of here instead of an,absolute value,is to put a colon in front of the href,and then we can put in,item dot url so if you want to,know what attributes we're looking for,we can just inspect the data inside our,view dev tools and here you can see,there is an attribute called url,and that will direct us to the actual,product so we can put in,the value of that attribute right there,over here,for src as normal we could put in an src,field and put in an absolute value,but instead we want to substitute the,value of the attribute in here,so i'm going to put a colon in front of,the src,and then what we want to put in here is,the value of item,dot image so again looking back at the,code,the image field here has the url of the,image,so we can slot that in there and then,here,for the title we can use a field called,vhtml,to insert text and we're just going to,type in item,dot title which again is here on this,object there you can see it right there,all right so now if i save refresh the,page over here,we've got an error cannot read length of,undefined,let me check why that's the case uh we,didn't,i put item here not items so saving that,again,refreshing the page you can see the,search results for shoes,have now come up and are displaying on,our page,so now our user interface is reflecting,oh wrong app need to click on search,page,our user interface is now reflecting,what we have here,now of course this is not very,interactive because we're already,setting the,search term so we're not allow allowing,the user to actually create their own,search term,so what we're going to do is bind this,data value to the value,of this input field and then on the,change event we're going to run the,search method,okay so how we do that heading back to,our code,up here on the input field i'm going to,add an attribute called,v model and that's going to bind,the value of this input to whatever i,put here so i'm going to bind it to,search term,and then when it changes what i'm going,to do,is trigger our method which as you can,see down here is,search within argument that equals the,search term,so we're going to do search and then,search,term notice here in the actual html code,we don't have to make reference to this,the reference to this is implied okay,save that and let me refresh over here,now you can see because there's two-way,data binding that this,value here that we've set on the,instance explicitly is now,in our input field and if i change this,instead to like sneakers and then hit,enter to trigger that change event,you can see the search results have now,updated all right and i can change this,to,shoelace because i know there's a,shoelace in my store,or i can set this to shirts,hit enter and now the search results for,shirt come back,it's that simple guys if we look inside,the,network tab here and i'll just clear all,the other network activity,if we go in here shoes you can see it's,hitting that end point,and returning this data to which we're,then inserting directly in our view,instance,and then reactively updating our ui,now that's basically the core,functionality right there guys but,i want to add a few more things to this,code before we commit and,finish up this tutorial number one i,want to create a link to this page,so i'm just going to go in to the,layout file theme.liquid which is where,i have my header,i'm going to copy this link right here,paste it below,the url to the page is page,slash search put in the text search,products,and that'll give us the opportunity to,navigate to that page whenever we want,also i don't know if you noticed but,we're only doing loading,when items.length is zero and the,problem with that is if we're going from,one search to another,where the first search did have items in,the array,and then we're going to another search,with items in the array the state of the,items array never actually gets down to,zero so we should really fix this,how we're going to do that is up here,let's add,this loading state and then we can make,this an,else if and then we can make this an,else okay let's refresh the page,head over to our view instance look at,what happens when we load the page,it's loading quite fast so we're gonna,have to be quick to look at it but as,you can see here,it's loading on page load now let's see,what happens when we switch,to another search term you can see it,goes to loading,now obviously we'd want to make that a,bit nicer like have a loading,indicator or perhaps have a nice,transition,but we won't do that in this particular,class another instance is if we,hit enter with no search term,it's coming back with these results,not sure why let's head into our network,tab and see what happens,if i click on clear and let's search a,blank,so go shoes,then let's go to blank and then hit,enter,let's see what happens here,scrolling down you can see that we still,get products loaded from the api,when there is no offering a search term,at all,maybe we want that but probably not so,i think we should handle that case so,what i'm going to do,is add another condition here and,search term does not equal blank,and then what i'm going to do is use,this label field that we created,to put in a message okay so,i'm going to add another attribute here,to our data called message,i'm going to load that into this label,using vhtml,as simple as that and now we need to set,the message,so when we run search let's,only run this code if the term,is not blank so i'm going to copy all of,this code put it into this if statement,and then we're going to say if term is,not blank,run this code if it is blank,we'll update the message this dot,message,equals please enter a search term,now that message is going to stay there,permanently unless we reset it,so up here i'm going to set that message,back,to empty if we do actually get a match,back,actually we want to make sure that the,product suggestions.length is greater,than zero so i'm going to put it in,there instead,all right refresh the page over here it,loads,shoes on page load but if i try and run,without a search term it's going to have,please enter a search term,in there and if i go sneakers that,message will disappear,if i go back to trying to run without a,search term again,it'll say please enter a search term,another idea is that we might not want,to,run a search on page load so do not have,this default search,so i'm going to remove this dot search,from the created lifecycle hook and,shoes from the search term and let's,just have a look,at what happens when we load the page,without running search on page load,here you can see we've got search term,and search results and it's just stuck,on loading,so we don't want that to be the case,here on loading let's set that to,false as a default value and,we're still going to have loading set to,true when we start that ajax request so,we don't have an issue there,but what we can do here is set the,message by default,to please enter a search term so this is,going to be the default state when the,page,first loads okay refresh the page over,here,and unfortunately we've got your search,return no matches,so we want to get rid of this section,altogether,on page load so how we can do that is,instead of having the check for search,term here,i'm going to remove it from there and,let's wrap,all of this in another v if so div,v if let's cut all of this code,paste it in there save that,head back to our page still showing that,section let's have a look at our view,data right now,search term is blank which is,interesting,oh actually i misspelt the variable here,it's search term in camel case not with,the underscore,so that probably explains the error now,we've got our default state here and if,i type in,sneakers you can see we get the search,result back shoes,but the problem is it's responding,straight away to when the search term,changes so that's not gonna work,i'm gonna have to refactor this and,let's do,another field called last search i'll,create that in here,last search on page load is going to be,empty,of course and then we're going to set,last search,after we actually search for it so if,the term is not blank,we're going to set this dot last search,to the term,all right let's try that now,shoes hitting enter without a search,term says please enter a search term but,keeps those results,if i put in sneakers now you can see it,goes loading and then it loads those,sneakers,if i put in shoelace it has a loading,state and then loads the search,results if i put in shirt,same thing and then again attempting to,search without a search term,i get this message please enter a search,term,so those are a few ways we can clean up,our app here,of course in terms of ui and design we,could do a lot better here,we could have a better loading state,rather than just loading dot dot dot we,could use transitions in view,we could have a sidebar on this page as,well but the important thing here,is what view is doing what we're doing,here,is we're essentially taking data from an,api,putting it into a view instance and,binding that data,with our user interface connecting that,all together so that we have,an interactive page on the front end we,don't need to reload a new page,because the data is being loaded in via,ajax,and we're updating the ui based on view,so this is an example,of how we can use vue in shopify theme,development,more common examples i would think of,using view in shopify theme development,would be,the product page so on product pages,with multiple variants we need to handle,variant selection on the front end,so when we change these options we need,to recalculate the variant,so that when we click the add to cut,button the correct variant gets added,and also this gets updated on the front,end,also the cart page we can make this a,lot more interactive using view,as you can see here i'm loading my cart,app here and so if i click,add to cart it'll get added to cart,straight away without a page reload,and i can change the quantity of any of,these items pretty sure i showed you a,little bit of this before,but essentially that's what i teach in,the full skillshare class on using vue,in shopify theme development i encourage,you to check that one out,otherwise if you have any questions,about today's video definitely leave,them in the comments,i hope you can see the benefit in using,vue in shopify theme development,it's something that i've done recently,with the latest website i've been,working on and,it has been a good way to up my skills,in shopify theme development so i hope,you've enjoyed this video,i'll catch you on the next one

Congratulation! You bave finally finished reading how to mount shopify vues and believe you bave enougb understending how to mount shopify vues

Come on and read the rest of the article!