Δημιουργήστε μια τοποθεσία ηλεκτρονικού εμπορίου από το μηδέν

Το ηλεκτρονικό εμπόριο έχει γίνει τόσο δημοφιλές τα τελευταία χρόνια, είναι πλέον δύσκολο να φανταστεί κανείς ένα μέλλον χωρίς αυτό. Η δύναμη του Διαδικτύου έχει κάνει τη σύνδεση με τους πελάτες ένα αεράκι για επιχειρήσεις και μάρκες και το ηλεκτρονικό εμπόριο, ως επί το πλείστον, είναι ο ευκολότερος τρόπος να παραδώσει προϊόντα στο κοινό τους.

Τα δομικά στοιχεία του δομικού στοιχείου της ίδρυσης των κωδικοποιημένων εξαρτημάτων UI έχουν σχεδιαστεί για να διευκολύνουν την επίτευξη ενός τελικού προϊόντος γρηγορότερα. Σε αντίθεση με τα πρότυπα, τα δομικά στοιχεία δεν υπαγορεύουν τον τρόπο με τον οποίο ο ιστότοπός σας πρέπει να κοιτάζει ή να δομηθεί. Απλώς σας παρέχουν τα εργαλεία για να δημιουργήσετε τη δική σας προσαρμοσμένη εμφάνιση και να αισθανθείτε πολύ πιο γρήγορα.

Σε αυτό το σεμινάριο, θα μάθετε πώς να δημιουργήσετε μια στατική ιστοσελίδα ηλεκτρονικού εμπορίου από το μηδέν χρησιμοποιώντας το κιτ ηλεκτρονικού εμπορίου, μια επιμελημένη συλλογή δομικών στοιχείων που έχουν σχεδιαστεί για να σας βοηθήσουν να δημιουργήσετε συγκεκριμένα είδη ιστοσελίδων. Αν και αυτό το σκαλωσφόρο είναι ένα πρωτότυπο, τα δομικά στοιχεία που χρησιμοποιούμε και τη διάταξη καταλήγουμε με μπορεί να εφαρμοστεί σε οποιοδήποτε σύστημα.

Ξεκινώντας

Το πρώτο πράγμα που πρέπει να κάνουμε είναι να δημιουργήσουμε ένα περιβάλλον για την κατασκευή του ιστότοπου. Για αυτό το σεμινάριο, θα χρειαστεί να κατεβάσετε πρώτα node.js. Μόλις εγκατασταθεί, θα θελήσετε να εγκαταστήσετε το ίδρυμα CLI χρησιμοποιώντας την εντολή npm install -g Ίδρυμα-Cli .

Τώρα που έχετε εγκαταστήσει το ίδρυμα στο σύστημά σας, ας ξεκινήσουμε ένα νέο έργο θεμελίωσης χρησιμοποιώντας το ίδρυμα εντολών New Ecommerce-site. Στη λίστα που ακολουθεί, επιλέξτε την πρώτη επιλογή, «ένας ιστότοπος (ίδρυμα για τοποθεσίες)», πληκτρολογήστε το όνομα του έργου μας «ηλεκτρονικό εμπόριο-site» και, στη συνέχεια, επιλέξτε 'Zurb Πρότυπο'. Αυτό θα ξεκινήσει ένα πρότυπο θεμελίωσης και ένα διακομιστή ανάπτυξης, ώστε να μπορούμε εύκολα να αρχίσουμε να δημιουργούμε την ιστοσελίδα μας. Τρέξιμο npm start στο τερματικό για να εκτελέσετε το έργο.

Στη συνέχεια, ας ρίξουμε μια ματιά πίσω από τον κώδικα του νέου μας έργου, ανοίγοντας το σε έναν επεξεργαστή κειμένου. Μέσα εδώ, θα βρείτε μια σελίδα δείγματος στο 'SRC / Pages / Index.html' που περιέχει κάποιο προεπιλεγμένο υλικό προτύπου. Θα αφαιρέσουμε όλο τον κώδικα εδώ.

