وصلت الرسالة الثانية من علامة العناية بالرجال التي نسميها Kestrel بعد أسابيع قليلة من مشروع الأقسام المخصصة. كانت لقطة شاشة واحدة لصفحة منتج في متجر مجوهرات، وتحت زر الإضافة إلى السلة صف من البطاقات: اشترِ 1 واحصل على 1 مجانًا، اختر قطعتك الثانية. وتحتها سؤال قصير: هل يمكن أن يكون لدينا هذا في صفحات منتجاتنا؟
تفعيل عرض Shopify اشترِ واحدًا واحصل على الثاني مجانًا سهل من لوحة الإدارة. الصعب هو أن يستخدمه العملاء فعلًا. تعرض دراسة الحالة هذه كيف بنينا أداة الاختيار، ولماذا لم ننسخ كود المتجر المرجعي، والإعداد الوحيد في Shopify الذي يجعل المنتج الثاني مجانيًا.
عن دراسة الحالة: هي قصة مركبة مبنية على مشاريع Shopify حقيقية. تم تغيير اسم العلامة وصور المنتجات وبعض التفاصيل، وصور المنتجات رسوم توضيحية. أنماط الكود والمشكلات والحلول هي تمامًا كما تعاملنا معها.
المشروع باختصار
| العميل | علامة عناية رجالية تبيع مباشرة للمستهلك، هولندا (متجر باللغة الهولندية، باليورو) |
| المنصة | Shopify Online Store 2.0، مع الإبقاء على القالب المميز الحالي |
| النطاق | snippet واحد، ملف أنماط واحد، سكربت واحد، كتلة جديدة في صفحة المنتج، بلا تطبيقات |
| الخصم | خصم Shopify التلقائي الأصلي (اشترِ X واحصل على Y) |
| التسليم | ثبّته التاجر بنفسه في محرر كود القالب، ملفًا تلو الآخر |
لماذا لا يكفي خصم BOGO الأصلي
يدعم Shopify خصومات «اشترِ X واحصل على Y» منذ سنوات. أنشئ خصمًا وستطبقه السلة بمجرد وجود المنتجات الصحيحة فيها. المشكلة في عبارة بمجرد. على المشتري أن يعرف بوجود العرض، ويغادر صفحة المنتج، ويجد منتجًا مؤهلًا، ويضيفه ثم يعود. معظم المشترين لا يفعلون ذلك. ولافتة «1+1 مجانًا» دون طريقة للتنفيذ تنتج في الغالب رسائل تسأل لماذا لم يعمل الخصم.
حلّ المتجر المرجعي ذلك بأداة اختيار: تظهر المنتجات المؤهلة حيث يُتخذ قرار الشراء تمامًا، ولمسة واحدة للاختيار، ويتحول الزر الرئيسي إلى أضف منتجين إلى السلة. هذه هي التجربة التي أرادتها Kestrel.
قراءة المرجع ثم وضعه جانبًا
أرسل التاجر معه CSS وJavaScript وHTML الخاصة بالمتجر المرجعي. كان عملًا متقنًا: نحو 400 سطر مع لوحات سفلية وطبقة «عرض الكل» وكشف لون خلفية الصور وطلب خاص للإضافة إلى السلة. لكنه كُتب لقالب آخر ونموذج آخر ودرج سلة آخر، وكان ملكًا لشخص آخر.
لذا استخدمناه وصفًا للسلوك، لا كودًا. وقبل كتابة أي شيء قرأنا نموذج المنتج في قالب Kestrel. وكانت تلك أثمن ساعة في المشروع.
الاكتشاف: القالب يعرف أصلًا كيف يضيف منتجين
يحتوي عنصر product-form في القالب على ميزة لمربعات «يُشترى معًا غالبًا». عند الإرسال يجمع كل input[name="bundles"] محدد داخل عنصر مرتبط بالنموذج، ويرسله إلى /cart/add.js مع المنتج الرئيسي. ويتولى أيضًا درج السلة ووضع صفحة السلة ورسائل الخطأ وزر الإضافة الثابت.
وهذا يعني أن أداة الاختيار لا تحتاج إلى طلب سلة خاص بها على الإطلاق. كل بطاقة تحتوي على مربع اختيار مخفي اسمه bundles، وعنصر الأداة يحمل معرّف النموذج:
<bogo-picker form="{{ product_form_id }}">
<label class="bogo-card__btn">
<input type="checkbox" name="bundles" value="{{ variant.id }}" class="sr-only">
<span>Choose</span>
</label>
</bogo-picker>اختر بطاقة فيُحدَّد مربعها. اضغط الزر الرئيسي فيضيف القالب المنتجين في طلب واحد، ويفتح درج السلة الخاص به ويحدّث العدد، تمامًا كما يفعل مع أي منتج آخر. كتبنا نحو مئة سطر من JavaScript، ولا يلمس أي منها السلة.
التفاصيل التي تجعلها تبدو أصلية
- منتج مجاني واحد في كل مرة. اختيار بطاقة يلغي اختيار البقية، فلا يضيف أحد ثلاث هدايا بالخطأ.
- زر يقول ما سيحدث. عند اختيار بطاقة يتغير النص إلى «أضف منتجين إلى السلة». يعيد القالب ضبط هذا النص عند تغيير المتغير، فيعيده
MutationObserverصغير. - المتغيرات على البطاقة. المنتجات ذات المتغيرات المتعددة تظهر قائمة منسدلة مدمجة، وتتبعها قيمة المربع.
- بطاقات متحاذية. تتشارك البطاقات صفوف الشبكة عبر CSS subgrid، فتصطف الأسماء والأسعار والأزرار حتى لو امتد اسم إلى سطرين.
- الجوال أولًا. على الهاتف تظهر 2.3 بطاقة فتطل التالية من الحافة؛ وعلى الكمبيوتر ثلاث بطاقات مع أزرار أسهم.
- إعادة ضبط نظيفة. بعد الإضافة الناجحة تستمع الأداة لحدث
cartUpdateفي القالب وتمسح الاختيار.
تُضاف الكتلة في محرر القالب مثل أي كتلة أخرى في صفحة المنتج. يختار التاجر مجموعة المنتجات المؤهلة، أو حقلًا وصفيًا لقائمة منتجات لعروض خاصة بكل منتج. النصوص مثل «مجانًا» و«اختر» ونص الزر هي إعدادات. ويُستبعد المنتج الحالي والمنتجات النافدة تلقائيًا.
كيف يصبح المنتج الثاني مجانيًا فعلًا
الأداة تضع منتجين في السلة فقط. أما السعر فيتولاه Shopify عبر خصم تلقائي:
- أنشئ مجموعة بالمنتجات التي يمكن منحها مجانًا، مثل «BOGO مجاني».
- من الخصومات أنشئ خصم اشترِ X واحصل على Y بطريقة تلقائي.
- العميل يشتري: كمية دنيا 1 من مجموعة تضم كل المنتجات المدفوعة.
- العميل يحصل على: كمية 1 من «BOGO مجاني» بقيمة مجاني.
- فعّل تحديد الحد الأقصى لمرات الاستخدام لكل طلب وأدخل 1، وإلا فإن ثلاث مشتريات تعطي ثلاثة منتجات مجانية.
لا يوفر Shopify خيار «كل المنتجات» في حقل العميل يشتري، لذلك تلزم مجموعة هناك. مجموعة تلقائية بشرط «السعر أكبر من 0» تبقى محدّثة من تلقاء نفسها. وهناك حالة خاصة تستحق المعرفة: إذا كانت المنتجات المجانية ضمن تلك المجموعة أيضًا، فإن شراء منتجين من «BOGO مجاني» يجعل أحدهما مجانيًا. هذا مقبول لمعظم المتاجر. وإن لم يكن كذلك، فضع وسمًا على منتجات BOGO واستبعده في شروط المجموعة.
التثبيت دون رفع قالب
كان في قالب Kestrel المنشور عمل آخر غير منشور قيد التنفيذ، فلم يكن رفع نسخة جديدة من القالب خيارًا. سلّمنا الميزة في خمس خطوات دقيقة لمحرر الكود: ثلاثة ملفات جديدة (snippet وملف أنماط وسكربت) وإضافتان صغيرتان في قسم المنتج، سطر render وإدخال كتلة في المخطط. حددت كل خطوة السطر الذي يُبحث عنه وما يُلصق فوقه. ولأن كل تغيير إضافي فقط، فهو يصمد أمام تحديث القالب التالي ببضع دقائق من العمل.
صممنا أيضًا صورة مصغرة بسيطة لمجموعة «BOGO مجاني» لتبدو مكتملة أينما عرضها القالب.
نصيحتنا لأي متجر يفكر في BOGO
- ضع الاختيار حيث يُتخذ القرار. العرض الذي يجب على المشتري تجميعه بنفسه يتجاهله معظم المشترين.
- اقرأ قالبك قبل كتابة الكود. أفضل سطر في هذا المشروع هو السطر الذي لم نحتج إلى كتابته، لأن القالب كان يضيف الحزم إلى السلة أصلًا.
- أبقِ منطق التسعير في Shopify. الخصم التلقائي الأصلي يعمل في السلة وعند الدفع وفي كل تقرير، ويمكن إيقافه دون لمس القالب.
- حدّد مرات الاستخدام لكل طلب من اليوم الأول.
إن أردت أداة اختيار هدية أو منشئ حزم أو ميزة مخصصة أخرى في صفحات منتجاتك، فاطلع على خدمة تطوير قوالب Shopify لدينا أو أخبرنا عن متجرك.
الأسئلة الشائعة
هل يدعم Shopify عرض اشترِ واحدًا واحصل على الثاني مجانًا دون تطبيق؟
نعم. خصومات «اشترِ X واحصل على Y» التلقائية مدمجة في Shopify. ما لا يوفره Shopify هو طريقة لاختيار المنتج المجاني في صفحة المنتج، وهذا ما تضيفه الأداة.
هل ستعمل الأداة مع قالبي؟
الفكرة تعمل مع أي قالب Online Store 2.0. أما التنفيذ فيعتمد على طريقة إضافة نموذج المنتج في قالبك إلى السلة. هنا أعدنا استخدام ميزة الحزم في القالب؛ وفي قوالب أخرى نضيف المنتجين بطلب واحد إلى Cart API.
هل يمكن أن يكون للمنتج المجاني متغيرات؟
نعم. المنتجات ذات المتغيرات المتعددة تعرض قائمة منسدلة صغيرة على البطاقة، والمتغير المختار هو الذي يُضاف.
هل يمكن للعملاء إساءة استخدام العرض؟
الخصم هو ما يحدد ما هو مجاني، لا الأداة. ومع حد أقصى لاستخدام واحد لكل طلب، لا يحصل أحد على أكثر من منتج مجاني واحد في الطلب نفسه.
هل يمكنني عرض هدايا مختلفة لمنتجات مختلفة؟
نعم. تقرأ الكتلة مجموعة افتراضيًا، ويمكن لحقل وصفي لقائمة منتجات أن يحل محلها لكل منتج.