Σελίδες καταστήματος και τα μπλοκ ολοκλήρωσης αγοράς

Ενότητα 2: Εγκατάσταση και ρύθμιση · Χρόνος ανάγνωσης: 9 λεπτά

Στόχος μαθήματος: Μετά από αυτό το μάθημα μπορείτε να αναγνωρίζετε τις σελίδες καταστήματος του WooCommerce και να τις συνδέετε σωστά, και επιλέγετε συνειδητά ανάμεσα στα μπλοκ και στα shortcodes για το καλάθι και το ταμείο.

Βασικές έννοιες: σελίδα καταστήματος, καλάθι, ταμείο, Ο λογαριασμός μου, σελίδα όρων, ρύθμιση σελίδων, μπλοκ, shortcodes, θέμα μπλοκ, κλασικό θέμα, συμβατότητα επεκτάσεων, noindex

Τέσσερις σελίδες με ειδικό ρόλο

Ένας ιστότοπος WordPress αποτελείται από σελίδες και άρθρα (μάθημα WordPress, μάθημα 4.2). Το WooCommerce προσθέτει τα προϊόντα ως δικό τους τύπο άρθρου και δίνει σε μερικές κανονικές σελίδες έναν ειδικό ρόλο. Αυτές οι σελίδες φαίνονται στη λίστα Σελίδες όπως κάθε άλλη σελίδα, αλλά το WooCommerce γνωρίζει ποια σελίδα έχει ποια εργασία. Αυτό ορίζεται στις ρυθμίσεις, όχι στο όνομα ή στη διεύθυνση της σελίδας.

Επειδή η σύνδεση βρίσκεται στις ρυθμίσεις, μπορείτε να δώσετε στις σελίδες άλλον τίτλο και άλλη διεύθυνση. Το Τεϊοπωλείο Example, ένα ηλεκτρονικό κατάστημα στην Ουτρέχτη (Ολλανδία), ονομάζει το καλάθι "Mandje" στη διεύθυνση /mandje/, και αυτό λειτουργεί, αρκεί η σελίδα αυτή να έχει οριστεί ως καλάθι στη Ρύθμιση σελίδας.

Αν η σύνδεση χαλάσει, το καταλαβαίνετε σε απρόσμενα σημεία. Μερικά παραδείγματα που συμβαίνουν συχνά:

• Κάποιος διαγράφει τη σελίδα Καλάθι επειδή "υπήρχε δύο φορές". Στη συνέχεια ένας επισκέπτης, μετά το Προσθήκη στο καλάθι, καταλήγει σε σελίδα σφάλματος, και ορισμένα θέματα δεν εμφανίζουν πλέον το καλάθι στην κεφαλίδα.
• Μετά από μεταφορά ή εισαγωγή, στο Ταμείο είναι συνδεδεμένη μια άλλη σελίδα από εκείνη που περιέχει το μπλοκ ολοκλήρωσης αγοράς. Ο επισκέπτης βλέπει μια κενή σελίδα και δεν μπορεί να παραγγείλει.
• Μια δεύτερη σελίδα "Ταμείο-2" δημιουργείται όταν εκτελείτε τον οδηγό ρύθμισης για δεύτερη φορά. Η μία σελίδα είναι συνδεδεμένη, η άλλη βρίσκεται στο μενού.

Γι' αυτό, μετά από κάθε μεγάλη αλλαγή (θέμα, μεταφορά, εισαγωγή), ελέγξτε στη Ρύθμιση σελίδας ποια σελίδα είναι συνδεδεμένη και ανοίξτε την ίδια τη σελίδα.

Μπλοκ ή shortcodes

Υπάρχουν δύο τρόποι με τους οποίους το καλάθι και το ταμείο εμφανίζονται στη σελίδα.