Σημείωση συντάκτη: Ψάχνετε για σχεδιασμό ιστοσελίδας ηλεκτρονικού εμπορίου για την επιχείρησή σας; Εάν ψάχνετε πληροφορίες για να σας βοηθήσει να επιλέξετε αυτό που είναι κατάλληλο για εσάς, χρησιμοποιήστε το ερωτηματολόγιο παρακάτω για να σας παρέχουμε πληροφορίες από διάφορες προμηθευτές:

Εγκατάσταση ενός κιτ

Πριν γράψουμε οποιοδήποτε κώδικα, πρόκειται να τραβήξουμε το κιτ ηλεκτρονικού εμπορίου του Ιδρύματος με το CLI του Ιδρύματος. Προχωρήστε στο τερματικό σας και χρησιμοποιήστε τα κιτ εντολών Ιδρύματος εγκαθιστούν το ηλεκτρονικό εμπόριο.

Εάν αυτή η εντολή δεν λειτουργεί, ελέγξτε ότι το ίδρυμα CLI ενημερώνεται στο 2.2.3. Για να ελέγξετε ποια έκδοση βρίσκεστε, τρέξτε ίδρυμα -v στο τερματικό σας. Εάν πρέπει να ενημερώσετε, απλά απεγκαταστήστε το CLI με npm uninstall -g Ίδρυμα-Cli και να το εγκαταστήσετε ξανά npm install -g Ίδρυμα-Cli .

Αυτό ακριβώς κατέλαβε όλα τα δομικά στοιχεία μέσα στο κιτ ηλεκτρονικού εμπορίου μας! Οποιαδήποτε στιγμή θα εγκαταστήσετε ένα δομικό στοιχείο, θα εμφανιστεί στο SRC / Μερικά / κτίρια-μπλοκ . Θα γνωρίζετε ότι το κιτ σας εγκατεστημένο σωστά εάν όλα τα δομικά στοιχεία έχουν εισαχθεί αυτόματα στο δικό σας app.scsss αρχείο.

Μερικά από αυτά τα δομικά στοιχεία περιλαμβάνουν εικονίδια από τη γραμματοσειρά Awesome, οπότε θα θελήσετε να τα εγκαταστήσετε με μη αυτόματο τρόπο ή να προσθέσετε το CDN στο The The & lt; κεφάλι & gt; του ιστότοπού σας. Για να το κάνετε αυτό, πλοηγηθείτε στο src / layouts / deaust.html και προσθέστε & lt; link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.7.0/css/font-awesome.css" rel = "stylesheet" & gt; ανάμεσα σε & lt; κεφάλι & gt; Ετικέτες.

Σκαλωσιά του ιστότοπου

Ας φτάσουμε στο κτίριο! Με το κιτ μας εγκατεστημένο, αυτά τα επόμενα δύο βήματα θα αισθανθούν λίγο σαν να παίζετε με το Lego: Στα δικά σας έργα, μπορείτε να επιλέξετε να χρησιμοποιήσετε όλα αυτά, ή μπορείτε να χρησιμοποιήσετε μια επιλογή. Μη διστάσετε να αναμίξετε και να ταιριάζει με τα δομικά στοιχεία για να επιτύχετε τη διάταξη του ηλεκτρονικού εμπορίου ονείρων σας.

Για αυτό το σεμινάριο, τα δύο πρώτα τετράγωνα θα ξεκινήσουμε με την επικεφαλίδα και τον ήρωα προώθησης. Για να το κάνετε αυτό, θα χρησιμοποιήσουμε το μερικό μηχανισμό του τιμονιού. Στο κενό δείκτη μας. Ας ρίξουμε τα μέρη {{& gt; Ηλεκτρονικό εμπόριο-κεφαλίδα}} και {{& gt; Ηλεκτρονικό εμπόριο-προώθηση-ήρωας}} . Με αυτά τα δύο δομικά στοιχεία, η σελίδα προορισμού ηλεκτρονικού εμπορίου μας φαίνεται ήδη για το μισό τρόπο.

