এএমপি-তে উন্নত ইন্টারঅ্যাকটিভিটি

Accelerated Mobile Pages (AMP) হল একটি ওপেন সোর্স উদ্যোগ যা ধারাবাহিকভাবে দ্রুত, সুন্দর এবং উচ্চ-কার্যসম্পাদনকারী ওয়েবসাইট এবং বিজ্ঞাপনগুলি তৈরি করতে সক্ষম করে৷

আপনি যদি এএমপি-তে নতুন হন, তাহলে এই সংস্থানগুলির সাথে একটি দ্রুত ওভারভিউ বিবেচনা করুন:

প্রেরণা

এএমপি ইমেজ ক্যারোসেল এবং লাইটবক্সের মতো UI উপাদান সহ সমৃদ্ধ, গতিশীল সামগ্রী সমর্থন করে। এএমপি এএমপি অ্যাকশনের মাধ্যমে একটি কম্পোনেন্টের অন্য কম্পোনেন্টে অ্যাকশন ট্রিগার করার কিছু সহজ উপায়ও সমর্থন করে।

যাইহোক, আমি যদি চাই:

  • একটি এএমপি উপাদান কাস্টমাইজ করবেন?
  • উদাহরণস্বরূপ, একটি কাস্টম লেবেল প্রদর্শন করুন যা বর্তমান স্লাইড এবং একটি চিত্র ক্যারোজেলে স্লাইডের মোট সংখ্যা দেখাচ্ছে৷
  • রাষ্ট্রীয় আচরণ যোগ করুন?
  • উদাহরণ স্বরূপ, ব্যবহারকারী-নির্বাচিত পণ্যের পরিমাণ তার বর্তমান উপলব্ধতা ছাড়িয়ে গেলে "কার্টে যোগ করুন" বোতামটি অক্ষম করুন৷

পূর্বে, UI উপাদানগুলির মধ্যে একটি শক্তিশালী যোগাযোগ চ্যানেলের অভাব এবং পরিবর্তনযোগ্য, ভাগ করা অবস্থার অক্ষমতার কারণে এএমপি-তে এই ধরনের বৈশিষ্ট্যগুলি বাস্তবায়ন করা কঠিন ছিল। এই ব্যবহারের ক্ষেত্রে আমরা AMP-তে একটি শক্তিশালী নতুন উপাদান তৈরি করেছি।

<amp-bind>

<amp-bind> হল একটি নতুন AMP উপাদান যা ডেটা বাইন্ডিং এবং JS-এর মতো এক্সপ্রেশনের মাধ্যমে কাস্টম ইন্টারঅ্যাক্টিভিটি অফার করে। এই কোডল্যাব আপনাকে <amp-bind> ব্যবহার করে সমৃদ্ধ, কাস্টম ইন্টারঅ্যাক্টিভিটি সহ একটি AMP পৃষ্ঠা তৈরি করবে।

আপনি কি নির্মাণ করবেন

এই কোডল্যাবে, আপনি একটি ইকমার্স পণ্যের বিস্তারিত পৃষ্ঠা তৈরি করবেন:

  • দ্রুত এবং সমৃদ্ধ ব্যবহারকারীর অভিজ্ঞতা সহ একটি ওয়েব পৃষ্ঠা তৈরি করতে AMP HTML এবং AMP উপাদানগুলি ব্যবহার করুন৷
  • ক্রস-এলিমেন্ট ইন্টারঅ্যাক্টিভিটি যোগ করতে <amp-bind> ব্যবহার করুন
  • চাহিদা অনুযায়ী অতিরিক্ত পণ্য ডেটা আনতে <amp-state> ব্যবহার করুন

আপনি কি শিখবেন

  • <amp-bind> এর সাথে দুর্দান্ত, ইন্টারেক্টিভ এএমপি পৃষ্ঠাগুলি তৈরি করতে ডেটা বাইন্ডিং এবং এক্সপ্রেশন কীভাবে ব্যবহার করবেন!

আপনি কি প্রয়োজন হবে

  • আপনার পছন্দের ব্রাউজার
  • আপনার পছন্দের পাঠ্য সম্পাদক
  • Node.js এবং NPM
  • নমুনা কোড
  • HTML, CSS, এবং JavaScript এর প্রাথমিক জ্ঞান

কোডটি ডাউনলোড করুন

