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

تحسين التفاعلية

يوفر رمز البداية تجربة مستخدم خاوية قليلًا. وهناك طريقتان لتحسينها:

أضف مؤشرًا يعرض الشريحة الحالية والعدد الإجمالي للشرائح.
عند اختيار المستخدم لون قميص مختلفًا، قم بتغيير مكتبة الصور لعرض صور القمصان باللون المحدد.

قبل تقديم المكون amp-bind، لم يكن إضافة ميزة مثل هذه أمرًا ممكنًا، لذا هيا نخوض تجربة عملية مع amp-bind وإضافة هذه الميزات الجديدة إلى نموذج الرموز لدينا.

تثبيت المكون `amp-bind`

amp-bind عبارة عن مكون AMP يوفر تفاعلية مخصصة عبر ربط البيانات والتعبيرات تشبه JS، لاستخدام amp-bind، عليك تثبيته في الصفحة.

افتح الملف static/index.html، وأضف النص البرمجي التالي لقائمة مكونات AMP في قسم <head> من الصفحة:

<script
  async
  custom-element="amp-bind"
  src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"
></script>

إضافة مؤشر شريحة

يعمل amp-bind من خلال ربط سمات العناصر بتعبيرات مخصصة، حيث يمكن لهذه التعبيرات الإشارة إلى "الحالة" (بيانات JSON المتغيرة). ويمكننا تهيئة هذه الحالة من خلال المكون <amp-state> المضمن مع amp-bind.

تهيئة حالة الشريحة

لنبدأ تهيئة متغير حالة لتتبع فهرس الشريحة المعروضة حاليًا في مكتبة الصور. افتح static/index.html وأضف ما يلي للجزء العلوي من <body> الخاص بالصفحة (قبل <header>):

<amp-state id="selected">
  <script type="application/json">
    {
      "slide": 0
    }
  </script>
</amp-state>

وتكون البيانات الموجودة ضمن العناصر <amp-state> قابلة للوصول من خلال معرِّفاتها المقترنة. على سبيل المثال: يمكننا الإشارة إلى هذا المتغير من خلال جزء التعبير التالي:

selected.slide; // Evaluates to 0.

تحديث حالة الشريحة

لنقم بعد ذلك بتحديث هذا المتغير عند تغيير المستخدم للشرائح في المكتبة من خلال إضافة إجراء "on" التالي للعنصر الموجود مسبقًا amp-carousel:

<amp-carousel
  type="slides"
  layout="fixed-height"
  height="250"
  id="carousel"
  on="slideChange:AMP.setState({selected: {slide: event.index}})"
></amp-carousel>

والآن كلما تغيرت الشريحة المعروضة لتغييرات amp-carousel، سيتم استدعاء الإجراء AMP.setState بالوسيطة التالية:

{
  selected: {
    slide: event.index;
  }
}

يتم تقييم التعبير event.index لفهرس الشريحة الجديدة، ويقوم إجراء AMP.setState() بدمج حرف الكائن هذا في الحالة الحالية، وهذا يستبدل القيمة الحالية لـ selected.slide بقيمة event.index.

تلميح– يقوم AMP.setState() بإجراء دمج عميق لحروف الكائن المتداخلة. لمزيد من التفاصيل، راجع توثيق amp-bind.

ربط عناصر المؤشر

بعد ذلك نستخدم متغير الحالة هذا الذي يتتبع الشريحة المعروضة حاليًا، وإنشاء مؤشر شريحة. اعثر على عنصر مؤشر الشريحة (ابحث عن ) وأضف عمليات الربط التالية لتوابعها:

<!-- TODO: "Add a slide indicator" -->
<p class="dots">
  <!-- The <span> element corresponding to the current displayed slide
       will have the 'current' CSS class. -->
  <span [class]="selected.slide == 0 ? 'current' : ''" class="current"></span>
  <span [class]="selected.slide == 1 ? 'current' : ''"></span>
  <span [class]="selected.slide == 2 ? 'current' : ''"></span>
</p>

[class] عبارة عن ربط من شأنه تغيير السمة class ويمكنك استخدامه لإضافة فئات CSS أو إزالتها من أي عنصر.

جرِّبها: حدِّث الصفحة وغيِّر الشريحة!

من خلال تغيير الشريحة في المكتبة، سيتم:

تشغيل slideChange event ...
الذي يستدعي الإجراء AMP.setState ...
الذي يحدِّث متغير الحالة selected.slide ...
الذي يحدِّث الربط [class] في عناصر المؤشر <span>!

رائع! والآن أصبح لدينا مؤشر شريحة يعمل.

راجع ما إذ كان بإمكانك إضافة وظيفية ليتسنى تحديث مكتبة الصور بالعنصر المحدد عند نقر مستخدم فوق نقطة مؤشر شريحة. وكتلميح، استخدم الحدث tap والربط [slide] في amp-carousel.

