Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Ας Σχεδιάσουμε ένα Πρότυπο του Shopify Ας Σχεδιάσουμε ένα Πρότυπο του Shopify

by
Difficulty:IntermediateLength:LongLanguages:

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.

Όπως μπορείτε να δείτε, το Liquid είναι απλά HTML με κάποιο ενσωματωμένο κώδικα. Γι ' αυτό το Liquid είναι τόσο δυνατό, σας δίνει πλήρη έλεγχο του κώδικά σας και το καθιστά εύκολο να δουλέψε με τις μεταβλητές που έχετε διαθέσιμες.

Τί συμβαίνει παραπάνω;

Shopify banner

Στο 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. Παίρνει έναν αριθμό, του βάζει ένα σύμβολο δολλαρίου και το περικλείει με το σωστό νομισματικό σύμβολο.

Ένα απλό παράδειγμα:

μπορεί να παράξει την παρακάτω HTML

Η τελευταία γραμμή του Liquid παραπάνω: {{ product.description | prettyprint | truncate: 200 }} δείχνει πώς μπορείτε να συνενώσετε φίλτρα μαζί. Τα φίλτρα επεξεργάζονται την τιμή που είναι στα αριστερά τους, ακόμα και αν αυτή η τιμή είναι το αποτέλεσμα ενός άλλου φίλτρου. Έτσι το συγκεκριμένο απόσπασμα θα εφαρμόσει το φίλτρο prettyprint στο product.description, και ύστερα εφαρμόστε το φίλτο truncate στα αποτελέσματα του prettyprint. Με αυτόν τον τρόπο, μπορείτε να συνενώσετε όσα φίλτρα Liquid χρειάζεστε!

Τί Άλλο Προσφέρει το Liquid?

Όσον αφορά στα Liquid Tags, εκτός από το for tag, υπάρχουν διάφορα άλλα. Τα πιο συχνά είναι:

Σχόλιο:

If/Else:

Case:

Ρίξτε μια ματιά στην πλήρη λίστα από Tags.

Το Liquid επίσης προσφέρει πληθώρα από φίλτρα που μπορείτε να χρησιμοποιήσετε για να επεξεργαστείτε τα δεδομένα σας. Κάποια συνήθη είναι:

Case:

Join:

Date:

Ρίξτε μια ματιά στην πλήρη λίστα με τα διαθέσιμα φίλτρα.

Ανατομία ενός Προτύπου Shopify

Όλα τα πρότυπα Shopify έχουν μια απλή δομή καταλόγου. Απαρτίζεται από τους φακέλους assets, layout και templates. Ας δούμε τί πηγαίνει πού:

  1. φάκελος assets: Στο φάκελο assets αποθηκεύετε όλα τα αρχεία που θέλετε να χρησιμοποιήσετε με το πρότυπό σας. Αυτό περιλαμβάνει όλα τα stylesheets, scripts, εικόνες, αρχεία ήχου κλπ. που θα χρησιμοποιήσεστε. Στα πρότυπά σας μπορείτε να έχετε πρόσβαση σε αυτά τα αρχεία με το φίλτρο asset_url.
  2. φάκελος layout: Αυτός ο φάκελος θα πρέπει να περιέχει μόνο ένα αρχείο που θα ονομάζεται theme.liquid. Το theme.liquid περιέχει όλα τα καθολικά στοιχεία για το πρότυπο Shopify σας. Αυτός ο κώδικας θα βρίσκεται σε όλα τα άλλα πρότυπα στο κατάστημά σας. Ορίστε ένα παράδειγμα ενός πολύ απλού theme.liquid:

    Απαραίτητα Στοιχεία

    Υπάρχουν δύο ΠΟΛΥ σημαντικά στοιχεία που πρέπει να είναι παρόντα σε ένα αρχείο theme.liquid. Το πρώτο είναι {{ content_for_header }}. Αυτή η μεταβλητή πρέπει να τοποθετηθεί στο πάνω μέρος του theme.liquid σας Επιτρέπει στο Shopify να εισάγει όποιον κώδικα είναι απαραίτητος στην κεφαλίδα του εγγράφου, όπως ένα script για παρακολούθηση στατιστικών. Για όσους είναι εξοικειωμένοι με το WordPress, αυτό μοιάζει αρκετά με τη συνάρτηση wp_head().

    Tο άλλο ΠΟΛΥ σημαντικό στοιχείο είναι το {{ content_for_layout }}. Αυτή η μεταβλητή πρέπει να τοποθετηθεί στο σώμα του theme.liquid σας. Είναι η τοποθεσία όπου όλα τα άλλα πρότυπα Liquid θα γίνουν render.

  3. φάκελος templates: Αυτός ο φάκελος περιέχει τα υπόλοιπα πρότυπα Shopify. Περιλαμβάνει τα:
    1. index.liquid: Εμφανίζεται σαν η κεντρική σελίδα index του καταστήματός σας.
    2. product.liquid: Κάθε προϊόν θα χρησιμοποιήσει αυτό το πρότυπο για να εμφανιστεί.
    3. cart.liquid: Εμφανίζει το καλάθι αγορών του τρέχοντος χρήστη.
    4. collection.liquid: Εμφανίζεται για συλλογές από προϊόντα.
    5. page.liquid: Εμφανίζεται για κάθε στατική σελίδα που έχει δημιουργήσει το κατάστημα.
    6. blog.liquid: Εμφανίζεται για οποιαδήποτε Shopify blogs για το κατάστημα.
    7. article.liquid: Εμφανίζεται για οποιαδήποτε άρθρα και περιλαμβάνει μια φόρμα για την υποβολή σχολίων.
    8. 404.liquid: Εμφανίζεται οποτεδήποτε το κατάστημα επιστρέφει σφάλμα 404.
    9. 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 GuideUsing Liquid, and Getting Started with Vision.

Τα Καλύτερα Πρότυπα Shopify από το ThemeForest.. Μέχρι Στιγμής!

  • Drifter

    Drifter

    "Αυτό το κομψό πρότυπο Shopify διαθέτει καθαρές γραμμές και σύγχρονο design που προβάλλει σωστά τα προϊόντα σας. Προσαρμοσμένα jQuery lightboxes επιτρέπουν στα προϊόντα σας να παρουσιάζονται σε πλήρη λεπτομέρεια.»

    Δείτε το Πρότυπο

  • Drifter

    Fancy Pink

    «Ένα πρότυπο shopify με σύγχρονο, φανταχτερό web 2.0 design.»

    Δείτε το Πρότυπο

  • Εγγραφείτε το στο NETTUTS RSS Feed για περισσότερα καθημερινά σεμινάρια και άρθρα για development


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.