Shopify Design Tutorials Using Product Handles in Themes
hi this is care from Shopify today we're,gonna have a quick look at product,handles and how we can use those for CSS,purposes and also to render different,templates depending on the type of,product that were actually viewing okay,so before we start let's just go to the,admin and I just want to show you where,you find product handles now a handle is,very similar to a slug in other,platforms such as WordPress and it's,created for you automatically when you,create a product but you can actually,override it this is our coffee grinder,page if we scroll down to the bottom you,can see this section here URL and handle,and it's called coffee - grinder now we,could change that there's no real need,it is perfect for our uses for this,demonstration but if you had a,particular need to then you can actually,just change it there and then save it,out okay so we actually use the product,handles in a couple of places within our,themes what I tend to do when designing,a Shopify theme is add a number of,useful potential classes to the layout,phone now the layout file is the outer,skin of our theme it's the the the,father includes all of the sort of,furniture that's going to appear on the,majority of the pages as well as ie male,declaration and that kind of stuff but I,just really want to show you down here,the body element here okay so we're,doing a couple of things the first is,we're adding the name of the template to,the ID now the name of the template will,return things like collection or cart or,blog that's useful for hooking into more,perhaps some JavaScript or that kind of,thing and but actually what I tend to do,is add in a lot of the different things,relating to the particular product or,the particular collection to the class,attribute here so let's just bring that,down a bit and hopefully that will,highlight it a little bit clearer for,you okay so what I'm doing here I'm,asking a couple of questions using,liquid I'm saying if the template now,remember template will just return the,name of the template,adult liquid extension equals product so,if it is the product template then it,will return the word product so I'm just,doing a very very simple checker,comparison and I'm saying if template,equals product then I want to output a,class name of product and then leave a,space and then products - and then the,handle associated with that particular,product so in the case of our coffee,grinder if we're on the product template,it will output products leave a space,and then product - coffee - grinder and,then I close off my end if statement now,what this will result in is every time,we view a product template the handle of,that particular product that we're,viewing will be injected here with the,prefix of product - now this is really,useful if you want to hang custom CSS,styles or maybe some JavaScript off that,particular product and I'll show you how,easy it is to hook into those in a,minute I also do the same thing for,collections here I say if template,equals coll
Let's move on to the first section of watchtica theme shopify
Como Traduzir Tema Shopify | QUALQUER TEMA | QUALQUER LINGUAGEM
Como Traduzir Tema Shopify | QUALQUER TEMA | QUALQUER LINGUAGEM
o botão de traduzir ele em muitos temas,sumiu desapareceu eu não sei por qual,motivo se foi a shopfly ou algo assim do,tipo mas muitos temas o botão de,traduzir não está aparecendo e eu sei,que traduzia um tema manualmente é muito,chato e muito complexo porque você tem,que pegar cada frase colocar no tradutor,copiar colar e ficar fazendo esse,processo várias e várias vezes,dependendo do tema são mais de 800,frases Então nesse vídeo eu vou mostrar,para vocês uma solução que muitos temas,oferecem é um processo bem simples só,que ninguém ensina então já que eu tô,mostrando aqui para vocês deixe seu like,e se inscreve aqui no canal pois isso,ajuda o canal a crescer e esse conteúdo,chegar a mais pessoas que precisa dessa,informação OK agora Bora para o vídeo,Quase que eu me esqueci se você quer,adquirir uma loja virtual seja ela na,shopfly em qualquer tema do jeito que,você quiser o link tá na descrição para,você entrar em contato com a equipe e tá,adquirindo uma loja do modelo do jeito,que você quer ok O link tá na descrição,Pessoal esse exemplo que eu vou mostrar,para vocês você pode usar para qualquer,coisa aqui para trocar a sua loja do,português para inglês espanhol para,português o que for certo o que eu não,estou vendo a galera é reclamando que,vai montar uma loja sei lá é inglês e,mas não consegue mudar por Simplesmente,a pessoa vem aqui em ações do tema,editar idiomas e o botão não aparece,simplesmente o botão de digitar,editar tradução não aparece para você,trocar por em inglês e outros idiomas,antes por favor né que me mostrar isso,aqui para vocês deixa o like se inscreve,me ajuda bastante o processo é bem,simples e o vídeo vai ficar bem curtinho,ok É como você pode ver aqui ó esse,igual eu acabei de mostrar né Acabei de,mostrar o tema ele já tá em português,Brasil mas exemplo eu quero mudar ele,para o inglês certo o que que eu que eu,faço nesses casos a gente vai tá vindo,aqui em ações a gente vai estar vindo,aqui editar código e eu sei que hora,dessa tem muitas pessoas falando Ah o,Alisson não sei mexer em código HTML,muito complicado eu não sei como isso,funciona não pode ficar despreocupado,que esse processo é muito simples aqui,pronto já estamos aqui nos códigos não,tem nada de segredo aqui certo vamos tá,descendo até lá embaixo na última página,aqui em localidade e aqui em localidade,tem várias línguas que o seu tema vai,ter certo no caso do meu aqui ó tem o Pt,Br né português Brasil português,portugal,inglês e espanhol e o restante dessas,acho que isso aqui é francês e o resto,eu não sei pessoal certo mas um exemplo,como vocês podem ver o meu tá português,em inglês certo mas o seu pode estar sei,lá em inglês então exemplo que o senhor,pode estar em inglês então certo no caso,se o meu tivesse deixa eu apagar esse,aqui para não virar uma bagunça,aqui ó,mas o meu tá em inglês olha se o meu tá,em inglês eu quero passar ele para o,português então Primeiramente você vai,vir no inglês certo no caso o que o seu,tá sentado certo então se o se
After seeing the first section, I believe you have a general understanding of watchtica theme shopify
Continue the next second section about watchtica theme shopify
71. Project 2 - The Change Event For The Quantity and Style Filters
71. Project 2 - The Change Event For The Quantity and Style Filters
hey everyone in this video we're gonna,start,setting the change event for the filters,so let's get started with the quantity,which is an,input field so here it is it has the id,of quantity let's copy this,let's go to visual studio code so after,the page loads,we're going to update the parameters and,do everything we know we are doing,and then we can start setting the event,so let's select that element which has,the id of quantity,and in jquery the name of the event is,change which is,also a method inside the method we need,a function,and inside here is the code that will be,executed when the change event is,detected,if you want you can try other events,like on key up,or on key down but i i think in this,case it's better to use the change event,because let's say we want to write 1000,if we use the on key up event when we,type,1 this is going to update everything,then we type 0 it's going to,update again so i don't think this is,good user experience,so in this case i prefer to use the,change event,so this is only going to work when we,click out,of the element so again,if you want you can try other events to,see which one,you prefer so inside here when there's a,change to this,element i'm just going to,update the search params dot,quantity i'm just gonna do this i don't,have to,update everything again because only the,quantity is changing so i'm just going,to change,this property and then instead of,calling the,update params because here it should be,up to date,i can just call the update,or the details function,so this is all we have to do in order,for the quantity feud,to work let's try it out i'm just gonna,save this,all right so let me refresh the page now,we have 10,i'm going to try 100 so as i said,nothing happens until i click out of it,so i just clicked out and now we are,seeing the,updated value like i said we need to,format this number to force to two,decimal places,to include thousand separators like,let's try,1000 so as you can see we need,thousand separators but let's do this,later,this is fine for now we can see that the,quantity,filter is already working,so let's go back to 10 it's up to date,again so this,seems to be working well now let's go to,style because this,is also a form field and then we can,take care of these two,elements so for the style we can also,use a,change event the same way so,the id is style,so the structure is going to be pretty,much the same let me copy this,i'm also going to use the change event,i'm also going to update the order,details but here instead of,changing the quantity i'm going to,change the,style so here it is,search params.style then i'm going to,get the new value,and after getting the new value,we're going to update the order details,again,pretty cool let's save this refresh the,page,and now it's going to be cool because if,this works not only the price is going,to be updated,but we are also going to see a different,photo,so let's cross our fingers to see if,this is working i'm going to change this,
Congratulation! You bave finally finished reading watchtica theme shopify and believe you bave enougb understending watchtica theme shopify
No difficulty
