How to use Vue.js in Shopify Theme Development (Predictive Search API)

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

Channel: Code with Chris the Freelancer

Views: 4,890

Keywords: Chris the Freelancer, Code with Chris the Freelancer, Web Development, Learn to Code, Vue.js, Vue, Shopify theme development, Shopify themes, Javascript, Shopify API, Shopify Predictive Search API, AJAX API, Front end web develppment

Id: p8Te0fdN3hc

Length: 32min 36sec (1956 seconds)

Published: Wed Apr 28 2021