Τα shortcodes είναι ο παλιός τρόπος: στη σελίδα υπάρχει ένας σύντομος κωδικός σε αγκύλες, όπως [woocommerce_cart] και [woocommerce_checkout]. Το WooCommerce τον αντικαθιστά κατά την εμφάνιση με τη φόρμα. Η εμφάνιση προέρχεται από το θέμα, και πάρα πολλές επεκτάσεις έχουν φτιαχτεί επί χρόνια για αυτή τη μορφή.

Τα μπλοκ είναι ο νέος τρόπος: η σελίδα περιέχει το μπλοκ Καλάθι ή Ταμείο, που αποτελείται από μικρότερα μπλοκ (διεύθυνση, αποστολή, τρόπος πληρωμής, σύνοψη, το κουμπί παραγγελίας). Τα βλέπετε και τα επεξεργάζεστε στον επεξεργαστή μπλοκ (μάθημα WordPress, μάθημα 4.1). Τα μπλοκ επικοινωνούν με τον server μέσω του Store API (μάθημα 2.4): η φόρμα λειτουργεί απευθείας στο πρόγραμμα περιήγησης, χωρίς να φορτώνεται ξανά η σελίδα κάθε φορά.

Από το WooCommerce 8.3 (Νοέμβριος 2023) μια νέα εγκατάσταση λαμβάνει τα μπλοκ. Ένα υπάρχον κατάστημα που ενημερώνεται κρατά ό,τι είχε. Τα shortcodes παραμένουν διαθέσιμα.

Ποιο να επιλέξετε; Μερικές ερωτήσεις βοηθούν:

• Λειτουργούν οι επεκτάσεις σας με τα μπλοκ; Αυτή είναι η πιο σημαντική ερώτηση. Μια επέκταση που προσθέτει ένα πεδίο στο ταμείο (ημερομηνία παράδοσης, ΑΦΜ, μήνυμα δώρου) πρέπει να έχει προσαρμοστεί ξεχωριστά για τα μπλοκ. Στη σελίδα της επέκτασης αναφέρεται συνήθως αν είναι "συμβατή με το μπλοκ ολοκλήρωσης αγοράς". Στον επεξεργαστή του μπλοκ ολοκλήρωσης αγοράς το WooCommerce μπορεί να εμφανίσει ειδοποίηση για ενεργές επεκτάσεις που δεν έχουν δηλωθεί ως συμβατές.
• Ποιο θέμα έχετε; Με ένα θέμα μπλοκ (μάθημα WordPress, μάθημα 5.1) τα μπλοκ ταιριάζουν καλύτερα. Με ένα κλασικό θέμα λειτουργούν επίσης, αλλά η εμφάνιση ταιριάζει λιγότερο αυτόματα.
• Χρειάζεται να προσαρμόσετε το κουμπί παραγγελίας; Στα μπλοκ ορίζετε το κείμενο του κουμπιού στον επεξεργαστή. Για τους κανόνες που ισχύουν σχετικά (μάθημα 5.4) αυτό είναι πρακτικό.
• Θέλετε το Store API να είναι δημόσιο; Με τα μπλοκ πρέπει να είναι προσβάσιμο· ένα πρόσθετο ασφαλείας που κλείνει το REST API χαλάει το ταμείο.

Το Τεϊοπωλείο Example δεν χρησιμοποιεί επεκτάσεις που προσθέτουν πεδία και έχει θέμα μπλοκ. Κρατά τα μπλοκ. Ένα άλλο κατάστημα με πρόσθετο ημερομηνίας παράδοσης που λειτουργεί μόνο με το shortcode επιλέγει προσωρινά το shortcode και ελέγχει ξανά σε κάθε μεγάλη ενημέρωση του πρόσθετου.

Αν αλλάξετε μορφή, κάντε το στο δοκιμαστικό σας κατάστημα και στη συνέχεια δοκιμάστε μια ολόκληρη παραγγελία (μάθημα 4.5). Το WooCommerce διαθέτει στο WooCommerce > Κατάσταση > Εργαλεία ένα εργαλείο για τη δημιουργία εκ νέου σελίδων καταστήματος που λείπουν· αυτό δημιουργεί νέες σελίδες, δεν μετατρέπει τις υπάρχουσες.

