سكوير سبيس

يدعم سكوير سبيس HTML وJavaScript المخصصين، مما يعني أنه يمكنك تضمين أي مكون ويب من Wink مباشرة في موقعك بدون إضافة. يوضح هذا الدليل كيفية تحميل سكريبتات Wink على مستوى الموقع ثم وضع المكونات في صفحات فردية.

تحميل سكريبتات Wink على مستوى الموقع

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

في محرر سكوير سبيس، اذهب إلى الإعدادات → متقدم → حقن الكود.

في حقل الرأس، أضف ورقة الأنماط:

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

في حقل التذييل، أضف السكريبت وموّلد التطبيق (استبدل YOUR_CLIENT_ID بمعرف العميل الخاص بك في Wink):
```
<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>
```
اضغط حفظ.

إضافة مكون إلى صفحة

بمجرد تحميل السكريبتات على مستوى الموقع، يمكنك وضع أي مكون من Wink في أي صفحة باستخدام كتلة كود.

افتح الصفحة التي تريد تعديلها.
اضغط تعديل وأضف كتلة كود جديدة في المكان الذي تريد ظهور المكون فيه.

الصق HTML الخاص بالمكون، مثل موّلد المحتوى:

<wink-content-loader
  layout="HOTEL"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>

اضغط تطبيق ثم حفظ.

المكونات المتاحة

المكون	وسم HTML	الغرض
موّلد المحتوى	`<wink-content-loader>`	عرض بطاقات الفنادق، الشبكات، الخرائط
البحث	`<wink-lookup>`	شريط بحث عن الوجهات
زر البحث	`<wink-search-button>`	فتح منتقي خط الرحلة
زر الحساب	`<wink-account-button>`	تسجيل الدخول / قائمة المستخدم
زر خط الرحلة	`<wink-itinerary-button>`	عرض خط الرحلة الحالي
منتقي خط الرحلة	`<wink-itinerary-picker>`	نموذج خط الرحلة الكامل
عربة التسوق	`<wink-shopping-cart-button>`	زر ملخص العربة

راجع مكونات الويب للمرجع الكامل للسمات لكل مكون.