تخطَّ إلى المحتوى

مكونات الويب

مكونات الويبهو معيار يُمكّنك من دمج ميزات جافا سكريبت كاملةً في موقعك الإلكتروني دون الحاجة إلى معرفة البرمجة. بفضل هذه التقنية الرائعة، تُمكّنك من تضمين مخزون سفر Wink بسهولة بالغة. تُرشدك هذه المقالة إلى مجموعة مكونات الويب لدينا، وتُوضّح لك كيفية استخدامها.

هناك ثلاثة أشياء يجب عليك تضمينها في أي صفحة تريد عرض أحد مكونات الويب الخاصة بنا فيها.

  1. قم بتضمين ورقة الأنماط الخاصة بنا.
  2. قم بتضمين JavaScript الخاص بنا.
  3. قم بتضمين محمل التطبيق الخاص بنا.

قم بتضمين أنماط CSS الخاصة بنا في رأس المستند الخاص بك.

<html>
<head>
<link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
</head>
</html>

قم بتضمين JavaScript الخاص بنا في أسفل مستندك. (نوصي بوضع علامة النص النهائي أعلى العلامة مباشرةً).

<html>
<body>
<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
</body>
</html>

موقعك الآن جاهز وقادر على عرض مكونات الويب الخاصة بنا.

اقرأ المزيد عن مكتبة المكونات الخاصة بنا أدناه.

المحمل مسؤول عن الحفاظ على الحالة وإدارة التفاعل بين مكوناتنا. (قم بتضمينه أسفل ملف 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>

يُعد مُحمِّل المحتوى جوهر مكتبة مكونات الويب لدينا. وهو مسؤول عن عرض مخزونك (البطاقات، والشبكات، والخرائط).

السمات المتوفرة:

  • تَخطِيط
  • بطاقة تعريف
  • نوع

السمة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>

يمكن العثور على عينات لـبطاقات،شبكات و خرائط.

يعمل البحث بشكل ممتاز مع إحدى شبكاتك المُصنّفة. فهو يُتيح لمستخدميك البحث عن الفندق والوجهة، وتُحدَّث الشبكة بناءً على نتائج بحثهم.

<html>
<body>
<wink-lookup></wink-lookup>
</body>
</html>
مكون الويب للبحث
مكون الويب للبحث

الضغط على المكون أعلاه يفتح نافذة تسمح لك بكتابة الوجهة أو الفندق الذي تبحث عنه.

نموذج البحث
نموذج البحث مع النتائج

يعرض زر “مسار الرحلة” مسار الرحلة الحالي. عند النقر عليه، يظهر خيار مسار الرحلة الكامل في نافذة منبثقة.

<html>
<body>
<wink-itinerary></wink-itinerary>
</body>
</html>
مكون ويب مسار الرحلة
مكون ويب مسار الرحلة

الضغط على الزر أعلاه يفتح نافذة تسمح لك بتحديث مسار رحلتك.

نموذج البحث
أداة اختيار مسار الرحلة كنموذج

البحث هو زرّ أيقونة فقط في مُحدّد مسار الرحلة. عند النقر عليه، يُعرض مُحدّد مسار الرحلة بالكامل في نافذة منبثقة.

<html>
<body>
<wink-search></wink-search>
</body>
</html>
مكون البحث على الويب
مكون البحث على الويب

الضغط على الزر أعلاه يفتح نافذة تسمح لك بتحديث مسار رحلتك.

نموذج البحث
أداة اختيار مسار الرحلة كنموذج

يعرض مكون مسار الرحلة نموذج مسار الرحلة الذي يمكن للمستخدمين التفاعل معه.

<html>
<body>
<wink-itinerary-form></wink-itinerary-form>
</body>
</html>
مكون نموذج الويب لمسار الرحلة
مكون ويب نموذج خط سير الرحلة

من خلال تغيير مسار الرحلة، في أي من مكونات مسار الرحلة لدينا، يتم تشغيل حدث تحديث مسار الرحلة لأي مخزون لديك حاليًا معروضًا على الصفحة.

يتيح لك زر الحساب إضافة مصادقة Wink إلى موقعك.

<html>
<body>
<wink-account></wink-account>
</body>
</html>
مكون ويب الحساب
مكون ويب زر الحساب

عند النقر على الزر، عندما يكون المستخدم غير مُصادق عليه، سيتم توجيهه للحصول على المصادقة. عند المصادقة، سيتم عرض أيقونة ملفه الشخصي.

زر الحساب عند المصادقة
مكون الويب لزر الحساب (المصادق عليه)

عند النقر فوق الزر، يتم فتح القائمة المنسدلة الخاصة بالمستخدم.

زر الحساب عند المصادقة
مكون الويب لزر الحساب (فتح)

هناك شيئان يجب عليك تضمينهما في أي صفحة تريد استخدام مكون الويب الخاص بالدفع TripPay فيها.

  1. قم بتضمين ورقة الأنماط الخاصة بنا.
  2. قم بتضمين JavaScript الخاص بنا.

قم بتضمين أنماط CSS الخاصة بنا في رأس المستند الخاص بك.

<html>
<head>
<link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link>
</head>
</html>

قم بتضمين 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)للمستخدم لإتمام الحجز.

تفاصيل الدفع
الشكل 1. نموذج نموذج الدفع