Cards

تُمثل البطاقة موردًا واحدًا (مثل فندق أو مُقدِّم خدمات) أو مخزونًا (مثل نوع الغرفة، أو قاعة اجتماعات، أو منتجع صحي، إلخ)، وتُعرَض تفاصيلها عبر واجهة مستخدم تفاعلية قابلة للحجز.

يمكن للمستخدم التفاعل مع البطاقة بالطرق التالية:

انقر علىBook زر.
انقر علىGalleryرابط لرؤية كافة الصور والفيديوهات لهذا المخزون.
انقرBest dealالرابط، إذا كان متاحًا، لرؤية الغرفة ذات السعر الأفضل.
انقرHotel detailsالرابط، إذا كان متاحًا، لرؤية معلومات العقار.

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

تحتوي البطاقة على وجهين أو ثلاثة:

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

معاينة البطاقة — *بطاقة نوع الغرفة المواجهة مع التوافر*

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

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

إنشاء بطاقة

الصورة أعلاه مأخوذة منيبحثويعرض لك بعض الأمور التي يمكنك فعلها بنتائج بحثك. ومن هذه الإجراءاتMake a cardانقر على هذا الزر وسيتم إعادة توجيهك إلى صفحة نموذج البطاقة حيث يمكنك البدء في تخصيص بطاقتك.

تخصيص البطاقة

يتيح لك النموذج تخصيص بطاقتك بالطرق التالية:

أعطها اسمًا لتتذكر ما تتحدث عنه البطاقة.
حدد التخصيص تريد التقدم بطلب للحصول على هذه البطاقة.
حدد واجهة البطاقة الأولية التي تريد أن يراها المستخدمون أولاً. افتراضيًا، تكون هي الواجهة الأصلية لتلك القائمة.
حدد badge التي تريد استخدامها على البطاقة. تتيح الشارة للمستخدمين مقارنة المخزون بناءً على مقياس إجمالي مثل eco-friendly.
أضف الكلمات الرئيسية، مفصولة بفاصلة، والتي سيتم استخدامها بواسطة برامج الزحف على الويب.
أضف العناوين والأوصاف باللغات التي تريد أن يراها المستخدم.
حدد صورة واحدة أو أكثر ليتم عرضها عندما ينقر المستخدمون على Gallery وصلة.
انقر على Save زر للاستمرار.

بعد حفظ بطاقتك، سيتم إعادة توجيهك إلى صفحة بطاقاتك وبطاقتك جاهزة الآن للمشاركة مع العالم.

بطاقة المشاركة

يظهر لك أعلاه صورة تحتوي على جميع الإجراءات المتاحة لبطاقتك:

تحديثيقوم بتحديث تكوين البطاقة الخاصة بك.
أضف إلى WinkLinksقم بإضافة البطاقة إلى حساب WinkLinks الخاص بك.
تضمينيوضح لك كيفية تضمين هذه البطاقة كـبطاقةإلى موقع الويب الخاص بك.
استخدم مع ووردبريسيوضح لك كيفية استخدامناإضافة ووردبريسلتضمين هذه البطاقة في موقع الويب الخاص بك.

سنتناول بعض هذه الخيارات بمزيد من التفصيل أدناه.

تضمين

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-42004e494300"
    ></wink-content-loader>

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

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

إليك كيفية تضمين بطاقتك في موقعك:

يوضح لك السطر 3 كيفية تضمين أنماط Wink في موقعك.
تُظهر لك الأسطر من 6 إلى 9 كيفية استخداممُحمّل محتوى الوينكمكون الويب وأخبره بجلب بطاقة غرفة الضيوف الخاصة بكودك.
يوضح لك السطر 11 كيفية تضمين Javascript الخاص بنا في موقعك.
يوضح لك السطر 13 كيفية تضمينأداة تحميل تطبيقات وينكمكون الويب وأخبره بجلب تفضيلات تكوين مستوى الصفحة الخاصة بك.

واجهة برمجة التطبيقات

يمكن للمطورين الذين يرغبون في إدارة البطاقات التوجه إلىالمطورون > واجهة برمجة التطبيقات > المخزون.

قراءة إضافية

تعرف على المزيد حول مجموعتنامكونات الويب.
تعرف على المزيد حولإضافة Wink WordPress.