what should the advance loop shopify look like

what's up youtube welcome back to,another edition of coding with robbie my,name is robbie and in this video we're,going to be covering the shopify,products page more in depth so in a,previous video we kind of went through,all the different shopify templates i,kind of showed you how to get started,with them but we really didn't dive too,deep into any of them so in this video,we're going to go deep into the product,page and we're basically going to turn,our boring product page here into a,cooler one with uh we're gonna do like a,thumbnail product image selector we're,gonna do swatches we're gonna make it so,the compare app price shows and the,prices will update with the variant,we're going to make it so the url,changes so it will,persist across loads you can share the,specific variant we're going to do a,better quantity selector like this and,we'll do a buy it now button,so here's what i'm starting out with,this is basically what we created in the,previous video i just added some styles,to it here's the um liquid right here,so we just got some extra divs and stuff,now but here's the product images it's,just looping through them and rendering,an image tag look at the product title,right here the product price,product description and then we got our,product form which is that default,select right here,we got um a quantity selector right here,which is just a input and then we got,our add to cart button so we're going to,get right into this right now make sure,to like and subscribe and uh let's get,right into it all right so i think the,best place to start would be taking our,default select here and turning it into,swatches so here's the default shopify,dawn theme and if we take a look at how,they're doing it let's just inspect,their swatches you can see they're just,input type radios and then if we go up a,little bit we find the product form,right here and within the product form,they have a hidden um input with name id,and the value is equal to the variant id,and whenever someone clicks one of these,radios it finds the matching variant and,just updates the value on that hidden um,id input,so we're going to handle ours the same,way so let's go back to our page,and let's go to our code and let's just,start by turning our select into a,hidden input,so i'll go up here i'll go input type is,equal to hidden,uh name is equal to id,and then for value,we gotta go product,dot,i gotta look it up but there's a special,property to get the selected variant,it's selected or first available variant,so product dot,selected or,first,available variant,dot id which is the variant id,just like that and now we can delete our,default select,let's do that go back and check it,i'll refresh the page,and uh it's gone if we go in dev tools,we can see our hidden input right here,and it's got the values so it appears to,be working good,so next we can build out the html for,our swatches,so let's go back here and we'll add a,new section right below that input so,div class is equal to product option,and then we're going to loop through,we're going to go for option in,product dot options with values,and four,and then uh for each one of these we're,going to render a field set,and then this field set is going to have,a legend,and let's uh just put option.name and,see what happens,so i do that i save it come back,and we got our three field sets and one,for each option so size color and,buttons so now for each one of these,we're going to loop through the values,within that option so let's go back here,and we're going to go,for value in option.values,and uh yeah for each one of our values,let's render a div,and then we need our input type radio so,input,type is equal to radio,name,is equal to option,dot value,now option.name,uh what else we got,we got to add a checked property so let,me just format this a little different,this is going to be a long line,so let's add the check property to do,that we can go if,uh option,dot selected value,is equal to the current value that we're,looping through,if that's true let's add the property,checked,and end if i'm not used to this,autocomplete that's like keep typing an,extra percent thing,uh there we go let's see we got checked,we got type we got name we need a value,and the value is just going to be equal,to value,and then we also need a id and this has,to be unique so let's go,option dot name handle eyes so there's,no spaces or anything,dash value handle eyes,so that should be unique for every uh,product option,and then let's do a label below that so,let's go label,we'll give this a four attribute and,it's gonna match our id up here so let's,copy this,and then uh,inside that let's just put the value,and then one last thing we really only,want the swatches to show if we have,more than one,product variant so let's wrap this in an,if we'll go if,uh,product.variance.size is greater than,one,and end this,fix the formatting and let's try this,out so we'll go back to our html i,forgot the if right here,go back to our html i'll refresh and,there we go we got swatches basically,for each one i can click around and the,labels work and it's not affecting,any other,radios on the page or anything,so that looks good so now we gotta hook,it up uh to that hidden input and this,is all gonna be javascript so let's go,back to our code i'll just scroll down,and uh,let's see it looks like i started some,stuff down here let's delete it and uh,yeah to start let's just get the product,as json so we can go,product json,that's just console.log that,so we have this big product object let,me show you what it looks like,it's the whole product as a javascript,so we can use this,specifically the variants right here,we're going to be looping through this,to find a match,so before we can find a match we've got,to get the selected options so let's do,that,so we're gonna add an event listener to,all the radios,and listen for changes so let's go,document,dot query selector all,and we want all dot product option,input,type radios,and then uh,for each one of those we'll have a radio,and we want to add an event listener so,let's go radio.ad event listener,we want to listen to change,and then when something changes we'll,run our function right here,and let's just make sure that works so,the console.log hey,let's go back to our page and check it,out i'll refresh and now i make a change,and i don't get hey so something went,wrong,let's see product option input type is,equal to radio that for each radio,radio to add event listener change i,think i was just too quick it didn't,update let me try again,there we go we're getting hey so it's,working all right,so the first step we gotta get the,selected options so let's just create an,empty array,and then let's get all the checked,inputs so let's go,document.queryselectorall,just like before and this time we just,want the ones that are checked,we're going to loop through those so,four each,um and this is going to get a radio,again let's open that up,and let's go selected options,dot push,radio dot value,and that should grab all the selected,options so let's make sure that works,console.log selected options,go back and refresh,and yeah now you can see we're getting,all the selected options,so now with those selected options we're,going to loop through the product,variants from this object up here and,we're going to find the one that matches,so let's go var matched variant,is equal to,uh product dot variance,dot find,and this is going to get the individual,variant,let's open that up,and then in here we're going to loop,through our selected options and make,sure this variant has all those options,so let's go for,var i is equal to zero i is less than,selected options.length,i plus plus,and then um let's open that up,and we can do a check so let's go if,um if if selected options,dot index of,and what are we checking for we're,checking for variant,dot options,at the index position we're currently on,so if that's equal to negative one,then we know this variant is incorrect,and in that case we'll just break out of,the loop,and then uh yeah let's do some stuff,let's put a variable up here called pass,so it's going to be equal to true by,default and then we're looping through,the variants and if we find one that,doesn't exist we can uh set the sequel,to false,and then if all the options match it'll,never get set to false and it'll still,be true down here in which case we'll,return,pass,and this should get us the selected,variant so let's see if that works i'm,just going to console.log matched,variant,and we'll go back to our page i'll,refresh,and i click and it looks like it's,getting it large jet black plastic yep,um let's see,xl red plastic so it's working so now we,can use this variant object to basically,change stuff on our page,so the first thing we want to change is,changing the value on that hidden input,so let's do that let me check out our,html,where we got it i'm going to add an id,to this and just go product id,so we just select that nice and easy,let's go back down,and let's go let me add some comments,so,find selected options,and then we're finding,the matched variant,and then we're going to change,product form variant id,and let's do that it's going to be,document.queryselector,and we want,number product id,and we want to change the value to be,equal to match the variant.id,let's see if that works we'll go back,i'll refresh now let's go medium matte,black brass and i'll add the cart,and i get medium matte black brass so,our swatches are working correctly,and um yeah they don't really look like,swatches but all we gotta do is add css,to style it up and we can make it look,exactly like this,so i might do that at the end but i,don't want to spend too much time on the,styles,all right so next up we're going to make,it so when we change variants it'll,update the url so we'll have variant,urls and we can share those and refresh,and it'll stay on the correct variant,so to do this we're going to need a,library just to edit the url and add,query parameters,and the one i like is called url parse,it's super popular i just searched for,url parse cdn i went to js deliver i,went to dist and then i went to,urlpars.min.js,and i just added this to my,theme.liquid right here,so you can do the same or you can,download it and put it in your theme but,i'm just going to do it like this so,let's go back to our product.liquid,and uh right below where we're changing,the id on that input let's go change url,and the first thing we got to do is just,parse our current url so let's go var,url is equal to,new,url parse which is that library we just,imported and then we got to pass this,location,in our window,dot location.href,and then the second argument we put true,so it parses all the um query parameters,and stuff,let's just console.log that,make sure it's working so let me go back,to my page,i'm gonna open up,console and then refresh,and then i'll change something and you,can see we get our object right here,it's all parsed out and we got the query,thing right here,so now to uh do the variant urls we,check out the example we just do variant,is equal to the variant id,so to do that we can go,url.query.variant,is equal to,matched variant.id,and then uh to get,the new url we can go url.tostring,and let's just console.log that to see,what happens,whoops go back here,and wait for it to update and yeah we're,getting a new url with that query,parameter added to it and it's changing,every time,so now we got to replace the url without,refreshing the page or anything i never,remember how to do this so i googled it,and i went here and scroll down a little,bit and we want replace state so i'm,just going to copy this,and then i will go down here,i'm just going to go hey,window.history.replacestate we don't,have any state data,i don't care about the title,let's just change the url to this url t,string,save that and that should do it let's,try it out,i'll go back to my page,and now i change variants and you can,see it's adding our url,and now if i refresh the page it should,stay on these variants so let's try that,out i refresh and yeah it stays on it,which is nice,and uh since we use replace date we can,just go back once and get to the old,page it's not going to create a new,record for every single change all right,so next up we're going to do the product,prices we're going to make our show the,compare at price and we're going to make,them update whenever we change variants,so,before making this videos seeing how the,default shopify theme does it and it's,pretty weird so if we go to inspect and,go to the network tab whenever they,change variants,it's actually sending a get request to,retrieve the specific section on the,page,and then it's parsing out the response,which is a bunch of html,finding the new product price and,updating it that way so that's why it's,so slow and i think that's a really way,a really bad way to do it so i'm not,going to do mine that way but just note,that's how shopify does it so let's go,back to ours and uh let me refresh get,out of this preview,go back,all right so first things first let's,just show our compare at price so let's,go inside our html we'll go to,product price right here and let's add a,new one let's go,p class is equal to product compare,and in here we want to show,product,dot compare at price,make sure to add the money filter to it,just like that let's see if that works,i'll go back,and i'll refresh and i get it right,there,and then one thing we want to do is,we're showing it for the whole product,we actually want to show it for the,specific variant,so let's add that um dot,uh selected our first available variant,to both of them,just like that,and um let's see if that works so we get,it still looks good yeah 100 is the,correct amount,so now we need to update these whenever,there's a variant change so let's go,back down to our javascript,and we'll add a new section down here,change prices,and uh yeah let's change the prices so,let's go,document.queryselector,and let's select the product price,and then we want to change the text,content to be equal to matched variant,dot price and you're going to see an,error right here so check it out we'll,go back,there we go so now the price is updating,but we just have it in cents so i think,that's why shopify does fetch the,section with the ajax request just,because the liquid has access to,the money filter but i'm not going to do,that in mind so i found a function that,kind of emulates that money filter so,i'll link this up in the description but,it's just a function that does it so,let's copy it,i'm just going to throw it in my,scripts.liquid,and now i'll just uh,go var so now i have this function,called format money and it just takes,the sense which we have and then a,format that we want to format it with,so let's go back here and let's run this,through that function so format money,and then we're giving it the cents and,the second argument is the money format,and we can access that through liquid,with shop,dot money underscore format,just like that and let's see if that,fixes it,so let's go back to our page,it looks good and then i change and now,it's using our money format which is,nice,so next up we have kind of an issue,where,say oh let's do the compare at price,real quick i forgot to do that so copy,this product dot compare,and then we got to give this uh,the compare at price,my bad forgot to do that,so let's go back,refresh and now it should be updating,both of them,but we have an error if there's no,compare app price we probably shouldn't,show this at all and also if it's more,than if it's not more than the price we,don't want to show it,so let's fix that so let's go back to,our html,and um let's go to our product compare,and this is a long one so i'm just going,to copy and paste it,from over here,but we're just saying hey if the product,selected first available,variant.compareapp price,oh no no sorry we're going unless the,compare that price is greater than the,price,then,add class high that way we can hide it,if the compare at price isn't greater,than the price,so i'm not sure if i have a hide class,in here so let me just add one at the,bottom just in case,so let's go back here and refresh,and there we go now it has that class,hide because it's not greater than the,price so now we got to toggle this class,with javascript also so it works on a,change,so let's go,back to our product template and i'll,scroll down here,and let's go let's see how can we do,this let's go,if now let's go match variant,dot compare at price,is greater than matched variant dot,price,uh,if that's the case then we want to,remove the class so let's go,and get the element right here,let's go classlist,dot remove,we want to remove the hide class,other that's another long one otherwise,we want to add it,so,and so now i should toggle that class,depending on whether uh the price is,greater so see if that works i'll go,back here,i don't see it and then i go back and i,get it,and it hides it again,and there we go we got our prices,working all right so next up we're going,to do our product images we're going to,make it so it's a big image up top and,then we'll have some thumbnails below,which we can click and it'll swap the,images and we're also going to make it,so when we select a variant that has a,featured image it'll automatically,switch it over here,so let's get started let's go to our,html and right here i'm just looping,through all the images we're going to,add a new image tag above,so the img src,we're going to get,product dot selected our first available,variant,that featured image,and this is going to be an image url so,add that filter,and let's check it out,so let's go back here,and i refresh and i get the featured,image but check it out if we go to a,variant that doesn't have a featured,image,we're going to get a broken image so we,have to add a check for that so let's go,up here i'm going to add id product,image,and then we're going to do that check so,let's go if,product,dot selected our first available,variant.featured image,then we want to show it just like we did,otherwise,otherwise we want to show just the,product featured image which will always,exist as long as there's at least one,image,just like that,let's save that and go back and check it,out,so now we get the product featured image,and if we're on one that does have a,featured image we get that,so now let's um turn this loop into,thumbnails so let's go ul class,is equal to product,image thumbs,and then i already added some css so,mine's going to be styled,so make that a ul and then let's make,these lis,just like that let's go back and check,that out,there we go now they look like little,thumbnails and now we kind of want to,add a selected class so we can tell,which one is selected currently,so to do that we're going to add a class,on the li,i'm going to go if,image and we want to see if the image is,equal to the one that's displayed up,here,so to do that we really don't have a way,to tell if we're using the variant image,or the product image so we're going to,assign some new variables let's go up,here,and i'll just go assign featured,is equal to um,this right here,and uh since i have a variable that's,the same thing i'm just going to use it,right here,and then we'll do the same thing down,here,so featured is equal to product.featured,image,and then i'll use it,right here,and now i have this featured variable,which we can compare down here so if,image is equal to featured,then we know it's the selected one and,we'll add class selected,just like that,let's try it out,i'll go back and now the selected one,has the selected class which adds this,red border,so now uh we want to make it so when we,click one of these it'll swap the image,and swap the border so let's do that,let's go back to our javascript,and this isn't going to happen on radio,change this is going to happen on,thumbnail click so let's add a new uh,loop let's go to,document.queryselectorall,and we want dot product image thumbs li,and for each one of those,we want to add a click event listener so,let's go li add event listener,we want to listen to clip,and when someone clicks one of our,thumbnails we'll run our function right,here,so the first thing we got to do is just,remove all the selected classes so let's,go,how can we do that let's go,document.query,selector,and we want to get product image thumbs,li dot selected,and we want to go,classlist,dot remove and remove selected,let's see if that works i'll go back,and i'll refresh and i click and the,border disappears so then we got to add,it to the one that we clicked so let's,go one more line,we'll go li,class list dot add selected,so now the border should be moving,around let's try that out,that's cool and now we just got to swap,the two images so let's go,um document dot query selector,and we gave ours id product image,and we want to change uh the src so,let's go set attribute,and we want to set the src,we want to set it equal to um,the one that we clicked so that would be,li,and then we gotta get the image within,that li so li query selector,img,and then we gotta get the src from the,one we clicked so get attribute,src and that should work let's try it,out,i'll go back,and now i click and the images swap,around so that's cool,so the next part is we want to make it,so when we do select a variant that has,a featured image it'll automatically,change,so let's try to set that up,so to do that that will be inside the,radio change so let's go down here and,we'll add a new section,change image,and first we gotta check that one exists,so we can go if,matched variant.featured image then we,know we have one,and then in here we'll want to change it,so let's go,document.queryselector,get our product image,and then we'll set the src so set,attribute,src and we'll set it equal to,matched variant.featuredimage.src,just like that let's see if it works,i fix the formatting go back,refresh and now we click and it swaps,the image,oh wait we're doing it on variant change,so i go to one that has one and it,automatically swaps it but the border,doesn't swap so we got to fix that,so let's go in here,and uh we're gonna first remove all the,existing selected classes,so uh we did that below let's just copy,it,right here,so we're finding all the thumbs with,class selected and just uh,we're finding the only one with class,selected and then removing that class,and now we got to add it to the one that,matches,so if we console.log this featured image,we'll see what we get,let's go back here let me start on one,that doesn't have one open up console,and i select a variant that does have,one we get this featured image right,here and you can see it has this,position property which tells us uh what,index position,in the uh product images array and,liquid starts at one so it's two but in,javascript it would be one so let's use,that we'll go,um document.product,document sorry document.queryselectorall,we want to get all the product image,thumb,allies and then we want to select the,specific one at um,match variant.featured image dot,position,and then we gotta go minus one since,there starts at one and r starts at zero,and then we want to add the selected,class to that so let's copy this,i'll just go,classlist.ad selected,i think that should do it let's try it,out we'll go back,and,um let's see let me start at one that,doesn't have a featured image and then i,switch,it changes it and the border,automatically changes so there we go we,got our product images working pretty,good all right so next up we're going to,be handling the add to cart button we're,going to make it so the variant is out,of stock it'll change to add a stock and,disable and we're also going to add a,buy it now button,so let's go to our code and let's check,out our html,for the button it's right here and let's,just uh,let's do an if else statement in here,and we're going to go,if uh product dot selected our first,available variant,available show add to cart and then,otherwise,uh we'll show out of stock,and then we'll end it,so that'll change the text depending on,whether it's in stock and then we also,want to disable the button if it's out,of stock,so for that we can do the reverse we can,go unless,the product is available,then uh,add disabled,and unless,let's try that out that should do it so,let's go back to our page i'll refresh,and this one's out of stock and i can't,click it because it has the disabled,attribute,and then if i do go to a variant that is,in stock and refresh you get add to bag,and the attribute's gone so now we got,to toggle that um as we change variants,so let's go back into our javascript and,below change image we'll add a new,section change button,and then let's select the product button,let's see does it have an id,it doesn't let's add one,and we'll just call it add to cart,let's go back down i'll select it by,that id so let's go,document.queryselector,um add the cart,and i'll just assign this to a variable,called add,and then let's go,if,matched variant dot available,else,all right so if it's not available we,got to disable the button so let's go,add disabled as equal to true,we're also going to want to change the,text inside so let's go add text content,and we'll change it to add a stock,and then we gotta do the reverse in the,uh if part so let's copy this,and we'll change it back to add the cart,and then uh we'll change this to false,so let's see if that works we'll go back,to our page i'll refresh,and now i get add the bag and it changes,to add a stock stops working go back it,works again,so that works good,so now let's add a,buy it now button,and just uh one thing to note about buy,it now,i was looking at solutions for this and,one thing you can do within your product,form,is if you add a hidden input let me show,you this,so where's my product form right here if,i add it hidden input,that has the name returned to and the,value of checkout it'll automatically,take you to checkout so check this out,we'll go back to our page,and now if i hit add the car it adds it,to cart and takes me straight to,checkout,so that's cool but we really want to add,the bag button to go to cart and then a,new button to go to checkout so i'll,show you one way to do that,so let's remove this,and then let's go down to our button and,i'm just going to copy it,and i'll add a new one for uh buy it now,so let's go buy it now,and i'll give this a different idea i'll,just call this uh let's see buy it now,and there's a couple ways we could do,this um one would be to use the ajax api,and then add an event listener on this,so it clicks it adds with ajax and then,automatically redirects to checkout the,second way which is the way we're gonna,do it is when someone clicks this we're,gonna prevent the default so it doesn't,submit the form we're gonna append that,um hidden input and then we'll submit,the form again so it goes to checkout,so uh let's do that let's go back to,that answer i found,and let's copy this,and then let's go to our javascript,and now let's add a new event listener,down here we'll go document.,let's select hashtag buy it now,we're going to add event listener,and we'll listen for clicks,and then it's going to get a function,which receives the html event which will,prevent the fault-on,prevent default,so now that button should be doing,nothing when we click it so let's make,sure that's working go back here click,buy it now and nothing happens so now we,can run our custom code,and we're basically just going to append,this and then submit it so let's create,this in javascript let's go var,input,it's equal to document dot create,element,uh input,and then we gotta go,input.value is equal to,slash checkout,input.type is equal to hidden,and then we got uh input name,is equal to return underscore two,so these four lines just basically,recreate this element now we're going to,append it to our form so let's grab our,form up here let's just go for form is,equal to,document.queryselector,and let's see how we can select our form,let's go to our page i'll refresh,and uh inspect let's see where's the,form,right here let's select it by this class,shopify product form,so there we go there we go we got our,form element so let's append this input,to it so form dot append child,and we want to append the input and then,we want to submit the form with form dot,submit,so let's see if that works let's go back,to our page and refresh,and now i click add to bag and it should,go to the cart which it does,and then if i click buy it now it adds,it and it goes straight to checkout,and this takes a second to load but that,is working yeah wait for it there we go,and then the last thing we got to do is,just make it so it changes this byte now,button also,so we can just go down uh,right here and just copy what we did so,let's get the buy it now button,buy it,now,we'll just copy these and do the same,thing,so this would be buy and we want the,text to say buy it now,and then down here we gotta do the buy,also,let's see if that works we'll go back,get out of stock out of stock neither of,them work and then we change and it,switches back,so there we go we got our buttons,working and you'll probably want to add,some disabled styles to indicate that,it's,a non-functioning button a little better,but,i didn't do that,alright so last up we're going to do the,quantity selector just like they have,here and there's really nothing special,happening here they just have an input,just like we got and then they just put,a couple buttons around it that modify,that input value,so we're going to do ours the same way,and to save a little bit of time i,already styled mine up,and uh i changed the html a bit we still,got the same input i added a couple,buttons on the left and right and just,wrapped it in a parent div,so now we're going to hook this up so,let's go down to our javascript and,we'll add a new event listener let's go,document,the query selector,um and we want to get,dot,quantity selector,plus,and then we'll add an event listener,that will listen for click events and,we'll run our function when someone,clicks it,and then let's start just by getting the,current value,we can get that by selecting,our input,which was let's see what the id is on it,just id quantity,where am i at right here,so let's go number quantity,and this is going to return a string we,have to make sure to make better numbers,so let's wrap it,and we want the value,not just the element,so that should get us our current value,and then uh we're on the plus button so,we want to increase it by one so let's,uh let's see,let's get that element again,and we're going to change its value to,be current val plus one,let's see if that does the trick let's,go back to our page i'll refresh,and now we got a plus button working so,now we gotta do the minus button so,let's do the same thing let's copy this,and this time it's gonna be current,value minus one,and we only want to do that if the value,is greater than uh one so they can't go,down to zero so let's go if,current value is greater than one i'm,gonna allow them to go down,and let's try that out,whoa it didn't work so what i do wrong i,added it to the same exact selector this,has got to be minus,so we can go up and we can go down and,it stops at one let's just make sure,this works let me,do a variant i know we didn't select,let's try this one and let's add 10 of,them,add the cart,and we get 10 of them right there so,everything's working good so i think,that's a good um place to leave off and,i hope this helped understand the,product page a little bit and make sure,to like and subscribe leave a comment,let me know you're there,and uh yeah my last video was a bust so,i probably won't be doing any more,javascript games it seems like you guys,like this shopify stuff you guys like,the ghost stuff and the,dino stuff so i'm gonna try to do more,of that hopefully i said dino right,everyone got on my case last time,but yeah i'll see you in the next video,you

Congratulation! You bave finally finished reading what should the advance loop shopify look like and believe you bave enougb understending what should the advance loop shopify look like

Come on and read the rest of the article!