Βήμα 1: Αποκτήστε το κλειδί widget του Photta
Συνδεθείτε στο Dashboard του Photta Business στο business.photta.app. Μεταβείτε στο Settings → API Keys και αντιγράψτε το δημοσιεύσιμο κλειδί σας (publishable key), το οποίο ξεκινά με pk_live_. Αυτό είναι το μόνο διαπιστευτήριο που χρειάζεστε. Πριν λειτουργήσει το κλειδί, προσθέστε το domain του καταστήματός σας WooCommerce (π.χ. mystore.com) στο Settings → Allowed Domains. Ο έλεγχος domain εκτελείται σε κάθε αίτημα δοκιμής, επομένως η λίστα επιτρεπόμενων πρέπει να οριστεί πριν βγείτε live.
Εάν κάνετε δοκιμές τοπικά σε ένα subdomain όπως το localhost ή σε ένα staging URL, προσθέστε αυτό το domain στη λίστα επιτρεπόμενων ξεχωριστά. Μπορείτε να προσθέσετε έως και 10 domains σε οποιοδήποτε πληρωμένο πρόγραμμα. Ο δοκιμαστικός λογαριασμός επιτρέπει ένα domain. Μόλις το domain σας καταχωρηθεί, τα αιτήματα από αυτήν την προέλευση θα γίνονται δεκτά αμέσως — δεν υπάρχει καθυστέρηση διάδοσης.
Βήμα 2: Επιλέξτε shortcode έναντι script tag
Το WooCommerce σάς προσφέρει δύο καθαρές διαδρομές ενσωμάτωσης. Η προσέγγιση shortcode ([photta_widget pk="pk_live_..."]) σάς επιτρέπει να επικολλήσετε το widget σε μια συγκεκριμένη τοποθεσία μέσα στο πρότυπο της σελίδας προϊόντος ή σε ένα προσαρμοσμένο hook του WooCommerce — ιδανικό εάν θέλετε το κουμπί να εμφανίζεται ακριβώς ανάμεσα στη γκαλερί προϊόντων και το κουμπί Προσθήκη στο καλάθι. Για να χρησιμοποιήσετε το shortcode, επικολλήστε το απευθείας στο αρχείο προτύπου προϊόντος WooCommerce single-product/add-to-cart/simple.php ή χρησιμοποιήστε ένα block από page builder.
Η προσέγγιση script tag εισάγει το SDK καθολικά μέσω του αρχείου functions.php του θέματός σας χρησιμοποιώντας το wp_enqueue_script. Προσθέστε το ακόλουθο στο functions.php του child theme σας: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); Αυτό εμφανίζει αυτόματα το κουμπί του widget σε κάθε σελίδα προϊόντος, χωρίς αλλαγές ανά πρότυπο. Οι περισσότεροι έμποροι προτιμούν την προσέγγιση script tag για την απλότητά της.
Βήμα 3: Επικολλήστε και αποθηκεύστε το απόσπασμα κώδικα που επιλέξατε
Για τη διαδρομή shortcode: ανοίξτε την παράκαμψη προτύπου (template override) του WooCommerce για τη σελίδα μεμονωμένου προϊόντος στο child theme σας. Επικολλήστε το [photta_widget pk="pk_live_..."] στην ακριβή κάθετη θέση όπου θέλετε να εμφανίζεται το κουμπί. Αποθηκεύστε το αρχείο. Ο μηχανισμός απόδοσης του shortcode καταχωρείται από το ελαφρύ βοήθημα του Photta — δεν απαιτείται αρχείο plugin, καθώς το ίδιο το SDK καταχωρεί τον χειριστή shortcode όταν φορτώνεται.
Για τη διαδρομή script tag: ανοίξτε το Εμφάνιση → Επεξεργαστής Αρχείων Θέματος στη διαχείριση του WordPress, μεταβείτε στο functions.php του child theme σας και προσθέστε το απόσπασμα κώδικα wp_footer που εμφανίζεται στο Βήμα 2. Κάντε κλικ στο Ενημέρωση Αρχείου για αποθήκευση. Επαληθεύστε ότι το απόσπασμα αποθηκεύτηκε ανανεώνοντας τον επεξεργαστή και επιβεβαιώνοντας ότι ο κώδικας είναι παρών. Εάν χρησιμοποιείτε κάποιο plugin προσωρινής μνήμης (WP Rocket, W3 Total Cache), καθαρίστε την προσωρινή μνήμη τώρα, ώστε να σερβιριστεί το νέο footer script.
Βήμα 4: Επαληθεύστε ότι το widget εμφανίζεται στο κατάστημά σας
Μεταβείτε σε μια σελίδα προϊόντος στο κατάστημά σας WooCommerce σε ένα παράθυρο ιδιωτικής περιήγησης. Θα πρέπει να δείτε ένα κουμπί 'Try it on' (Δοκιμάστε το) κοντά στην ενότητα Προσθήκη στο καλάθι. Κάντε κλικ στο κουμπί, ανεβάστε μια δοκιμαστική φωτογραφία και επαληθεύστε ότι το αποτέλεσμα της δοκιμής αποδίδεται. Εάν το κουμπί δεν εμφανίζεται, ανοίξτε την κονσόλα του προγράμματος περιήγησης (F12) και αναζητήστε σφάλματα photta. Ένα σφάλμα domain 403 σημαίνει ότι το domain σας δεν βρίσκεται ακόμα στη λίστα Allowed Domains.
Επίσης, ελέγξτε ότι το script tag του SDK εμφανίζεται στον πηγαίο κώδικα HTML της σελίδας πατώντας Ctrl+U (Προβολή Πηγαίου Κώδικα) και αναζητώντας τη λέξη photta. Εάν το tag λείπει αλλά προσθέσατε το hook wp_footer, ελέγξτε ξανά αν το θέμα σας καλεί τη συνάρτηση wp_footer() στο πρότυπο του υποσέλιδου — ορισμένα παλαιότερα ή έντονα προσαρμοσμένα θέματα παραλείπουν αυτήν την κλήση. Η προσθήκη του <?php wp_footer(); ?> πριν από το κλείσιμο του </body> στο footer.php διορθώνει αυτό το πρόβλημα.
Βήμα 5: Διαμόρφωση ορατότητας ανά κατηγορία
Από προεπιλογή, το κουμπί του widget εμφανίζεται σε όλες τις σελίδες προϊόντων. Για να το περιορίσετε σε συγκεκριμένες κατηγορίες, προσθέστε το χαρακτηριστικό data-categories στο script tag σας με μια λίστα slugs κατηγοριών του WooCommerce διαχωρισμένα με κόμματα: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="womens-apparel,mens-apparel,swimwear" defer></script>. Το SDK διαβάζει τα δεδομένα κατηγορίας WooCommerce της τρέχουσας σελίδας και αποκρύπτει αυτόματα το κουμπί σε σελίδες που δεν ταιριάζουν.
Για τους χρήστες shortcode, τοποθετήστε το shortcode μόνο στα πρότυπα που σχετίζονται με τις κατηγορίες-στόχους ή τυλίξτε το shortcode σε μια συνθήκη WooCommerce: χρησιμοποιήστε τη συνάρτηση PHP has_term() για να ελέγξετε εάν το τρέχον προϊόν ανήκει στην κατηγορία-στόχο πριν από την έξοδο του shortcode. Αυτό το μοτίβο σάς δίνει απόλυτο έλεγχο στο ποιοι τύποι προϊόντων εμφανίζουν την επιλογή δοκιμής χωρίς να χρειάζεται να δημιουργήσετε διπλότυπα πρότυπα.