الخطوة 1: احصل على مفتاح أداة Photta الخاص بك
سجل الدخول إلى لوحة تحكم Photta Business في business.photta.app. اذهب إلى الإعدادات ← مفاتيح API وانسخ مفتاح النشر الخاص بك، والذي يبدأ بـ pk_live_. هذا هو الاعتماد الوحيد الذي تحتاجه. قبل أن يعمل المفتاح، أضف نطاق متجر WooCommerce الخاص بك (مثلاً mystore.com) إلى الإعدادات ← النطاقات المسموح بها. يتم فحص النطاق عند كل طلب تجربة، لذا يجب إعداد القائمة المسموح بها قبل الإطلاق.
إذا كنت تختبر محليًا على نطاق فرعي مثل localhost أو رابط تجريبي، أضف هذا النطاق إلى القائمة المسموح بها بشكل منفصل. يمكنك إضافة ما يصل إلى 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 الخاص بك في نافذة متصفح خاصة. يجب أن ترى زر "جربها الآن" بالقرب من قسم أضف إلى السلة. انقر فوق الزر، وارفع صورة اختبارية، وتحقق من ظهور نتيجة التجربة. إذا لم يظهر الزر، افتح وحدة تحكم المتصفح (F12) وابحث عن أخطاء photta. خطأ النطاق 403 يعني أن نطاقك ليس مدرجًا بعد في قائمة النطاقات المسموح بها.
تحقق أيضًا من ظهور وسم نص SDK في مصدر HTML للصفحة بالضغط على Ctrl+U (عرض المصدر) والبحث عن photta. إذا كان الوسم غائبًا رغم إضافة خطاف wp_footer، فتأكد من أن قالبك يستدعي ()wp_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: استخدم دالة ()has_term في PHP للتحقق مما إذا كان المنتج الحالي ينتمي إلى الفئة المستهدفة قبل إخراج الرمز القصير. يمنحك هذا النمط تحكمًا دقيقًا في أنواع المنتجات التي تعرض خيار التجربة دون تكرار القوالب.