يتضمن Evlop مجموعة قوية من مكوّنات No-Code. وعندما تحتاج إلى شيء محدد، يمكنك إضافة مكوّناتك المخصصة. اختر الأسلوب الذي يناسب مهاراتك وحالة استخدامك: مكوّن React Native يعمل داخل التطبيق، أو مكوّن HTML مبني بـ HTML وCSS وJS وTailwind وLiquid يُعرض في WebView.
1) إنشاء مكوّنات مخصصة باستخدام React Native
ما هو
مكوّن React Native هو جزء من التطبيق الأصلي، وهو الأفضل لواجهات سلسة وإيماءات وحركات وسلوك دون اتصال وميزات الجهاز.
ما يمكنك استخدامه
@evlop/native-componentلعناصر واجهة متسقة@evlop/shopifyللوصول إلى بيانات المتجر مثل المنتج والمجموعة وسلة الشراء وحقول الميتا وكائنات الميتا والعميل- جميع حزم npm المدرجة في
package.jsonلمحرر المكوّنات المخصصة يمكن استيرادها واستخدامها
متى تختار هذا
- تحتاج إلى أداء عالٍ أو تفاعلات معقدة
- تريد تنقلاً أصلياً وواجهات برمجة الجهاز
- تخطط لتخزين البيانات مؤقتاً أو التعامل مع الشبكات غير المستقرة
نصائح عملية
- اجعل إعدادات المكوّن بسيطة وقابلة للتسلسل
- اختر الاعتماديات بعناية لإدارة حجم الحزمة
- اختبر على شاشات الصفحة الرئيسية والمنتج والمجموعة
- تحقق من إمكانية الوصول وحالات التحميل والحالات الفارغة
2) إنشاء مكوّنات مخصصة باستخدام HTML
ما هو
يعمل مكوّن HTML داخل WebView. ابنِ باستخدام HTML وCSS وJS وTailwind وLiquid لتكرار سريع.
البيانات والحدود
- استخدم Liquid للوصول إلى سياق Shopify مثل المنتج النشط أو المجموعة النشطة
- معلومات العميل غير متاحة في هذا السياق
التنقل
- يقوم جسر الويب في Evlop بترقية روابط
<a href>العادية إلى تنقل أصلي عند وجود شاشة تطبيق مطابقة
متى تختار هذا
- محتوى تسويقي أو تحريري يتغير كثيرًا
- أدوات خفيفة تعرض تفاصيل المنتج أو المجموعة
- الفرق التي تفضل Tailwind وJavaScript البسيط
نصائح عملية
- صمّم للجوال أولاً باستخدام أدوات Tailwind
- اجعل السكربتات خفيفة وتجنب الأطر الثقيلة
- استخدم روابط قياسية ليتمكن جسر الويب من التوجيه الأصلي
- تحقق من التباين والتباعد ووقت التحميل
الخلاصة
تتيح لك الكتل المخصصة تعديل التطبيق لمتجرك دون الحاجة إلى إعادة اختراع العجلة. اختر React Native للأداء والتكامل العميق، أو HTML للسرعة والودجات القائمة على المحتوى.