كيف تنشئ لوحة تحكم ذكية لمراقبة المخزون في Shopify
هل سبق وقمت بحملة إعلانية ناجحة، لتكتشف في منتصف اليوم أن المنتج الأكثر مبيعاً قد نفد من المستودع؟ أو ربما لديك مئات المنتجات وتجد صعوبة في تتبع ما شارف منها على الانتهاء؟
بصفتي مهتماً بتطوير تجربة التجارة الإلكترونية، سأشارككم اليوم "خلطة سحرية" تقنية لإنشاء لوحة تحكم احترافية (Inventory Dashboard) تظهر لك حالة مخزونك في ثوانٍ، مع تأثيرات بصرية رائعة وشاشة تحميل ذكية بشعار متجرك.
لماذا تحتاج هذه الصفحة في متجرك؟
الاستجابة السريعة: رؤية المنتجات المنخفضة (أقل من 10 قطع) في مكان واحد.
تنظيم المتغيرات: عرض كميات الألوان والمقاسات لكل منتج بضغطة زر.
الاحترافية: واجهة مستخدم سلسة تظهر لك كمدير متجر بشكل عصري بعيداً عن تعقيدات لوحة تحكم شوبيفاي التقليدية.
الخطوة الأولى: إنشاء التصنيف الذكي
قبل الكود، نحتاج لتجميع المنتجات التي تعاني من نقص في مكان واحد تلقائياً.اذهب إلى Products ثم Collections.
أنشئ تصنيفاً جديداً (Automated Collection).
الشرط: اختر Inventory stock ثم is less than واكتب القيمة 11.
رابط التصنيف (URL Handle): يجب أن يكون low-stock-alert (هذا الجزء حيوي لكي يعمل الكود).
الخطوة الثانية: تجهيز القالب
سندخل الآن إلى "محرر الأكواد" لإنشاء المكان المخصص لهذه الصفحة.1. إنشاء قالب الصفحة (Template)
من محرر القالب، ابحث عن مجلد Templates.أضف ملفاً جديداً باسم: page.inventory-report.json.
/*
* ------------------------------------------------------------
* IMPORTANT: The contents of this file are auto-generated.
*
* This file may be updated by the Shopify admin theme editor
* or related systems. Please exercise caution as any changes
* made to this file may be overwritten.
* ------------------------------------------------------------
*/
{
"sections": {
"main": {
"type": "inventory-dashboard-admin",
"settings": {
"title": "تقرير العجز في المخزون",
"threshold": 15
}
}
},
"order": [
"main"
]
}
2. إنشاء القسم البرمجي
هذا هو "قلب" اللوحة حيث تكمن لغات البرمجة (Liquid, CSS, JavaScript).
اذهب إلى مجلد Sections.
أضف ملفاً جديداً باسم: inventory-dashboard-admin.liquid.
اذهب إلى مجلد Sections.
أضف ملفاً جديداً باسم: inventory-dashboard-admin.liquid.
إجمالي المنتجات
{{ collections.all.products_count }}
منتجات نفدت (0)
مخزون منخفض
المنتج
إجمالي المخزون
الحالة
التفاصيل
![]()
-
:
قطعة