একটি রেডিও বোতাম শপিং কার্ট ট্রিক

সম্পাদকের দ্রষ্টব্য: এটি একটি সত্যই চতুর ধারণা যা প্রিথি ভাগ করে নিয়েছে, তবে আপনি এটিও দেখতে পাবেন যে এটি অ্যাক্সেসযোগ্যতার ত্রুটিগুলি নিয়ে আসে কারণ এটি নকল ইন্টারেক্টিভ উপাদানগুলি ব্যবহার করে। প্রিথির উল্লেখ অনুসারে এই ধরণের জিনিসটির কাছে যাওয়ার অন্যান্য উপায় রয়েছে এবং আমরা ভবিষ্যতের নিবন্ধে সেগুলির মধ্যে একটির দিকে নজর দেব।

নিজের জন্য দুটি বড় পিজ্জা, বা বাচ্চাদের পার্টির জন্য বারোটি ছোট – প্রত্যেকে একটি অনলাইন কার্টে আইটেম যুক্ত করার প্রক্রিয়াটি পেরিয়ে গেছে। মুদি পোশাক ডেলি অর্ডার এটি দুর্দান্ত, যখন সেই প্রক্রিয়াটি সহজ, দক্ষ এবং সম্ভবত কিছুটা উদ্বেগজনক হয়।

এই পোস্টে অসীম নির্বাচন হিসাবে উল্লেখ করা একটি নকশা কভার করা হয়েছে। রূপকভাবে অসীম।

এটি কীভাবে কাজ করে তা এখানে:

এটা ঠিক, আপনি একটি আইটেম ক্লিক করেন এবং এটি সরাসরি শপিং কার্টে লাফিয়ে যায়, এটি একটি মসৃণ রূপান্তর দিয়ে সম্পূর্ণ যা এটি ঘটছে তা দেখায়। আপনি যতটা আইটেম যুক্ত করতে পারেন!

এবং কী অনুমান করুন: এটি সমস্ত সিএসএসে সম্পন্ন হয়েছে – ভাল, নির্বাচিত আইটেমগুলির গণনা রাখে এমন অংশ ব্যতীত – এবং এটি যে সমস্ত নিয়েছিল তা হ’ল মার্কআপে রেডিও ফর্ম ইনপুটগুলির সংমিশ্রণ।

আমি আপনাকে লেআউটটি দিয়ে শুরু করে কোডটি দিয়ে চলতে যাচ্ছি, তবে তার আগে, আমি আপ-ফ্রন্ট বলতে চাই যে এটি কেবল একটি পদ্ধতির। এটি সম্পর্কে নিশ্চিত অন্যান্য উপায়গুলি রয়েছে এবং এই নির্দিষ্ট উপায়ে তার নিজস্ব বিবেচনা এবং সীমাবদ্ধতার সাথে আসে যা আমরা প্রবেশ করব।

লেআউট

প্রতিটি আইটেম (বা পণ্য, আপনি এটি কল করতে চান) একটি মোড়ক যা একই ভাগ করে নেওয়ার জন্য দুটি রেডিও ফর্ম ইনপুট ধারণ করে name মান – ক রেডিও গ্রুপ।

<div class="items flat-white">
  <input type="radio" name="r3" title="Flat White">
  <input type="radio" name="r3" title="Flat White">
</div>

আপনি যখন কোনও দুজনে একটিতে চেক করেন, অন্যটি স্বয়ংক্রিয়ভাবে চেক করা যায় না, যা চেকের একটি দেখার দিকে পরিচালিত করে এবং দুজনের মধ্যে চেক করা যায় না, কোনটি ক্লিক করা হয় না।

প্রতিটি আইটেম (বা রেডিও গ্রুপ) একেবারে অবস্থিত, যেমন এটিতে দুটি ইনপুট রয়েছে:

.items {   
  position: absolute;

  input { 
    position: absolute; 
    inset: 0; 
  }
}

দ্য inset সম্পত্তি পুরো স্থানটি cover াকতে ইনপুটগুলি প্রসারিত করছে, নিশ্চিত করে যে তারা তাদের চারপাশের কোনও মৃত অঞ্চল ছাড়াই ক্লিকযোগ্য।

