كود زر واتساب لقوالب Shopify

لماذا تعمل الإجابة نفسها على Dawn وSense وRefresh وCraft وStudio وRide

قوالب Shopify المجانية كلها مبنية على بنية Online Store 2.0. تشترك في ملف تخطيط واحد، theme.liquid، يغلّف كل صفحة، وتدعم جميعها إضافات التطبيقات (App embeds)، وهي الآلية التي تتيح لتطبيق إضافة عنصر عائم دون المساس بكودك. وSense وRefresh وCraft وStudio وRide نسخ متفرعة من كود Dawn، فالزر الذي يعمل في Dawn يعمل فيها أيضاً.

يمنحك ذلك طريقين. الطريق أ يستخدم إضافة تطبيق ولا يحتاج كوداً. والطريق ب مقتطف تلصقه مرة واحدة في theme.liquid، أو في قسم Custom Liquid إن أردته على قوالب صفحات معينة فقط. كلاهما يفتح رابط محادثة wa.me نفسه؛ والفرق فيما يحيط به.

• مركز مساعدة Shopify: توسيع قالبك بالتطبيقات (إضافات التطبيقات)
• shopify.dev: تخطيطات القالب وملف theme.liquid

الطريق أ: بلا كود، عبر إضافة تطبيق

هذا الطريق الذي نوصي به لمعظم المتاجر، وهو المشروح خطوة بخطوة في دليلنا لقالب Dawn. ثبّت واتساب بايلوت، واحفظ رمز الدولة والرقم والرسالة الافتراضية في الإعدادات، ثم افتح المتجر الإلكتروني ← القوالب ← تخصيص، واضغط أيقونة App embeds وفعّل واتساب بايلوت. احفظ، فيصبح الزر مباشراً. الخطة المجانية تعرضه على الصفحة الرئيسية؛ وPro تعرضه على صفحات المنتج والمجموعات والسلة وغيرها، مع ظهور حسب الجهاز ونافذة التحية.

الخطوات متطابقة على Sense وRefresh وCraft وStudio وRide لأن لوحة App embeds تخص محرر القالب لا قالباً بعينه. وإذا غيّرت القالب لاحقاً، فعّل الإضافة مجدداً على القالب الجديد؛ إعداداتك في التطبيق تبقى كما هي.

الطريق ب: مقتطف النسخ واللصق

قبل أن تبدأ، انسخ قالبك من المتجر الإلكتروني ← القوالب لتكون لديك نسخة احتياطية، كما ينصح دليل Shopify لتعديل كود القالب. ثم افتح محرر الكود (قائمة النقاط الثلاث ← تعديل الكود)، وابحث عن layout/theme.liquid وانزل إلى وسم إغلاق body قرب الأسفل. الصق الأسطر أدناه فوقه مباشرة، وبدّل الرقم المثال برقمك بالصيغة الدولية (رمز الدولة أولاً، بلا علامة زائد وبلا مسافات)، ثم احفظ.

كل سطر قصير عن قصد ليُلصَق بسلاسة. قيم الخصائص بين علامتَي تنصيص مفردتين عمداً؛ وLiquid وHTML يقبلانهما. انسخ أسطر الكود كما هي بالإنجليزية دون تغيير في الأحرف أو الرموز. وإذا كان متجرك بالعربية، فالسطران اللذان يحويان dir='rtl' مهمان: هما ما ينقل الزر إلى الجهة اليسرى عندما يعرض القالب الصفحة من اليمين إلى اليسار.

