حمل متجرك الإلكتروني للدفع عند الاستلام في الجزائر

لإنشاء المتاجر الإلكترونية بنظام الدفع عند الاستلام. ملفات جاهزة للرفع مباشرة على cPanel أو على منصات الاستضافة المجانية مثل Cloudflare Pages، Netlify دون الحاجة لخبرة برمجية.

هذا مثال حي على المتجر الذي ستحصل عليه بعد الإنشاء.

تحميل ملفات المتجر

حمّل جميع ملفات المتجر الإلكتروني دفعة واحدة بصيغة ZIP

حزمة المتجر الكاملة

ملف مضغوط يحتوي على جميع الملفات الثمانية اللازمة لتشغيل متجرك الإلكتروني

8 ملفات HTML, CSS, JS
جاهز للرفع على cPanel أو الاستضافة المجانية Cloudflare Pages
متوافق مع جميع المتصفحات
تحميل المتجر (store-files.zip)

الملفات المضمنة

index.html
product.html
order.html
script.js
product.js
order.js
data.js
styles.css
order-history.html
order-history.js

ملفات المتجر وأدوات التعديل

يتكون المتجر من 8 ملفات أساسية، بعضها يمكنك تعديله باستخدام الأدوات التالية

index.html

الصفحة الرئيسية للمتجر. يجب تعديلها لتناسب تصميمك ومنتجاتك.

تعديل الصفحة الرئيسية

product.html

صفحة عرض المنتج. يجب تعديلها لتحديد تصميم وعرض تفاصيل المنتج.

تعديل صفحة المنتج

data.js

يحتوي على جميع بيانات المنتجات. يجب تعديل البيانات لتخصيص متجرك.

إدارة بيانات المنتجات

order.html & order.js

نموذج الطلب وربطه مع Google Sheets. يجب تعديلهما حسب نموذجك.

تعديل نموذج الطلب

product.js

سكريبت التحكم في عرض المنتجات. يمكنك تعديل عدد المنتجات التي تظهر.

script.js

كود JavaScript أساسي لتشغيل المتجر. لا يحتاج تعديل إلا للوظائف الجديدة.

styles.css

ملف التنسيقات الخاص بتصميم المتجر. لا يحتاج تعديل إلا لتغيير التصميم.

الصفحات القانونية

سياسة الخصوصية، شروط الاستخدام، وسياسة الشحن لمتجرك.

إنشاء الصفحات القانونية

أدوات ستحتاجها بعد رفع المتجر

استخدم هذه الأدوات لإدارة وتطوير متجرك الإلكتروني بسهولة بعد النشر

إدارة بيانات منتجات المتجر

إنشاء وتعديل ملف data.js الذي يحتوي على جميع بيانات المنتجات (الصور، الأسعار، العناوين، الوصف).

فتح الأداة

استخراج روابط الصور وإنشاء كود HTML

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

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

بعد ذلك، توجّه إلى هذه الأداة، ضع كود HTML داخلها، وستقوم الأداة تلقائياً بـ:

✅ استخراج جميع روابط الصور
✅ عرض الصور مع إمكانية تحديد صورة واحدة أو عدة صور
✅ نسخ روابط الصور فقط دفعة واحدة

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

فتح الأداة

إنشاء صفحات منتجات احترافية

أداة متقدمة لإنشاء صفحات منتجات جذابة بدون برمجة، أدخل معلومات المنتج واحصل على كود HTML جاهز للاستعمال.

فتح الأداة

إدارة طلبيات المتجر

متابعة وتنظيم جميع طلبيات المتجر، تغيير حالة الطلبات، وإدارة المبيعات بسهولة.

فتح الأداة

تحويل الصور إلى WebP

تحويل صور المنتجات من JPG أو PNG إلى صيغة WebP لتحسين سرعة تحميل المتجر.

فتح الأداة

ضغط الصور بدون فقدان الجودة

تقليل حجم صور المنتجات مع الحفاظ على الجودة لتحسين الأداء وتجربة المستخدم.

فتح الأداة

حل مشكلة الكاش في المتصفح

مشكلة شائعة قد تواجهها عند رفع المتجر على cPanel أو أي استضافة

المشكلة: الكاش (Cache)

عند رفع متجرك على cPanel أو بعض الاستضافات التقليدية، قد تواجه مشكلة الكاش مع متصفح Chrome وغيره من المتصفحات. المشكلة تحدث عندما:

  • تقوم بإجراء تعديلات على ملفات المتجر
  • لا تظهر التغييرات بعد تحديث الصفحة
  • المتصفح يعرض نسخة قديمة محفوظة في ذاكرة الكاش

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

الحل مع Cloudflare:
عند رفع المتجر على Cloudflare Pages لا توجد أي مشكلة كاش، حيث يتم تحديث الملفات تلقائياً في كل مرة تقوم فيها برفع المتجر، بالإضافة إلى أن الخدمة استضافة مجانية وسريعة.

الحل: إضافة رقم الإصدار (Version)

الحل البسيط والفعال هو إضافة أو تغيير رقم الإصدار في نهاية اسم الملف باستخدام معامل ?v=X.X.X

الخطوات:

  1. عند تعديل أي ملف، قم بتغيير رقم الإصدار في جميع الملفات المرتبطة به
  2. استخدم نظام ترقيم منطقي (مثل: v1.0.0, v1.0.1, v1.1.0)
  3. احفظ التغييرات وارفع الملفات على الاستضافة

أمثلة من ملفات المتجر:

1. ملف script.js:
قبل:
<script src="script.js"></script>
بعد:
<script src="script.js?v=1.0.1"></script>
2. ملف styles.css:
قبل:
<link rel="stylesheet" href="styles.css">
بعد:
<link rel="stylesheet" href="styles.css?v=2.0.0">
3. ملف data.js:
قبل:
<script src="data.js"></script>
بعد:
<script src="data.js?v=1.5.2"></script>
4. ملف product.js:
قبل:
<script src="product.js"></script>
بعد:
<script src="product.js?v=1.2.0"></script>
5. ملف order.js:
قبل:
<script src="order.js"></script>
بعد:
<script src="order.js?v=3.1.0"></script>

ملاحظات مهمة:

عند تعديل ملف واحد:

قم بتغيير رقم الإصدار لهذا الملف في جميع الصفحات التي تستخدمه

مثال عملي:

إذا قمت بتعديل ملف data.js، يجب تغيير رقم الإصدار في index.html و product.html و order.html

الاستضافات المتأثرة:

بعض الاستضافات تعاني من هذه المشكلة أكثر من غيرها، لذلك استخدم هذا الحل دائماً

نظام الترقيم:

استخدم نظام ترقيم منطقي: v1.0.0 (إصدار رئيسي.إصدار ثانوي.تحديث صغير)

طريقة تعديل رقم الكاش:

لتعديل رقم الإصدار، افتح الملف بمحرر نصوص (مثل Notepad++ أو VSCode)، ابحث عن ?v= في الكود، ثم قم بتغيير الرقم بعد v=. مثلاً: غيّر ?v=1.0.0 إلى ?v=1.0.1

تنبيه:

ليس كل الملفات في المتجر تحتوي على أرقام إصدار بشكل افتراضي. ملف index.html يحتوي على ?v=1.0.1 بينما product.html و order.html قد لا تحتوي على أرقام إصدار. يمكنك إضافتها يدوياً عند الحاجة.

سيناريوهات التعديل الشائعة:

1
سيناريو 1: تعديل بيانات المنتجات في data.js

قمت بإضافة منتجات جديدة أو تعديل أسعار في data.js

الحل:

  • افتح index.html → ابحث عن data.js?v=1.0.1 → غيّره إلى data.js?v=1.0.2
  • افتح product.html → ابحث عن data.js → غيّره إلى data.js?v=1.0.2 (أضف رقم الإصدار إذا لم يكن موجوداً)
  • افتح order.html → ابحث عن data.js → غيّره إلى data.js?v=1.0.2
2
سيناريو 2: تعديل التصميم في styles.css

قمت بتغيير الألوان أو التنسيقات في ملف styles.css

الحل:

  • افتح index.html → ابحث عن styles.css?v=1.0.1 → غيّره إلى styles.css?v=1.0.2
  • افتح product.html → ابحث عن styles.css → غيّره إلى styles.css?v=1.0.2
  • افتح order.html → ابحث عن styles.css → غيّره إلى styles.css?v=1.0.2
3
سيناريو 3: تعديل كود JavaScript الأساسي في script.js

قمت بإضافة وظيفة جديدة أو تعديل كود في script.js

الحل:

  • افتح index.html → ابحث عن script.js?v=1.0.1 → غيّره إلى script.js?v=1.0.2
  • افتح product.html → ابحث عن script.js → غيّره إلى script.js?v=1.0.2
4
سيناريو 4: تعديل كود عرض المنتج في product.js

قمت بتغيير عدد عرض المنتجات في product.js

الحل:

  • افتح product.html → ابحث عن product.js → غيّره إلى product.js?v=1.0.1 (أضف رقم الإصدار)
5
سيناريو 5: تعديل نموذج الطلب في order.js

قمت بتغيير رابط Google Sheets أو تعديل حقول النموذج في order.js

الحل:

  • افتح order.html → ابحث عن order.js → غيّره إلى order.js?v=1.0.1 (أضف رقم الإصدار)
6
سيناريو 6: تعديلات متعددة في نفس الوقت

قمت بتعديل data.js و styles.css معاً

الحل:

  • غيّر رقم إصدار data.js في جميع الملفات التي تستخدمه
  • غيّر رقم إصدار styles.css في جميع الملفات التي تستخدمه
  • ارفع جميع الملفات المعدلة على الاستضافة مرة واحدة

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

سيناريو كامل:

1

قمت بتعديل بيانات المنتجات في ملف data.js

2

افتح ملف index.html وغير data.js?v=1.0.0 إلى data.js?v=1.0.1

3

افتح ملف product.html وغير data.js?v=1.0.0 إلى data.js?v=1.0.1

4

ارفع جميع الملفات المعدلة على الاستضافة

5

تحديث الصفحة في المتصفح – ستظهر التغييرات الجديدة فوراً!

مميزات المولد

لماذا تختار مولد المتاجر الإلكترونية الخاص بنا؟

سرعة في الإنشاء

أنشئ متجرك الإلكتروني في ساعات معدودة بدلاً من أيام

متوافق مع الجوال

تصميم متجاوب يعمل بشكل مثالي على جميع الأجهزة

تتبع متقدم

دعم Facebook Pixel و TikTok Pixel لتتبع الزوار والتحويلات

كود نظيف

كود HTML, CSS, JavaScript نظيف ومحسن لمحركات البحث

جاهز للاستضافة

ارفع الملفات مباشرة على cPanel أو أي استضافة ويب

خيارات إرسال الطلب

يمكن للزبون اختيار إرسال الطلب عبر واتساب أو حفظ البيانات في Google Sheets مباشرة.