جدول المحتويات

إنشاء خريطة مقاعد

تُعد خرائط المقاعد جزءًا مهمًا من تطبيقات الويب لحجز التذاكر، لكن التنفيذ في AMP قد يكون صعبًا، أكمل القراءة للتعرف على طريقة تنفيذ خريطة مقاعد في AMP من خلال استخدام مجموعة من مكونات AMP المتاحة.

هناك مثال حي على تنفيذ الممارسات الموصوفة أدناه متوفر هنا.

مكونات AMP اللازمة

لنبدأ بمراجعة المكونات اللازمة:

amp-pan-zoom

يسمح amp-pan-zoom بتكبير المحتوى وتحريكه عبر النقر المزدوج والتصغير، حيث يعمل هذا المكون قاعدةً لتنفيذ خريطة المقاعد.

amp-list

يقوم amp-list بإحضار المحتوى على نحو ديناميكي من نقطة نهاية CORS JSON وعرضه باستخدام نموذج مزوّد، كما تستخدَم لجلب التوافر الحالي لخريطة المقعد؛ وذلك ليتسنى للمستخدمين الحصول على أحدث البيانات دائمًا.

amp-bind

يضيف amp-bind تفاعلية إلى الصفحة، وهو مكون مطلوب هنا لتتبع عدد المقاعد التي تم تحديدها.

amp-selector

يمثل amp-selector عنصر التحكم الذي يعرض قائمة خيارات ويدع المستخدم يقوم باختياره، ويمكن اعتبار خريطة المقاعد بأكملها قائمة خيارات حيثما يعد كل مقعد عبارة عن خيار، كما أنه يجعل الحالة المحددة للمقاعد أسهل بكثير من خلال السماح لك باستخدام تعبيرات CSS، على سبيل المثال: التعبير التالي يملأ مقعدًا باللون البرتقالي بمجرد تحديده

rect[selected].seat {
  fill: var(--orange-theme);
}

المتطلبات

لرسم خريطة مقاعد على أنها SVG حيثما يتم عرض كل مقعد حسب عنصر rect، فأنت تحتاج معلومات عن كل مقعد: الموقع x وy، width وheight وربما rx وry لتقريب زوايا المستطيلات.
معرِّف فريد لكل مقعد يمكن استخدامه لإجراء الحجز.
قياس لكامل العرض والطول لخريطة المقاعد ليتم استخدامه في معلمة viewbox.

رسم خريطة المقاعد

يتم رسم خريطة المقاعد هندسيًا من خلال amp-list وamp-mustache. بعد استلام البيانات من استدعاء amp-list، يمكنك استخدام هذه البيانات لإجراء عملية التكرار عبر المقاعد:

<svg preserveAspectRatio="xMidYMin slice" viewBox="0 0 {{width}} {{height}}">
{{#seats}}
<rect option="{{id}}" role="button" tabindex="0" class="seat {{unavailable}}" x="{{x}}" y="{{y}}" width="{{width}}" height="{{height}}" rx="{{rx}}" ry="{{ry}}"/>
{{/seats}}
</svg>

تصميم المقاعد غير المتوفرة

في المثال أعلاه، يُعد {{unavailable}} قيمة حقل تم إرجاعه من خلال نقطة نهاية JSON وتستخدَم لتصميم مقعد غير متوفر، فيما لا يسمح لك هذا النهج بإزالة المعلمات مثل option="" في حالة ما إذا كان هناك مقعد غير متوفر، حيث لا يمكن للنموذج عمل التفاف كامل لعنصر الصفحة <html>.

فيما يوجد نهج بديل وأكثر إسهابًا وهو تكرار العلامات كما يلي:

{{#available }}<rect option="" role="button" tabindex="0" class="seat" x="" y="" width="" height="" rx="" ry=""/>{{/available }}
{{^available}}<rect role="button" tabindex="0" class="seat unavailable" x="" y="" width="" height="" rx="" ry=""/>{{/available }}

تحجيم خريطة المقاعد لديك

ما لم تكون خريطة المقاعد لديك ثابتة، يكون من الصعب قياس حجم amp-list الذي يتضمن خريطة المقاعد، حيث يحتاج amp-list إما أبعاد ثابتة أو استخدام layout="fill" (لاستخدام المساحة المتوفرة من الحاوية الأصل)، هناك طريقتان لمعالجة هذه المشكلة:

حساب المساحة المتوفرة في الصفحة بمجرد معرفتك للمساحة المستخدمة من قبل المكونات الأخرى مثل الترويسة والتذييل، إذ يمكن إجراء هذا الحساب في CSS من خلال استخدام تعبير calc وتعيينه على أنه min-height لشعبة أصل خاصة بـ amp-list.
استخدام تنسيق مرن عند معرفة ارتفاع تخطيط الصفحة.

تصميم المكون amp-pan-zoom

في حالة استخدام النهج الموصوف في القسم السابق، فإن amp-pan-zoom تحتاج إلى استخدام layout="fill" أيضًا.

تلميح– للإبقاء على مساحة بيضاء حول خريطة المقاعد ويظل بالإمكان جعلها جزء من منطقة التصغير والتكبير:

أضف شعبة التفاف لـ SVG
أضف مساحة متروكة

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

معالجة الحالة

عندما ينقر المستخدمون فوق مقاعد مختلفة، من الممكن تتبع id المقعد المحدد في متغير باستخدام إما amp-state أو من خلال:

إضافة تعبير amp-bind لكل مقعد لإدراج المقعد المحدد في قائمة
أو استخدام amp-selector مع الإجراء on="select:AMP.setState({selectedSeats: event.selectedOptions})" ليتسنى إدراج كل المقاعد المحددة إلى قائمة

بينما لا يتطلب النهج الأول المكون الإضافي amp-selector، بإمكانه إكمال خريطة المقاعد ببطء شديد نظرًا لأن كل تعبير amp-bind سيتم تقييمه عند تحديد/إلغاء تحديد كل مقعد.

كما يسمح لك النهج الثاني أيضًا بتخفيض تكرار التعبير amp-bind لكل مقعد سيتم عرضه من خلال النموذج.

بنية HTML النهائية

إليك HTML النهائية لخريطة المقاعد، كمرجع:

<div class="seatmap-container">
<amp-list layout="fill" src="/json/seats.json" binding="no" items="." single-item noloading>
<template type="amp-mustache">
<amp-pan-zoom layout="fill" class="seatmap">
<amp-selector multiple on="select:AMP.setState({
          selectedSeats: event.selectedOptions
        })" layout="fill">
<div class="svg-container">
<svg preserveAspectRatio="xMidYMin slice" viewBox="0 0 {{width}} {{height}}">
{{#seats}}
<rect option="{{id}}" role="button"
               tabindex="0" class="seat {{unavailable}}"
              x="{{x}}" y="{{y}}"
              width="{{width}}" height="{{height}}"
              rx="{{rx}}" ry="{{ry}}"/>
{{/seats}}
</svg>
</div>
</amp-selector>
</amp-pan-zoom>
</template>
</amp-list>

</div>

Written by @kul3r4
with contributions from @pbakaus