ويب فلو
يدعم ويب فلو HTML وJavaScript المخصص في ثلاثة أماكن: <head> على مستوى الموقع، و</body> على مستوى الموقع، وتضمينات الكود لكل عنصر. هذا يجعل دمج مكونات ويب Wink سهلاً.
تحميل سكريبتات Wink على مستوى الموقع
Section titled “تحميل سكريبتات Wink على مستوى الموقع”- في مصمم ويب فلو، افتح إعدادات المشروع → الكود المخصص.
- في قسم كود الرأس، أضف ورقة الأنماط:
<link rel="stylesheet" href="https://elements.wink.travel/styles.css">
- في قسم كود التذييل، أضف السكريبت ومحمل التطبيق (استبدل
YOUR_CLIENT_ID):<script src="https://elements.wink.travel/elements.js" type="module" defer></script><wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader> - انقر على حفظ التغييرات.
إضافة مكون إلى عنصر محدد
Section titled “إضافة مكون إلى عنصر محدد”- في المصمم، اختر Div أو Section حيث تريد المكون.
- في اللوحة اليمنى، انقر على أيقونة
</>تضمين (أو أضف عنصر تضمين HTML من لوحة الإضافة). - الصق HTML الخاص بالمكون، على سبيل المثال:
<wink-content-loaderlayout="RANKED"id="YOUR_LAYOUT_ID"></wink-content-loader>
- انقر على حفظ وإغلاق.
كود مخصص لكل صفحة
Section titled “كود مخصص لكل صفحة”إذا كنت تحتاج Wink فقط في صفحات محددة، استخدم حقن الكود لكل صفحة بدلاً من على مستوى الموقع:
- افتح إعدادات الصفحة للصفحة المستهدفة (أيقونة الترس في لوحة الصفحات).
- انتقل إلى الكود المخصص → قبل وسم
</body>. - الصق نفس السكريبت ومحمل التطبيق كما في الأعلى.
- احفظ إعدادات الصفحة.
المكونات المتاحة
Section titled “المكونات المتاحة”| المكون | وسم HTML | الغرض |
|---|---|---|
| محمل المحتوى | <wink-content-loader> | عرض بطاقات الفنادق، الشبكات، الخرائط |
| البحث | <wink-lookup> | شريط بحث عن الوجهات |
| زر البحث | <wink-search-button> | فتح منتقي خط الرحلة |
| زر الحساب | <wink-account-button> | تسجيل الدخول / قائمة المستخدم |
| زر خط الرحلة | <wink-itinerary-button> | عرض خط الرحلة الحالي |
| منتقي خط الرحلة | <wink-itinerary-picker> | نموذج خط الرحلة الكامل |
| عربة التسوق | <wink-shopping-cart-button> | زر ملخص العربة |
راجع مكونات الويب للمرجع الكامل للسمات.