Liquid

Tutorial

Τι είναι το Liquid;

To liquid είναι μια δημοφιλής πλέων γλώσσα για την ανάπτυξη εικαστικών θεμάτων. Σε συνδυασμό με HTML και Javascript είναι ο πιο εύκολος τρόπος να δημιουργήσετε και να επεξεργαστείτε μοντέρνα θέματα χωρίς σχεδιαστικούς περιορισμούς. Το liquid διαχωρίζεται σε 2 μέρει, το λογικό κομμάτι και οι μεταβλητές. Το λογικό κομμάτι περιλαμβάνει εντολές όπως for loops και if, και οι μεταβλητές αντικαθίστανται με την αντίστοιχη τιμή κατά την φόρτωση της ιστοσελίδας.

Μεταβλητές

Οι μεταβλητές περιέχουν δεδομένα του καταστήματος και περικλείονται με διπλές αγκύλες. . Π.Χ. {{ product.description }} θα αντικατασταθεί με την περιγραφή του προϊόντος. Όλη την λίστα με τις μεταβλητές μπορείτε να την βρείτε στο admin ->Themes-> Online Editor -> Memorizer στην πάνω αριστερά γωνία.

Φίλτρα

Τα φίλτρα μετασχηματίζουν το περιεχόμενο μιας μεταβλητής. Για παράδειγμα εάν θέλουμε τον τίτλο του καταστήματος σε κεφαλαία γράφουμε:

 {{ shop.title | capitalize }} 

Εάν το τίτλος είναι «Τα παπούτσια του Κώστα» τότε θα μετασχηματιστή σε «Τα Παπούτσια Του Κώστα»

Λογικές Εκφράσεις

Οι λογικές εκφράσεις περικλείονται με {% έκφραση %}html {% τέλος-έκφρασης %}. Για παράδειγμα εάν θέλουμε να ελέγξουμε εάν ένας πελάτης είναι γραμμένος στο κατάστημα τότε γράφουμε:

{% if customer.registered ==  true %}
	Καλώς ήρθες {{ customer.firstname }} 
{% else %}
	<a href="/register">Εγγραφή</a> 
{% endif %} 

Εάν ο επισκέπτης είναι εγγεγραμμένος τότε εμφανίζεται «Καλώς ήρθες (όνομα πελάτη)» αλλιώς εμφανίζεται Link για την εγγραφή του στο κατάστημα.

Δομή Template

H πλειοψηφία των eshop στο Internet αποτελούνται από περιεχόμενο το οποίο μένει το ίδιο κατά την πλοήγηση (όπως μενού πλοήγησης, banner, logo κλπ), και περιεχόμενο το οποίο αλλάζει αναλόγως με την σελίδα που βρίσκεται ο χρήστης. Το περιεχόμενο που δεν αλλάζει, το βάζουμε στο τμήμα του template όπου ονομάζουμε master template. Στο liquid to master template βρίσκετε στον φάκελο layout και ονομάζεται template.liquid.

<!DOCTYPE html>
<html>
<head>
{{ content_for_header }}
</head>
<body>
{{ content_for_layout }}
</body>
</html>

Η μεταβλητή content_for_layout παραπάνω αλλάζει σύμφωνα με το περιεχόμενο που βρίσκεται ο χρήστης. Για παράδειγμα εάν ο επισκέπτης βρίσκεται σε σελίδα προϊόντων τότε το content_for_layout θα περιέχει το περιεχόμενο του αρχείου /templates/product.liquid.Τα υπόλοιπα αρχεία μέσα στον φάκελο template χρησιμοποιούνται για τις εξής σελίδες:

  • index.liquid - Αρχική σελίδα
  • collection.liquid – Κατηγορία προϊόντων
  • page.liquid - Σελίδα καταστήματος. Τις σελίδες τις εισάγει ο χρήστης από το admin->Σελίδες
  • blog.liquid – Blog του καταστήματος
  • article.liquid – Άθρο του blog
  • cart.liquid – Σελίδα καλαθιού και checkout
  • search.liquid – Σελίδα αποτελεσμάτων αναζήτησης

Πλοήγηση

Η μεταβλητή linkslists περιέχει τους συνδέσμους που έχει εισάγει ο χρήστης στο amdin του καταστήματος. Για να προσπελάσουμε τους συνδέσμους χρησιμοποιούμε το for loop με τον εξής τρόπο:

