Τι είναι το ACF
Ένα πολύ ισχυρό όπλο, όσον αφορά στον σχεδιασμό και στην τροποποίηση του ηλεκτρονικού καταστήματος μας, είναι το πρόσθετο Advanced Custom Fields ή, εν συντομία, ACF, που μας επιτρέπει να δημιουργούμε Extra Custom FIelds για όποιαδήποτε οντότητα του WordPress και του WooCommerce, όπως Posts – Παραγγελίες – Προϊόντα – Πελάτες κλπ.
Που χρησιμεύει
Έστω ότι έχουμε κάποια προϊόντα στο ηλεκτρονικό μας κατάστημα στα οποία θα θέλαμε να προσθέσουμε έναν μοναδικό κωδικό, εκτός από τον κωδικό κατασκευαστή (SKU). Με το ACF μας δίνεται η δυνατότητα να προσθέσουμε ένα extra πεδίο και να το συμπληρώνουμε για κάθε προϊόν, κατά τη διάρκεια δημιουργίας ή ενημέρωσης ενός προϊόντος.
Έχοντας εγκαταστήσει το πρόσθετο ACF – Advanced Custom Fields , προχωράμε σε ενεργοποίηση και θα δούμε στην κεντρική στήλη αριστερά, στο διαχειριστικό της σελίδας μας ένα νέο μενού με τίτλο “Custom Fields” (κόκκινο πλαίσιο):
Επιλέγοντάς το, ανοίγει το παράθυρο για την προσθήκη νέας “Ομάδας πεδίων” (Field Group)
Επιλέγοντας το “Add New” ανοίγει το παράθυρο της νέας ομάδας πεδίων που θα δημιουργήσουμε.
Δίνουμε έναν τίτλο της επιλογής μας στην νέα ομάδα πεδίων.
Ας πούμε “Extra πληροφορίες προϊόντος”
και επιλέγουμε στο block με τίτλο Location: Post type is equal to Προϊόν, δεδομένου ότι θέλουμε να φτιάξουμε, όπως ήδη αναφέραμε, ένα επιπλέον πεδίο για τα προϊόντα μας.
Μπορείτε να πειραματιστείτε με διάφορους κανόνες, για διαφορετικές οντότητες του WordPress (όπως τα άρθρα κ.λπ) όμως στα πλαίσια αυτού του tutorial θα παραμείνουμε στα προϊόντα.
Στο παρακάτω block που βλέπουμε είναι οι ρυθμίσεις της ομάδας πεδίων (Settings).
Active – πάντα ενεργό
Show in REST API – ενεργό αν θέλουμε να υπάρχει στο Rest API του ιστότοπού μας (εάν δεν γνωρίζετε τι είναι, αφήστε το κλειστό, δεν σας επηρεάζει στην παρούσα φάση)
Style – πάντα Standard, εκτός αν δεν θέλουμε να μπορούμε να το επεξεργαστούμε μέσα από το προϊόν (σπανίως)
Position – Σε ποιο σημείο στην σελίδα δημιουργίας / επεξεργασίας προϊόντος θα εμφανίζεται το block που θα περιέχει τα πεδία της ομάδας.
Παράδειγμα:
Label placement – Σε ποιο σημείο στο πλαίσιο της ομάδας των πεδίων θα φαίνεται ο τίτλος του κάθε πεδίου (πάνω από το πεδίο, ή μπροστά) Στην παραπάνω φωτογραφία ο τίτλος του πεδίου “Τεστ” βρίσκεται πάνω από το πεδίο (Top Aligned)
Instruction placement – Σε ποιο σημείο στο πλαίσιο της ομάδας των πεδίων θα φαίνονται οι οδηγίες για το κάθε πεδίο (αν υπάρχουν). Η προεπιλογή Below Labels τοποθετεί τις οδηγίες κάτω ακριβώς από τον τίτλο του πεδίου (και πάνω από το πεδίο)
Order No. – Αν φτιάξουμε πάνω από μία ομάδα πεδίων, αυτή με το μικρότερο Order No. θα εμφανίζεται πρώτη
Description – Περιγραφή της ομάδας πεδίων η οποία φαίνεται στην λίστα με τις ομάδες πεδίων που έχουμε φτιάξει, στο διαχειριστικό του WordPress, στο Dashboard > Custom Fields > Field Groups
Hide on screen – Στοιχεία που δεν θέλουμε να φαίνονται στην επεξεργασία προϊόντος. Τα αφήνουμε όλα μη τσεκαρισμένα.
Αφού ολοκληρώσουμε την δημιουργία ομάδας πεδίων, μπορούμε να αρχίσουμε να φτιάχνουμε τα πεδία που θέλουμε.
Στο tutorial μας, όπως ήδη αναφέρθηκε, θα φτιάξουμε ένα πεδίο στο οποίο κάθε προϊόν μας θα έχει έναν μοναδικό κωδικό.
Επιλέγουμε το + Add Field και ανοίγει η παρακάτω φόρμα, για να συμπληρώσουμε της πληροφορίες του πεδίου:
Field Label – Το όνομα του πεδίου, όπως θα το βλέπουμε στην σελίδα δημιουργίας / επεξεργασίας του προϊόντος. (“Τεστ” στην παραπάνω περίπτωση)
Field Name – Το όνομα του πεδίου, όπως θα το χρειαστούμε για να προσθέσουμε το πεδίο στην σελίδα του προϊόντος μπροστά, στο Front end.
Field Type – Ο τύπος του περιεχομένου του πεδίου. Υπάρχει μια μεγάλη γκάμα επιλογών. Εμείς θα αφήσουμε το Text εφόσον θα βάλουμε έναν κωδικό που, πιθανώς, θα έχει και αλφαριθμητικά στοιχεία εκτός από αριθμούς.
Instructions – Οδηγίες του πεδίου, οι οποίες φαίνονται κάτω από τον τίτλο του πεδίου
Required – Yes Αν το πεδίο είναι απαραίτητο για την ολοκλήρωση δημιουργίας του προϊόντος, ή No για προαιρετικό
Default Value – Η προεπιλεγμένη τιμή του πεδίου. Κενό στην περίπτωση μας.
Placeholder Text – Βοηθητικό κείμενο που δείχνει στον χρήστη την μορφή που πρέπει να έχει η τιμή του πεδίου. (π.χ στην δική μας περίπτωση μπορούμε να βάλουμε “π.χ 123456789A”)
Prepend / Append – Συμβολοσειρές που μπαίνουν πάντα πριν / μετά την τιμή του πεδίου.
Character Limit – Το όριο χαρακτήρων της τιμής του πεδίου. Αν δηλαδή γνωρίζουμε εκ των προτέρων ότι όλοι οι μοναδικοί κωδικοί είναι 10ψήφιοι, τότε μπορούμε να βάλουμε 10.
Conditional Logic – Να εμφανίζεται αυτό το πεδίο μέσα στο προϊόν εάν συναντάτε κάποια συγκεκριμένη τιμή σε αυτό ή σε οποιοδήποτε πεδίο της ομάδας πεδίων που ανήκει. Στο παράδειγμα μας επιλέγουμε το No.
Wrapper Attributes – Το μήκος, η κλάση HTML και το id HTML του πεδίου μέσα στη σελίδα δημιουργίας / επεξεργασίας του προϊόντος. Στο παράδειγμα μας τα αφήνουμε κενά. (Εάν δεν γνωρίζεται τι είναι αυτά, αφήνετε τα πάντα κενά.)
Έχουμε φτιάξει πλέον το πεδίο που χρειαζόμαστε.
Πως όμως θα το εμφανίσουμε μπροστά;
Έστω ότι θέλουμε να φαίνεται στην σελίδα του προϊόντων (Front end) κάτω από τις υπόλοιπες πληροφορίες :
Θα χρησιμοποιήσουμε την βοήθεια των hooks, και συγκεκριμένα ενός Action hook.
Πληροφορίες σχετικά με τα hooks μπορείτε να βρείτε εδώ, σε άλλο ένα one page manual
Θα γράψουμε λοιπόν το εξής:
// Το παρακάτω, όπως και όλες οι τροποποιήσεις θέματος σε μια σελίδα, πηγαίνει στο /wp-content/themes/my-theme/functions.php
<?php
add_action('woocommerce_product_meta_end', 'clr_add_code_after_meta');
function clr_add_code_after_meta(){
global $product;
$code = $product->get_meta('monadikos_kodikos');
echo "Μοναδικός Κωδικός : " . $code;
}
Όπου ‘monadikos_kodikos’ είναι το Field Name που δώσαμε στο πεδίο μας.
Με την υλοποίηση των παραπάνω, έχουμε πετύχει αυτό που θέλαμε και το προϊόν έχει πλέον έναν μοναδικό κωδικό της επιλογής μας.
Όπως επίσης και τον εμφανίζει μπροστά στην σελίδα του.