Στη συνέχεια, θα ρίξουμε σε μερικές κάρτες προϊόντων κάτω από το τμήμα ήρωας μας. Για να χρησιμοποιήσετε το δομικό στοιχείο της κάρτας προϊόντος, θα χρησιμοποιήσουμε το πλέγμα μπλοκ του ιδρύματος έτσι ώστε οι κάρτες να κάθονται ομοιόμορφα μέσα σε ένα πλέγμα. Αυτό θα διευκολύνει επίσης την αλλαγή της διάταξης αυτών των καρτών αργότερα.

Ας ξεκινήσουμε με & lt; div class = "σειρά μικρών-up-2 medium-up-5" & gt; . Μέσα σε αυτό το Div, ρίξτε σε δέκα στήλες με την κάρτα προϊόντος μέσα σε κάθε στήλη & lt; div class = "στήλη" & gt; {{& gt; Ηλεκτρονικό εμπόριο-προϊόν-κάρτα}} & lt; / div & gt; .

Θέλουμε να δώσουμε στους πελάτες μας έναν τρόπο να φτάσουμε σε περισσότερα από τα προϊόντα μας, οπότε ας προσθέσουμε ένα κουμπί callout κάτω από τις κάρτες προϊόντων μας. Πρώτα πρέπει να δημιουργήσουμε μας & lt; div class = "σειρά κειμένου στήλης" & gt; Έτσι, έτσι ώστε το κουμπί μας να επικεντρωθεί στη σελίδα. Στη συνέχεια, θα χρησιμοποιήσουμε το στοιχείο του Button Foundation για να δημιουργήσετε το callout μας. Πρόσθεσε ένα & lt; button class = "κουμπί" & gt; κατάστημα όλα τα προϊόντα & lt; / button & gt; μέσα του .Row.Column .

Η σελίδα αισθάνεται σχεδόν πλήρης τώρα, αλλά ας προσθέσουμε επίσης μια κεφαλίδα ανάμεσα στον ήρωα και τις κάρτες προϊόντων μας για να δώσουμε λίγο το πλαίσιο. Κάτω από τον ήρωα, προσθέστε ένα & lt; div class = "Στήλη σειρά" & GT; να περιέχει την κεφαλίδα μας & lt; h1 & gt; νεότερες αφίξεις & lt; / h1 & gt; .

Οι περισσότερες σελίδες του ηλεκτρονικού εμπορίου έχουν περισσότερο προωθητικό περιεχόμενο κάτω από τα προϊόντα τους. Ας χρησιμοποιήσουμε το δομικό στοιχείο {{& gt; Ηλεκτρονικό εμπόριο-ήρωας-Slider-Μικρό}} εδώ. Για να αποφύγετε το ρυθμιστικό να εκτείνεται το πλάτος της σελίδας, θα το τυλίξουμε γύρω από ένα & lt; div class = "Στήλη σειρά" & GT; .

Δεδομένου ότι οι ιστότοποι ηλεκτρονικού εμπορίου αποτελούνται συνήθως από πολλές σελίδες, οι περισσότεροι θα απαιτούν ένα mega υποσέλιδο με πολλούς συνδέσμους για να χειριστεί τον όγκο των σελίδων. Το πρόγραμμα ηλεκτρονικού εμπορίου μας έρχεται με ένα υποσέλιδο για αυτή την ακριβή περίπτωση χρήσης. Για να ολοκληρώσετε αυτό το σκαλωσιά, ας πέσουμε στο {{& gt; υπολογιστής ηλεκτρονικού εμπορίου}} στο κάτω μέρος της HTML μας.

Ελέγξτε για την ανταπόκριση

