دمج واتساب في Shopify

بصفتك مطوّر Shopify للأنشطة التجارية المتوسطة أو الكبيرة، فأنت تعلم مدى أهمية التواصل السلس مع عملائك. ولتحقيق ذلك، يمكنك الاستفادة من منصة واتساب للأعمال لمساعدتك في إرسال رسائل آلية إلى آلاف العملاء وتوسيع نطاق العمليات بكفاءة مع نمو قاعدة عملائك.

يستعرض هذا العرض التوضيحي عملية توصيل واتساب بـ Shopify وإرسال رسائل إشعار واتساب للعملاء بناءً على الأحداث التي يقومون بإنشائها في المتجر، مثل إضافة منتج إلى عربة التسوق أو إجراء طلب. لإجراء ذلك سنستخدم API السحابة، التي تستضيفها Meta.

المتطلبات الأساسية

لمتابعة هذا العرض التوضيحي، ستحتاج إلى:

• تثبيت Node.js وnpm
• متجر على Shopify مع إعداد معالجة المنتجات وعمليات الدفع
• تسجيل حساب مطوّر على Meta للمطوّرين، وإعدادتطبيق أعمال، وتحديد حساب واتساب للأعمال.

سيؤدي إكمال الخطوة الأخيرة إلى منح رمز وصول مؤقت. ستحتاج إليه لما تبقى من هذا العرض التوضيحي، لذا احتفظ به.

بمجرد تلبية هذه المتطلبات، يمكنك متابعة ما تبقى من العرض التوضيحي.

إنشاء قالب رسالة على واتساب

تساعدك قوالب رسائل واتساب في إنشاء تنسيقات رسائل متعددة يمكنك استخدامها أكثر من مرة لمراسلة العملاء بعد أن يمنحوا تطبيقك الإذن للقيام بذلك.

اتبع هذه الخطوات لإنشاء قالب لرسالة إشعار الطلب:

• قم بتسجيل الدخول إلى مدير الأعمال واختر حساب الأعمال.
• انقر على أيقونة الثلاثة خطوط في أعلى يمين الصفحة وانقر على مدير واتساب.
• باستخدام الانتقال الجانبي، مرر مؤشر الماوس فوق أيقونة أدوات الحساب وانقر على قوالب الرسائل.
• انقر على إنشاء قالب في أعلى الجانب الأيسر من الصفحة.
• في الصفحة التالية، اختر الخيار المعاملات للفئة، ثم قم بتسمية القالب (في هذه الحالة، "order_confirmation") وحدد اللغة.

• انقر على متابعة للانتقال إلى محرر القالب.

والآن بعد إعداد القالب order_confirmation، حان وقت تحديد شكله. فيما يلي كيف تبدو الرسالة إلى العميل:

• لقد تلقينا طلبك!

• مرحبًا [اسم العميل]،

• شكرًا على التسوق معنا.

• نحن الآن بصدد معالجة طلبك (23190). سيتم شحن الحزمة إليك خلال 2-3 أيام عمل (باستثناء العطلات وعطلات نهاية الأسبوع).

• عندما يحدث ذلك، ستحصل على رسالة بريد إلكتروني أخرى مننا.

في محرر القالب، اختر النص لقسم العنوان. ستكون الفقرة "لقد تلقينا..." العنوان مع نسخ ما تبقى من الرسالة في قسم النص الأساسي.

وبعد ذلك، انقر على إضافة متغير مرتين تحت مربع النص الأساسي لإضافة متغيرين. انسخ المتغير الأول والصقه— {{1}} — في مكان اسم العميل. وبعد ذلك، انسخ المتغير الثاني والصقه — {{2}} — في مكان رقم الطلب داخل القوس.

عند الانتهاء، ستبدو الرسالة كما يلي. يمكنك التحقق من منطقة المعاينة في الصفحة ذاتها.

انقر على إرسال لحفظ قالب الرسالة.

والآن بعد إعداد القالب، يمكنك استخدام منصة واتساب للأعمال لإنشاء حدث webhook في مسؤول Shopify وتعيين تطبيق يعمل على إرسال الرسالة تلقائيًا إلى العميل عند وضع الطلب.

استخدام أحداث Webhooks لإرسال الإشعارات إلى Express Server