প্রথমে, কোডল্যাবের জন্য একটি জিপ ফাইল হিসাবে স্টার্টার কোড ডাউনলোড করুন:

ডাউনলোড করুন

অথবা গিট এর মাধ্যমে:

git clone https://github.com/googlecodelabs/advanced-interactivity-in-amp.git

নির্ভরতা ইনস্টল করুন

সংরক্ষণাগার ফাইলটি আনজিপ করুন (যদি প্রয়োজন হয়) এবং ডিরেক্টরিতে নেভিগেট করুন। npm install চালানোর মাধ্যমে নির্ভরতাগুলি ইনস্টল করুন।

cd advanced-interactivity-in-amp-codelab
npm install

ডেভেলপমেন্ট সার্ভার চালান

node.js দিয়ে ডেভেলপমেন্ট সার্ভার শুরু করুন:

node app.js

এএমপি পৃষ্ঠা চলমান দেখতে আপনার ওয়েব ব্রাউজারে http://localhost:3000- এ নেভিগেট করুন!

এএমপি বয়লারপ্লেট

একটি AMP পৃষ্ঠা হল একটি HTML পৃষ্ঠা যাতে নির্ভরযোগ্য পারফরম্যান্সের জন্য কিছু বিধিনিষেধ থাকে। এএমপি পৃষ্ঠাগুলিতে কিছুটা বিশেষ মার্কআপ থাকে যা এটিকে Google অনুসন্ধানে একটি এএমপি পৃষ্ঠা হিসাবে চিহ্নিত করে।

একটি বেয়ারবোন এএমপি পৃষ্ঠা দেখতে এইরকম:

<!doctype html>
<html amp>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

এএমপি উপাদান

আমাদের স্টার্টার কোড ( static/index.html ) এর পৃষ্ঠার বিষয়বস্তু (ছবি, টেক্সট, ইত্যাদি) পাশাপাশি কয়েকটি AMP উপাদান অন্তর্ভুক্ত করে বেয়ারবোন এএমপি পৃষ্ঠা তৈরি করে:

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

এএমপি উপাদানগুলি অতিরিক্ত কার্যকারিতা এবং UI উপাদানগুলি অফার করে যা এএমপি পৃষ্ঠাগুলিতে সমৃদ্ধ ইন্টারঅ্যাক্টিভিটি যুক্ত করে। স্টার্টার কোড নিম্নলিখিত AMP উপাদান ব্যবহার করে:

  • <amp-carousel>
  • একটি ইমেজ ক্যারোজেল যা পণ্যের একাধিক দৃশ্য প্রদর্শন করে।
  • <amp-mustache>
  • amp-form থেকে সার্ভার প্রতিক্রিয়া রেন্ডার করার জন্য একটি টেমপ্লেটিং সিস্টেম।
  • <amp-form>
  • এএমপি পৃষ্ঠাগুলির জন্য প্রয়োজনীয় <form> উপাদানগুলির জন্য বিশেষ কার্যকারিতা যোগ করে।
  • <amp-selector>
  • উপাদানগুলির একটি গ্রুপের এক বা একাধিক উপাদান নির্বাচন করার একটি শব্দার্থিক উপায় অফার করে। amp-ফর্মে একটি ইনপুট উত্স হিসাবে ব্যবহার করা যেতে পারে।

মৌলিক মিথস্ক্রিয়া

স্টার্টার কোড কিছু মৌলিক ইন্টারঅ্যাক্টিভিটি অফার করে:

  • ছবির ক্যারোজেল (একটি <amp-carousel> ) পণ্যটির একাধিক দৃশ্য প্রদর্শন করে।
  • পৃষ্ঠার নীচে "কার্টে যোগ করুন" বোতামে ট্যাপ করে পণ্যটি ব্যবহারকারীর কার্টে ( <amp-form> এর মাধ্যমে) যোগ করা যেতে পারে।

ইমেজ ক্যারোজেল সোয়াইপ করার চেষ্টা করুন এবং "কার্টে যোগ করুন" বোতামে ট্যাপ করুন।

অভিজ্ঞতা উন্নত করুন

স্টার্টার কোড একটি সুন্দর খালি ব্যবহারকারীর অভিজ্ঞতা প্রদান করে। আমরা এটিকে উন্নত করতে পারি এমন কয়েকটি উপায় রয়েছে:

  • একটি সূচক যোগ করুন যা বর্তমান স্লাইড এবং স্লাইডের মোট সংখ্যা প্রদর্শন করে।
  • যখন একজন ব্যবহারকারী একটি ভিন্ন শার্টের রঙ নির্বাচন করেন, তখন নির্বাচিত রঙে শার্টের ছবি দেখানোর জন্য ছবির ক্যারোজেল পরিবর্তন করুন।