Γιατί το καλάθι και το ταμείο δεν ανήκουν στις μηχανές αναζήτησης

Ένα καλάθι είναι διαφορετικό για κάθε επισκέπτη και για μια μηχανή αναζήτησης είναι πάντα άδειο. Ένα άδειο καλάθι στα αποτελέσματα αναζήτησης δεν βοηθά κανέναν. Γι' αυτό το WooCommerce βάζει από μόνο του noindex στις σελίδες καλάθι, ταμείο και Ο λογαριασμός μου: η μηχανή αναζήτησης μπορεί να επισκεφθεί τη σελίδα, αλλά δεν τη συμπεριλαμβάνει στα αποτελέσματα αναζήτησης. Το βλέπετε στον πηγαίο κώδικα ως:

<meta name='robots' content='noindex, follow' />

Ένα πρόσθετο SEO ή ένα θέμα μπορεί να αντικαταστήσει αυτή τη γραμμή. Σπάνια γίνεται σκόπιμα. Στην άσκηση αυτού του μαθήματος ελέγχετε αν υπάρχει.

Οι ίδιες τρεις σελίδες δεν πρέπει επίσης να μπαίνουν στην cache σελίδων. Το WooCommerce στέλνει μαζί τους κεφαλίδες που λένε στις cache ότι δεν πρέπει να αποθηκεύσουν τη σελίδα. Πώς ελέγχετε ότι η cache σας τις τηρεί, θα το δείτε στο μάθημα 6.4.

Τι βλέπει ένας επισκέπτης χωρίς καλάθι

Αν ανοίξετε τη σελίδα ταμείου χωρίς τίποτα στο καλάθι σας, συμβαίνει κάτι διαφορετικό από ό,τι με προϊόντα μέσα:

• Με τα μπλοκ η σελίδα ταμείου εμφανίζει συνήθως ένα μήνυμα ότι το καλάθι είναι άδειο, με ένα κουμπί επιστροφής στο κατάστημα.
• Με το shortcode το WooCommerce συχνά σας ανακατευθύνει στο καλάθι.

Και τα δύο είναι φυσιολογικά. Ο έλεγχος σε αυτό το μάθημα το λαμβάνει υπόψη: το πρόγραμμα δεν βάζει ποτέ τίποτα στο καλάθι σας και εξετάζει μόνο τι βλέπει ένας επισκέπτης χωρίς καλάθι.

Στην πράξη: έτσι φαίνεται στο WooCommerce

Με άλλα θέματα και παρόχους hosting λειτουργεί παρόμοια· διαφέρει μόνο η εμφάνιση.

1. Μεταβείτε στο WooCommerce > Ρυθμίσεις > Για προχωρημένους (Advanced) και ανοίξτε τη Ρύθμιση σελίδας (Page setup). Σημειώστε ποια σελίδα έχει οριστεί στα Καλάθι, Ταμείο, Ο λογαριασμός μου και Όροι και προϋποθέσεις.
2. Στις Σελίδες, κάντε κλικ σε καθεμία από αυτές τις σελίδες και ελέγξτε αν περιέχει το μπλοκ (ή το shortcode).
3. Ανοίξτε τη σελίδα ταμείου στον επεξεργαστή. Κάντε κλικ στο μπλοκ Ταμείο και δείτε τα τμήματα στην προβολή λίστας: στοιχεία επικοινωνίας, διεύθυνση αποστολής, επιλογές αποστολής, επιλογές πληρωμής, σημείωση, όροι, το κουμπί.
4. Ελέγξτε στον επεξεργαστή του μπλοκ ολοκλήρωσης αγοράς (και στις ίδιες τις επεκτάσεις) αν υπάρχει ειδοποίηση για επεκτάσεις που δεν είναι συμβατές με τα μπλοκ.
5. Ανοίξτε το καλάθι σε ένα ιδιωτικό παράθυρο και δείτε τον πηγαίο κώδικα (Ctrl+U): αναζητήστε το noindex.

