ב‑Evlop יש לכם סט חזק של בלוקים ללא קוד. כשאתם צריכים משהו ספציפי, תוכלו להוסיף בלוקים מותאמים אישית משלכם. בחרו את הגישה שמתאימה למיומנויות ולמקרה השימוש שלכם: בלוק React Native שרץ בתוך האפליקציה, או בלוק HTML שנבנה ב‑HTML, CSS, JS, Tailwind ו‑Liquid ומוצג ב‑WebView.
1) יצירת בלוקים מותאמים עם React Native
מה זה
בלוק React Native הוא חלק מהאפליקציה המקורית. הוא אידיאלי לממשק חלק, מחוות, אנימציות, פעילות אופליין ותכונות המכשיר.
מה תוכלו להשתמש
@evlop/native-componentלפרימיטיבים של UI קוהרנטיים@evlop/shopifyלגישה לנתוני החנות כמו מוצר, אוסף, סל, מטא‑פילים, מטא‑אובייקטים, לקוח- כל חבילות npm המופיעות ב‑
package.jsonשל עורך הבלוק המותאם ניתנות לייבוא ושימוש
מתי לבחור זאת
- כאשר אתם זקוקים לביצועים גבוהים או לאינטראקציות מורכבות
- כאשר אתם רוצים ניווט מקורי ו‑APIs של המכשיר
- כאשר אתם מתכננים לשמור במטמון נתונים או להתמודד עם רשתות בלתי יציבות
טיפים פרקטיים
- שמרו על הגדרות בלוק פשוטות וניתנות לסריאליזציה
- בחרו את התלויות בקפידה כדי לשלוט בגודל ה-bundle
- בדקו במסכי דף הבית, המוצר והקולקציה
- ודאו נגישות, טעינה ומצבי ריק
2) יצירת בלוקים מותאמים אישית עם HTML
מה זה
בלוק HTML רץ בתוך WebView. בנו עם HTML, CSS, JS, Tailwind ו-Liquid לאיטרציה מהירה.
נתונים ומגבלות
- השתמשו ב-Liquid לגישה להקשר של Shopify כמו המוצר או הקולקציה הפעילים
- מידע על הלקוח אינו זמין בהקשר זה
ניווט
- גשר ה-web של Evlop משדרג קישורי
<a href>רגילים לניווט נייטיב כשקיים מסך אפליקציה מתאים
מתי לבחור באפשרות זו
- תוכן שיווקי או מערכתי שמשתנה לעיתים קרובות
- ווידג'טים קלים שמציגים פרטי מוצר או קולקציה
- צוותים שמעדיפים Tailwind ו-JavaScript פשוט
טיפים מעשיים
- עצבו mobile first עם utilities של Tailwind
- שמרו על סקריפטים קלים והימנעו מפריימוורקים כבדים
- השתמשו בעוגנים סטנדרטיים כדי שה-web bridge ינתב נייטיב
- בדקו ניגודיות, מרווחים וזמן טעינה
סיכום
בלוקים מותאמים אישית מאפשרים לכם להתאים את האפליקציה לחנות שלכם בלי להמציא את הגלגל מחדש. בחרו React Native לביצועים ולאינטגרציה מעמיקה, או HTML למהירות ולווידג'טים מבוססי תוכן.