1. <a class='wa-float' href='https://wa.me/962790000000?text=Hi%2C%20I%20have%20a%20question%20about%20your%20store' target='_blank' rel='noopener'>Chat on WhatsApp</a>
2. <style>
3. .wa-float { position: fixed; bottom: 20px; right: 20px; z-index: 999; }
4. .wa-float { background: #25D366; color: #fff; font: 600 15px/1 sans-serif; }
5. .wa-float { padding: 14px 18px; border-radius: 999px; text-decoration: none; }
6. .wa-float { box-shadow: 0 4px 14px rgba(0,0,0,.2); }
7. .wa-float:hover { background: #1ebe5d; color: #fff; }
8. html[dir='rtl'] .wa-float { right: auto; left: 20px; }
9. @media (max-width: 749px) { .wa-float { bottom: 76px; right: 12px; } }
10. @media (max-width: 749px) { html[dir='rtl'] .wa-float { right: auto; left: 12px; } }
11. </style>

• مركز مساعدة Shopify: تعديل كود القالب
• مركز مساعدة واتساب: استخدام «انقر للدردشة» (روابط wa.me)

ضبط الرقم والنص المسبق والموضع

• الرقم: الأرقام بعد wa.me/ هي رقم واتساب الخاص بك بالصيغة الدولية. جوال أردني 079 000 0000 يصبح 962790000000. احذف علامة الزائد والصفر الأول وأي مسافات.
• النص المسبق: كل ما بعد ?text= هو الرسالة التي يراها المتسوق قبل الإرسال. يجب ترميزها كعنوان URL، فالمسافة تصبح %20 والفاصلة تصبح %2C. ومولّد الروابط المجاني على /ar/tools/whatsapp-link-generator في هذا الموقع يبني العنوان كاملاً لك، بما فيه الترميز.
• الموضع: bottom وright تحددان الإزاحة على الحاسوب. إذا تداخل درج السلة أو شريط «أضف إلى السلة» الثابت في قالبك مع الزر، فارفع قيمة bottom أو انقل الزر إلى اليسار بتبديل right بـ left.
• الجوال: استعلام الوسائط عند 749px يطابق نقطة التحول التي تستخدمها قوالب عائلة Dawn. والإزاحة السفلية الأكبر تبقي الزر فوق الشريط الثابت أو شريط أدوات المتصفح على الهواتف. عدّل الرقم بعد التجربة على جهاز حقيقي.
• المتاجر من اليمين إلى اليسار: عندما يعرض قالبك الصفحة بـ dir='rtl'، تعكس قواعد html[dir='rtl'] موضع الزر إلى اليسار. وإذا كانت واجهة متجرك العربية لا تضبط هذه الخاصية، فاحذف سطرَي rtl واضبط left بدلاً من right مباشرة.
• على بعض الصفحات فقط: الصق المقتطف نفسه في قسم Custom Liquid على القالب الذي تريده (مثلاً قالب صفحة المنتج) بدلاً من theme.liquid. فيظهر حيث يوجد ذلك القسم فقط.

المقتطف أم التطبيق: ما تتخلى عنه مع كل منهما

ملاحظات خاصة بكل قالب

• Dawn وCraft: درج السلة يفتح من اليمين. أبقِ الزر على اليسار، أو ارفعه حتى يبتعد عن زر الدفع.
• Sense وRefresh: كلاهما يستخدم رأس صفحة ثابتاً بارزاً، وعلى الجوال شريط «أضف إلى السلة» ثابتاً في صفحات المنتج. جرّب صفحة منتج على هاتف قبل أن تستقر على الإزاحة السفلية.
• Studio وRide: أنظمة الألوان الداكنة أو عالية التباين قد تجعل الأخضر الافتراضي صاخباً. أبقِ أخضر واتساب على الزر نفسه، وغيّر درجة التمرير فقط إن اضطررت.
• قوالب Online Store 2.0 المدفوعة: المقتطف نفسه يعمل، لكن نقطة تحول الجوال قد تختلف. راجع CSS القالب لتعرف عرض استعلام الوسائط الخاص به وطابقه.
• صفحة الدفع: لا يستطيع أي من الطريقين وضع زر في صفحات الدفع. لا يسمح Shopify بكود القالب أو إضافات التطبيقات هناك.

الاختبار قبل أن تنتقل

1. افتح واجهة المتجر على متصفح الحاسوب وتأكد أن الزر في موضعه المتوقع على الصفحة الرئيسية وصفحة منتج والسلة.
2. اضغطه من هاتف. يجب أن يفتح واتساب برقمك والنص المسبق؛ وإن لم يحدث، فافحص الأرقام بعد wa.me/ أولاً.
3. أرسل رسالة الاختبار إلى نفسك وردّ عليها، لتعرف أن الانتقال يعمل في الاتجاهين.
4. إن استخدمت التطبيق، فافتح التحليلات بعد يوم وتحقق أن النقرات تُحتسب. المقتطف لا يبلغ عن شيء، وهذا السبب الرئيسي الذي يجعل المتاجر التي تريد أرقاماً تنتقل إلى التطبيق لاحقاً.