تغيير الصور في المكتبة

سيكون الأمر رائعًا إن تمكنَّا من رؤية صور لألوان قمصان مختلفة عند تغيير اللون المحدد. مع amp-bind يمكننا القيام بهذا الأمر من خلال ربط [src] الموجودة في العناصر amp-img ضمن amp-carousel.

تهيئة حالة وحدة حفظ المخزون

أولًا نحتاج لتهيئة بيانات الحالة بعناوين URL الخاصة بمصدر الصورة لكل قميص ملون. لنقم بالأمر مع عنصر <amp-state> جديد:

<!-- Available shirts. Maps unique string identifier to color and image URL string. -->
<amp-state id="shirts">
  <script type="application/json">
    {
      "1001": {
        "color": "black",
        "image": "./shirts/black.jpg"
      },
      "1002": {
        "color": "blue",
        "image": "./shirts/blue.jpg"
      },
      "1010": {
        "color": "brown",
        "image": "./shirts/brown.jpg"
      },
      "1014": {
        "color": "dark green",
        "image": "./shirts/dark-green.jpg"
      },
      "1015": {
        "color": "gray",
        "image": "./shirts/gray.jpg"
      },
      "1016": {
        "color": "light gray",
        "image": "./shirts/light-gray.jpg"
      },
      "1021": {
        "color": "navy",
        "image": "./shirts/navy.jpg"
      },
      "1030": {
        "color": "wine",
        "image": "./shirts/wine.jpg"
      }
    }
  </script>
</amp-state>

يحتوي عنصر <amp-state> هذا على كائن JSON من شأنه إقران سلسلة معرِّف قميص (مثل وحدة حفظ المخزون) بعنوان URL للون والصورة الخاصين بالقميص المقابل. فيما ستعمل صفيفة JSON أيضًا هنا لكن باستخدام كائن يسمح لنا بالقيام بالمزيد من الأمور الرائعة الأخرى التي ستراها قريبًا.

والآن يمكننا الوصول إلى عنوان URL الخاص بالصورة عبر معرِّف قميص. على سبيل المثال، يتم تقييم shirts['10014'].color لـ "dark green" وshirts['10030'].imageيقوم بإعادة عنوان URL الخاص بالصورة للون القميص "wine".

تتبع وحدة حفظ المخزون المحددة

إذا قمنا بإضافة متغير حالة آخر يتتبع وحدة حفظ المخزون المحددة، فيمكننا ربط تعبير بعناصر amp-img لتحديث سماتها src عند تغيير وحدة حفظ المخزون المحددة. أضف مفتاح sku جديد لـ JSON الخاص بالعنصر الموجود مسبقًا amp-state#selected:

<amp-state id="selected">
  <script type="application/json">
    {
      "slide": 0,
      "sku": "1001"
    }
  </script>
</amp-state>

تحديث حالة وحدة حفظ المخزون

أضف إجراء "تشغيل" لـ amp-selector الذي يقوم بتحديث المتغير selected.sku كلما تم تحديد لون جديد:

<amp-selector
  name="color"
  on="select:AMP.setState({selected: {sku: event.targetOption}})"
></amp-selector>

تلميح – يمكن إتمام هذا الأمر أيضًا من خلال إضافة الإجراءات on="tap:AMP.setState(...) لكل amp-img تابع داخل amp-selector. وتُعد إحدى الأمور الرائعة حيال amp-selector أنه يبسِّط لغة الترميز بطرق مثل هذه.

ربط عناصر الصورة

فيما بعد، قم بإضافة عمليات الربط لـ amp-img:

<!-- Update the `src` of each <amp-img> when the `selected.sku` variable changes. -->
<amp-img
  width="200"
  height="250"
  src="./shirts/black.jpg"
  [src]="shirts[selected.sku].image"
></amp-img>
<amp-img
  width="300"
  height="375"
  src="./shirts/black.jpg"
  [src]="shirts[selected.sku].image"
></amp-img>
<amp-img
  width="400"
  height="500"
  src="./shirts/black.jpg"
  [src]="shirts[selected.sku].image"
></amp-img>

ملحوظة – من الناحية العملية، من المحتمل أن يكون لكل صورة في المكتبة src مختلف. ويمكن إتمام هذا الأمر من خلال استبدال الصورة الواحدة بصفيفة من الصور؛ ومن أجل التبسيط، يستخدم هذا البرنامج التعليمي صورة واحدة بتكبيرات مختلفة.

جرِّبه: حدِّث الصفحة وحدد لونًا مختلفًا لقميص ما، وعند القيام بهذا؛ يتم تحديث صور المكتبة لعرض القمصان باللون المحدد.

الفصل السابق الفصل التالي