এখন আমরা একটি লেআউটে সবকিছু সাজিয়ে তুলি। আমরা ব্যবহার করব translate একক বিন্দু থেকে আইটেমগুলি (যেখানে কেন্দ্রিক কার্টটি রয়েছে) থেকে অন্য পয়েন্টে সরানো যা একটি লিট উচ্চতর এবং ছড়িয়ে পড়ে। আপনি যেভাবেই পছন্দ করেন এই লেআউটটি কোড করতে পারেন, যতক্ষণ না অভ্যন্তরের রেডিও বোতামগুলি নির্বাচিত হওয়ার সময় কার্টে তাদের পথ তৈরি করতে পারে।

.items {
  --y: 100px; /* Vertical distance from the cart */

  &:not(.cart) {
    transform: translate(var(--x), calc(-1 * var(--y)));
  }
  &.espresso { 
    --x: 0px;  /* Horizontal dist. from the cart */
  }
  &.cappuccino { 
    --x: -100%; 
  }
  &.flat-white { 
    --x: 100%; 
  }
}

সুতরাং, হ্যাঁ, আপনার নির্দিষ্ট ব্যবহারের ক্ষেত্রে ঠিক জিনিসগুলি পেতে কিছুটা কনফিগারেশন। এটা একটু যাদু নম্বর যে সম্ভবত অন্য একটি পদ্ধতি দূরে দূরে যেতে পারে।

আইটেম নির্বাচন করা

যখন একটি আইটেম (<input>) নির্বাচিত হয় (:checked), এটি সঙ্কুচিত এবং সরানো (translate) যেখানে কার্টটি রয়েছে:

input:checked {
  transform: translate(calc(-1 * var(--x)), var(--y)) scale(0);
}

হুডের নীচে যা ঘটে তা হ’ল গ্রুপে দ্বিতীয় রেডিও ইনপুট চেক করা হয়েছেযা সঙ্গে সঙ্গে আনচেকস গ্রুপে প্রথম ইনপুট, তারা একই ভাগ করে নেওয়ার জন্য ধন্যবাদ name এইচটিএমএলে বৈশিষ্ট্য। এটি আমাদের কিছুটা বুলিয়ান যুক্তি দেয় চেকবক্স হ্যাক যে আমরা রূপান্তরটি ট্রিগার করতে ব্যবহার করতে পারি।

সুতরাং, যদি সিএসএসের শেষ বিটটি নির্বাচিত আইটেমটিকে শপিং কার্টে সরিয়ে দেয় তবে আমাদের একটি দরকার transition এটি অ্যানিমেট করতে। অন্যথায়, আইটেম বাছাইটি নিজেকে না বলেই স্টার ট্রেক স্টাইলটি নিজেকে জ্যাপ করে।

input:checked{
  transform: translate(calc(-1 * var(--x)), var(--y)) scale(0);
  transition: transform .6s linear;
}

গণনা রাখা

এই পোস্টের পুরো পয়েন্টটি কার্টে একটি নির্বাচিত আইটেম পাচ্ছে। কমপক্ষে এই ডেমোর উদ্দেশ্যে কথা বলার মতো কোনও “কার্ট” পৃষ্ঠা নেই। সুতরাং, আমি ভেবেছিলাম কার্টে কতগুলি আইটেম যুক্ত করা হয়েছে তা দেখানো ভাল ধারণা হবে। কাউন্ট সহ একটি সামান্য লেবেল কৌশলটি করা উচিত।

let n = 0;
const CART_CNT = document.querySelector("output");
document.querySelectorAll("(type="radio")").forEach(radio => {
  radio.onclick = () => {
    CART_CNT.innerText = ++n;
    CART_CNT.setAttribute("arial-label", `${n}`)
  }
});

