Tips Keranjang Belanja Tombol Tunggal – Beragampengetahuan

Catatan Editor: Ini adalah ide yang sangat pintar, Preethi dibagikan, tetapi Anda juga akan melihatnya dengan kekurangan aksesibilitas karena menggunakan elemen interaktif berulang. Seperti yang disebutkan Preethi, ada cara lain untuk menangani hal semacam ini, dan kita akan melihat salah satunya dalam artikel mendatang.

Dua pizza besar Anda sendiri, atau dua belas pizza kecil untuk pertemuan anak -anak – semua orang menjalani proses menambahkan barang ke keranjang belanja online. bahan makanan. pakaian. Pesanan deli. Ini bagus ketika prosesnya sederhana, efisien, dan bahkan sedikit unik.

Posting ini mencakup desain yang disebut Unlimited Choice. metafora tak terbatas.

Begini cara kerjanya:

Ya, Anda mengklik item dan melompat langsung ke gerobak dengan transisi ramping yang muncul. Anda dapat menambahkan sebanyak mungkin item yang Anda inginkan!

Dan coba tebak: semua ini dilakukan dalam CSS – yah, kecuali menjaga bagian dari jumlah item yang dipilih – yang diperlukan hanyalah kombinasi dari input bentuk radio dalam penanda.

Saya akan mulai dengan tata letak, sehingga memandu Anda melalui kode, tetapi sebelum itu, saya ingin mengatakan bahwa ini hanya jalan. Yang pasti, ada cara lain untuk menyelesaikan masalah ini, dan pendekatan khusus ini datang dengan pertimbangan dan keterbatasan kita sendiri.

tata letak

Setiap proyek (atau produk, apa pun yang ingin Anda sebut) adalah pembungkus yang berisi dua input formulir radio yang berbagi pembungkus yang sama name nilai – Grup radio.

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

Ketika Anda memeriksa satu di duo, yang lain secara otomatis tidak akan dicentang, mengakibatkan memeriksa dan menghapus centang di antara keduanya, terlepas dari mana yang diklik.

Hal yang sama berlaku untuk setiap item (atau grup radio) posisi absolut, yang berisi dua input:

.items {   
  position: absolute;

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

ini inset Properti adalah input peregangan untuk menutupi seluruh ruang untuk memastikan mereka dapat diklik tanpa meninggalkan zona mati di sekitarnya.

Sekarang, kami menempatkan semuanya di tata letak. Kami akan menggunakan translate Pindahkan item dari satu titik (di mana gerobak tengah berada) ke titik lain, yang lebih tinggi dan menyebar. Ngomong -ngomong, Anda dapat menyandikan tata letak ini, selama tombol radio internal dapat memasukkan keranjang saat dipilih.

.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%; 
  }
}

Jadi ya, sedikit konfigurasi dapat membuat segalanya berfungsi untuk kasus penggunaan spesifik Anda. Berikut adalah beberapa angka ajaib, mungkin cara lain untuk mengabstraksikannya.

Pilih proyek

Saat proyek (<input>)memilih(:checked), menyusut dan bergerak (translate) Pergi ke Lokasi Keranjang Belanja:

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

Apa yang terjadi di bawah kap adalah input radio kedua dari grup adalah meneliti,langsung Hapus centang Karena mereka memiliki fakta yang sama, input pertama grup name Properti di HTML. Ini memberi kami beberapa logika boolean dan peretasan kotak centang yang dapat kami gunakan untuk memicu transisi.

Jadi jika titik terakhir CSS memindahkan item yang dipilih ke gerobak, maka kita membutuhkannya transition Animasi. Kalau tidak, proyek ini agak memudar, gaya Star Trek tanpa Anda katakan.

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

Tetap menghitung

Inti dari posting ini adalah untuk mentransfer item yang dipilih ke keranjang. Paling tidak ada halaman “kargo” yang bisa dikatakan untuk tujuan demonstrasi ini. Jadi, saya pikir itu ide yang bagus untuk menunjukkan berapa banyak item yang telah ditambahkan ke kereta. Tag kecil yang dihitung harus menyelesaikan masalah.

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}`)
  }
});

Pada dasarnya, kami memilih objek keranjang belanja ( <output> Elemen), untuk setiap klik pada input radio, kami menambahkan bilangan bulat yang mewakili jumlah, yang difoto pada label pada ikon kartu belanja. Maaf, item tidak dihapus dari keranjang dalam contoh ini … Anda benar -benar terkunci.

Aksesibilitas?

Sejujurnya, saya melawan ini dan mungkin tidak ada cara anti peluru untuk membuat pembaca layar membaca demo ini secara konsisten. Kami bekerja dengan dua elemen interaktif di setiap kelompok dan perlu berurusan dengan teknologi bantu saat mengganti keadaan mereka. Bahkan, dalam beberapa kasus, membaca input radio ke dalam proyek akan membaca satu input radio dan yang lain akan dibaca saat beralih kembali ke proyek itu. Dalam kasus lain, dua input dalam grup diumumkan, yang menunjukkan bahwa hanya ada satu opsi per grup.

Saya menambahkan yang tersembunyi <span> Dalam tag menggunakan interaksi keyboard sebagai instruksi. Saya memasukkannya juga aria-label ada <output> Ini mengumumkan jumlah total item gerobak tambahan.

Ini sekali lagi demonstrasi terakhir:

Mungkin menggunakan tampilan transisi?

Saya ingin berbagi trik ini karena saya pikir ini adalah pendekatan yang cerdas yang tampaknya tidak jelas pada pandangan pertama. Tapi itu juga berbau seperti situasi di mana API transisi tampilan modern mungkin relevan.

Adrian Bece menulis semuanya di majalah yang dihancurkan. Bahkan, teladannya persis sama: menambahkan item ke gerobak. Sangat menyenangkan hanya memiliki dua elemen untuk membangun transisi: proyek dan tag keranjang. Menggunakan CSS kita dapat menggunakan elemen -elemen ini untuk view-transition-nametentukan a @keyframes Animasi digunakan untuk memindahkan proyek dan kemudian memicu saat diklik. Tidak ada elemen berulang atau juggling negara!

Juga, jika Anda hanya menggunakan beberapa item, maka mungkin input kotak centang adalah cara lain yang mungkin hanya memerlukan satu elemen. Kelemahannya, tentu saja, adalah membatasi berapa banyak item yang dapat Anda tambahkan.

Namun, jika Anda perlu menambahkan tak terbatas Jumlah item dan ruang lingkup API transisi tampilan tidak di luar jangkauan, jadi metode input radio ini patut dipertimbangkan.