Βασικές αρχές liquid

To liquid είναι μια περιγραφική γλώσσα που χρησιμοποιείται για την ανάπτυξη προτύπων. Αναπτύχθηκε και χρησιμοποιείται από το shopify.com.

Βασικές δομές Liquid

Τα liquid αρχεία πέρα απο HTML περιέχουν και δύο βασικές δομές liquid που αναπαριστώνται ως εξής:

• {{ μια έκφραση liquid που θέλουμε να τυπωθεί εδώ }}
  π.χ.

  {{ shop.name }}

• {% μια έκφραση liquid που θέλουμε να αποτιμηθεί εδώ %}
  π.χ. {% for product in products %}

Φίλτρα

Για την επεξεργασία των εκφράσεων που θέλουμε να τυπώσουμε το skroutzstore παρέχει μια πλειάδα από φίλτρα. Τα φίλτρα αυτά εφαρμόζονται με τον εξής τρόπο {{ έκφραση | φίλτρο }}.

Βασικά Φίλτρα

• capitalize: μετατρέπει σε κεφαλαίο το πρώτο γράμμα κάθε λέξης
• downcase: μετατρέπει το κείμενα σε πεζά
• first: για να πάρετε το πρώτο στοιχείο ενός πίνακα π.χ. {{ products.first.full_name }}
• join: ενώστε τα στοιχεία ενός πίνακα με έναν οποιοδήποτε χαρακτήρα ενδιάμεσα τους
• last: επιστρέφει το τελευταίο στοιχείο του πίνακα
• size: επιστρέφει το μέγεθος του πίνακα
• strip_html: αφαιρεί όλο το html από την έκφραση αυτή
• truncate: κόβει την έκφραση στον αριθμό χαρακτήρων που ορίζετε
• truncatewords: κόβει την έκφραση στον αριθμό λέξεων που ορίζετε
• upcase: μετατρέπει μια έκφραση στα κεφαλαία
• minus: αφαίρεση π.χ. {{ 4 | minus:2 }} #=> 2
• plus: πρόσθεση π.χ. {{ ‘1’ | plus:’1’ }} #=> ‘11’, {{ 1 | plus:1 }} #=> 2
• times: πολλαπλασιασμός e.g {{ ‘foo’ | times:4 }} #=> ‘foofoofoofoo’, {{ 5 | times:4 }} #=> 20
• divided_by: διαίρεση e.g {{ 10 | divided_by:2 }} #=> 10
• h: Sanitize, κάνει escape δεδομένα που έβαλε ο χρήστης {{search_term | h}}

Papakishop φίλτρα

• get_thumb_path: επιστέφει την διεύθυνση για το thumbnail μια εικόνας. (64×64)
• get_normal_path: επιστέφει την διεύθυνση για το μεγάλο thumbnail μια εικόνας. (180×180)
• get_original_path: επιστρέφει την διεύθυνση για το πραγματική εικόνα που ανέβασε ο χρήστης ( μέγιστες διαστάσεις 1024×768)
• format_price: επιστρέφει την τιμή με δύο δεκαδικά ψηφία και το σήμα του Ευρώ να προηγείται
• link_to_product, product, label, truncate_length: Επιστρέφει έναν σύνδεσμο στο προϊόν που του δίνουμε ως πρώτο όρισμα. Το δεύτερο όρισμα είναι το κείμενο του συνδέσμου, το τρίτο ένα αριθμός που συμβολίζει από πιο αριθμό χαρακτήρων και έπειτα θα κόψουμε το κείμενο και θα το αντικαταστήσουμε με τρείς τελείες.
• url_for_category: Επιστρέφει την διεύθυνση προς την κατηγορία που του δίνουμε ως όρισμα.
• url_for_static: Επιστρέφει την διεύθυνση στην στατική σελίδα του καταστήματος που του δίνουμε ως όρισμα.
• link_to_category: Επιστρέφει έναν σύνδεσμο στην κατηγορία που δίνουμε ως όρισμα.
• textile_text: Μετατρέπει σε HTML την textile μορφή κειμένου που χρησιμοποιείται στην διαχειριστική διεπαφή.
• cart_total_for_item: Δέχεται ως όρισμα ενα line_item και επιστρέφει την συνολική αξία του μέσα στο καλάθι (ποσότητα * τιμή)
• url_for_add_to_cart: Επιστρέφει την διεύθυνση που θα προσθέσει στο καλάθι το αντικείμενο
• url_for_remove_from_cart: Επιστρέφει την διεύθυνση που θα αφαιρέσει από το καλάθι το αντικείμενο

Δομές ελέγχου

If/Else

Η απλή δομή ελέγχου if/else είναι διαθέσιμη για την υπό συνθήκη εκτέλεση ενός κομματιού κώδικα.
Παραδείγματα χρήσης είναι:

• {% if product.has_special_price? }
  {{ product.original_price_with_vat | format_price }}
  { endif %}

• {% if cart.products.size == 0 }
  Το καλάθι σας είναι άδειο
  { else }
  Το καλάθι σας περιέχει {{ cart.items_added }}
  { if cart.items_added.size == 1 } προϊόν { else } προϊόντα { endif }
  { endif %}

For

Για την συνεχόμενη εκτέλεση ενός κομματιού κώδικα για κάθε μέλος μιας λίστας αντικειμένων χρησιμοποιούμε την δομή ελέγχου for. Η δομή ελέγχου δέχεται δύο μεταβλητές: limit για τον περιορισμό των στοιχείων της λίστας που θα χρησιμοποιηθούν και offset για τον αριθμό των στοιχείων απο την αρχή της λίστας που δεν θα χρησιμοποιηθούν.

• # array = 1,2,3,4,5,6
  {% for item in array limit:2 offset:2 }
  {{ item }} // results in 3,4
  { endfor %}

• {% for product in offers limit: 4 }
• {{ product.original_price_with_vat | format_price }}
  
• { endfor %}

Σε κάθε εκτέλεση της επαναληπτικής δομής for είναι διαθέσιμες και οι εξής μεταβλητές:

• forloop.length # => το μήκος της συνολικής δομής for
• forloop.index # => σε ποια επανάληψη βρισκόμαστε
• forloop.index0 # => σε ποια επανάληψη βρισκόμαστε ξεκινώντας την αρίθμηση από το 0
• forloop.rindex # => πόσες επαναλήψεις απεμείναν
• forloop.rindex0 # => πόσες επαναλήψεις απέμειναν ξεκινώντας την αρίθμηση απο το 0
• forloop.first # => έλεγχος για το αν βρισκόμαστε στην πρώτη επανάληψη
• forloop.last # => έλεγχος για το αν βρισκόμαστε στην τελευταία επανάληψη

Ανάθεση μεταβλητών

Για την προσωρινή αποθήκευση μεταβλητών το liquid μας προσφέρει την εντολή assign.

• {% for manu in manufacturers }
  { assign selected = false }
  { if manu.id == manufacturer.id }
  { assign selected = true }
  { endif }
  {{ category | crosslink_to_manufacturer_or_tag, manu, nil, selected }}
  { endfor %}