<amp-bind> উপাদান প্রবর্তনের আগে, এই ধরনের বৈশিষ্ট্য যোগ করা সম্ভব ছিল না। আসুন <amp-bind> এর সাথে একটি অভিজ্ঞতা লাভ করি এবং আমাদের নমুনা কোডে এই নতুন বৈশিষ্ট্যগুলি যোগ করি!

<amp-bind> এক্সটেনশন ইনস্টল করুন

<amp-bind> হল একটি নতুন AMP উপাদান যা ডেটা বাইন্ডিং এবং JS-এর মতো এক্সপ্রেশনের মাধ্যমে কাস্টম ইন্টারঅ্যাক্টিভিটি প্রদান করে। <amp-bind> ব্যবহার করতে, আপনাকে অবশ্যই এটি পৃষ্ঠায় ইনস্টল করতে হবে।

static/index.html ফাইলটি খুলুন এবং পৃষ্ঠার <head> বিভাগে AMP উপাদানগুলির তালিকায় নিম্নলিখিত স্ক্রিপ্টটি যোগ করুন:

<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> শীর্ষে নিম্নলিখিত যোগ করুন (হেডারের আগে):

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

<amp-state> উপাদানের মধ্যে থাকা ডেটা তাদের সংশ্লিষ্ট ID দ্বারা অ্যাক্সেসযোগ্য। উদাহরণস্বরূপ, আমরা নিম্নলিখিত এক্সপ্রেশন ফ্র্যাগমেন্ট দ্বারা এই ভেরিয়েবলটিকে উল্লেখ করতে পারি:

selected.slide // Evaluates to 0.

এর পরে, চলুন এই ভেরিয়েবলটি আপডেট করি যখন ব্যবহারকারী বিদ্যমান <amp-carousel> এলিমেন্টে একটি "অন" অ্যাকশন যোগ করে ক্যারোজেলে স্লাইড পরিবর্তন করে:

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

এখন, যখনই <amp-carousel> এর প্রদর্শিত স্লাইড পরিবর্তন হয়, AMP.setState কে নিম্নলিখিত যুক্তি সহ কল ​​করা হবে:

{
  selected: {
    slide: event.index
  }
}

event.index এক্সপ্রেশন নতুন স্লাইড সূচকে মূল্যায়ন করে এবং AMP.setState() অ্যাকশন এই অবজেক্টটিকে আক্ষরিকভাবে বর্তমান অবস্থায় মার্জ করে। এটি event.index selected.slide মান দিয়ে প্রতিস্থাপন করে।

এর পরে, চলুন এই স্টেট ভেরিয়েবল ব্যবহার করা যাক যা বর্তমানে প্রদর্শিত স্লাইড ট্র্যাক করে এবং একটি স্লাইড নির্দেশক তৈরি করে। স্লাইড নির্দেশক উপাদানটি খুঁজুন ( <!-- TODO: "Add a slide indicator" --> ) সন্ধান করুন এবং এর শিশুদের জন্য নিম্নলিখিত বাইন্ডিংগুলি যুক্ত করুন:

<!-- 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 ক্লাস যোগ বা অপসারণ করতে এটি ব্যবহার করতে পারেন।

এখন, পৃষ্ঠা রিফ্রেশ করুন এবং এটি চেষ্টা করে দেখুন! ক্যারোজেলের স্লাইড পরিবর্তন করে, এটি:

  1. slideChange ইভেন্টটি ট্রিগার করে...
  2. AMP.setState অ্যাকশন বলে...
  3. যা স্টেট ভেরিয়েবল selected.slide আপডেট করে...
  4. যা সূচক <span> উপাদানগুলিতে [class] বাঁধাই আপডেট করে!

চমৎকার! এখন আমাদের একটি কাজের স্লাইড নির্দেশক আছে।

আমরা নির্বাচিত রঙ পরিবর্তন করার সময় যদি আমরা বিভিন্ন শার্টের রঙের ছবি দেখতে পাই তবে এটি ভাল হবে। amp-bind-এর সাহায্যে আমরা <amp-carousel> এর মধ্যে <amp-img> উপাদানগুলিতে [src] বাইন্ড করে এটি করতে পারি।

