Kako dodati klasu na stavku Shopify izbornika koristeći Liquid

Ponekad vam je potrebno da se jedna stavka u izborniku razlikuje od ostalih iz bilo kojeg razloga, ili želite dodati Javascript na određeni element. Vizualni dio možete riješiti s CSS :nth-child() svojstvom i ciljati na stavku koju trebate. U primjeru ispod ciljamo na 5. element u našem izborniku/navigaciji i dodajemo mu stilove:

.SidebarMenu__Nav:nth-child(5) { background-color: var(--brand-color); color: var(--color-light); }

No, prije ili poslije ćete doći do situacije kada ćete morati staviti klasu na stavku navigacije u Shopifyu kako biste postigli što želite. Naravno, koristit ćemo Shopify Liquid da to postignemo.

Ovo je mali trik koji sam pobrao od kolege Marina.

Shopify liquid “if link.title contains”

<span class="{% if link.title contains "Shop" %} shop-btn {% endif %}">{{- link.title | escape -}}</span>

Dakle, ono što govorimo je: ako postoji poveznica koja sadrži riječ “Shop”, dodaj klasu pod nazivom .shop-btn na nju. Ako ne, ne radi ništa.

{% if link.title contains "Shop" %} shop-btn {% endif %}