إدارة الصفحة والكتلة
يمكنك إدارة جميع صفحات متجرك قطعة قطعة (على أساس الكتلة) من قسم التصميم والمحتوى > إدارة الكتلة. تتكون كل صفحة من صف → عمود → كتلة التسلسل الهرمي. يمكنك تحرير صفحاتك بالسحب والإفلات دون كتابة التعليمات البرمجية؛ يمكنك تطوير قوالب الكتل مباشرةً باستخدام محرر Smarty TPL/SCSS/JS.
هيكل الصفحة
Sayfa
└── Satır (Row) ← full-width ya da container
└── Sütun (Column) ← 12'li Tailwind grid
└── Blok (Block) ← içerik parçası (slider, ürün listesi, banner…)يمكن إضافة أي عدد تريده من الأسطر إلى الصفحة. يمكن تعيين كل صف بشكل مستقل على عرض كامل (كامل) أو حاوية مركزية (حاوية).
نظام الشبكة
يستخدم EticaretShop نظام شبكة مكونة من 12 عمودًا يعتمد على Tailwind CSS. يتم تحديد عرض كل عمود من أصل 12:
| القيمة | العرض |
|---|---|
12/12 | 100% — يغطي الخط كاملاً |
6/12 | 50% — عمودين جنبًا إلى جنب |
4/12 | 33.3% — ثلاثة أعمدة بجانب بعضها البعض |
3/12 | 25% — أربعة أعمدة بجانب بعضها البعض |
نقاط التوقف لحجم الشاشة
| انهيار | ديسمبر | الوصف |
|---|---|---|
xl | فوق 1366 بكسل | سطح مكتب كبير |
إل جي | 801–1366 بكسل | سطح المكتب / الكمبيوتر المحمول |
م | 640–800 بكسل | تابلت |
سم | 400–639 بكسل | هاتف كبير |
الافتراضي | أقل من 400 بكسل | هاتف صغير |
يمكن تخصيص هذه النطاقات من الملف "setting.scss".
الميراث التلقائي (غير محدد)
إذا تم تحديد القيمة غير محددة للتقسيم في الوضع المتقدم، فسيتم توريث قيمة الفاصل الفرعي.
مثال: الافتراضي:12 / sm:not-set / md:6 → الافتراضي:12 / sm:12 / md:6 / lg:6 / xl:6
إدارة الصفحة
عندما تدخل إلى صفحة إدارة الكتلة، يمكنك العثور بسرعة على الصفحة التي تريد تحريرها وتحديدها (على سبيل المثال: الصفحة الرئيسية، صفحة 404، وما إلى ذلك) من القائمة المنسدلة في الأعلى. عند النقر على أيقونة الإعداد (الترس) بجوار منطقة التحديد مباشرةً، يتم إدراج الإجراءات التي يمكنك تنفيذها فيما يتعلق بالصفحة النشطة:
إجراءات الصفحة في القائمة المنسدلة هي:
- إضافة صفحة جديدة: أنشئ صفحة جديدة تمامًا من البداية باستخدام اسم الصفحة وحقول تحسين محركات البحث (SEO) والإعدادات الافتراضية.
- استنساخ الصفحة الموجودة: يمكنك إنشاء شكل جديد للصفحة التي تعمل عليها بسرعة عن طريق نسخ ترتيب الكتلة بالكامل وبنية الصف/العمود.
- حذف الصفحة الحالية: قم بإزالة الصفحات التي لم تعد بحاجة إليها من النظام تمامًا (يجب توخي الحذر مع صفحات النظام الافتراضية).
- لغة الترجمة: يمكنك بسهولة إدارة ترجمات النصوص الموجودة في الصفحة وحظر المتغيرات إلى لغات مختلفة.
- Scss & Font: يمكنك التبديل سريعًا إلى ملفات الأنماط وإعدادات الطباعة التي تؤثر على تصميم الصفحة.
- التحويل إلى Scss: قم بتجميع تغييرات النمط (SCSS) وتحويلها على الفور إلى رموز CSS يمكن للموقع قراءتها.
- الكتل التي تستخدم قالبًا مخصصًا: يمكنك بسهولة تحديد الكتل التي تحتوي على قالب فريد (TPL) مخصص على الصفحة، مختلف عن البنية الافتراضية، من خلال إدراجها.
إضافة وتعديل الصفوف
عند النقر فوق الزر إضافة صف، يمكن إجراء الإعدادات التالية في اللوحة التي تفتح:
| الإعداد | الوصف |
|---|---|
| حاوية | تشغيل: يتم توسيط الصف عند أقصى عرض. إيقاف: يغطي الشاشة بأكملها (العرض الكامل) |
| مركز فلكس | مراكز المحتوى عموديا |
| عدد الأعمدة | اختيار العمود 1-12 |
| فئة CSS | قم بإضافة Tailwind مخصص أو فئة مخصصة للصف |
| النمط | قم بتطبيق CSS المضمّن على السطر |
يمكنك تعيين عرض الأعمدة في الوضع البسيط أو المتقدم في محرر الصفوف.
الوضع البسيط
اختر عرض العمود لكل عرض عن طريق تبديل معاينة الهاتف المحمول والكمبيوتر الشخصي باستخدام الزر الهاتف المحمول / الكمبيوتر الشخصي. يمكنك ضبط العرض عن طريق النقر على حواف الأعمدة وسحبها في معاينة جهاز الكمبيوتر.
الوضع المتقدم
قم بتعيين عرض كل عمود على حدة لجميع نقاط التوقف (افتراضي، sm، md، lg، xl):
Sütun 1: default=12 / sm=12 / md=6 / lg=4 / xl=4
Sütun 2: default=12 / sm=12 / md=6 / lg=4 / xl=4
Sütun 3: default=12 / sm=12 / md=not-set / lg=4 / xl=4يمكن إعادة ترتيب الكتل الموجودة داخل الصفوف والأعمدة عن طريق السحب والإسقاط.
إضافة كتلة
لإضافة كتلة إلى عمود، انقر فوق الزر + إضافة كتلة. يمكنك البحث حسب اسم الكتلة في اللوحة التي تفتح، والعثور على الكتلة المناسبة من القائمة وإضافتها إلى العمود الذي يحمل الرمز **++.
نسخ كتلة من صفحة أخرى
باستخدام ميزة نسخ الكتلة، يمكنك نسخ كتلة تم تكوينها على صفحة أخرى، بالإضافة إلى محتواها وإعداداتها، إلى صفحتك الحالية:
- حدد الصفحة المصدر
- حدد الكتلة التي تريد نسخها
- انقر فوق الزر نسخ الكتلة
إعدادات الحظر (الإدارة)
يؤدي النقر فوق كتلة إلى فتح صفحة إدارة الكتلة التي تحتوي على 3 علامات تبويب:
علامة التبويب 1: الإعدادات
معرف الكتلة و الإعدادات العامة تظهر في اللوحة اليسرى، و الإعدادات المخصصة المحددة في ملف setting.json الخاص بتلك الكتلة تظهر في اللوحة اليمنى.
اللوحة اليسرى — معلومات عامة
| المنطقة | الوصف |
|---|---|
| العنوان (الويب) | سيتم عرض عنوان الكتلة على واجهة المتجر (دعم متعدد اللغات) |
| العنوان الفرعي / الشروحات | حقل الوصف (نص منسق) يظهر في أنواع معينة من الكتل |
| موضوع | مجلد السمة الذي ستستخدمه الكتلة. يمكنك تحرير قائمة السمات باستخدام "إدارة مجلدات السمات" |
| قالب (TPL) | ملف TPL لاستخدامه في الكتلة |
| قوالب فرعية | يمكن تعيين قوالب مختلفة للمكونات الفرعية داخل الكتلة |
####التفويض
يتحكم في أنواع المستخدمين التي تكون الكتلة مرئية لهم:
| الخيار | الوصف |
|---|---|
| دع الزائر يرى | مرئي للمستخدمين الذين لم يقوموا بتسجيل الدخول |
| عرض الأعضاء | مرئية للأعضاء الذين قاموا بتسجيل الدخول |
| تاجر انظر | مرئي للمستخدمين الذين لديهم سلطة الموزع |
رؤية الجهاز
التحكم في الأجهزة التي سيظهر عليها الحظر:
| الخيار | الوصف |
|---|---|
| سطح المكتب | عرض على شاشة عريضة |
| تابلت | عرض على الشاشات المركزية |
| الجوال | عرض على الشاشات الصغيرة |
اللوحة اليمنى - حظر الإعدادات المخصصة
يمكن أن تحتوي كل كتلة على إعدادات محددة في ملف "setting.json" الخاص بها. تظهر هذه الإعدادات كمكونات نموذج مختلفة:
نوع الإعداد (xtype) | مكون النموذج |
|---|---|
| "الإدخال" | مربع نص سطر واحد |
منطقة النص | مربع نص متعدد الأسطر |
اللون | منتقي الألوان |
مربع الاختيار | خانة الاختيار |
اختر | قائمة منسدلة (خيارات ثابتة) |
اختر عن بعد | القائمة المنسدلة (الخيارات الديناميكية من API) |
تحديد متعدد | قائمة اختيار متعددة |
| "رقم الإدخال" | إدخال الرقم |
منتقي التاريخ | منتقي التاريخ |
المحرر | محرر النصوص الغني TinyMCE |
تحميل | تحميل الملف |
صورة | تحميل الصورة |
فيديو | عنوان URL للفيديو/تحميل |
| "عنوان URL" | محدد URL |
| "الكائن" | مساحة الكائن |
الشبكة | هيكل الجدول/القائمة (موضح في الأعلى) |
| "ميتا" | منطقة المعلومات الفوقية |
ملف الإعدادات (setting.json) تنزيل/تحميل
يمكنك تصدير/استيراد ملف الإعدادات باستخدام الزر إدارة الإعدادات:
- تنزيل الإعدادات: تنزيل بنية الإعدادات (اختياريًا بقيمها الحالية) بتنسيق JSON
- تحميل setup.json: تحميل ملف الإعدادات الجديد. خيارات:
- ضبط قيم الإعداد أيضًا: يطبق أيضًا القيم الموجودة في الملف الذي تم تحميله
- حذف الإعدادات غير المستخدمة: مسح الإعدادات القديمة من قاعدة البيانات
علامة التبويب 2: المحرر
إنها علامة تبويب محرر التعليمات البرمجية حيث يمكنك تحرير ملفات مصدر الكتلة مباشرة. تتم إدارة ثلاثة أنواع من الملفات لكل كتلة:
| ملف | الوصف |
|---|---|
| تبل | ملف قالب PHP Smarty (.tpl) — بنية HTML وفئات Tailwind |
| SCSS | أنماط مخصصة إضافية للكتلة (في حالة فشل Tailwind) |
| ** شبيبة ** | حظر كود جافا سكريبت محدد |
الإجراءات في شريط أدوات المحرر:
| زر | وظيفة |
|---|---|
| حدد ملف | لاستبدال ملف القالب، حدد الملف من شجرة الدليل |
| أضف صورة | أضف صورة إلى TPL مع تحميل الصورة |
| إضافة ملف | إضافة ملف ثابت |
| حفظ باسم | احفظ المحتوى الموجود باسم ملف جديد |
| قارن | قارن بين ملفين أو إصدارين مختلفين باستخدام عرض الفرق |
| التغييرات | سرد الإصدارات السابقة من الملف واستعادتها إلى الإصدار السابق |
| نشر | فقط قم بالبث المباشر لهذه المدونة |
| نشر الكل | ابدأ البث المباشر مع كل التغييرات |
| حذف | حذف ملف القالب المحدد |
| تحميل AI JSON | إنشاء سجلات TPL وسجلات التعريف تلقائيًا عن طريق تحميل مخرجات JSON التي تم إنشاؤها بواسطة الذكاء الاصطناعي |
تنسيق تي بي إل
تتم معالجة ملفات القالب باستخدام محرك PHP Smarty. يمكن استخدام متغيرات مثل {$block.title}، {$block.settings.key} داخل الكتلة. يتم استدعاء متغيرات اللغة باستخدام الصيغة {lang}DEGISKEN_NAME{/lang}.
العرض الديناميكي مع الريح الخلفية
يتم ترميز جميع القوالب باستخدام Tailwind CSS. نظرًا لأنه يتم عرض كل كتلة بشكل مستقل باستخدام فئات Tailwind، فإن تغيير النمط إلى كتلة واحدة لا يؤثر على الكتل الأخرى.
شاشة المقارنة (الاختلاف).
يُظهر الاختلافات بين ملفين أو إصدارين بالألوان باستخدام مكتبة diff2html. يمكن إجراء مقارنة منفصلة لـ TPL أو SCSS أو JS. يمكن إجراء المقارنات من خلال سرد الإصدارات السابقة لكل ملف.
علامة التبويب 3: متغيرات اللغة
تحتفظ كل كتلة بمتغيرات اللغة التي يمكنها استخدامها في القالب الخاص بها في مجلد "اللغة/" الخاص بها (على سبيل المثال: tr.conf، en.conf). يتم تحرير هذه المتغيرات في علامة التبويب هذه.
إضافة / تحرير المتغيرات
يحتوي كل متغير لغة على مفتاح وقيمة لكل لغة. يدعم حقل القيمة النص المنسق (HTML).
Anahtar: KAMPANYA_BASLIK
Türkçe: Yaz İndirimi
İngilizce: Summer Saleالترجمة الجماعية
يمكن إجراء ترجمة جميع المتغيرات تلقائيًا باستخدام خدمة الترجمة من Google عن طريق تحديد لغة المصدر واللغة المستهدفة.
تصدير/استيراد
يمكن تصدير متغيرات اللغة إلى تنسيق Excel أو Text ويمكن استعادة الملف المحرر. من الممكن اختيار اللغات التي سيتم تضمينها عند التصدير.
المكتبات التي يتم تحميلها تلقائيًا بواسطة النظام
يتم تحميل المكتبات التالية تلقائيًا في كل صفحة - ولا يلزم استيراد إضافي:
| مكتبة | الاستخدام المقصود |
|---|---|
| مسج | معالجة DOM، AJAX |
| Vue.js 3 | المكونات التفاعلية، واجهة المستخدم التفاعلية |
| Swiper.js | شريط التمرير / دائري |
| الخط رائع | مجموعة الأيقونات |
| سوايبر جي إس CSS | أنماط سوايبر |
هيكل ملف القالب
لكل قالب كتلة، يحتوي الخادم على بنية المجلد/الملف التالية:
themes/
└── [tema-adi]/
└── [blok-adi]/
├── [blok-adi].tpl ← Ana Smarty şablonu
├── [blok-adi].scss ← Bloka özel stiller
├── [blok-adi].js ← Bloka özel JS
├── setting/
│ └── setting.json ← Ayar tanımları
└── language/
├── tr.conf ← Türkçe dil değişkenleri
└── en.conf ← İngilizce dil değişkenleriالقوالب الفرعية
إذا كانت الكتلة توفر أكثر من متغير عرض واحد، فيمكن تعريف القوالب الفرعية في مجلد فرعي/. من علامة التبويب "الإعدادات"، يمكنك تحديد القالب الفرعي الذي تريد استخدامه لكل مكون فرعي. بهذه الطريقة، يمكنك إدارة إصدارات مختلفة من نفس المدونة على أساس الموضوع.
إدارة الموضوع
يتم تجميع الكتل ضمن مجلدات السمات. من شاشة "إدارة مجلدات السمات":
- يمكن إضافة مجلد موضوع جديد
- يمكن معرفة عدد المدونات التي تستخدم هذا الموضوع
- يمكنك سرد الكتل المستخدمة
تصدير/استيراد الموضوع
يمكنك استخدام Theme Export لنقل بنية الصفحة التي قمت بإعدادها أو نسخها احتياطيًا إلى متجر آخر:
- حدد الصفحات للتصدير
- حدد الكتل للتصدير لكل صفحة
- قم بالتنزيل كملف JSON
قم بتحميل ملف JSON لاستيراده — يتم إنشاء بنية الصفحة والكتلة تلقائيًا.