যাইহোক, প্রথমে আমাদের প্রতিটি রঙের শার্টের ইমেজ সোর্স ইউআরএল সহ স্টেট ডেটা শুরু করতে হবে। একটি নতুন <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-এ একটি শার্ট সনাক্তকারী স্ট্রিং (যেমন, একটি SKU) ম্যাপ করে। একটি JSON অ্যারে এখানেও কাজ করবে, কিন্তু একটি বস্তু ব্যবহার করে আমাদের আরও কিছু দুর্দান্ত জিনিস করতে দেয় যা আপনি শীঘ্রই দেখতে পাবেন।

এখন, আমরা একটি শার্ট সনাক্তকারীর মাধ্যমে ছবির URL অ্যাক্সেস করতে পারি। উদাহরণ স্বরূপ, shirts['10014'].color "dark green" এবং shirts['10030'].image "ওয়াইন" শার্টের রঙের জন্য ছবির URL প্রদান করে।

যদি আমরা অন্য স্টেট ভেরিয়েবল যোগ করি যা নির্বাচিত SKU ট্র্যাক করে, তাহলে নির্বাচিত SKU পরিবর্তন হলে আমরা তাদের src বৈশিষ্ট্যগুলি আপডেট করতে <amp-img> উপাদানগুলির সাথে একটি অভিব্যক্তি আবদ্ধ করতে পারি। বিদ্যমান amp-state#selected উপাদানের JSON-এ একটি নতুন sku কী যোগ করুন:

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

<amp-selector> এ একটি "চালু" অ্যাকশন যোগ করুন যা selected.sku .sku ভেরিয়েবল আপডেট করে যখনই একটি নতুন রঙ নির্বাচন করা হয়:

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

তারপর, <amp-carousel> এর ভিতরে <amp-img> উপাদানগুলিতে বাইন্ডিং যোগ করুন ( <!-- TODO: "Changing images in amp-carousel-->" ):

<!-- 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 থাকতে পারে। এটি একক চিত্রটিকে চিত্রের অ্যারের সাথে প্রতিস্থাপন করে করা যেতে পারে। সরলতার জন্য, এই কোডল্যাব বিভিন্ন বিবর্ধনে একটি একক চিত্র ব্যবহার করে।

এখন, পৃষ্ঠাটি রিফ্রেশ করুন এবং একটি শার্টের জন্য একটি ভিন্ন রঙ নির্বাচন করুন। আপনি যখন করেন, তখন নির্বাচিত রঙের শার্টগুলি দেখানোর জন্য ক্যারোজেলের ছবিগুলি আপডেট করা হয়৷

পৃষ্ঠা লোডের সময় পুনরুদ্ধার করার জন্য আপনার বাঁধাইযোগ্য ডেটা খুব বড় বা জটিল হলে কী হবে? অথবা যদি প্রতিটি SKU-এর দাম থাকে যা দেখতে দীর্ঘ সময় নেয়? অ-দেখা আইটেমগুলির জন্য SKU-এর জন্য দাম খোঁজা নষ্ট কাজ।

একটি শার্ট জন্য উপলব্ধ মাপ আনা

আমাদের কোডল্যাব নমুনায় SKU-এর দাম দেখতে দূরবর্তী ডেটা আনার ক্ষমতা ব্যবহার করা যাক। app.js-এ আমাদের app.js ডেভেলপমেন্ট সার্ভারে ইতিমধ্যেই একটি এন্ডপয়েন্ট /shirts/sizes?shirt=<sku> রয়েছে যা, একটি শার্ট SKU দেওয়া, প্রতিটি আকারের জন্য উপলব্ধ মাপ এবং মূল্য প্রদান করে। এটি নেটওয়ার্ক লেটেন্সি অনুকরণ করতে এক সেকেন্ডের কৃত্রিম বিলম্বের সাথে প্রতিক্রিয়া পাঠায়।

অনুরোধ

প্রতিক্রিয়া

GET /shirts/sizesAndPrices?sku=1001

