مكونات الويب
مكونات الويبهو معيار يُمكّنك من دمج ميزات جافا سكريبت كاملةً في موقعك الإلكتروني دون الحاجة إلى معرفة البرمجة. بفضل هذه التقنية الرائعة، تُمكّنك من تضمين مخزون سفر Wink بسهولة بالغة. تُرشدك هذه المقالة إلى مجموعة مكونات الويب لدينا، وتُوضّح لك كيفية استخدامها.
تضمين الغمز
Section titled “تضمين الغمز”هناك ثلاثة أشياء يجب عليك تضمينها في أي صفحة تريد عرض أحد مكونات الويب الخاصة بنا فيها.
- قم بتضمين ورقة الأنماط الخاصة بنا.
- قم بتضمين JavaScript الخاص بنا.
- قم بتضمين محمل التطبيق الخاص بنا.
ورقة الأنماط
Section titled “ورقة الأنماط”قم بتضمين أنماط CSS الخاصة بنا في رأس المستند الخاص بك.
<html> <head> <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link> </head></html>
جافا سكريبت
Section titled “جافا سكريبت”قم بتضمين JavaScript الخاص بنا في أسفل مستندك. (نوصي بوضع علامة النص النهائي أعلى العلامة مباشرةً).
<html> <body> <script src="https://elements.wink.travel/elements.js" type="module" defer></script> </body></html>
موقعك الآن جاهز وقادر على عرض مكونات الويب الخاصة بنا.
اقرأ المزيد عن مكتبة المكونات الخاصة بنا أدناه.
محمل التطبيقات
Section titled “محمل التطبيقات”المحمل مسؤول عن الحفاظ على الحالة وإدارة التفاعل بين مكوناتنا. (قم بتضمينه أسفل ملف JavaScript الخاص بنا).
<html> <body> <wink-app-loader client-id="YOUR CLIENT ID GOES HERE" configuration-id="YOUR CUSTOMIZATION ID GOES HERE" ></wink-app-loader> </body></html>
محمل المحتوى
Section titled “محمل المحتوى”يُعد مُحمِّل المحتوى جوهر مكتبة مكونات الويب لدينا. وهو مسؤول عن عرض مخزونك (البطاقات، والشبكات، والخرائط).
السمات المتوفرة:
- تَخطِيط
- بطاقة تعريف
- نوع
السمةsort
متاح فقط عندما يكون التخطيطRANKED
ولا ترغب في استخدام شبكة مرتبة موجودة. في هذه الحالات، اتركid
فارغ.
أنواع التخطيط المتاحة:
AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED
أنواع الفرز المتاحة:
MEMBER
PRICE_LOW_TO_HIGH
PRICE_HIGH_TO_LOW
PRICE
POPULARITY
ECO
EXPERIENCE
PERK
LOYALTY
PACKAGE
<html> <body> <wink-content-loader layout="GUEST_ROOM" id="2de7ee9c-61c9-11ef-9722-42004e494300" ></wink-content-loader> </body></html>
يمكن العثور على عينات لـبطاقات،شبكات و خرائط.
ابحث عن
Section titled “ابحث عن”يعمل البحث بشكل ممتاز مع إحدى شبكاتك المُصنّفة. فهو يُتيح لمستخدميك البحث عن الفندق والوجهة، وتُحدَّث الشبكة بناءً على نتائج بحثهم.
<html> <body> <wink-lookup></wink-lookup> </body></html>
الضغط على المكون أعلاه يفتح نافذة تسمح لك بكتابة الوجهة أو الفندق الذي تبحث عنه.
مسار الرحلة
Section titled “مسار الرحلة”يعرض زر “مسار الرحلة” مسار الرحلة الحالي. عند النقر عليه، يظهر خيار مسار الرحلة الكامل في نافذة منبثقة.
<html> <body> <wink-itinerary></wink-itinerary> </body></html>
الضغط على الزر أعلاه يفتح نافذة تسمح لك بتحديث مسار رحلتك.
البحث هو زرّ أيقونة فقط في مُحدّد مسار الرحلة. عند النقر عليه، يُعرض مُحدّد مسار الرحلة بالكامل في نافذة منبثقة.
<html> <body> <wink-search></wink-search> </body></html>
الضغط على الزر أعلاه يفتح نافذة تسمح لك بتحديث مسار رحلتك.
نموذج خط سير الرحلة
Section titled “نموذج خط سير الرحلة”يعرض مكون مسار الرحلة نموذج مسار الرحلة الذي يمكن للمستخدمين التفاعل معه.
<html> <body> <wink-itinerary-form></wink-itinerary-form> </body></html>
من خلال تغيير مسار الرحلة، في أي من مكونات مسار الرحلة لدينا، يتم تشغيل حدث تحديث مسار الرحلة لأي مخزون لديك حاليًا معروضًا على الصفحة.
يتيح لك زر الحساب إضافة مصادقة Wink إلى موقعك.
<html> <body> <wink-account></wink-account> </body></html>
عند النقر على الزر، عندما يكون المستخدم غير مُصادق عليه، سيتم توجيهه للحصول على المصادقة. عند المصادقة، سيتم عرض أيقونة ملفه الشخصي.
عند النقر فوق الزر، يتم فتح القائمة المنسدلة الخاصة بالمستخدم.
تضمين TripPay
Section titled “تضمين TripPay”هناك شيئان يجب عليك تضمينهما في أي صفحة تريد استخدام مكون الويب الخاص بالدفع TripPay فيها.
- قم بتضمين ورقة الأنماط الخاصة بنا.
- قم بتضمين JavaScript الخاص بنا.
ورقة الأنماط
Section titled “ورقة الأنماط”قم بتضمين أنماط CSS الخاصة بنا في رأس المستند الخاص بك.
<html> <head> <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link> </head></html>
جافا سكريبت
Section titled “جافا سكريبت”قم بتضمين JavaScript الخاص بنا في أسفل مستندك. (نوصي بوضع علامة النص النهائي أعلى العلامة مباشرةً).
<html> <body> <script src="https://elements.trippay.io/elements.js" type="module" defer></script> </body></html>
موقعك الآن جاهز وقادر على عرض مكونات الويب الخاصة بنا.
يتيح لك مكون الدفع إبلاغ TripPay بأن المسافر يريد شراء شيء ما والقواعد والأسعار الخاصة بهذه العناصر.
هناك سمة واحدة مطلوبة للأداة:
id
معرف عقد الحجز الذي تريد تنفيذه.
<html> <body> <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay> </body></html>
ملاحظة: لمعرفة كيفية إنشاء عقد الحجزid
، اقرأ الدليل:التكامل مع TripPay.
:::
تقوم الأداة بإعداد العقد للتنفيذ وعرض تفاصيل الدفع(الشكل 1)للمستخدم لإتمام الحجز.