Περιεχόμενο
Το ηλεκτρονικό εμπόριο έχει γίνει τόσο δημοφιλές τα τελευταία χρόνια, είναι πλέον δύσκολο να φανταστεί κανείς ένα μέλλον χωρίς αυτό. Η δύναμη του Διαδικτύου έχει κάνει τη σύνδεση με τους πελάτες ένα αεράκι για τις επιχειρήσεις και τις μάρκες και το ηλεκτρονικό εμπόριο, ως επί το πλείστον, είναι ο ευκολότερος τρόπος παράδοσης προϊόντων στο κοινό τους.
Η βιβλιοθήκη Building Blocks του Foundation με κωδικοποιημένα στοιχεία διεπαφής χρήστη έχει σχεδιαστεί για να διευκολύνει την ταχύτερη πρόσβαση σε ένα τελικό προϊόν. Σε αντίθεση με τα πρότυπα, τα δομικά στοιχεία δεν υπαγορεύουν την εμφάνιση ή τη δομή του ιστότοπού σας.Απλώς σας παρέχουν τα εργαλεία για να δημιουργήσετε τη δική σας προσαρμοσμένη εμφάνιση και αίσθηση πολύ πιο γρήγορα.
Σε αυτό το σεμινάριο, θα μάθετε πώς να δημιουργείτε έναν στατικό ιστότοπο ηλεκτρονικού εμπορίου από το μηδέν χρησιμοποιώντας το κιτ ηλεκτρονικού εμπορίου, μια επιμελημένη συλλογή δομικών στοιχείων που έχουν σχεδιαστεί για να σας βοηθήσουν να δημιουργήσετε συγκεκριμένους τύπους ιστότοπων. Αν και αυτό το ικρίωμα είναι ένα πρωτότυπο, τα δομικά στοιχεία που χρησιμοποιούμε και η διάταξη με την οποία καταλήγουμε μπορούν να εφαρμοστούν σε οποιοδήποτε σύστημα.
Ξεκινώντας
Το πρώτο πράγμα που πρέπει να κάνουμε είναι να δημιουργήσουμε ένα περιβάλλον για την κατασκευή του ιστότοπου. Για αυτό το σεμινάριο, θα πρέπει πρώτα να κατεβάσετε το node.js. Μόλις εγκατασταθεί, θα θέλετε να εγκαταστήσετε το Foundation CLI χρησιμοποιώντας την εντολή npm install -g foundation-cli.
Τώρα που έχετε εγκαταστήσει το Foundation στο σύστημά σας, ας ξεκινήσουμε ένα νέο έργο Foundation χρησιμοποιώντας τον νέο ιστότοπο ηλεκτρονικού εμπορίου εντολών foundation. Στη λίστα που ακολουθεί, ορίστε την πρώτη επιλογή, «Ένας ιστότοπος (Ίδρυμα για ιστότοπους)», πληκτρολογήστε το όνομα του έργου μας «ιστότοπος ηλεκτρονικού εμπορίου» και, στη συνέχεια, επιλέξτε «Πρότυπο ZURB». Αυτό θα ξεκινήσει ένα πρότυπο Foundation και έναν διακομιστή ανάπτυξης, ώστε να μπορούμε εύκολα να αρχίσουμε να δημιουργούμε τον ιστότοπό μας. Τρέξιμο έναρξη npm στο τερματικό για να εκτελέσετε το έργο.
Στη συνέχεια, ας ρίξουμε μια ματιά πίσω από τον κώδικα του νέου μας έργου ανοίγοντας το σε ένα πρόγραμμα επεξεργασίας κειμένου. Εδώ, θα βρείτε ένα δείγμα σελίδας στο "src / pages / index.html" που περιέχει κάποιο προεπιλεγμένο υλικό προτύπου. Θα καταργήσουμε όλο τον κώδικα εδώ.
Σημείωση του συντάκτη: Ψάχνετε για σχεδιασμό ιστοσελίδας ηλεκτρονικού εμπορίου για την επιχείρησή σας; Εάν αναζητάτε πληροφορίες που θα σας βοηθήσουν να επιλέξετε αυτό που σας ταιριάζει, χρησιμοποιήστε το παρακάτω ερωτηματολόγιο για να σας παρέχουμε δωρεάν πληροφορίες από διάφορους προμηθευτές:
Εγκατάσταση κιτ
Πριν γράψουμε οποιονδήποτε κωδικό, θα χρησιμοποιήσουμε το κιτ ηλεκτρονικού εμπορίου του Foundation με το CLI του Foundation. Μεταβείτε στο τερματικό σας και χρησιμοποιήστε τα κιτ θεμελίωσης εγκατάστασης του ηλεκτρονικού εμπορίου.
Εάν αυτή η εντολή δεν λειτουργεί, ελέγξτε ξανά ότι το CLI Foundation σας έχει ενημερωθεί σε 2.2.3. Για να ελέγξετε ποια έκδοση χρησιμοποιείτε, εκτελέστε θεμέλιο -v στο τερματικό σας. Εάν πρέπει να ενημερώσετε, απλώς απεγκαταστήστε το CLI με npm απεγκατάσταση -g foundation-cli και επανεγκαταστήστε το με npm install -g foundation-cli.
Μόλις κατέβασα όλα τα δομικά στοιχεία του κιτ ηλεκτρονικού εμπορίου μας! Κάθε φορά που εγκαθιστάτε ένα Block Building, θα εμφανίζεται στο src / partials / δομικά στοιχεία. Θα γνωρίζετε ότι το κιτ σας έχει εγκατασταθεί σωστά εάν όλα τα δομικά στοιχεία έχουν εισαχθεί αυτόματα στο app.scss αρχείο.
Μερικά από αυτά τα δομικά στοιχεία περιλαμβάνουν εικονίδια από τη γραμματοσειρά Awesome, οπότε θέλετε να τα εγκαταστήσετε χειροκίνητα ή να προσθέσετε το CDN τους στο κεφάλι> του ιστότοπού σας. Για να το κάνετε αυτό, μεταβείτε στο src / layout / default.html και προσθέστε σύνδεσμος href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel = "stylesheet"> ανάμεσα σε κεφάλι> ετικέτες.
Σκαλωσιές στον ιστότοπο
Ας φτάσουμε στο κτίριο! Με το κιτ μας εγκατεστημένο, αυτά τα επόμενα δύο βήματα θα νιώσουν σαν να παίζετε με το LEGO: στα δικά σας έργα, μπορείτε να επιλέξετε να τα χρησιμοποιήσετε όλα ή μπορείτε να χρησιμοποιήσετε μόνο μια επιλογή. Μη διστάσετε να συνδυάσετε και να ταιριάξετε τα δομικά στοιχεία για να επιτύχετε τη διάταξη του ηλεκτρονικού εμπορίου των ονείρων σας.
Για αυτό το σεμινάριο, τα δύο πρώτα μπλοκ με τα οποία θα ξεκινήσουμε είναι η κεφαλίδα και ο ήρωας του promo Για να το κάνουμε αυτό, θα χρησιμοποιήσουμε τον μερικό μηχανισμό Handlebars. Στο κενό αρχείο index.html, ας ρίξουμε τα τμηματικά {{> ηλεκτρονικό εμπόριο-κεφαλίδα}} και {{> ηλεκτρονικό εμπόριο-promo-hero}}. Με αυτά τα δύο δομικά στοιχεία, η σελίδα προορισμού του ηλεκτρονικού εμπορίου φαίνεται να έχει ήδη ολοκληρωθεί.
Στη συνέχεια, θα ρίξουμε μερικές κάρτες προϊόντων κάτω από την ενότητα ήρωας μας. Για να χρησιμοποιήσουμε το Block Block της κάρτας προϊόντος, θα χρησιμοποιήσουμε το πλέγμα μπλοκ του Foundation ώστε οι κάρτες να παραμείνουν ομοιόμορφα μέσα σε ένα πλέγμα. Αυτό θα διευκολύνει επίσης την αλλαγή της διάταξης αυτών των καρτών αργότερα.
Ας ξεκινήσουμε με div>. Μέσα σε αυτό το div, ρίξτε σε δέκα στήλες με την κάρτα προϊόντος στο εσωτερικό κάθε στήλης div> {{> e-commerce-product-card}} / div>.
Θέλουμε να δώσουμε στους πελάτες μας έναν τρόπο να προσεγγίσουν περισσότερα από τα προϊόντα μας, οπότε ας προσθέσουμε ένα κουμπί προώθησης κάτω από τις κάρτες προϊόντων μας. Πρώτα πρέπει να δημιουργήσουμε το δικό μας div> έτσι ώστε το κουμπί μας να είναι κεντραρισμένο στη σελίδα. Στη συνέχεια, θα χρησιμοποιήσουμε το στοιχείο του κουμπιού Foundation για να δημιουργήσουμε το μήνυμα προώθησης. Πρόσθεσε ένα κουμπί> Αγορά όλων των προϊόντων / κουμπί> στο εσωτερικό του .row. στήλη.
Η σελίδα φαίνεται σχεδόν ολοκληρωμένη τώρα, αλλά ας προσθέσουμε επίσης μια κεφαλίδα ανάμεσα στον ήρωα και τις κάρτες προϊόντων μας για να δώσουμε λίγο περιεχόμενο. Κάτω από τον ήρωα, προσθέστε ένα div> να περιέχει την κεφαλίδα μας h1> Νεότερες αφίξεις / h1>.
Οι περισσότερες αρχικές σελίδες του ηλεκτρονικού εμπορίου έχουν περισσότερο διαφημιστικό περιεχόμενο κάτω από τα προϊόντα τους. Ας χρησιμοποιήσουμε το Building Block {{> ηλεκτρονικό εμπόριο-ήρωας-ρυθμιστικό-μικρό}} εδώ. Για να αποτρέψουμε το ρυθμιστικό από το πλάτος της σελίδας, θα το τυλίξουμε γύρω από ένα div>.
Δεδομένου ότι οι ιστότοποι ηλεκτρονικού εμπορίου συνήθως αποτελούνται από πολλές σελίδες, οι περισσότεροι θα απαιτούν ένα mega footer με πολλούς συνδέσμους για τον χειρισμό του όγκου των σελίδων. Το κιτ ηλεκτρονικού εμπορίου μας συνοδεύεται από υποσέλιδο για αυτήν την ακριβή περίπτωση χρήσης. Για να ολοκληρώσετε αυτό το ικρίωμα, ας πέσουμε στο {{> ηλεκτρονικό εμπόριο-υποσέλιδο}} στο κάτω μέρος του HTML μας.
Ελέγξτε για ανταπόκριση
Αυτές τις μέρες, είναι δύσκολο να αποκτήσει κάποιος ιστότοπος χωρίς να είναι φιλικός προς κινητά. Αυτό ισχύει ιδιαίτερα για ιστότοπους ηλεκτρονικού εμπορίου. Τώρα που οι διαδικτυακές αγορές έχουν γίνει ο κανόνας, δεν θέλουμε να χάσουμε αυτό το ποσοστό των χρηστών που το κάνουν μέσω των κινητών τηλεφώνων τους.
Ακολουθώντας το σύνθημά μας για πρώτη φορά για κινητά, τα Building Blocks του Foundation είναι κατασκευασμένα έτσι ώστε να ανταποκρίνονται φυσικά. Ένας γρήγορος έλεγχος σε μια μικρότερη οθόνη δείχνει ότι ο ιστότοπός μας εξακολουθεί να φαίνεται αρκετά καλός.
Ωστόσο, όταν κάνουμε κλικ στο μενού χάμπουργκερ, ο καμβάς μας δεν έχει συνδεθεί σωστά. Αυτό το μέρος γίνεται λίγο δύσκολο, αλλά μην ανησυχείτε! Θα αναλύσουμε τι συμβαίνει σε αυτό το μενού εκτός καμβά και στη συνέχεια θα διαβάσετε πώς να το συνδέσετε.
Εάν ρίξετε μια ματιά στο αρχείο ecommerce-header.html, θα παρατηρήσετε ότι αυτή η κεφαλίδα έχει ενσωματωμένο έναν καμβά. Λοιπόν, γιατί δεν λειτούργησε; Όταν κάναμε κλικ στο μενού χάμπουργκερ, το μόνο πράγμα που «σπρώχτηκε» ήταν η κεφαλίδα. Η υπόλοιπη σελίδα παρέμεινε σε προβολή, προκαλώντας παράξενες αλληλεπικαλύψεις.
Αυτό συμβαίνει επειδή αυτή η κεφαλίδα δημιουργήθηκε για να λειτουργεί μόνη της, αλλά στην πραγματικότητα πρέπει να λειτουργεί με ολόκληρη τη σελίδα. Με άλλα λόγια, πρέπει να σπρώξει όλο το περιεχόμενο της σελίδας όταν ενεργοποιηθεί το μενού εκτός καμβά, όχι μόνο το μενού κεφαλίδας. Αυτή η κεφαλίδα ηλεκτρονικού εμπορίου γράφτηκε έτσι, επειδή η δημιουργία ενός καμβά απαιτεί κατάδυση στο δικό σας src / layout / default.html σελίδα, η οποία είναι πέρα από την πρόσβαση.
Για να το διορθώσουμε, το μόνο που πρέπει να κάνουμε είναι να πάρουμε τα πάντα μέσα div id = "ecommerce-header" data-off-canvas> και μετακινήστε το σε src / layout / default.html. Στη συνέχεια, θα ολοκληρώσουμε το {{> σώμα}} του ιστότοπού μας μέσα σε ένα div data-off-canvas-content>. Αυτό θα ωθήσει το σώμα του ιστότοπού μας όταν ενεργοποιείται εκτός καμβά.
Τώρα όταν κάνουμε κλικ στο χάμπουργκερ μας, ολόκληρος ο ιστότοπος μετακινείται για το μενού εκτός καμβά! Το σώμα μας προεπιλογή.html η σελίδα πρέπει να έχει την εξής μορφή:
body> div id = "ecommerce-header" data-off-canvas> button aria-label = "Κλείσιμο μενού" type = "button" data-close> span aria-hidden = "true"> × / span> / κουμπί> ul> li> a href = "Categories.html"> Κατηγορία 1 / a> / li> li> a href = "#"> Κατηγορία 2 / a> / li> li> a href = "why.html"> Κατηγορία 3 / a> / li> li> a href = "build.html"> Κατηγορία 4 / a> / li> li> a href = "#"> Κατηγορία 5 / a> / li> / ul> hr> ul> li> a href = "#"> Βοήθεια / a> / li> li> a href = "#"> Κατάσταση παραγγελίας / a> / li> li> a href = "#"> Επικοινωνία / a> / li> li > a href = "#"> Ο λογαριασμός μου / a> / li> / ul> / div> div data-off-canvas-content> {{> body}} / div> script src = "{{root}} στοιχεία /js/app.js "> / script> / body>
συμπέρασμα
Σας δείξαμε πώς να ξεκινήσετε τον ιστότοπό σας ηλεκτρονικού εμπορίου με το κιτ ηλεκτρονικού εμπορίου του Foundation, αλλά μην σταματήσετε εκεί! Υπάρχουν πάνω από 100 δομικά στοιχεία που μπορούν να χρησιμοποιηθούν για τη βελτίωση των σελίδων σας. Μέσα σε λίγα λεπτά, έχουμε σκαλώσει έναν στατικό ιστότοπο ηλεκτρονικού εμπορίου με Building Block. Αυτό σας εξοικονομεί πολύ χρόνο που μπορείτε τώρα να χρησιμοποιήσετε για να τοποθετήσετε τα γραφικά και να σχεδιάσετε τον ιστότοπο για να ταιριάζει στην επωνυμία σας.
Ακόμα κι αν το προχωράτε περισσότερο και χρησιμοποιείτε ένα σύστημα back-end, διαφορετικό μερικό μηχανισμό ή έχετε έναν άλλο τρόπο για να εισάγετε τα δεδομένα σας στον ιστότοπο, η δεδομένη ροή εργασίας με το Building Blocks θα σας εξοικονομήσει πραγματικά χρόνο και επομένως χρήματα. Τα δομικά στοιχεία του ιδρύματος είναι ένας πολύ καλός τρόπος για να ξεκινήσετε, επειδή προορίζονται να επεκταθούν, να ταιριάζουν με τα υπάρχοντα στυλ σας και να χρησιμοποιηθούν σε οποιοδήποτε σύστημα εφαρμογών.
Αυτό το άρθρο δημοσιεύτηκε αρχικά στο καθαρό περιοδικό τεύχος 266. Αγοράστε το εδώ.