{"1001: {"sizes": {"XS": 8.99, "S" 9.99}}}

<amp-state> উপাদানগুলির মধ্যে JSON ডেটার মতো, এইগুলি নিয়ে আসা দূরবর্তী ডেটাগুলি উপাদানের id বৈশিষ্ট্যের মধ্যে একত্রিত এবং উপলব্ধ। উদাহরণস্বরূপ, উপরের উদাহরণের প্রতিক্রিয়া থেকে ফিরে আসা ডেটা একটি অভিব্যক্তিতে অ্যাক্সেস করা যেতে পারে:

অভিব্যক্তি

ফলাফল

shirts['1001'].sizes['XS']

8.99

এখন, আমাদের ই-কমার্স উদাহরণে এটি প্রয়োগ করা যাক। একটি নতুন SKU নির্বাচন করা হলে প্রথমে এই শার্ট ডেটা নিয়ে আসা যাক৷ আমাদের amp-state#shirts এলিমেন্টে একটি [src] বাইন্ডিং যোগ করুন:

<!-- When `selected.sku` changes, update the `src` attribute and fetch
     JSON at the new URL. Then, merge that data under `id` ("shirts"). -->
<amp-state id="shirts" [src]="'/shirts/sizesAndPrices?sku=' + selected.sku">

এর পরে, আসুন একটি প্রদত্ত SKU-এর জন্য অনুপলব্ধ আকারগুলি পরিষ্কারভাবে চিহ্নিত করি। "unavailable" সিএসএস ক্লাস একটি উপাদানের মাধ্যমে একটি তির্যক রেখা যোগ করে -- আমরা অনুপলব্ধ আকারের সাথে সম্পর্কিত amp-selector[name="size"] এর মধ্যে উপাদানগুলিতে এটি যোগ করতে পারি:

<amp-selector name="size">
  <table>
    <tr>
      <!-- If 'XS' size is available for selected SKU, return empty string.
           Otherwise, return 'unavailable'. -->
      <td [class]="shirts[selected.sku].sizes['XS'] ? '' : 'unavailable'">
        <div option="XS">XS</div>
      </td>
      <td [class]="shirts[selected.sku].sizes['S'] ? '' : 'unavailable'">
        <div option="S">S</div>
      </td>
      <td [class]="shirts[selected.sku].sizes['M'] ? '' : 'unavailable'">
        <div option="M">M</div>
      </td>
      <td [class]="shirts[selected.sku].sizes['L'] ? '' : 'unavailable'">
        <div option="L">L</div>
      </td>
      <td [class]="shirts[selected.sku].sizes['XL'] ? '' : 'unavailable'">
        <div option="XL">XL</div>
      </td>
    </tr>
  </table>
</amp-selector>

এখন পৃষ্ঠাটি পুনরায় লোড করুন এবং এটি চেষ্টা করুন। একটি নতুন SKU (শার্টের রঙ) নির্বাচন করার ফলে অনুপলব্ধ আকারগুলি ক্রস-আউট হয়ে যাবে (একটু বিলম্বের পরে)।

যদিও একটি ছোট সমস্যা আছে -- কালো শার্ট সম্পর্কে কি, ডিফল্ট নির্বাচিত রঙ? আমাদের amp-state#shirts এ কালো শার্টের আকার এবং দামের ডেটা যোগ করতে হবে...

<amp-state id="shirts" [src]="'/shirts/sizesAndPrices?sku=' + selected.sku">
  <script type="application/json">
    {
      "1001": {
        "color": "black",
        "image": "./shirts/black.jpg",
        "sizes": {
          "XS": 8.99,
          "S": 9.99
        }
      },
<!-- ... -->

...সাথে প্রাসঙ্গিক উপাদানগুলির ডিফল্ট অবস্থা আপডেট করুন।

<amp-selector name="size">
  <table>
    <tr>
      <!-- If 'XS' size is available for selected SKU, return empty string.
           Otherwise, return 'unavailable'. -->
      <td [class]="shirts[selected.sku].sizes['XS'] ? '' : 'unavailable'">
        <div option="XS">XS</div>
      </td>
      <td [class]="shirts[selected.sku].sizes['S'] ? '' : 'unavailable'">
        <div option="S">S</div>
      </td>
      <!-- Add the ‘unavailable' class to the next three <td> elements
           to be consistent with the available sizes of the default SKU. -->
      <td class="unavailable" 
          [class]="shirts[selected.sku].sizes['M'] ? '' : 'unavailable'">
        <div option="M">M</div>
      </td>
      <td class="unavailable" 
          [class]="shirts[selected.sku].sizes['L'] ? '' : 'unavailable'">
        <div option="L">L</div>
      </td>
      <td class="unavailable" 
          [class]="shirts[selected.sku].sizes['XL'] ? '' : 'unavailable'">
        <div option="XL">XL</div>
      </td>
    </tr>
  </table>
</amp-selector>

পরিবর্তনশীল শার্ট মূল্য

এখন আমরা সঠিকভাবে উপলব্ধ মাপগুলি প্রদর্শন করি, আসুন নিশ্চিত করি যে সঠিক মূল্যটিও প্রদর্শিত হয়েছে।

আমাদের AMPPAREL স্টোরটি অদ্ভুত যে শার্টের দাম রঙ এবং আকার উভয়ের জন্যই নির্দিষ্ট। তার মানে ব্যবহারকারী-নির্বাচিত আকার ট্র্যাক করতে আমাদের একটি নতুন পরিবর্তনশীল প্রয়োজন। আমাদের আকার <amp-selector> উপাদানটিতে একটি নতুন ক্রিয়া যুক্ত করুন:

<!-- When an element is selected, set the `selectedSize` variable to the
     value of the "option" attribute of the selected element.  -->
<amp-selector name="size" 
    on="select:AMP.setState({selectedSize: event.targetOption})">

মনে রাখবেন যে আমরা amp-state#selected এলিমেন্টের মাধ্যমে selectedSize এর মান আরম্ভ করছি না। কারণ আমরা ইচ্ছাকৃতভাবে একটি ডিফল্ট নির্বাচিত আকার প্রদান করি না এবং পরিবর্তে ব্যবহারকারীকে একটি আকার চয়ন করতে বাধ্য করতে চাই৷

মূল্য লেবেল মোড়ানো একটি নতুন <span> উপাদান যোগ করুন এবং ডিফল্ট পাঠ্যকে "---" এ পরিবর্তন করুন যেহেতু কোনো ডিফল্ট আকার নির্বাচন নেই৷

<h6>PRICE :
  <!-- Display the price of the selected shirt in the selected size if available.
       Otherwise, display the placeholder text '---'. -->
  <span [text]="shirts[selected.sku].sizes[selectedSize] || '---'">---</span>
</h6>

এবং আমরা সঠিক দাম আছে! চেষ্টা কর.

শর্তসাপেক্ষে সক্ষম বোতাম

আমরা প্রায় শেষ! এখন নির্বাচিত আকার অনুপলব্ধ হলে "কার্টে যোগ করুন" বোতামটি অক্ষম করা যাক:

<!-- Disable the "ADD TO CART" button when:
     1. There is no selected size, OR
     2. The available sizes for the selected SKU haven't been fetched yet
-->
<input type="submit" value="ADD TO CART" disabled
    class="mdl-button mdl-button--raised mdl-button--accent"
    [disabled]="!selectedSize || !shirts[selected.sku].sizes[selectedSize]">

আমাদের কাছে একটি ইন্টারেক্টিভ ই-কমার্স পণ্যের বিস্তারিত পৃষ্ঠা রয়েছে যেখানে প্রতিটি SKU-এর জন্য পরিবর্তনশীল আকার এবং দাম রয়েছে, যা একটি দূরবর্তী JSON এন্ডপয়েন্ট থেকে চাহিদা অনুযায়ী আনা হয়েছে।

আপনি আটকে থাকলে, সম্পূর্ণ সমাধানের জন্য static/final.html দেখুন।

আমরা আশা করি এই কোডল্যাব আপনাকে <amp-bind> এর সাথে ইন্টারেক্টিভ এএমপি পৃষ্ঠাগুলি তৈরি করার শক্তি এবং নমনীয়তা দেখাবে। আরও তথ্যের জন্য, <amp-bind> ডকুমেন্টেশন দেখুন।

আমরা প্রতিক্রিয়া পেতে পছন্দ করি -- অনুগ্রহ করে আমাদের আপনার বৈশিষ্ট্য অনুরোধ, পরামর্শ বা বাগ রিপোর্ট পাঠান। আপনি যদি প্রকৃত ব্যবহারকারীদের সাথে <amp-bind> পরীক্ষা করতে আগ্রহী হন, তাহলে একটি অরিজিন ট্রায়ালের জন্য আবেদন করার কথা বিবেচনা করুন।

আমরা শীঘ্রই <amp-bind> চালু করতে এবং আপনি এটি দিয়ে কী তৈরি করতে পারেন তা দেখতে আগ্রহী!