Greek (ελληνικά) translation by Iris Diakoumi (you can also view the original English article)
To Themeforest άνοιξε πρόσφτα μια νέα ενότητα όπου μπορείτε να πουλήσετε ή να αγοράσετε πρότυπα για το Shopify! To Shopify είναι μια φιλοξενούμενη λύση ηλεκτρονικού εμπορίου που το κάνει εύκολο να ξεκινήσετε με μια online επιχείρηση. Μπορείτε να έχετε έτοιμο ένα κατάστημα σε μερικά μόλις λεπτά.
Για να ξεκινήσει ο κατάλογος του ThemeForest, οι δημιουργοί κάθε προτύπου που γίνεται αποδεκτό θα λαμβάνουν ένα μπόνους $100 - μέχρι να υπάρχουν 10 πρότυπα στην κατηγορία.
Το Shopify είναι γνωστό για την ευελιξία του σχεδιασμού του. Δείτε μερικά παραδείγματα. Το Shopify δημιούργησε (και στη συνέχεια εξέδωσε σε ανοιχτό κώδικα) τη Liquid Templating Engine. To Liquid επιτρέπει πλήρη σχεδιαστική ελευθερία για τους σχεδιαστές.
Σε αυτό το σεμινάριο θα σας δείξω πώς να σχεδιάσετε ένα πρότυπο του Shopify χρησιμοποιώντας το Liquid. Όταν γνωρίζετε τα βασικά, μπορείτε να σχεδιάσετε ένα πρότυπο και να το καταχωρίσετε στο Themeforest.
Τί είναι το Liquid;
Το Liquid είναι η μηχανή προτύπων που δημιουργήθηκε και χρησιμοποιείται απο το Shopify. Επεξεργάζεται αρχεία προτύπων Liquid, τα οποία έχουν την επέκταση ".liquid". Τα αρχεία Liquid είναι απλά αρχεία HTML με ενσωματωμένο κώδικα. Αφού το Liquid επιτρέπει πλήρη παραμετροποίηση της HTML σας, μπορείτε να σχεδιάσετε ένα κατάστημα που να μοιάζει κυριολεκτικά με οτιδήποτε
To Liquid αρχικά γράφτηκε σε Ruby για χρήση με το Shopify και κυκλοφόρησε σαν λογισμικό ανοιχτού κώδικα. Έκτοτε, έχει χρησιμοποιηθεί και σε άλλα έργα Ruby on Rails, και έχει μεταφερθεί και σε PHP και javascript.
Μία Γρήγορη Προεπισκόπηση του Liquid
Ας δούμε τί χρειάζεται για να ξεκινήσουμε με το Liquid.
1 |
|
2 |
<ul id="products"> |
3 |
{% for product in products %}
|
4 |
<li>
|
5 |
<h2>{{ product.title }}</h2> |
6 |
Only {{ product.price | money_with_currency }}
|
7 |
|
8 |
<p>{{ product.description | prettyprint | truncate: 200 }}</p> |
9 |
|
10 |
</li>
|
11 |
{% endfor %}
|
12 |
</ul>
|
Όπως μπορείτε να δείτε, το Liquid είναι απλά HTML με κάποιο ενσωματωμένο κώδικα. Γι ' αυτό το Liquid είναι τόσο δυνατό, σας δίνει πλήρη έλεγχο του κώδικά σας και το καθιστά εύκολο να δουλέψε με τις μεταβλητές που έχετε διαθέσιμες.
Τί συμβαίνει παραπάνω;
Στο Liquid, υπάρχουν δύο τύποι markup: Output και Tags. Τα Liquid Tags περικλείονται από άγκιστρα και σύμβολα ποσοστού. Τα Output περικλείονται από από δύο άγκιστρα.
Στο παραπάνω απόσπασμα, η πρώτη γραμμή Liquid είναι: {% for product in products %} .... {% endfor %} Αυτό είναι ένα παράδειγμα ενός Liquid Tag. To for Tag προσπελαύνει μια συλλογή από αντικείμενα και σας επιτρέπει να δουλέψετε με καθένα από αυτά. Αν έχετε χρησιμοποιήσει ποτέ loops στην PHP, Ruby, Javascript, ή (οποιαδήποτε γλώσσα προγραμματισμού), δουλεύουν και με τον ίδιο τρόπο στο Liquid.
Η επόμενη γραμμή του Liquid στο παραπάνω απόσπασμα είναι {{product. title }}. Αυτό είναι ένα παράδειγμα ενός Liquid Output. Αυτό θα ζητήσει τον τίτλο ενός προϊόντος και θα εμφανίσει το αποτέλεσμα στην οθόνη.
Η επόμενη γραμμή Liquid εισάγει κάτι καινούριο: {{ product.price | money_with_currency }} Εδώ έχουμε ένα παράδειγμα ενός Liquid Filter. Σας επιτρέπουν να επεξεργαστείτε μια δοθείσα συμβολοσειρά ή μεταβλητή. Τα Φίλτρα παίρνουν την τιμή στα αριστερά τους και κάνουν κάτι με αυτή. Αυτό το συγκεκριμένο Φίλτρο λέγεται format_as_money. Παίρνει έναν αριθμό, του βάζει ένα σύμβολο δολλαρίου και το περικλείει με το σωστό νομισματικό σύμβολο.
Ένα απλό παράδειγμα:
1 |
|
2 |
<span class="money">{{ product.price | money_with_currency }}</span> |
μπορεί να παράξει την παρακάτω HTML
1 |
|
2 |
<span class="money">$45.00 <span class="caps">USD</span></span> |
Η τελευταία γραμμή του Liquid παραπάνω: {{ product.description | prettyprint | truncate: 200 }} δείχνει πώς μπορείτε να συνενώσετε φίλτρα μαζί. Τα φίλτρα επεξεργάζονται την τιμή που είναι στα αριστερά τους, ακόμα και αν αυτή η τιμή είναι το αποτέλεσμα ενός άλλου φίλτρου. Έτσι το συγκεκριμένο απόσπασμα θα εφαρμόσει το φίλτρο prettyprint στο product.description, και ύστερα εφαρμόστε το φίλτο truncate στα αποτελέσματα του prettyprint. Με αυτόν τον τρόπο, μπορείτε να συνενώσετε όσα φίλτρα Liquid χρειάζεστε!
Τί Άλλο Προσφέρει το Liquid?
Όσον αφορά στα Liquid Tags, εκτός από το for tag, υπάρχουν διάφορα άλλα. Τα πιο συχνά είναι:
Σχόλιο:
1 |
|
2 |
{% comment %} This text will not be rendered {% endcomment %}
|
If/Else:
1 |
|
2 |
{% if product.description == "" %}
|
3 |
This product has no description! |
4 |
{% else %}
|
5 |
This product is described! |
6 |
{% endif %}
|
Case:
1 |
|
2 |
{% case template %}
|
3 |
{% when 'product' %}
|
4 |
This is a product.liquid |
5 |
{% when 'cart' %}
|
6 |
This is a cart.liquid |
7 |
{% endcase %}
|
Ρίξτε μια ματιά στην πλήρη λίστα από Tags.
Το Liquid επίσης προσφέρει πληθώρα από φίλτρα που μπορείτε να χρησιμοποιήσετε για να επεξεργαστείτε τα δεδομένα σας. Κάποια συνήθη είναι:
Case:
1 |
|
2 |
{{ “monday” | capitalize }} #=> Monday
|
Join:
1 |
|
2 |
{{ product.tags | join: ’, ’ }} #=> wooden, deep snow, 2009 season
|
Date:
1 |
|
2 |
Posted on {{ article.created_at | date: “%B %d, ’%y” }} #=> Posted on January 26, ’09
|
Ρίξτε μια ματιά στην πλήρη λίστα με τα διαθέσιμα φίλτρα.
Ανατομία ενός Προτύπου Shopify
Όλα τα πρότυπα Shopify έχουν μια απλή δομή καταλόγου. Απαρτίζεται από τους φακέλους assets, layout και templates. Ας δούμε τί πηγαίνει πού:
- φάκελος assets: Στο φάκελο assets αποθηκεύετε όλα τα αρχεία που θέλετε να χρησιμοποιήσετε με το πρότυπό σας. Αυτό περιλαμβάνει όλα τα stylesheets, scripts, εικόνες, αρχεία ήχου κλπ. που θα χρησιμοποιήσεστε. Στα πρότυπά σας μπορείτε να έχετε πρόσβαση σε αυτά τα αρχεία με το φίλτρο
asset_url.1
2
{{ "logo.gif" | asset_url | img_tag: "Main Logo" }} #=> <img src="/files/shops/random_number/assets/logo.gif" alt="Main Logo" /> - φάκελος layout: Αυτός ο φάκελος θα πρέπει να περιέχει μόνο ένα αρχείο που θα ονομάζεται theme.liquid. Το theme.liquid περιέχει όλα τα καθολικά στοιχεία για το πρότυπο Shopify σας. Αυτός ο κώδικας θα βρίσκεται σε όλα τα άλλα πρότυπα στο κατάστημά σας. Ορίστε ένα παράδειγμα ενός πολύ απλού theme.liquid:
1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"3
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4
5
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
6
<head>7
<title>{{shop.name}}</title>
8
{{ 'layout.css' | asset_url | stylesheet_tag }}9
10
{{ content_for_header }}11
</head>12
13
<body>14
<div id="header">
15
<h1 id="logo"><a href="/">{{ shop.name }}</a></h1>
16
</div>17
18
<div id="content">
19
{{ content_for_layout }}20
</div>21
22
<div id="footer">
23
All prices are in {{ shop.currency }} |24
Powered by <a href="http://www.shopify.com" title="Shopify, Hosted E-Commerce">Shopify</a>
25
</div>26
</body>27
</html>Απαραίτητα Στοιχεία
Υπάρχουν δύο ΠΟΛΥ σημαντικά στοιχεία που πρέπει να είναι παρόντα σε ένα αρχείο theme.liquid. Το πρώτο είναι
{{ content_for_header }}. Αυτή η μεταβλητή πρέπει να τοποθετηθεί στο πάνω μέρος του theme.liquid σας Επιτρέπει στο Shopify να εισάγει όποιον κώδικα είναι απαραίτητος στην κεφαλίδα του εγγράφου, όπως ένα script για παρακολούθηση στατιστικών. Για όσους είναι εξοικειωμένοι με το WordPress, αυτό μοιάζει αρκετά με τη συνάρτηση wp_head().Tο άλλο ΠΟΛΥ σημαντικό στοιχείο είναι το
{{ content_for_layout }}. Αυτή η μεταβλητή πρέπει να τοποθετηθεί στο σώμα του theme.liquid σας. Είναι η τοποθεσία όπου όλα τα άλλα πρότυπα Liquid θα γίνουν render. - φάκελος templates: Αυτός ο φάκελος περιέχει τα υπόλοιπα πρότυπα Shopify. Περιλαμβάνει τα:
- index.liquid: Εμφανίζεται σαν η κεντρική σελίδα index του καταστήματός σας.
- product.liquid: Κάθε προϊόν θα χρησιμοποιήσει αυτό το πρότυπο για να εμφανιστεί.
- cart.liquid: Εμφανίζει το καλάθι αγορών του τρέχοντος χρήστη.
- collection.liquid: Εμφανίζεται για συλλογές από προϊόντα.
- page.liquid: Εμφανίζεται για κάθε στατική σελίδα που έχει δημιουργήσει το κατάστημα.
- blog.liquid: Εμφανίζεται για οποιαδήποτε Shopify blogs για το κατάστημα.
- article.liquid: Εμφανίζεται για οποιαδήποτε άρθρα και περιλαμβάνει μια φόρμα για την υποβολή σχολίων.
- 404.liquid: Εμφανίζεται οποτεδήποτε το κατάστημα επιστρέφει σφάλμα 404.
- search.liquid: Εμφανίζεται για τα αποτελέσματα της αναζήτησης στο κατάστημα
Όπως ίσως έχετε μαντέψει, κάθε ένα από αυτά τα πρότυπα έχει πρόσβαση σε διαφορετικές μεταβλητές. Για παράδειγμα, το product.liquid έχει πρόσβαση σε μια μεταβλητή του προϊόντος product που περιέχει το τρέχον προϊόν που εμφανίζεται, το blog.liquid έχει πρόσβαση σε μια μεταβλητή blog και το index.liquid έχει πρόσβαση σε όλες τις μεταβλητές. Αν σας ενδιαφέρει ποιές μεταβλητές μπορείτε να χρησιμοποιήσετε σε ποιό πρότυπο, παρακαλώ δείτε την τεκμηρίωση του Liquid.
Ένας Βασικός Σκελετός για να Ξεκινήσετε
Το καλύτερο πράγμα όταν σχεδιάζετε για το Shopify είναι ότι μπορείτε να χρησιμοποιήσετε όλες τις δεξιοτητες που ήδη έχετε: HTML, CSS, JS κλπ. Το μόνο εμπόδιο στη διαδικασία είναι να εξοικειωθείτε με τις μεταβλητές του Liquid που είναι διαθέσιμες σε κάθε πρότυπο.
Εδώ έχει ένα ρόλο το Vision.
Vision – Shopify in a Box
Τί είναι το Vision;
Το Vision είναι μια αυτόνομη εφαρμογή που σας επιτρέπει να δημιουργήσετε πρότυπα για καταστήματα Shopify στο μηχάνημά σας χωρίς να πρέπει να εγγραφείτε για ένα κατάστημα ή να στήσετε μια βάση δεδομένων ή όλα τα υπόλοιπα τεχνικά.
Τί χρειάζομαι για να τρέξω το Vision;
Το Vision έρχεται έτοιμο για να το χρησιμοποιήσετε απευθείας. Αν έχετε έναν επεξεργαστή κειμένου και ένα browser εγκατεστημένο, είστε έτοιμοι να ξεκινήσετε.
Σαν να μην έφτανε αυτό, το Vision έρχεται προ-φορτωμένο με έτοιμα πρότυπα του Shopify. To Shopify έχει επιτρέψει να χρησιμοποιείτε αυτά τα πρότυπα σαν δομικά στοιχεία, οπότε μπορείτε να ξεκινήσετε με ένα από αυτά τα ήδη υπάρχοντα πρότυπα και να δουλέψετε πάνω σε αυτά.
Σύνοψη
Το Shopify είναι μια γρήγορα αναπτυσσόμενη πλατφόρμα ηλεκτρονικού εμπορίου με χιλιάδες πωλητές που θέλουν να αναδείξουν τα προϊόντα τους. Χρησιμοποιώντας το Vision, μπορείτε να ξεκινήσετε την ανάπτυξη σε πολύ μικρό χρόνο. Τα δέκα πρώτα πρότυπα που θα δημοσιευτούν στην κατηγορία Shopify του Themeforest θα πάρουν επιπλέον $100. Οπότε ξεκινήστε να δουλεύετε!
Αν χρειάζεστε περισσότερες πληροφορίες για το πώς να σχεδιάζετε με το Shopify, έχουν εκτεταμένη τεκμηρίωση στο wiki τους. Ρίξτε μια ματια στα The Shopify Theme Guide, Using Liquid, and Getting Started with Vision.
Τα Καλύτερα Πρότυπα Shopify από το ThemeForest.. Μέχρι Στιγμής!
-
Drifter
"Αυτό το κομψό πρότυπο Shopify διαθέτει καθαρές γραμμές και σύγχρονο design που προβάλλει σωστά τα προϊόντα σας. Προσαρμοσμένα jQuery lightboxes επιτρέπουν στα προϊόντα σας να παρουσιάζονται σε πλήρη λεπτομέρεια.»
-
Fancy Pink
«Ένα πρότυπο shopify με σύγχρονο, φανταχτερό web 2.0 design.»
- Εγγραφείτε το στο NETTUTS RSS Feed για περισσότερα καθημερινά σεμινάρια και άρθρα για development
