تتيح لك المتغيرات تغطية عدة خيارات لمنتج واحد — ألوان، مقاسات، سعات، علامات تجارية، موديلات. يرى الزبون محدِّداً واضحاً على صفحة المنتج، وأنت تحتفظ بسجل منتج واحد بدل تكرار المنتج لكل لون. هذه الصفحة هي المرجع الأعمق في قسم البيع لأن المتغيرات هي ما يأخذ معظم وقت إعداد منتجات الأزياء والإلكترونيات والمنتجات الرقمية.
فيديو
المصطلحات
المفهوم | ما هو |
مجموعة متغيرات | بُعد اختيار واحد — |
خيار متغير | قيمة واحدة داخل مجموعة — |
توليفة | زوج محدَّد بين مجموعتين — |
شارة السعر | الشارة الصغيرة على الخيار التي تعرض فارق سعره بالنسبة للسعر الأساسي. |
منتج بـ 3 ألوان × 4 مقاسات يصل حتى 12 توليفة. لست مضطراً لاستخدام التوليفات — معظم المنتجات تتتبع المخزون على مستوى الخيار أو على مستوى المنتج (انظر §أوضاع المخزون).
الأنواع الأربعة للمتغيرات
النوع يُختار مرة واحدة لكل مجموعة — وكل الخيارات داخل تلك المجموعة تُعرض بنفس الطريقة:
النوع | ما يراه الزبون | استخدمه عندما |
Color | دائرة ملوّنة بالـ hex المحدد (أو بطاقة صورة كبيرة، انظر العرض كبطاقة) | اللون هو القصة كاملة (Red, Blue, Black). |
Text | شارة نصية ( | المقاسات والمواد والسعات والخيارات النصية العامة. |
Image-text | بطاقة فيها صورة مصغّرة واسم الخيار تحتها | شعارات العلامات، الموديلات، أي حالة تستفيد فيها من صورة صغيرة بجانب النص. |
Multiple choice | نفس بطاقات image-text، لكن يستطيع الزبون تفعيل عدة خيارات في آن واحد | الإضافات الاختيارية — النقش، الملحقات، الخدمات الإضافية. |
أمران يخصّان مجموعات Multiple choice (وتُسمّى أيضاً selectable) وحدها: هي دائماً اختيارية، ولا تظهر أبداً في مصفوفة مخزون التوليفات.
نوع image-text أحدث من نوعَي color وtext. استخدمه كلما تجاوزت المجموعة ~5 خيارات نصية — الصورة المصغرة تمنع الزبون من خلط الأسماء المتشابهة (iPhone 14 Pro مقابل iPhone 14 Pro Max). وعند ربط الخيار بصورة منتج، النقر عليه قد يُمرّر معرض المنتج إلى تلك الصورة (انظر §التمرير إلى المعرض).
إنشاء مجموعة متغيرات
اذهب إلى Dashboard → Products على /dashboard/products، ثم:
انقر Add product على
/dashboard/products/create، أوافتح منتجاً موجوداً للتعديل على
/dashboard/products/:id/edit.
انزل إلى بطاقة Variants، ثم:
انقر Add variant group.
اكتب اسم المجموعة (مثلاً
Color,Size,Brand).اختر النوع (
Color،Text،Image-text، أوMultiple choice).انقر Add option لكل قيمة.
يمكن إعادة ترتيب المجموعات والخيارات معاً بالسحب، وتعرضها الواجهة بنفس الترتيب. لكن السحب يتطلّب شاشة بحجم سطح المكتب مع فأرة — لا يوجد ترتيب باللمس، ومقابض السحب لا تُعرض على الشاشات الصغيرة. وإعادة الترتيب أثناء تفعيل مخزون التوليفات تعيد توليد المصفوفة.
إضافة الخيارات
كل خيار يحمل:
الحقل | ما يفعله |
Name | الاسم الذي يراه الزبون ( |
Color code | قيمة hex، فقط لنوع |
Linked image | متاح على خيارات |
Show as card | لمجموعات الألوان فقط. يعرض ذلك اللون كبطاقة صورة كبيرة بدل الدائرة — انظر أدناه. |
Price adjustment | فارق فوق السعر الأساسي. موجب ( |
Stock | المخزون لهذا الخيار. لا يظهر إلا عند تفعيل Track variant stock وإبقاء مخزون التوليفات مغلقاً. |
SKU | SKU خاص بالخيار، يظهر بجانب حقل مخزون الخيار وبنفس الشرط. |
شارة السعر — فارق وليس السعر المطلق
هذا أكثر خطأ شائع في إعداد المتغيرات:
إذا كان السعر الأساسي 2 500 DZD وسعر XL هو 2 700 DZD، فقيمة Price adjustment لـ XL هي +200، وليس 2700.
الشارة تعرض الفارق لا الإجمالي أبداً: +200 تظهر كشارة خضراء +200 DZD، و-150 كشارة حمراء -150 DZD، والخيار الذي فارقه 0 لا تظهر عليه شارة إطلاقاً. أما إجمالي المنتج فيُعاد حسابه فور اختيار الزبون لخيار.
السطح الوحيد الذي يعرض السعر الكامل لكل خيار هو إضافة متغيرات المنتج الرقمي.
مفتاح "Show as card" {#show-as-card}
Show as card يظهر على مجموعات الألوان فقط. فعّله لعرض ذلك اللون كبطاقة صورة كبيرة بدل دائرة بحجم 40 بكسل — مفيد للأزياء والمجوهرات ومحدِّدات العلامات التجارية. وهو يحتاج صورة منتج مرتبطة؛ وبدونها يعود الخيار إلى الدائرة العادية.
ولن تحتاجه في غير ذلك: خيارات image-text وMultiple choice تُعرض دائماً كبطاقات، وخيارات النص تُعرض دائماً كشارات.
المجموعات الإجبارية والاختيارية
كل مجموعة من نوع Colour أو Text أو Image-text هي إجبارية — على الزبون أن يختار خياراً واحداً من كل مجموعة، والخادم يرفض أي طلب يصل بدون اختيار (حماية تلتقط أساساً علامات التبويب المفتوحة قبل إضافتك للمجموعة). ولا يوجد مفتاح "required" لكل مجموعة.
وللحصول على مجموعة اختيارية فعلاً — نقش، ملحقات إضافية — أنشئها بنوع Multiple choice. هذه دائماً اختيارية وتتيح للزبون تحديد عدة خيارات في آن واحد.
النقر ← التمرير في المعرض {#click--gallery-scroll}
عندما يكون الخيار مرتبطاً بصورة منتج، النقر عليه على الواجهة قد يُحرّك المعرض إلى تلك الصورة:
في معرض الكاروسيل تتغيّر الشريحة دائماً.
في المعرض المكدَّس لا يحدث التمرير إلا على الشاشات بعرض 768 بكسل فأكثر. أما على الهواتف فالصفحة تبقى مكانها عمداً، لأن المعرض فوق المتغيرات والتمرير سيُبعد الزبون عن نموذج الطلب.
بمجرد وجود المنتج، إعادة فتحه وربط صورة به يُنشئ رابطاً ثابتاً بتلك الصورة، فإعادة الترتيب أو استبدال الصور لاحقاً لا تكسر أي صورة مصغّرة يعرضها الخيار. أما المتغيرات المُعدّة على شاشة الإنشاء الأولى فلا يمكنها تذكّر سوى موضع الصورة — فإن أعدت ترتيب صورك بعد ذلك قد يشير الخيار إلى صورة أخرى. ويصبح الرابط ثابتاً أول مرة تحفظ فيها من صفحة التعديل.
أما تمرير المعرض نفسه فينتقل دائماً إلى الموضع الحالي للصورة داخل المعرض.
أوضاع المخزون {#stock-modes}
هناك ثلاثة أوضاع للمخزون. وهي متنافية، وتُختار صراحةً بالمفاتيح الموجودة في بطاقة Pricing & stock — لا يوجد تراجع من وضع إلى آخر:
الوضع | كيف تفعّله | ما تحصل عليه |
مخزون المنتج | مفتاحا المتغيرات مغلقان | كمية واحدة على المنتج. |
مخزون الخيار | Track variant stock مفعّل | كمية وSKU لكل خيار. وتتبّع المخزون على مستوى المنتج يُغلق تلقائياً. |
مخزون التوليفة | Track combination stock مفعّل أيضاً | كمية وSKU لكل زوج |
الواجهة تعرض مع ذلك إجمالياً واحداً على مستوى المنتج — تجمع عدّادات الخيارات أو التوليفات للعرض فقط — لكن العدّاد الذي يتحكم فعلياً في البيع هو عدّاد الوضع الذي فعّلته.
وبمجرد اختيار الزبون لمتغير، يصبح عدّاد الكمية مقيَّداً بمخزون ذلك الخيار (أو تلك التوليفة)، لا بإجمالي المنتج، ويعيد الخادم تطبيق القيد عند إرسال الطلب. الاستثناء الوحيد: عروض الكميات المتعددة لا تُخفَّض بهذه الطريقة — بل يُرفض العرض الذي تتجاوز كميته مخزون المتغير المختار.
متى تفعّل مخزون التوليفات
⚠️ تنبيه — شروط مسبقة
مفتاح Track combination stock لا يظهر إلا بعد أن يكون للمنتج مجموعتا متغيرات على الأقل و يكون Track variant stock مفعّلاً مسبقاً. إن لم تجده، أضف المجموعة الثانية أو فعّل مخزون المتغيرات أولاً. وتفعيله يُخفي حقول مخزون الخيارات ويولّد المصفوفة فوراً.
استعمله عندما:
مخزون أزواج
(Color × Size)فعلاً مختلف (Red XLينفد قبلRed M).تحتاج SKU لكل زوج للجرد أو المحاسبة.
غير ذلك، اتركه مغلقاً. التوليفات تنفجر بسرعة: 4 ألوان × 5 مقاسات = 20 SKU. 4 × 5 × 3 سعات = 60.
🛑 هام جدًا — 1 000 توليفة حدّ صارم
فوق 1 000 ترفض المصفوفة التوليد وتعرض رسالة "عدد التوليفات كبير جداً". وإذا وصلت حمولة بأكثر من ذلك بطريقة ما، يحتفظ الخادم بأول 1 000 فقط ويُسقط الباقي دون تحذير. قسّم المنتج أو احذف بُعداً — الدعم لا يستطيع رفع هذا السقف.
عند تفعيل مخزون التوليفات، تظهر بطاقة Combination matrix تحت مجموعات المتغيرات. انقر Generate combinations لبناء الجدول ثم املأه. المصفوفة تمنحك:
شريط تعديل مجمّع فوق الجدول لضبط نفس المخزون على عدة صفوف دفعة واحدة.
حقلَي مخزون وSKU لكل صف.
مفتاح تفعيل/تعطيل لكل صف، لإطفاء أي زوج غير ممكن.
مجموعات Multiple choice (selectable) مستثناة من الجدول — وإشعار على البطاقة يوضّح ذلك.
ما يراه الزبون على منتج بمخزون توليفات
تُعاد تصنيف الخيارات عند كل نقرة، وهناك مظهران مختلفان لحالة "غير متاح". والتجار يُبلّغون عن الثاني كخلل باستمرار:
المظهر | المعنى |
مشطوب بالأحمر، غير قابل للنقر | نافد في كل التوليفات. |
باهت مع شرطة رمادية، ما زال قابلاً للنقر | متوفّر في مكان ما، لكن ليس مع اختيارات الزبون الحالية الأخرى. النقر عليه يبدّل الاختيار المتعارض حتى لا يصل الزبون إلى طريق مسدود. |
إعادة ترتيب الصور ومعرض المتغيرات {#image-reorder}
شبكة صور المنتج (فوق قسم المتغيرات) هي حيث يقضي التجار معظم الوقت:
سحب وإفلات لإعادة الترتيب على سطح المكتب.
ضغط مطوّل لـ ~250 ميلي ثانية على الجوال للدخول في وضع إعادة الترتيب (مع نبضة بسيطة).
زرّا
<و>على كل بطاقة صورة يحرّكانها بمكان واحد يساراً/يميناً — مفيد للسحب البطيء على الجوال أو للتموضع الدقيق.الصورة الرئيسية مقفلة في الموضع 1 — إعادة ترتيب الباقي لا تحرّكها. انقر النجمة على صورة مصغّرة أخرى لجعلها الرئيسية.
يُحفظ الترتيب مع المنتج، وهو ما تستعمله الواجهة للمعرض ولربط الخيارات بالصور.
أين تُعرض المتغيرات
تُرسم المتغيرات على عدة أسطح مختلفة، لكل منها محدِّده الخاص. تحقّق من السطح الذي يستعمله زبائنك فعلاً قبل أن تستنتج أن شيئاً معطوب:
صفحة المنتج المشتركة — قوالب Ariana وBloom وBrico وPrestige وPromobi وShowcase وStarter. كل ما في هذه الصفحة يصف هذا السطح.
صفحة المنتج الخاصة بقالب Digital، ولها محدِّد متغيرات خاص بها وتكرّره في شريط جانبي وقائمة منسدلة.
نافذة الإضافة إلى السلة التي تُفتح من بطاقة منتج على الصفحة الرئيسية أو الكتالوج أو صفحات الفئات — فيستطيع الزبون اختيار المتغيرات دون فتح صفحة المنتج أصلاً.
صفحات الهبوط، ولها محدِّد متغيرات خاص بها وأنماط بطاقات خاصة بها.
أنماط المتغيرات
في /dashboard/themes تبويب Variants فيه 12 نمط CSS لإعادة تصميم المحدِّد. وهي تعيد تنسيق محدِّد صفحة المنتج المشتركة فقط — لا صفحة المنتج في قالب Digital، ولا صفحات الهبوط، ولا نافذة الإضافة إلى السلة.
النمط | الخطة | المظهر |
Clay | Pro | أشكال طينية ثلاثية الأبعاد ناعمة مع ضغطة صغيرة عند النقر. |
Minimal | Pro | أزرار بسيطة، حدود رفيعة، حلقة اختيار خفيفة. |
Softplay | Pro | ألوان باستيل ناعمة، أشكال دائرية، ارتداد بسيط عند الاختيار. |
Stacked | Pro | خيار واحد في كل صف بعرض كامل — مناسب للعروض والحزم. |
Editorial | Unlimited | إحساس مجلات الموضة: ترقيم بخط Serif وخطوط شعرية. |
Material | Unlimited | Material 3 — طبقات حالة وارتفاع ناعم. |
Offer | Unlimited | صفوف عروض مع زر راديو وإبراز وردي — مصمّم للحزم. |
Brutal | Enterprise | حدود سميكة، ظلال حادة مزاحة، طراز neo-brutalist. |
Glass | Enterprise | زجاج مصنفر، شفافية خفيفة، لمعة عند الاختيار. |
Lux | Enterprise | ورق كريمي، خط ذهبي رفيع، اختيار بخط Serif. |
Mashrabiya | Enterprise | زخارف هندسية عربية مع خط ذهبي رفيع. |
Pixel | Enterprise | بكسلات التسعينيات، خط أحادي المسافة، ظل حاد. |
المتغيرات المتسلسلة (إضافة)
بعض الكتالوجات تحتوي خيارات متسلسلة — Brand → Model. اختيار Apple يجب أن يُظهر الـ iPhones فقط، لا Samsung Galaxies. ثبّت إضافة المتغيرات المتسلسلة لتفعيل المجموعات أب-ابن:
اختيار خيار أب يُظهر مجموعة الابن الخاصة بذلك الخيار.
اختيار خيار أب مختلف يُخفي مجموعة الابن التي ظهرت سابقاً وأي مجموعات حفيدة تحتها، ويمسح ما اختير داخلها.
خيارات المجموعة الأب نفسها تبقى ظاهرة دائماً — التسلسل يعمل على مستوى المجموعات، وهو يدعم أكثر من مستويين (Brand → Model → Variant).
ولأنه يُخفي ويُظهر مجموعات كاملة، فهو يعمل مع أي نوع مجموعة، وهو متوافق مع مخزون التوليفات. أما مجموعات Multiple choice (selectable) فغير مدعومة كمجموعة أب في التسلسل.
نقطة خشنة واحدة: على صفحة المنتج يُمسح إبراز "المختار" البصري على خيارات اللون والنص فقط، فقد تبقى بطاقة مُبرَزة في مجموعة ابن من نوع image-text بعد تغيير الأب — مع أن الاختيار نفسه يُلغى فعلاً. أما صفحات الهبوط فتمسح الأنواع الثلاثة بشكل صحيح.
فعّلها من /dashboard/addons — تحتاج خطة Pro أو أعلى.
نافذة اختيار الخصائص للعروض (إضافة)
عندما تبيع عروضاً متعددة الكميات ("اشترِ 3 واحصل على 1 مجاناً")، يحتاج الزبون لاختيار متغيرات لـ كل قطعة. DZBuild يفعل ذلك أصلاً عبر أكورديون مدمج داخل الصفحة؛ وإضافة نافذة اختيار الخصائص للعروض تستبدله بنافذة منبثقة:
نافذة منبثقة متجاوبة، قطعة واحدة في المرة.
إعدادان اثنان، كلاهما مفعّل افتراضياً وكلاهما يُضبط من بطاقة الإضافة في صفحة الإضافات (لا توجد صفحة إدارة منفصلة): الانتقال التلقائي للقطعة التالية وعرض صور المتغيرات.
متوافقة مع مخزون التوليفات.
فعّلها من /dashboard/addons — متاحة على كل الخطط، بما فيها المجانية.
متغيرات المنتج الرقمي (لقالب Digital فقط) {#digital-product-variants-digital-theme-only}
إذا كان متجرك يستعمل قالب Digital، إضافة متغيرات المنتج الرقمي تُحوّل محدِّد المتغيرات إلى أكورديون أنيق من خطوتين:
كل خيار يعرض السعر النهائي (الأساسي + الفارق) على البطاقة — وهو السطح الوحيد في DZBuild الذي يفعل ذلك.
اختيار واحد عبر كل المجموعات (لا اختيار متعدد).
رسوم متحركة سلسة وسهلة الوصول بلوحة المفاتيح، تطابق قالب Digital.
صفر إعداد لكل منتج — فعّل والإضافة تطبَّق في كل مكان.
تحتاج خطة Pro أو أعلى وقالب Digital.
نصائح
اضبط شارة السعر كفارق، لا كسعر مطلق. معظم أخطاء الإعداد من كتابة
2700بدل+200.استعمل image-text بعد ~5 خيارات في المجموعة. الصور المصغرة تقتل الالتباس بين الأسماء المتشابهة.
لا تفعّل مخزون التوليفات إلا إذا احتجته فعلاً. 4 × 5 = 20 SKU كثيرة لمزامنتها.
البطاقات رائعة للأزياء والعلامات التجارية، مبالغة للمقاسات.
لست بحاجة لوضع أي شيء كإجباري — مجموعات اللون والنص والصورة-النص إجبارية افتراضياً، والخادم يرفض أي طلب يصل بدون اختيار.
الصورة الرئيسية مثبَّتة في الموضع 1 تلقائياً — لا يمكنك سحبها خارج مكانها. انقر النجمة على صورة مصغّرة أخرى إن أردت صورة مختلفة في المقدمة.
اختبر النافذة المنبثقة على الجوال. عروض الكميات المتعددة يجب فحصها بعرض الجوال — النافذة أهم من المحدِّد المضمَّن.
ما التالي
المنتجات — الصفحة التي تستضيف المتغيرات.