Αυτές τις μέρες, είναι δύσκολο για κάθε τοποθεσία να πάρει χωρίς να είναι φιλικό προς τα μέσα. Αυτό ισχύει ιδιαίτερα για τους ιστότοπους ηλεκτρονικού εμπορίου. Τώρα που το online αγορές έχει γίνει ο κανόνας, δεν θέλουμε να χάσουμε το ποσοστό των χρηστών που το κάνουν αυτό μέσω των κινητών τηλεφώνων τους.

Μετά το σύνθημα μας για κινητά - πρώτα, τα δομικά στοιχεία του Ιδρύματος είναι κατασκευασμένα για να ανταποκρίνονται φυσικά. Ένας γρήγορος έλεγχος σε μια μικρότερη οθόνη δείχνει ότι ο ιστότοπός μας εξακολουθεί να φαίνεται αρκετά καλός.

Ωστόσο, όταν κάνετε κλικ στο μενού Hamburger, ο Off-Canvas μας δεν έχει συνδεθεί σωστά. Αυτό το μέρος παίρνει λίγο δύσκολο, αλλά μην ανησυχείτε! Θα σπάσουμε τι συμβαίνει σε αυτό το μενού Off-Canvas και στη συνέχεια περπατήστε μέσα από το πώς να το συνδέσετε.

Εάν ρίξετε μια ματιά στο αρχείο ηλεκτρονικού εμπορίου-header.html, θα παρατηρήσετε ότι αυτή η κεφαλίδα έχει ενσωματωμένο σε αυτό το Off-καμβά. Έτσι, γιατί δεν λειτούργησε; Όταν κάνετε κλικ στο μενού Hamburger, το μόνο πράγμα που «ώθησε» ήταν η κεφαλίδα. Η υπόλοιπη σελίδα παρέμεινε εν όψει, προκαλώντας κάποια παράξενη αλληλεπικάλυψη.

Αυτό οφείλεται στο γεγονός ότι αυτή η κεφαλίδα χτίστηκε για να εργάζεται μόνος του, αλλά στην πραγματικότητα πρέπει να συνεργαστεί με ολόκληρη τη σελίδα. Με άλλα λόγια, πρέπει να προωθήσει όλο το περιεχόμενο στη σελίδα πάνω όταν ενεργοποιείται το μενού Off-Canvas, όχι μόνο το μενού κεφαλίδας. Αυτή η κεφαλίδα ηλεκτρονικού εμπορίου γράφτηκε έτσι επειδή η δημιουργία ενός off-καμβά απαιτεί κατάδυση στο δικό σας src / layouts / deaust.html σελίδα, η οποία είναι πέρα ​​από το φακέλου του δομικού στοιχείου.

Για να το διορθώσετε, το μόνο που πρέπει να κάνουμε είναι να πάρετε τα πάντα μέσα του & lt; div class = "off-canvas acommas-off-off-canvas θέση-αριστερά" id = "header ηλεκτρονικού εμπορίου" δεδομένων-off-off-canvas & gt; και μετακινήστε το σε src / layouts / deaust.html . Στη συνέχεια, θα τυλίξουμε το {{& gt; σώμα}} του ιστότοπού μας μέσα σε ένα & lt; div class = "off-canvas-περιεχόμενο" δεδομένα-off-canvas-content & gt; . Αυτό θα ωθήσει το σώμα του ιστότοπού μας όταν ενεργοποιείται off-canvas.

Τώρα όταν κάνετε κλικ στο χάμπουργκερ, ολόκληρο το site μετακινείται για το μενού Off-Canvas! Το σώμα του μας προεπιλογή.html Η σελίδα θα πρέπει να μοιάζει με αυτό:

& lt; body & gt;
  & lt; div class = "off-canvas acommas-off-off-canvas θέση-αριστερά" id = "header ηλεκτρονικού εμπορίου" δεδομένων-off-off-canvas & gt;
& lt; class class = "close-button" aria-label = "κλείσιμο μενού" type = "κουμπί" δεδομένα-close-close & gt;
  & lt; span aria-hidden = "true" & gt; & amp; times; / lt; / span & gt;
