Nota del editor: Esta es una idea muy inteligente, Preethi compartida, pero también la verá con fallas de accesibilidad porque utiliza elementos interactivos repetidos. Como mencionó Preethi, hay otras formas de lidiar con este tipo de cosas, y veremos uno de ellos en futuros artículos.
Dos de sus propias pizzas grandes, o doce pequeñas pizzas para reuniones para niños: todos pasan por el proceso de agregar artículos al carrito de compras en línea. comestibles. ropa. Órdenes de delicatessen. Esto es genial cuando el proceso es simple, eficiente e incluso un poco peculiar.
Esta publicación cubre un diseño llamado Unlimited Choice. metáfora ilimitado.
Así es como funciona:
Sí, haces clic en un elemento y saltas directamente al carrito con una transición elegante que aparece. ¡Puedes agregar tantos elementos como quieras!
Y adivina qué: todo esto se hace en CSS, bueno, excepto mantener la parte del número de elementos seleccionados, todo lo que se necesita es una combinación de entradas de forma de radio en el marcador.
Comenzaré con el diseño, guiándote así a través del código, pero antes de eso, quiero decir que esto es solo una forma. Sin duda, hay otras formas de resolver este problema, y este enfoque particular viene con nuestras propias consideraciones y limitaciones.
disposición
Cada proyecto (o producto, como quiera llamarlo) es un envoltorio que contiene dos entradas de forma de radio que comparten el mismo envoltorio name valor – Grupo de radio.
<div class="items flat-white">
<input type="radio" name="r3" title="Flat White">
<input type="radio" name="r3" title="Flat White">
</div>Cuando verifica uno en un dúo, el otro no se controla automáticamente, lo que dará como resultado verificar y desmarcar entre los dos, independientemente de en qué se haga clic.
Lo mismo es cierto para cada posición absoluta de elemento (o grupo de radio), que contiene dos entradas:
.items {
position: absolute;
input {
position: absolute;
inset: 0;
}
}este inset Las propiedades son entradas para cubrir todo el espacio para asegurarse de que se puedan hacer clic sin dejar las zonas muertas a su alrededor.
Ahora, estamos colocando todo en el diseño. Usaremos translate Mueva el artículo desde un solo punto (donde se encuentra el carrito central) a otro punto, que es más alto y se propaga. De todos modos, puede codificar este diseño, siempre que los botones de radio internos puedan ingresar al carrito cuando se seleccione.
.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%;
}
}Entonces, sí, un poco de configuración puede hacer que las cosas funcionen para su caso de uso específico. Algo Número mágico Tal vez otra forma de desaparecer de manera abstracta.
Seleccione un proyecto
Cuando el proyecto (<input>)elegir(:checked), se encoge y se mueve (translate) Vaya a la ubicación del carrito de compras:
input:checked {
transform: translate(calc(-1 * var(--x)), var(--y)) scale(0);
}Lo que sucede debajo del capó es que la segunda entrada de radio del grupo es examinar,inmediatamente Desactivar Porque comparten el mismo hecho, la primera entrada del grupo name Propiedades en HTML. Esto nos da una lógica booleana Hack de casilla de verificación Podemos usarlo para activar la transición.
Entonces, si el último punto de CSS mueve el elemento seleccionado al carrito, entonces necesitamos uno transition Animación. De lo contrario, el proyecto se desvanece, estilo Star Trek sin que usted diga.
input:checked{
transform: translate(calc(-1 * var(--x)), var(--y)) scale(0);
transition: transform .6s linear;
}Mantener la cuenta
El objetivo de esta publicación es transferir elementos seleccionados al carrito. No hay una página de «carga» para decir al menos para esta demostración. Entonces, creo que es una buena idea mostrar cuántos artículos se han agregado al carrito. Las etiquetas pequeñas contadas deben resolver el problema.
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}`)
}
});Básicamente, estamos eligiendo un objeto de carrito de compras ( <output> Elemento), para cada clic en la entrada de radio, agregamos un entero que representa el recuento, que se fotografia en la etiqueta en el icono de la tarjeta de compra. Lo siento, el artículo no fue eliminado del carrito en este ejemplo … está completamente bloqueado.
¿Accesibilidad?
Honestamente, luché contra esto y podría no haber una forma a prueba de balas de mantener al lector de pantalla leyendo esta demostración de manera consistente. Estamos trabajando con dos elementos interactivos en cada grupo y necesitamos lidiar con la tecnología de asistencia al cambiar su estado. De hecho, en algunos casos, leer una entrada de radio en un proyecto leerá una entrada de radio y otra se leerá al volver a ese proyecto. En otros casos, se anunciaron dos entradas en el grupo, lo que sugiere que solo hay una opción por grupo.
Agregué uno oculto <span> En etiquetas que usan la interacción del teclado como instrucciones. Yo también lo inserté aria-label existir <output> Esto anuncia el número total de artículos de carrito adicional.
Esta es nuevamente la demostración final:
¿Quizás usar la transición de la vista?
Quiero compartir este truco porque creo que es un enfoque inteligente que no parece obvio a primera vista. Pero también huele a una situación moderna Ver la API de transición Probablemente relacionado.
Adrian Bece escribió todo en una revista aplastada. De hecho, su ejemplo es exactamente el mismo: agregar elementos al carrito. Es bueno tener solo dos elementos para construir una transición: el proyecto y la etiqueta del carrito. Usando CSS podemos usar estos elementos para view-transition-namedefinir un @keyframes La animación se usa para mover el proyecto y luego activarlo cuando se hace clic. ¡No hay elementos repetitivos o malabares con el estado!
Además, si está utilizando solo unos pocos elementos, entonces la entrada de la casilla de verificación es otra forma que podría requerir un elemento. La desventaja, por supuesto, es que limita cuántos elementos puede agregar.
Sin embargo, si necesita agregar ilimitado El número de elementos y el alcance de la API de transición View no están fuera de rango, por lo que vale la pena considerar este método de entrada de radio.