<ul >
{% for link in linklists.main-menu %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>

Η παραπάνω έκφραση μεταφράζεται ως: για κάθε σύνδεσμο μέσα στην λίστα συνδέσμων main-menu εμφάνισε <li><a href=σύνδεσμος> Τίτλος Συνδέσμου</a></li>

Το main-menu ονομάζεται handle της λίστας συνδέσμων «Κεντρικό Μενού». Εάν θέλετε να προσπελάσετε δική σας λίστα συνδέσμων που έχετε δημιουργήσει μέσα στο admin, τότε χρησιμοποιείστε το handle της λίστας το οποία εμφανίζεται δίπλα από τον τίτλο στην σελίδα πλοήγησης.

Δημιουργία assets

Τα υπόλοιπα αρχεία όπως φωτογραφίες, css και javascript αποθηκεύονται στον φάκελο assets του template. Για να αναφερθούμε σε ένα αρχείο μέσα στον φάκελο assets χρησιμοποιούμε το φίλτρο asset_url στο όνομα του αρχείου.

{{ 'style.css' | asset_url }} => /storecontent/user/assets/style.css

Οπότε το head του template.liquid αρχείου θα αλλάξει ως εξής:

<head>
<title>
	{{ shop.title }}{% if page_title %} - {{ page_title }}{% endif %}
</title>

	{{ 'style.css' | asset_url | stylesheet_tag }}   
	{{ 'jquery-1.8.2.js' | asset_url | script_tag }} 
	{{ content_for_header }}
</head>		

Στο template του καταστήματος σας πρέπει να χρησιμοποιείτε το φίλτρο asset_url για να αναφερθείτε στο φάκελο assets και όχι στατικά όπως "/storecontent/username/assets/myfile.css, διότι σε περίπτωση αναβάθμισης του καταστήματος σας ή των υπηρεσιών του yuv αλλάζει το full path του φακέλου assets. Για δημοφιλές javascript frameworks όπως jquery μπορείτε να χρησιμοποιείτε google ή asp cdn.

Template.liquid μέχρι τώρα

<!doctype html>
<html>
<head>
<meta charset='utf-8'> 
 <title>
  {{ shop.title }}{% if page_title %} - {{ page_title }}{% endif %}
 </title>
  <meta name="description" content="{{page_description}}" />

  {{ 'style.css' | asset_url | stylesheet_tag }}   
  {{ 'jquery-1.8.2.js' | asset_url | script_tag }} 
  {{ content_for_header }}
</head>		
<body> 
 <div class="logo">{{shop.title }}</div>
  <nav>
    <ul >
     {% for link in linklists.main-menu %}
	  <li><a href="{{ link.url }}">{{ link.title }}</a></li>
	 {% endfor %}
    </ul>
   </nav>
   <div class="content">
    {{ content_for_layout }}
   </div>
</body>
</html>

Στον τίτλο σελίδας <title> χρησιμοποιούμε τον τίτλο του καταστήματος, καθώς και το page_title το οποίο τίθεται αυτόματα αναλόγως την σελίδα που βρίσκεται ο χρήστης. Για παράδειγμα εάν η σελίδα είναι προϊόντος (product.liquid), τότε η μεταβλητή page_title θα πάρει την τιμή τον τίτλο του προϊόντος. και page_description τους πρώτους 150 χαρακτήρες από την περιγραφή προϊόντος χωρίς HTML. {{content_for_header}} περιέχει διάφορες ρυθμίσεις του καταστήματος όπως google analytics.

Έστω ότι ο χρήστης επισκεφτεί page.liquid τότε το content_for_layout θα αντικατασταθεί με το περιεχόμενο page.liquid, το οποίο στην απλούστερη του μορφή είναι το εξής:

<h1>{{ page.title }}</h1>	
{{ page.content }}

Αυτό είναι όλο! H μεταβλητή {{ page.content }} αντικαθιστάτε με το περιεχόμενο που έχει γράψει ο χρήστης στην αντίστοιχη σελίδα στο admin του καταστήματος.

collection.liquid

Όταν ο επισκέπτης εισέλθει σε μια κατηγορία προϊόντων, τότε την εμφάνιση της κατηγορίας με τα προϊόντα την αναλαμβάνει το collection.liquid.

<h1>{{ collection.title }}</h1>
{% paginate collection.products by 10 %}
 {% for product in collection.products %}
	{{ product.title }}
  {% endfor %}
 
{{ paginate | default_pagination }}
{% endpaginate %}

Το pagination tag αναλαμβάνει την σελιδοποίηση των προϊόντων. Περισσότερα για pagination διαβάστε εδώ. Έπειτα ο κώδικας μεταφράζεται ως εξής: Για κάθε προϊόν στην κατηγορία εμφάνισε των τίτλο του προϊόντος. Μέσα στο for tag μπορούμε εάν θέλουμε να προσθέσουμε τιμή προϊόντος, φωτογραφία ή ότι άλλο θα κάνει την εμφάνιση πιο πρακτική και όμορφη.