مكونات الويب

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

تضمين Wink

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

تضمين ورقة الأنماط الخاصة بنا.
تضمين جافاسكريبت الخاص بنا.
تضمين محمل التطبيق الخاص بنا.

ورقة الأنماط

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

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

جافاسكريبت

قم بتضمين جافاسكريبت الخاص بنا في أسفل المستند. (ننصح بوضعه مباشرة فوق وسم إغلاق body).

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

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

المكونات

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

محمل التطبيق

المحمل مسؤول عن الحفاظ على الحالة وإدارة التفاعل بين مكوناتنا. (قم بتضمينه أسفل جافاسكريبت الخاص بنا).

<html>
  <body>
    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

محمل المحتوى

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

السمات المتاحة:

layout
id
sort

السمة 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 فيها.

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

ورقة الأنماط

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

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

جافاسكريبت

قم بتضمين جافاسكريبت الخاص بنا في أسفل المستند. (ننصح بوضعه مباشرة فوق وسم إغلاق body).

<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>

يقوم الودجت بتحضير العقد للتنفيذ ويعرض تفاصيل الدفع (الشكل 1) للمستخدم لإنهاء الحجز.

الأخطاء

إذا ظهرت لك رسالة خطأ عند تضمين أحد مكونات الويب الخاصة بنا، سواء على WinkLinks أو على موقعك الخاص، فهناك بعض الأمور التي قد تكون حدثت بشكل خاطئ:

التوفر

قد لا يكون المخزون متاحًا بعد الآن. اذهب إلى Wink Studio وتحقق مما إذا كانت حالة “البطاقة” متاحة. إذا لم تكن كذلك، ستظهر باللون الأحمر. في هذه الحالة، يمكنك الانتظار وربما يعيد المورد توافرها أو إزالتها من قائمتك.

الإزالة

قد يكون المخزون قد أُزيل. اذهب إلى Wink Studio وتحقق مما إذا كانت حالة “البطاقة” متاحة. إذا لم تكن كذلك، ستظهر باللون الأحمر. في هذه الحالة، يمكنك الانتظار وربما يعيد المورد توافرها أو إزالتها من قائمتك.

التخصيص

ربما قمت بحذف التخصيص الذي قمت بتعريفه ليتوافق مع مخزونك عن طريق الخطأ. تأكد من أن التخصيص لا يزال متاحًا وقم بتعيين تخصيص جديد إذا كان مفقودًا.

التطبيق

هذا مخصص لمطوري الويب فقط. إذا قمت بحذف التطبيق عن طريق الخطأ؛ مما يجعل معرف العميل غير متاح، يرجى إنشاء تطبيق جديد واستخدام معرف العميل الجديد لتضمين مكونات الويب الخاصة بنا.