إذا كنت تريد إرسال رسالة تلقائية إلى العملاء عندما يضعون الطلب من متجر Shopify. فيمكنك التحقق من المتجر للطلبات الجديدة كل خمس دقائق على سبيل المثال. ومع ذلك، فإن إرسال طلبات API المستمرة إلى متجرك أمر غير فعّال، خاصةً إذا لم يتم وضع طلبات جديدة.

والأكثر فاعلية أن يسجل حدث webhook حدث "إنشاء الطلب" في المتجر وإشعارك في كل مرة يضع فيها العميل طلبًا.

فيما يلي الخطوات الأساسية لإنشاء حدث webhook "إنشاء الطلب" وتعيينه إلى خادم express server.

إعداد مشروع Node.js

ابدأ بإنشاء مجلد يُسمى "whatsapp-demo" للمشروع.

وبعد ذلك، قم بتشغيل وحدة الأوامر الطرفية cd في "whatsapp-demo" وقم بتنفيذ الأمر التالي لتهيئة مشروع Node.js:

npm init -y

قم بتثبيت express، أي المكتبة المستخدمة لإنشاء خادم ويب على Node.js، من خلال تشغيل الأمر التالي:

npm i express

والآن بعد تعيين بيئة التطوير، ستنشئ خادم express server.

إنشاء خادم Express Server

أنشئ ملفًا يُدعى test.js داخل المجلد whatsapp-demo. افتحه بمحرر source-code المفضل وانسخ الملف التالي والصقه فيه:

const express = require('express')
const app = express()

app.post('/webhooks/orders/create', (req, res) => {
 console.log('Yes, We got an order!')
 res.sendStatus(200)
})

app.listen(3000, () => console.log('Now running on port 3000!'))

باستخدام الرمز أعلاه، أعددت خادم express server أساسي يعرض الرسالة على وحدة الخادم الطرفية عندما يرسل حدث webhooks إشعار "إنشاء الطلب".

قبل تعيينه إلى حدث webhook Shopify، عليك أولاً إعداد نفق.

إعداد نفق زيارات HTTPS

عند إعداد حدث webhook، يتطلب Shopify منك تقديم عنوان URL عام حيث سيتم إرسال الإشعار.

إذا كنت تتابع هذا العرض التوضيحي على خادم عام، فاستخدم عنوان URL. إذا كنت تتابع هذا العرض التوضيحي على الجهاز المحلي، فستحتاج إلى إنشاء نفق بعنوان URL HTTPS متاح للعامة.

أولاً، قم بتثبيت ngrok من خلال تنفيذ الأمر التالي:

npm install -g ngrok

وبعد ذلك، قم بتشغيل نافذة وحدة طرفية مختلفة وقم بتشغيل الأمر التالي للحصول على عنوان URL بنفق للخادم المحلي:

ngrok http 3000
Forwarding                    https://xxxx-xxx-xxx-xxx-xxx.ngrok.io

انتبه لعنوان URL حيث إنك ستحتاج إليه في الخطوة التالية. لاحظ أنه إذا قمت بإعادة تشغيل هذا العميل، فستحصل على عنوان URL جديد وستحتاج إلى تحديث كل المراجع له.

إنشاء حدث Webhook في Shopify

انتقل إلى مسؤول متجر Shopify وانتقل إلى الإعدادات > الإشعارات. بمجرد الوصول، مرر لأسفل إلى أحداث Webhooks وانقر على إنشاء حدث webhook.

أضف حدث webhook لـ "إنشاء الطلب" وحدد عنوان URL النفق أو عنوان URL عام قمت بإنشائه في القسم السابق.

قم بتشغيل الخادم المحلي على وحدة طرفية مختلفة بالعقدة index.js، ثم انقر على إرسال إشعار اختباري.

إذا مر كل شيء على ما يرام، فستتلقى هذه الرسالة على وحدة الخادم الطرفية: "نعم لقد تلقينا طلبًا."

والآن لديك اتصال ناجح بين متجر Shopify وخادم Express. وبعد ذلك، سترسل قالب رسالة واتساب إلى العميل بعد وضعه للطلب.

إرسال رسالة مخصصة بالقالب "order_notification"

أولاً، قم بتثبيت Axios من خلال تشغيل الأمر التالي على الوحدة الطرفية:

npm i axios

ستستخدم Axios لإجراء طلب POST مسؤول عن إرسال رسالة واتساب إلى العميل.

بعد تثبيت Axios، أنشئ ملفًا أخرًا في مجلد المشروع يُسمى customMessage.js، ثم قم باستيراد axios وexpress في الملف بالأمر التالي:

const axios = require('axios').default
const express = require('express')
const app = express()

وبعد ذلك، أنشئ مسارًا لمعالجة إشعار إنشاء الطلب من Shopify من خلال تشغيل ما يلي:

app.post('/webhooks/orders/create', async (req, res) => {
const body = await getRawBody(req);

const order = JSON.parse(body.toString());

console.log("Yes, We got an order!", order.customer.phone);
  
// Remaining code will go here

})

عندما يستدعي Shopify /webhooks/orders/create بطلب، سيتم إرسال تفاصيل الطلب إلى المسار داخل res، أي الوسيطة الثانية لوظيفة الاستدعاء غير المتزامن وكائن JavaScript.

وبعد ذلك، يمكنك الحصول على رقم هاتف العميل والاسم الأول ومعرف الطلب من تفاصيل الطلب، واستخدمها لإنشاء معلمات طلب API:

        const data = {
        "messaging_product": "whatsapp", 
         "to": `${order.customer.phone}`, 
        "type": "template", 
         "template": { 
        "name": "order_confirmation", 
        "language": { "code": "en_GB" },
        "components": [
        {
          "type": "body",
          "parameters": [
          {
            "type": "text",
            "text": `${order.customer.first_name}`
          },
          {
            "type": "text",
            "text": `${order.id}`
          }
        ]
      }
    ] 
  } 
} 

يحتوي الكائن أعلاه على كل المعلمات المطلوبة لإكمال الطلب. تأكد من مطابقة اسم القالب المحدد في الكائن مع ذلك الذي تم إنشاؤه مسبقًا في مدير واتساب للأعمال.

وبعد ذلك، أنشئ كائن config بكائن العناوين المتداخلة. داخل العناوين، قم بتعيين رمز وصول واتساب كقيمة التصريح (استبدل ACCESS_TOKEN بالرمز)، وapplication/json كـ Content-Type:

 const config = {
 headers: { Authorization: `Bearer <ACCESS_TOKEN>`, 'Content-Type':   'application/json'}
};

وبعد ذلك، أنشئ طلب POST مع Axios ومرر كلاً من كائن config وكائن البيانات كوسيطات. اجعلهما متداخلتان ثم التقط الأساليب لعرض النتيجة (أو رسالة الخطأ إذا فشل الكائن):

  if (order.customer.phone) {
   return res.sendStatus(403);
  } else {
  axios
  .post(
    "https://graph.facebook.com/<API_VERSION>/<YOUR_WABA_ID>/messages",
  data,
  config
  )
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

  return res.sendStatus(200);
}

استبدل YOUR_WABA_ID بمعرف واتساب للأعمال من لوحة معلومات تطبيق واتساب وAPI_VERSION بإصدار متوافق لـ API السحابة (الإصدار الافتراضي هو 15.0)

التطبيق جاهز!

لاختباره، من المفترض أن يظل نفق ngrok قيد التشغيل، وستحتاج إلى بدء خادم express server في وحدة طرفية منفصلة:

node customMessages.js

أحداث Shopify الأخرى

بالإضافة إلى وضع الطلب، يقدم Shopify أكثر من 50 حدث webhooks لأحداث مختلفة. يمكنك الاشتراك في إنشاء عربة تسوق والتحديثات، وإنشاء مجموعة المنتجات والتحديثات ومحاولات الفوترة الناجحة والفاشلة، وغير ذلك الكثير.

لاستخدام أي من أحداث webhooks هذه، اتبع النمط المماثل مثل الموضح أعلاه من خلال إنشاء حدث webhook جديد في مسؤول Shopify وتسجيل الموضوع كمسار في خادم express server.

كما لاحظت، تساعدك منصة واتساب للأعمال على التواصل بسلاسة مع العملاء يدويًا وبرمجيًا استنادًا إلى الأحداث في متجر Shopify.

يسمح لك دمج Shopify من واتساب بإرسال رسائل مجمّعة للعملاء في الوقت الفعلي. يمكن إرسال الرسائل تلقائيًا (على سبيل المثال، استنادًا إلى حدث) أو يدويًا. ليس من السهل إعداد ذلك فحسب، بل إنه قابل للتطوير أيضًا. إن إقران واتساب وShopify يجعل التواصل مع العملاء مستقرًا وفعالاً ومؤثرًا.

للمزيد حول كيفية دمج واتساب في التطبيقات والمشاريع، راجع العروض التوضيحية للمطوّرين الأخرى.