Σύνοψη

• Το WooCommerce δίνει ρόλο σε τέσσερις σελίδες (κατάστημα, καλάθι, ταμείο, Ο λογαριασμός μου) καθώς και στη σελίδα όρων· η σύνδεση βρίσκεται στις ρυθμίσεις, όχι στο όνομα.
• Μετά από μεταφορά, εισαγωγή ή αλλαγή θέματος ελέγχετε τις συνδέσεις στη Ρύθμιση σελίδας.
• Τα νέα καταστήματα λαμβάνουν από το WooCommerce 8.3 τα μπλοκ· τα shortcodes εξακολουθούν να υπάρχουν. Επιλέξτε με βάση τις επεκτάσεις και το θέμα σας.
• Τα μπλοκ χρειάζονται το Store API· μην κλείνετε το REST API.
• Το καλάθι, το ταμείο και ο λογαριασμός μου λαμβάνουν από το WooCommerce noindex και δεν ανήκουν στην cache.

Κουίζ

Άσκηση

Άσκηση A2.2: Οι σελίδες του καταστήματός σας. Συμπληρώστε τη διεύθυνση του (δοκιμαστικού) καταστήματός σας και τις διευθύνσεις του καλαθιού, της σελίδας ταμείου και του λογαριασμού μου (διαδρομή, όπως /winkelwagen/, ή την πλήρη URL στον ίδιο host). Το πρόγραμμα ζητά κάθε σελίδα μία φορά, χωρίς cookies και χωρίς να βάλει τίποτα στο καλάθι.

Για κάθε σελίδα το αποτέλεσμα είναι σωστό όταν:

• η σελίδα απαντά μέσω https με κατάσταση 200·
• η HTML περιέχει ένα χαρακτηριστικό του WooCommerce: για το καλάθι το μπλοκ wp-block-woocommerce-cart ή την κλάση body woocommerce-cart, για το ταμείο wp-block-woocommerce-checkout ή woocommerce-checkout, για τον λογαριασμό μου woocommerce-account ή μια φόρμα σύνδεσης του WooCommerce·
• υπάρχει noindex (meta robots ή κεφαλίδα X-Robots-Tag).

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

Πορτοκαλί: δεν υπάρχει noindex (ελέγξτε αν ένα πρόσθετο SEO ή το θέμα σας το αφαιρεί)· η σελίδα χρησιμοποιεί το shortcode αντί για το μπλοκ (δεν είναι σφάλμα, αλλά τίθεται το ερώτημα αν πρόκειται για συνειδητή επιλογή). Κόκκινο: κατάσταση σφάλματος όπως 404, σελίδα χωρίς χαρακτηριστικό του WooCommerce (συνδέστε τη σωστή σελίδα στη Ρύθμιση σελίδας), ανακατεύθυνση σε άλλον host ή http χωρίς https.

Στη συνέχεια σημειώστε για τον εαυτό σας ποια μορφή (μπλοκ ή shortcode) χρησιμοποιείτε και γιατί.

Περαιτέρω ανάγνωση

• Δωρεάν μάθημα WordPress 5.1: Θέματα εμφάνισης: θέματα με μπλοκ και κλασικά θέματα
• Δωρεάν μάθημα WordPress 4.2: Σελίδες, άρθρα, κατηγορίες και ετικέτες
• Δωρεάν μάθημα WordPress 4.1: Ο επεξεργαστής μπλοκ
• WooCommerce 8.3: μπλοκ ως προεπιλογή για νέα καταστήματα (developer.woocommerce.com, στα Αγγλικά): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• Το Store API (developer.woocommerce.com, στα Αγγλικά): https://developer.woocommerce.com/docs/apis/store-api/