Shopify Liquid – jezik za predloške koji pokreće logiku vaše trgovine

Shopify Liquid je moćan i fleksibilan jezik za predloške koji se koristi za izradu i prilagodbu dizajna i funkcionalnosti Shopify online trgovina. Omogućuje dinamičko generiranje sadržaja na temelju podataka iz vaše trgovine, poput proizvoda, kolekcija, informacija o košarici i podataka o korisnicima.

Liquid je razvio Shopifyjev suosnivač i izvršni direktor Tobias Lütke.

Liquid stvara most između HTML datoteke i pohrane podataka, dopuštajući nam pristup varijablama iz predloška ili Liquid datoteke, s jednostavnom i čitljivom sintaksom.

Varijable i objekti

• Varijable: Možete pohraniti i koristiti vrijednosti u Liquid-u s pomoću sintakse {{ }}. Na primjer:
  {{ product.title }} <!-- Prikazuje naziv proizvoda -->
• Objekti: Shopify pruža objekte koji sadrže podatke o trgovini, poput proizvoda, kolekcija i narudžbi.
  • product: Sadrži detalje o proizvodu poput naziva, cijene, opisa itd.
  • cart: Sadrži informacije o košarici, uključujući stavke koje je kupac dodao.
  • customer: Pruža podatke o prijavljenom korisniku, poput imena, e-maila i povijesti narudžbi.

Tagovi i logika

Liquid podržava različite tagove koji omogućuju implementaciju logike i petlji:

• If/Else: Za uvjetne izjave.
  {% if product.available %} <p>Na skladištu</p> {% else %} <p>Nema na skladištu</p> {% endif %}
• For petlja: Petlja koja prolazi kroz kolekciju ili niz stavki.
  {% for product in collections.frontpage.products %} <h2>{{ product.title }}</h2> <p>{{ product.price | money }}</p> {% endfor %}
• Assign: Za dodjeljivanje vrijednosti varijablama. {% assign discount = 10 %}
• Include: Za uključivanje isječaka koda (ponovno upotrebljivi dijelovi). {% include 'header' %}

Filteri

Filteri mijenjaju izlaz varijabli ili objekata. Filtri se primjenjuju pomoću simbola cijevi (|).

• money: Formatira cijenu. {{ product.price | money }}
• date: Formatira datum. {{ order.created_at | date: "%A, %B %d, %Y" }}
• upcase/downcase: Mijenja veličinu slova u stringu. {{ product.title | upcase }}
• split: Razdvaja string u niz. {% assign words = "apple,banana,cherry" | split: "," %} {% for word in words %} <p>{{ word }}</p> {% endfor %}

4. Petlje

Možete prolaziti kroz nizove ili objekte poput proizvoda, kolekcija ili stavki u košarici:

• Petlja kroz proizvode: {% for product in collection.products %} <p>{{ product.title }}</p> {% endfor %}
• Petlja kroz stavke u košarici: {% for item in cart.items %} <p>{{ item.quantity }} x {{ item.product.title }} - {{ item.line_price | money }}</p> {% endfor %}

5. Obrasci

Možete kreirati obrasce za različite radnje poput dodavanja u košaricu, prijavu korisnika ili stvaranje novog računa.

• Dodavanje proizvoda u košaricu: <form action="/cart/add" method="post"> <input type="hidden" name="id" value="{{ product.variants.first.id }}"> <button type="submit">Dodaj u košaricu</button> </form>
• Prijava korisnika: {% if customer %} <p>Bok, {{ customer.first_name }}</p> {% else %} <form method="post" action="/account/login"> <input type="email" name="email" placeholder="E-mail"> <input type="password" name="password" placeholder="Lozinka"> <button type="submit">Prijavi se</button> </form> {% endif %}

6. Korištenje Shopify API-ja s Liquid-om

Možete pristupiti širokom rasponu podataka iz trgovine i integrirati ih s Liquid predlošcima:

• Product objekt: Pristupite detaljima proizvoda poput naziva, opisa, cijene itd. {{ product.title }} {{ product.description | strip_html }}
• Cart objekt: Možete pristupiti podacima o košarici, poput stavki, ukupnog iznosa i popusta. {{ cart.item_count }} stavki u tvojoj košarici.

7. Komentari

Možete dodati komentare u vaš Liquid kod pomoću sljedeće sintakse:

{% comment %}
  Ovo je komentar.
{% endcomment %}

Primjer Upotrebe

Tipični Shopify predložak može uključivati Liquid kod za prikazivanje popisa proizvoda na početnoj stranici:

<h1>Istaknuti proizvodi</h1>
<div class="product-list">
  {% for product in collections.frontpage.products %}
    <div class="product-item">
      <h2>{{ product.title }}</h2>
      <p>{{ product.price | money }}</p>
      <a href="{{ product.url }}">Pogledaj proizvod</a>
    </div>
  {% endfor %}
</div>