মূলত, আমরা কার্ট অবজেক্টটি নির্বাচন করছি (দ্য <output> উপাদান) এবং, প্রতিটি রেডিও ইনপুটটিতে প্রতিটি ক্লিকের জন্য, আমরা একটি পূর্ণসংখ্যা বাড়িয়ে তুলি যা গণনাটি উপস্থাপন করে, যা লেবেল হিসাবে শপিং কার্ড আইকনে চড় মারছে। দুঃখিত, এই উদাহরণের জন্য কার্ট থেকে কোনও আইটেম অপসারণ করা হচ্ছে না … আপনি সম্পূর্ণরূপে লক হয়ে গেছেন 😅 😅

অ্যাক্সেসযোগ্যতা?

সত্যিই, আমি এটির সাথে কুস্তি করেছি এবং সম্ভবত এই ডেমোটি স্ক্রিন পাঠকদের দ্বারা ধারাবাহিকভাবে পড়ার কোনও বুলেটপ্রুফ উপায় নেই। আমরা প্রতিটি গ্রুপে দুটি ইন্টারেক্টিভ উপাদান নিয়ে কাজ করছি এবং তাদের রাজ্যগুলিকে টগল করার সময় তারা কীভাবে সহায়ক প্রযুক্তির মুখোমুখি হয় তা জাগ্রত করতে হবে। যেমনটি হ’ল, এমন কিছু ক্ষেত্রে রয়েছে যেখানে কোনও আইটেমটিতে টগল করার সময় একটি রেডিও ইনপুট পড়তে হয় এবং অন্য ইনপুটটি আবার টগল করার সময় পড়া হয়। অন্যান্য ক্ষেত্রে, গ্রুপগুলির উভয় ইনপুট ঘোষণা করা হয়, যা প্রতিটি গ্রুপে একাধিক বিকল্পের পরামর্শ দেয় যখন কেবল একটি থাকে।

আমি একটি লুকানো যুক্ত করেছি <span> মার্কআপে যা কীবোর্ড ইন্টারঅ্যাকশন দিয়ে নির্দেশের ফর্ম হিসাবে প্রকাশিত হয়। আমি একটিও সন্নিবেশ করিয়েছি aria-label উপর <output> এটি যুক্ত হওয়ার সাথে সাথে মোট কার্ট আইটেমের সংখ্যা ঘোষণা করে।

এখানে আবার চূড়ান্ত ডেমো:

পরিবর্তে ভিউ ট্রানজিশনগুলি ব্যবহার করবেন?

আমি এই কৌশলটি ভাগ করতে চেয়েছিলাম কারণ আমি মনে করি এটি একটি চতুর পদ্ধতি যা প্রথম নজরে তাত্ক্ষণিকভাবে সুস্পষ্ট নয়। তবে এটি এমন পরিস্থিতির মতো গন্ধযুক্ত যেখানে আধুনিক ট্রানজিশন এপিআই দেখুন প্রাসঙ্গিক হতে পারে।

অ্যাড্রিয়ান বেক একটি স্ম্যাশিং ম্যাগাজিনের টুকরোতে এটি সম্পর্কে সমস্ত লিখেছেন। প্রকৃতপক্ষে, তার উদাহরণটি ঠিক একই: একটি শপিং কার্টে যুক্ত হওয়া আইটেমগুলি অ্যানিমেট করা। এ সম্পর্কে দুর্দান্তটি হ’ল এটি রূপান্তরটি তৈরি করতে কেবল দুটি উপাদান লাগে: আইটেম এবং কার্টের লেবেল। সিএসএস ব্যবহার করে আমরা এই উপাদানগুলিকে একটি দিয়ে আপ করতে পারি view-transition-nameসংজ্ঞায়িত ক @keyframes আইটেমটি সরানোর জন্য অ্যানিমেশন, তারপরে ক্লিক করুন এটি ট্রিগার করুন। কোনও সদৃশ উপাদান বা রাষ্ট্রীয় জাগ্রত করার দরকার নেই!

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

তবে আপনার যদি একটি যুক্ত করার দরকার হয় অসীম আইটেমের সংখ্যা এবং ভিউ ট্রানজিশন এপিআই সুযোগের বাইরে, তবে সম্ভবত এই রেডিও ইনপুট পদ্ধতির বিষয়টি বিবেচনা করার মতো।