مكونات الويب

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

تضمين الغمز

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

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

ورقة الأنماط

قم بتضمين أنماط 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

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

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