& lt; / κουμπί & gt;
& lt; ul class = "κάθετο μενού" & gt;
  & lt; li class = "main-nav-link" & gt; a href = "cates.html" & gt; / a & gt; / li & lt; / li & gt;
  & lt; li class = "main-nav-link" & gt; a href = "#" & gt; κατηγορία 2 & lt; / a & gt; / li & gt;
  & lt; li class = "main-nav-link" & gt; a href = "why.html" & gt; κατηγορία 3 & lt; / a & gt; / li & lt; / li & gt;
  & lt; li class = "main-nav-link" & gt; a href = "build.html" & gt; / a & gt; / li & lt; / li & gt;
  & lt; li class = "main-nav-link" & gt; a href = "#" & gt; κατηγορία 5 & lt; / a & lt; / li & gt;
& lt; / ul & gt;
& lt; hr & gt;

& lt; ul class = "menu vertical" & gt;
  & lt; li & gt; & lt; href = "#" & gt; / a & gt; / li & lt; / li & gt;
  & lt; li & gt; & lt; μια κατάσταση παραγγελίας & lt; / a & gt; / li & lt; / li & gt;
  & lt; li & gt; & lt; ένα href = "#" & gt; / a & gt; / lt; / li & gt;
  & lt; li & gt; "ένα href =" # "& gt; / lt; / a & gt; / lt; / li & gt;
& lt; / ul & gt;
  & lt; / div & gt;

  & lt; div class = "off-canvas-περιεχόμενο" δεδομένα-off-canvas-content & gt;
{{& gt; σώμα}}
  & lt; / div & gt;
  & lt; script src = "{{root}} ενεργητικό / js / app.js" & gt; / script & gt;
& lt; / Body & GT; 

συμπέρασμα

Σας έχουμε δείξει πώς να ξεκινήσετε την ιστοσελίδα ηλεκτρονικού εμπορίου σας με το κιτ ηλεκτρονικού εμπορίου του Ιδρύματος, αλλά μην σταματήσετε εκεί! Υπάρχουν πάνω από 100 δομικά στοιχεία που μπορούν να χρησιμοποιηθούν για να βοηθήσουν στην ενίσχυση των σελίδων σας. Σε λίγα λεπτά, έχουμε σκαρφαλωμένο ένα στατικό χώρο ηλεκτρονικού εμπορίου με δομικά στοιχεία. Αυτό σας εξοικονομεί πολύ χρόνο που μπορείτε τώρα να χρησιμοποιήσετε για το στρώμα στα οπτικά και να στρίψετε τον ιστότοπο για να ταιριάζει στο εμπορικό σήμα σας.

Ακόμα κι αν το παίρνετε περισσότερο και χρησιμοποιείτε ένα σύστημα back-end, διαφορετικό μερικό μηχανισμό ή έχετε έναν άλλο τρόπο να αποκτήσετε τα δεδομένα σας στην περιοχή, η δεδομένη ροή εργασίας με δομικά στοιχεία θα σας εξοικονομήσει πραγματικά χρόνο και επομένως χρήματα. Τα δομικά στοιχεία του Ίδρυμα είναι ένας πολύ καλός τρόπος για να ξεκινήσετε επειδή προορίζονται να επεκταθούν, να ταιριάζουν στα υπάρχοντα στυλ σας και να χρησιμοποιηθούν σε οποιοδήποτε σύστημα εφαρμογών.

Αυτό το άρθρο εμφανίστηκε αρχικά στο καθαρό περιοδικό Τεύχος 266. Αγοράστε το εδώ .

Σχετικά Άρθρα:

• Δημιουργήστε ένα UI με βάση την κάρτα με βάση
• 10 όμορφα νέα ιστοσελίδες ηλεκτρονικού εμπορίου που πρέπει να δείτε
• Πώς να βελτιώσετε την απόδοση των τόπων ηλεκτρονικού εμπορίου