وصلت الرسالة صباح يوم أربعاء، ومعها لقطة شاشة وجزء من شيفرة قديمة. كان صاحب متجر إلكتروني في كوبنهاغن يبيع حقائب الألمنيوم ومستلزمات السفر، وسنسميه هنا Havn & Co.، قد رأى شيئًا في سلة أحد المنافسين وأراد مثله: مربعًا صغيرًا تحت المنتجات مكتوبًا فيه حزمة الأمان: حماية من الضياع والسرقة والتلف، مع زر يستطيع العميل تفعيله قبل الدفع.
نريده تمامًا هكذا، كما جاء في الرسالة، ونريد أن نغيّر النص والصورة والألوان بأنفسنا. ومن دون تطبيق جديد من فضلكم. تشرح دراسة الحالة هذه كيف بنينا زر حماية الشحن في Shopify: ماذا تفعل الميزة، ولماذا وُجد كل جزء منها، والمفاجأة التي وجدناها في المتجر الفعلي، وكل خيار أضفناه إلى محرر القالب.
عن دراسة الحالة: هي مبنية على عمل حقيقي في مشروع Shopify لعميل دنماركي. تم تغيير اسم المتجر، والصور رسوم توضيحية. أما الميزات والإعدادات والاختبارات فموصوفة كما سُلِّمت تمامًا.
المشروع في لمحة
| العميل | متجر إلكتروني دنماركي للحقائب ومستلزمات السفر، الأسعار بالكرونة الدنماركية |
| المنصة | Shopify، قالب Horizon 3.5، تطبيق السلة Upcart |
| الميزة | زر اختياري «حزمة الأمان» (حماية الشحن) داخل السلة |
| ما تم تسليمه | ملف snippet واحد، وسكربت واحد، وملف تنسيق واحد، ومجموعة جديدة Safety package في إعدادات القالب، وإضافات صغيرة في 4 ملفات |
| الشروط | لا تطبيق حماية إضافي، ولا تغيير للقالب، وكل شيء قابل للتعديل من محرر القالب، ونصوص بالدنماركية |
المطلوب: ما طلبه المتجر
من لقطة الشاشة ومثال الشيفرة ومكالمة قصيرة، لخّصنا الطلب في خمس احتياجات محددة:
- مربع حماية داخل السلة مباشرة تحت المنتجات، فيه أيقونة وعنوان ووصف قصير وزر تشغيل/إيقاف.
- لمسة واحدة للإضافة أو الإزالة، مع تحديث المجموع فورًا ودون إعادة تحميل الصفحة.
- سلة مرتبة: لا يجب أن تظهر الحماية كسطر منتج إضافي مربك.
- تحكم كامل من محرر القالب: النص والصورة والأحجام والألوان ومنتج السعر، دون لمس الشيفرة.
- نصوص بالدنماركية في المتجر: Sikkerhedspakke وBeskyttelse mod tab, tyveri og skade.
ما هو زر حماية الشحن ولماذا تستخدمه المتاجر؟
يتيح زر حماية الشحن للعميل، في الخطوة الأخيرة قبل الدفع، أن يختار دفع رسم صغير مقابل تغطية في حال ضياع الطرد أو سرقته أو تلفه. خلف الزر منتج Shopify عادي (سعره 49 كرونة في رسومنا التوضيحية) يُضاف إلى السلة أو يُزال منها.
بالنسبة لمتجر يبيع حقائب بمئات الكرونات، يحقق الزر ثلاث فوائد في آن واحد:
- طمأنينة في اللحظة المناسبة. سؤال «ماذا لو ضاع؟» تجد إجابته بجانب زر الدفع، حيث يظهر التردد.
- إيراد إضافي لكل طلب. كل عميل يختار الحماية يضيف الرسم إلى الطلب، والمتجر يقرر كيف يستخدمه لتغطية المطالبات.
- استفسارات أقل لخدمة العملاء. عند ضياع طرد، يوجد بالفعل اتفاق واضح على ما تشمله التغطية.
قاعدة واحدة شكّلت التصميم كله: في الاتحاد الأوروبي يجب أن يختار العميل بنفسه أي خيار مدفوع إضافي. تمنع توجيهة حقوق المستهلك (2011/83/EU، المادة 22) استخدام مربعات محددة مسبقًا للمدفوعات الإضافية. لذلك يكون الزر مطفأً افتراضيًا، ووضع الإضافة التلقائية الاختياري موضّح بوضوح في الإعدادات ويحترم دائمًا العميل الذي يطفئه.
المفاجأة: السلة لم تكن سلة القالب
أدخلت نسختنا الأولى المربع إلى السلة الجانبية لقالب Horizon. كانت الشيفرة تعمل، لكن عندما نظر العميل إلى المتجر الفعلي لم يجده. السبب: يستخدم المتجر Upcart، وهو تطبيق سلة يستبدل سلة القالب بالكامل ويرسم سلته الخاصة بمعزل عن تنسيقات القالب.
بدلًا من مطالبة العميل بلصق شيفرة داخل التطبيق، فحصنا المتجر الفعلي وتحققنا من دوال Upcart المتاحة وغيّرنا النهج: يبقى القالب مصدر جميع الإعدادات، ويضع سكربت صغير مربع حزمة الأمان داخل سلة Upcart، ويبقيه في مكانه عند إعادة رسمها، ويطلب من Upcart التحديث بعد كل تغيير. وتبقى نسخة سلة القالب احتياطية إذا أزال المتجر Upcart يومًا ما.
الميزات واحدة تلو الأخرى
1. زر واحد ومجموع يتحدث فورًا
ماذا: يضيف الزر منتج الحماية أو يزيله عبر واجهة سلة Shopify، ثم تتحدث السلة وعدّاد المنتجات. لماذا: إعادة تحميل الصفحة في هذه اللحظة تقطع مسار الشراء وتكلّف مبيعات. يرى العميل المجموع الجديد خلال ثانية تقريبًا.
2. سطر حماية مخفي
ماذا: يُخفى منتج الحماية من قائمة المنتجات في Upcart وفي سلة القالب. لماذا: سطر «منتج» ثانٍ بأزرار كمية خاصة به يربك العملاء. المربع يعرض الحالة أصلًا، والسعر يبقى جزءًا من المجموع والطلب.
3. قواعد ذكية للسلة
ماذا: بعد كل تغيير في السلة تعمل ثلاث قواعد تلقائيًا. لماذا: يجب ألا تصل السلة إلى حالة غريبة، مثل شراء الحماية وحدها.
- لا تُباع وحدها: إذا أزال العميل آخر منتج حقيقي، تُزال الحماية أيضًا.
- الكمية دائمًا 1: تُصحح النسخ المكررة أو الكميات الأكبر من واحد.
- تحترم «لا»: عند تفعيل الإضافة التلقائية، لا يُسأل العميل الذي أطفأ الحماية مرة أخرى خلال الزيارة نفسها.
4. تعمل مع Upcart ومع القالب
ماذا: الميزة نفسها تعمل في سلة Upcart وسلة قالب Horizon وصفحة السلة الكاملة. لماذا: التجار يغيّرون التطبيقات، ويجب أن يبقى مربع الحماية بعد هذا القرار دون إعادة بناء.
5. شيفرة خفيفة يملكها المتجر
ماذا: سكربت صغير وملف تنسيق واحد يحمّلهما القالب. لماذا: لا رسوم شهرية لتطبيق حماية آخر، ولا سكربت طرف ثالث إضافي في كل صفحة، والشيفرة داخل قالب التاجر نفسه.
كل الخيارات التي أضفناها إلى محرر القالب
جميع الإعدادات موجودة في مجموعة جديدة واحدة: Online Store ← Themes ← Customize ← Theme settings ← Safety package. يستطيع التاجر تغيير كل ما يلي دون مطوّر.
| المجموعة | الإعداد | الوظيفة |
|---|---|---|
| عام | Enable safety package | تشغيل الميزة كلها أو إيقافها |
| Protection product | المنتج (والسعر) الذي يُضاف إلى السلة | |
| Add automatically to cart | إضافة تلقائية اختيارية، مطفأة افتراضيًا، وتتذكر رفض العميل | |
| Hide protection product in the item list | تبقي السلة مرتبة | |
| Also show on cart page | تعرض المربع أيضًا في صفحة السلة | |
| المحتوى | الصورة، عرض الصورة | ارفع صورتك أو استخدم أيقونة الصندوق والدرع المدمجة |
| لون درع الأيقونة | لون الدرع في الأيقونة المدمجة | |
| العنوان، الوصف | أي نص وبأي لغة | |
| إظهار السعر بجانب العنوان | يعرض سعر الحماية | |
| الخطوط | حجم العنوان، تباعد الأحرف، الأحرف الكبيرة، حجم الوصف | يتناسب مع خطوط المتجر |
| شكل المربع | لون النص والخلفية، الخط الفاصل، سُمك الحد ولونه، استدارة الزوايا، الحشو، الهامش الجانبي في Upcart | يتناسب مع تصميم السلة |
| الزر | ألوان التشغيل والإيقاف والمقبض | زر بألوان العلامة التجارية |
كيف يعمل من الداخل
لمن يبني متاجر Shopify بنفسه، باختصار: يطبع القالب الإعدادات ككتلة JSON صغيرة وقالب HTML. يقرؤها السكربت، وينتظر تحميل Upcart، ثم يضع المربع تحت قائمة منتجات Upcart. يعيد MutationObserver المربع إلى مكانه كلما أعاد Upcart الرسم. يستدعي الزر نقاط نهاية السلة القياسية ثم يحدّث السلة:
// switch on
await fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: protectionVariantId, quantity: 1 }] }),
});
// let the Upcart drawer redraw with the new total
window.upcartRefreshCart?.();يُخفى سطر الحماية بمطابقة معرّف النسخة (variant ID) الذي يدرجه Upcart في معرّف كل سطر. تعمل طلبات السلة في طابور، لذلك لا يسبب الضغط السريع المتكرر أي تعارض.
الاختبار على المتجر الفعلي
قبل التسليم اختبرنا السلوك على المتجر الحقيقي في جلسة متصفح معزولة، باستخدام منتج بديل حتى لا يُنشأ أي طلب حقيقي:
| الاختبار | النتيجة |
|---|---|
| إضافة منتج وفتح السلة | يظهر المربع تحت المنتج وهو مطفأ |
| التشغيل | أُضيفت الحماية، أُخفي سطرها، تحدّث المجموع |
| الإيقاف | أُزيلت الحماية، عاد المجموع إلى سعر المنتج |
| التشغيل ثم حذف آخر منتج حقيقي | أُزيلت الحماية تلقائيًا، السلة فارغة |
ما الذي حصل عليه العميل
- مربع حزمة أمان مطابق للمثال الذي أرسله، بالدنماركية، داخل السلة التي يراها عملاؤه فعلًا.
- مجموعة إعدادات يمكن تعديلها خلال دقائق: النص والصورة والألوان والأحجام ومنتج السعر.
- لا اشتراك شهري جديد في تطبيق لميزة الحماية.
- قواعد تبقي كل سلة صحيحة، وتصميم قائم على الاختيار يتوافق مع قواعد حماية المستهلك في الاتحاد الأوروبي.
- دليل بسيط لإنشاء منتج الحماية وتفعيل الميزة.
ميزة مخصصة أم تطبيق حماية؟
| تطبيق حماية | زر مخصص | |
|---|---|---|
| التكلفة الشهرية | عادةً اشتراك أو نسبة من كل رسم | تطوير لمرة واحدة ثم تشغيل مجاني |
| التصميم | ويدجت التطبيق بتنسيق محدود | تصميمك بالضبط، من محرر القالب |
| السلة | قد لا يدعم كل تطبيقات السلة | مبني لسلتك (هنا Upcart) وللقالب |
| معالجة المطالبات | غالبًا من مزوّد التطبيق | يتولاها المتجر نفسه |
| الأنسب لـ | المتاجر التي تريد إسناد المطالبات لجهة خارجية | المتاجر التي تريد التحكم وتجربة بهويتها |
لا يوجد خيار صحيح دائمًا. إذا أراد المتجر أن تتولى جهة خارجية المطالبات فالتطبيق مناسب. وإذا أراد التحكم بالرسم والنص والشكل، فالزر المخصص أخف وأقل تكلفة على المدى الطويل.
ماذا يمكن أن يوجد أيضًا في سلتك؟
النمط نفسه (إعداد في محرر القالب، وسكربت صغير، ومنتج أو خاصية سلة خلفهما) يصلح لإضافات كثيرة أخرى ترفع قيمة الطلب أو تقلل الأسئلة:
- تغليف الهدايا كإضافة مدفوعة.
- شريط تقدّم الشحن المجاني الذي يشجع على إضافة منتج آخر.
- اختيار موعد التسليم وحفظه في الطلب.
- ضمان ممدد لكل منتج.
- تبرع بالتقريب لصالح قضية خيرية.
- النقش وملاحظات الطلب مع التحقق.
الأسئلة الشائعة
هل يعمل مع Upcart؟
نعم. يوضع المربع داخل سلة Upcart ويبقى متزامنًا عند إعادة رسمها. ويعمل أيضًا في سلة القالب وفي صفحة السلة.
هل يجوز إضافة الحماية تلقائيًا في الاتحاد الأوروبي؟
يجب أن يختار العميل الإضافات المدفوعة بنفسه، لذلك يكون الزر مطفأً افتراضيًا. الإضافة التلقائية اختيارية، وعلى المتجر الذي يفعّلها أن يطلب استشارة قانونية خاصة به.
هل يمكن أن يكون السعر نسبة من قيمة السلة؟
افتراضيًا هو سعر ثابت يُحدد على منتج الحماية. ويمكن التسعير المتدرج حسب قيمة السلة باستخدام عدة نسخ من المنتج وقليل من المنطق الإضافي.
هل يبطئ المتجر؟
لا. هو سكربت صغير وملف تنسيق واحد، ولا تعمل طلبات السلة إلا عند استخدام العميل للزر أو تغيّر السلة.
هل يمكننا تغيير النص لاحقًا؟
نعم. العنوان والوصف والصورة والألوان كلها إعدادات في القالب، ويمكن تغييرها خلال دقائق وبأي لغة.
أهم الدروس
- اعرض الحماية حيث يُتخذ القرار: داخل السلة بجانب المجموع.
- اجعلها اختيارية بسعر واضح، واحترم العميل الذي يرفض.
- أخفِ سطر المنتج التقني وحافظ على مجموع صادق.
- تحقق من السلة التي يستخدمها المتجر فعليًا قبل البناء.
- ضع كل النصوص والألوان والأحجام في محرر القالب ليتحكم فيها التاجر.
هل تريد ميزة مثل هذه في متجرك؟ نبني ميزات سلة مخصصة، وتكاملات مع Upcart والقوالب، وتطوير Shopify المتكامل لمتاجر في أنحاء أوروبا. تصفّح خدماتنا أو تواصل معنا بشأن سلتك.