שלב 1: קבלו את מפתח הווידג'ט של Photta
התחברו ללוח הבקרה של Photta Business בכתובת business.photta.app. עברו להגדרות ← מפתחות API והעתיקו את המפתח הניתן לפרסום (publishable key), המתחיל ב-pk_live_. זהו האישור היחיד שאתם צריכים. לפני שהמפתח יעבוד, הוסיפו את דומיין החנות שלכם WooCommerce (לדוגמה: mystore.com) להגדרות ← דומיינים מורשים. בדיקת הדומיין מתבצעת בכל בקשת מדידה, לכן רשימת ההרשאות חייבת להיות מוגדרת לפני העלייה לאוויר.
אם אתם בודקים באופן מקומי על סאב-דומיין כמו localhost או כתובת staging, הוסיפו את הדומיין הזה לרשימת ההרשאות בנפרד. ניתן להוסיף עד 10 דומיינים בכל תוכנית בתשלום. חשבון הניסיון מאפשר דומיין אחד. ברגע שהדומיין שלכם מופיע ברשימה, בקשות מהמקור הזה יתקבלו באופן מיידי — אין עיכוב בהפצה.
שלב 2: בחירה בין שורטקוד לתגית סקריפט
WooCommerce מציעה לכם שני נתיבי אינטגרציה נקיים. גישת השורטקוד ([photta_widget pk="pk_live_..."]) מאפשרת לכם להדביק את הווידג'ט במיקום ספציפי בתוך תבנית דף המוצר שלכם או ב-hook מותאם אישית של WooCommerce — אידיאלי אם אתם רוצים שהכפתור יופיע בדיוק בין גלריית המוצרים לכפתור הוספה לסל. כדי להשתמש בשורטקוד, הדביקו אותו ישירות לקובץ תבנית המוצר של WooCommerce בנתיב single-product/add-to-cart/simple.php, או השתמשו בבלוק של בונה דפים.
גישת תגית הסקריפט מחדירה את ה-SDK באופן גלובלי דרך קובץ functions.php של ערכת העיצוב שלכם באמצעות wp_enqueue_script. הוסיפו את הקוד הבא לקובץ functions.php של תבנית הבת שלכם: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); זה מציג את כפתור הווידג'ט בכל דף מוצר באופן אוטומטי, ללא שינויים בתבניות. רוב הסוחרים מעדיפים את גישת תגית הסקריפט בשל פשטותה.
שלב 3: הדבקה ושמירה של הקטע הנבחר
עבור נתיב השורטקוד: פתחו את דריסת תבנית WooCommerce של תבנית הבת עבור דף המוצר הבודד. הדביקו את [photta_widget pk="pk_live_..."] במיקום האנכי המדויק שבו תרצו שהכפתור יופיע. שמרו את הקובץ. המרנדר של השורטקוד רשום על ידי העוזר הקל של Photta — אין צורך בקובץ תוסף, מכיוון שה-SDK עצמו רושם את מטפל השורטקוד בעת הטעינה.
עבור נתיב תגית הסקריפט: פתחו את 'עיצוב' ← 'עורך תבניות' בממשק הניהול של וורדפרס, עברו לקובץ functions.php של תבנית הבת שלכם, והוסיפו את קטע הקוד של wp_footer שהוצג בשלב 2. לחצו על 'עדכן קובץ' לשמירה. ודאו שהקטע נשמר על ידי רענון העורך ואישור שהקוד קיים. אם אתם משתמשים בתוסף מטמון (WP Rocket, W3 Total Cache), נקו את המטמון כעת כדי שסקריפט הפוטר החדש יוגש.
שלב 4: ודאו שהווידג'ט מופיע בחנות שלכם
עברו לדף מוצר בחנות WooCommerce שלכם בחלון גלישה פרטית. אתם אמורים לראות כפתור 'נסו את זה עליכם' (Try it on) ליד אזור ההוספה לסל. לחצו על הכפתור, העלו תמונת בדיקה, וודאו שתוצאת המדידה מרונדרת. אם הכפתור לא מופיע, פתחו את קונסול הדפדפן (F12) וחפשו שגיאות photta. שגיאת דומיין 403 פירושה שהדומיין שלכם עדיין לא נמצא ברשימת הדומיינים המורשים.
בדקו גם שתגית הסקריפט של ה-SDK מופיעה במקור ה-HTML של הדף על ידי לחיצה על Ctrl+U (הצגת מקור הדף) וחיפוש המילה photta. אם התגית חסרה אך הוספתם את ה-hook של wp_footer, בדקו שוב שערכת העיצוב שלכם קוראת ל-wp_footer() בתבנית ה-footer שלה — חלק מהתבניות הישנות או המותאמות אישית מאוד משמיטות קריאה זו. הוספת <?php wp_footer(); ?> לפני תגית הסגירה </body> בקובץ footer.php תפתור זאת.
שלב 5: הגדרת נראות לפי קטגוריה
כברירת מחדל, כפתור הווידג'ט מופיע בכל דפי המוצר. כדי להגבילו לקטגוריות ספציפיות, הוסיפו את המאפיין data-categories לתגית הסקריפט שלכם עם רשימה מופרדת בפסיקים של מזהי קטגוריות WooCommerce: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="womens-apparel,mens-apparel,swimwear" defer></script>. ה-SDK קורא את נתוני הקטגוריה של WooCommerce בדף הנוכחי ומסתיר את הכפתור בדפים שאינם תואמים באופן אוטומטי.
עבור משתמשי שורטקוד, מקמו את השורטקוד רק בתבניות המשויכות לקטגוריות היעד, או עטפו את השורטקוד בתנאי WooCommerce: השתמשו בפונקציית ה-PHP has_term() כדי לבדוק אם המוצר הנוכחי שייך לקטגוריית היעד לפני פלט השורטקוד. דפוס זה נותן לכם שליטה כירורגית על אילו סוגי מוצרים יציגו את אפשרות המדידה מבלי לשכפל תבניות.