This code snippet helps you to create an E-commerce shop card. It defines two functions mostrarProductos and detallesRapidos. The former function takes an array of data datos and maps over it to generate a card for each object in the array. The data in each object is used to set the content of the card, and a few class names are added to the card based on the values in the object. The resulting HTML is appended to a container element.
The detallesRapidos function is used to generate a modal window with more detailed information about a product. It takes an object datos and uses the data within it to populate the modal. This function creates and appends HTML elements to the page, which display the details of the product when the modal is opened.
How to Create E-Commerce Shop Card with Zoom View in jQuery
Create the HTML structure for the shop card as follows:
<section class="cards">
<div class="container">
<div class="contenedorCards"></div>
</div>
</section>
<!--
- Para una mejor experiencia miralo en FullPageView.
- El objetivo principal es mostrar el zoom en la imagen de la modal de preview, para ello da click en el boton de la "Vista Rapida" y luego al boton de "Ampliar imagen".
-->
Now, style the shop card using the following CSS styles:
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;900&display=swap");
:root {
--currencyPrefix: "$";
}
body {
overflow-x: hidden;
color: #666;
padding: 0;
margin: 0 auto;
}
body * {
font-family: "Inter", sans-serif;
}
@media only screen and (max-width: 480px) {
body * {
cursor: default !important;
}
}
body p {
margin: 0;
}
body a {
color: #666;
text-decoration: none;
}
body ul, body li {
padding: 0;
margin: 0;
list-style-type: none;
}
@keyframes anim_toCartCantidad {
0%, 100% {
transform: translateY(0);
opacity: 1;
}
50% {
transform: translateY(-50%);
opacity: 0;
}
51% {
transform: translateY(50%);
opacity: 0;
}
}
@keyframes anim_favsHeart {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
}
.disabled {
opacity: 0.5;
cursor: not-allowed !important;
}
.disabled * {
pointer-events: none !important;
}
.component_toCartCantidad {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
border-radius: 100px;
border: 1px solid #eee;
}
.component_toCartCantidad .toCartBoton {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
width: 40px;
height: 40px;
color: #121618;
border-radius: 50%;
background-color: #eee;
position: relative;
cursor: pointer;
}
.component_toCartCantidad .toCartBoton.menos:after {
display: none;
}
.component_toCartCantidad .toCartBoton:before, .component_toCartCantidad .toCartBoton:after {
content: "";
position: absolute;
width: calc(100% - 30px);
height: 2px;
background-color: currentColor;
}
.component_toCartCantidad .toCartBoton:after {
transform: rotate(90deg);
}
.component_toCartCantidad .toCartCantidad {
min-width: 50px;
font-size: 20px;
font-weight: 900;
user-select: none;
}
.component_toCartCantidad .toCartCantidad.animacion {
animation: anim_toCartCantidad 0.2s;
}
.component_toCartCantidad .toCartCantidad.animacion-reverse {
animation: anim_toCartCantidad reverse 0.2s;
}
.boton {
display: block;
padding: 10px 20px;
color: #fff;
font-size: 12px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 50px;
background-color: #232f3d;
transition: ease all 0.3s;
cursor: pointer;
}
.boton:hover {
transform: translateY(-5px);
box-shadow: 0 10px 10px 0 rgba(18, 22, 24, 0.1);
}
.botonTextoIcono {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
color: #fff;
font-size: 12px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 50px;
background-color: #232f3d;
cursor: pointer;
overflow: hidden;
position: relative;
}
.botonTextoIcono:hover .labelBoton {
transform: translateY(-100%);
}
.botonTextoIcono:hover .icono {
bottom: 50%;
transform: translateY(50%);
}
.botonTextoIcono .labelBoton {
margin-bottom: 0;
padding: 10px 20px;
transition: ease all 0.2s;
}
.botonTextoIcono .icono {
position: absolute;
bottom: 0;
color: #fff;
width: 25px;
height: 25px;
transform: translateY(100%);
transition: ease all 0.2s;
}
.botonTextoIcono .icono svg path, .botonTextoIcono .icono svg circle {
fill: none;
stroke-width: 4;
stroke: currentColor;
stroke-miterlimit: 10;
}
.botonIcono {
border-radius: 50px;
color: #232f3d;
border: 1px solid #232f3d;
cursor: pointer;
transition: ease all 0.3s;
}
.botonIcono .icono {
width: 20px;
height: 20px;
padding: 10px;
}
.botonIcono .icono svg path, .botonIcono .icono svg circle {
fill: transparent;
stroke-width: 2;
stroke: currentColor;
stroke-miterlimit: 10;
transition: ease all 0.3s;
}
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
width: 100%;
min-height: 100vh;
max-width: 1600px;
margin: 0 auto;
}
.cards .container {
width: 90%;
margin: 0 auto;
padding: 20px 0;
}
.cards .container .contenedorCards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
}
.card {
width: 25%;
min-width: 300px;
}
.card .innerProd {
height: calc(100% - 20px);
margin: 10px;
border-radius: 5px;
display: block;
border: 1px solid #eee;
background-color: #fff;
overflow: hidden;
user-select: none;
transition: ease all 0.3s;
}
.card .innerProd:hover {
box-shadow: 0 5px 10px 0 rgba(18, 22, 24, 0.2);
}
.card .innerProd .imgWrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
width: 100%;
height: 200px;
box-sizing: border-box;
background-color: #eee;
position: relative;
}
.card .innerProd .imgWrapper:hover .imgProd {
transform: scale(0.8);
}
.card .innerProd .imgWrapper:hover .detalleRapido {
width: 100%;
height: 100%;
opacity: 1;
}
.card .innerProd .imgWrapper .detalleRapido {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 90%;
height: 90%;
padding: 20px;
opacity: 0;
color: #fff;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: rgba(18, 22, 24, 0.9);
box-sizing: border-box;
overflow: hidden;
cursor: pointer;
z-index: 1;
transition: ease all 0.3s;
}
.card .innerProd .imgWrapper .detalleRapido .icono {
width: 35px;
height: 35px;
margin-bottom: 5px;
}
.card .innerProd .imgWrapper .detalleRapido .icono svg path, .card .innerProd .imgWrapper .detalleRapido .icono svg circle {
fill: none;
stroke: currentColor;
}
.card .innerProd .imgWrapper .imgProd {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: calc(100% - 20px);
height: calc(100% - 20px);
margin: 10px;
transition: ease all 0.3s;
}
.card .innerProd .info {
padding: 20px 10px;
text-align: center;
display: block;
height: 180px;
box-sizing: border-box;
}
.card .innerProd .info .prodName {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
margin: 0 auto;
margin-bottom: 10px;
color: #121618;
font-weight: 600;
}
.card .innerProd .info .prodDesc {
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
margin: 0 auto;
max-width: 80%;
font-size: 12px;
margin-bottom: 10px;
}
.card .innerProd .info .precios {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
align-content: center;
}
.card .innerProd .info .precios .precio, .card .innerProd .info .precios .infoRapidaModal .modalContainer .topContent .texto .wrapper .precioOferta, .infoRapidaModal .modalContainer .topContent .texto .wrapper .card .innerProd .info .precios .precioOferta {
font-size: 25px;
font-weight: 600;
color: #232f3d;
}
.card .innerProd .info .precios .precio:before, .card .innerProd .info .precios .infoRapidaModal .modalContainer .topContent .texto .wrapper .precioOferta:before, .infoRapidaModal .modalContainer .topContent .texto .wrapper .card .innerProd .info .precios .precioOferta:before {
content: var(--currencyPrefix);
font-size: 18px;
text-transform: uppercase;
}
.card .innerProd .info .precios .stock {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
align-content: center;
font-size: 14px;
font-weight: 600;
text-align: right;
}
.card .innerProd .info .precios .stock.out:before {
background-color: red;
}
.card .innerProd .info .precios .stock:before {
content: "";
width: 10px;
height: 10px;
min-width: 10px;
margin-right: 5px;
border-radius: 50%;
background-color: green;
}
.card .innerProd .info .precios .precioOriginal {
color: red;
font-weight: 600;
text-align: right;
text-decoration: line-through;
}
.card .innerProd .info .precios .precioOriginal:before {
content: var(--currencyPrefix);
font-size: 14px;
text-transform: uppercase;
}
.card .innerProd .actions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
padding: 20px 10px;
}
.card .innerProd .actions .boton {
margin-bottom: 30px;
padding: 10px 20px;
color: #fff;
font-size: 14px;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 50px;
background-color: #232f3d;
cursor: pointer;
transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) all 0.5s;
}
.card .innerProd .actions .boton:hover {
transform: translateY(-5px);
box-shadow: 0 5px 10px 0 rgba(18, 22, 24, 0.5);
}
.card .innerProd .actions .row-buttons {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
align-content: center;
width: 100%;
}
.card .innerProd .actions .row-buttons .checkBox {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
position: relative;
cursor: pointer;
}
.card .innerProd .actions .row-buttons .checkBox input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
z-index: 1;
cursor: pointer;
}
.card .innerProd .actions .row-buttons .checkBox input:checked ~ .icon:after {
width: 80%;
height: 80%;
}
.card .innerProd .actions .row-buttons .checkBox .icon {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
width: 20px;
height: 20px;
margin-right: 5px;
border-radius: 50%;
border: 1px solid #232f3d;
position: relative;
}
.card .innerProd .actions .row-buttons .checkBox .icon:after {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
content: "✓";
position: absolute;
width: 0;
height: 0;
color: #fff;
font-size: 10px;
border-radius: 50%;
background-color: #47d3e6;
transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) all 0.3s;
}
.card .innerProd .actions .row-buttons .checkBox .checkBoxLabel {
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
.card .innerProd .actions .row-buttons .favoritos {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
}
.card .innerProd .actions .row-buttons .favoritos:after {
content: "A favoritos";
}
.card .innerProd .actions .row-buttons .favoritos.esFav:after {
content: "En favoritos";
}
.card .innerProd .actions .row-buttons .favoritos.esFav .icono {
animation: anim_favsHeart 0.2s linear;
}
.card .innerProd .actions .row-buttons .favoritos.esFav .icono svg path {
fill: red;
}
.card .innerProd .actions .row-buttons .favoritos .icono {
width: 20px;
height: 20px;
margin-right: 5px;
color: red;
}
.card .innerProd .actions .row-buttons .favoritos .icono svg {
overflow: hidden;
}
.card .innerProd .actions .row-buttons .favoritos .icono svg path {
fill: transparent;
stroke: currentColor;
stroke-width: 2;
stroke-miterlimit: 10;
transition: ease all 0.3s;
}
.infoRapidaModal {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(18, 22, 24, 0.8);
z-index: 1000;
}
.infoRapidaModal .closeModal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.infoRapidaModal .modalContainer {
width: 90%;
margin: 0 auto;
max-width: 1000px;
background-color: #fff;
position: relative;
}
.infoRapidaModal .modalContainer .topContent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
align-content: center;
width: 100%;
}
.infoRapidaModal .modalContainer .topContent .imagenContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
width: 50%;
min-height: 500px;
background-color: #eee;
box-sizing: border-box;
position: relative;
}
.infoRapidaModal .modalContainer .topContent .imagenContainer .zoomWatch {
position: absolute;
top: 20px;
left: 20px;
width: 20px;
height: 20px;
padding: 15px;
border-radius: 50%;
color: #121618;
background-color: #fff;
box-shadow: 0 0 10px 0 rgba(18, 22, 24, 0.1);
z-index: 1;
cursor: pointer;
}
.infoRapidaModal .modalContainer .topContent .imagenContainer .zoomWatch svg path {
fill: none;
stroke-width: 2;
stroke: currentColor;
stroke-miterlimit: 10;
}
.infoRapidaModal .modalContainer .topContent .imagenContainer .wrapperImg {
width: 100%;
height: 100%;
padding: 50px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.infoRapidaModal .modalContainer .topContent .imagenContainer .wrapperImg .imagen {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.infoRapidaModal .modalContainer .topContent .imagenContainer .wrapperImg .zoom_lupa {
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
background-color: #fff;
border: 1px solid rgba(18, 22, 24, 0.2);
box-sizing: border-box;
cursor: move;
}
.infoRapidaModal .modalContainer .topContent .imagenContainer .zoomImg {
display: none;
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
background-color: #fff;
overflow: hidden;
z-index: 1;
}
.infoRapidaModal .modalContainer .topContent .imagenContainer .zoomImg .zoom {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.infoRapidaModal .modalContainer .topContent .texto {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
width: 50%;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
align-content: center;
padding: 50px 20px;
text-align: center;
max-height: 90vh;
overflow: auto;
box-sizing: border-box;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .actions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
margin: 30px auto;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .actions .botonTextoIcono {
margin: 0 10px 0 20px;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .actions .botonIcono.esFav {
color: red;
border-color: currentColor;
background-color: currentColor;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .actions .botonIcono.esFav:hover path, .infoRapidaModal .modalContainer .topContent .texto .wrapper .actions .botonIcono.esFav:hover circle {
fill: #fff;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .actions .botonIcono.esFav path, .infoRapidaModal .modalContainer .topContent .texto .wrapper .actions .botonIcono.esFav circle {
fill: #fff;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .actions .botonIcono:hover path, .infoRapidaModal .modalContainer .topContent .texto .wrapper .actions .botonIcono:hover circle {
fill: red;
stroke: red;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper p {
font-size: 14px;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .bold {
font-weight: 600;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .nombre {
font-size: 25px;
font-weight: 900;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .precios {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
margin: 10px auto;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .precio, .infoRapidaModal .modalContainer .topContent .texto .wrapper .precioOferta {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
align-content: center;
font-size: 30px;
font-weight: 900;
color: #232f3d;
margin-bottom: 0;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .precio:before, .infoRapidaModal .modalContainer .topContent .texto .wrapper .precioOferta:before {
font-size: 20px;
content: var(--currencyPrefix);
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .precioOferta {
color: red;
font-size: 20px;
margin-left: 10px;
text-decoration: line-through;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .stock {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
align-content: center;
margin-bottom: 5px;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .stock.out:before {
background-color: red;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .stock:before {
content: "";
width: 10px;
height: 10px;
min-width: 10px;
margin-right: 5px;
border-radius: 50%;
background-color: green;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .boton {
margin-top: 30px;
}
@media only screen and (max-width: 768px) {
.infoRapidaModal .modalContainer .topContent .imagenContainer, .infoRapidaModal .modalContainer .topContent .texto {
width: 100%;
}
.infoRapidaModal .modalContainer .topContent .imagenContainer {
min-height: 250px;
}
.infoRapidaModal .modalContainer .topContent .imagenContainer .zoomWatch {
display: none;
}
.infoRapidaModal .modalContainer .topContent .imagenContainer .wrapperImg {
padding: 10px;
}
.infoRapidaModal .modalContainer .topContent .imagenContainer .zoomImg {
top: 100%;
left: 0;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper {
max-height: calc(90vh - 250px);
padding: 20px;
}
}
@media only screen and (max-width: 480px) {
.infoRapidaModal .modalContainer .topContent .imagenContainer {
min-height: 200px;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper {
max-height: calc(90vh - 200px);
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .nombre {
font-size: 20px;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .actions {
flex-direction: column;
width: 100%;
margin: 20px auto;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .actions .botonTextoIcono {
margin: 20px auto 0 auto;
}
.infoRapidaModal .modalContainer .topContent .texto .wrapper .actions .botonIcono {
position: absolute;
top: 10px;
right: 10px;
}
}
Load the following scripts before closing the body tag:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
Add the following JavaScript function:
$(function(){
//Datos de prueba
const datosCards = [
{
id: 1,
imagen: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/producto1.png?alt=media&token=915bea59-e6c2-4474-bc72-abc1c47ef1c7',
nombre: 'Tarjeta de video Gigabyte GTX 1650 D6 OC 4GB GDDR6',
descripcionCorta: 'Graphics Processing GeForce® GTX 1650 Core Clock',
descripcionLarga: 'Alimentado por la arquitectura GeForce GTX 1650 NVIDIA Turing y GeForce Experience Integrado con 4 GB GDDR6 128 bit interfaz de memoria WINDFORCE 2X Sistema de enfriamiento con ventiladores giratorios alternativos de 80 mm ventiladores de hoja únicos Core Clock: 1710 MHz',
precio: 5000,
precioOferta: 4399,
existencia: true,
codigoProducto: 'H410M-APRO'
},
{
id: 2,
imagen: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/producto2.png?alt=media&token=0d966e78-66be-43bd-a21b-98007831b9f6',
nombre: 'Teclado mecanico para gaming Hyperex Alloy origins RGB',
descripcionCorta: 'HyperX Alloy Origins mecánico Tenkeyless para Gaming RGB',
descripcionLarga: 'Es un teclado compacto y robusto que cuenta con interruptores mecánicos diseñados para brindarle a los gamers la mejor combinación de estilo, rendimiento y confiabilidad. Estos interruptores mecánicos tienen LEDs expuestos para lograr una iluminación impresionante con una fuerza de accionamiento y una distancia de trayectoria equilibrada para obtener un alto nivel de respuesta y exactitud. Alloy Origins está construido con un cuerpo de aluminio sólido que lo mantiene rígido y estable cuando la acción lo requiera, y te permitirá elegir entre tres niveles diferentes de inclinación. Su diseño elegante y compacto deja más espacio para el movimiento del mouse y también cuenta con un cable USB tipo C extraíble para una mejor portabilidad.',
precio: 1280,
existencia: true,
codigoProducto: 'AS13C-RAWQ'
},
{
id: 3,
imagen: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/producto3.png?alt=media&token=453593c9-9630-4de0-8ba4-a3a780a1cc6a',
nombre: 'Headset para gaming Hyperx Cloud Stringer S 7.1 CH con Mic USB',
descripcionCorta: 'Conexión inalámbrica de 2,4Ghz y almohadillas resistentes',
descripcionLarga: 'Los audífonos HyperX Cloud Stinger™ son audífonos con licencia oficial PS4 y son ideales para gamers que buscan confort, calidad de sonido superior y una mayor comodidad. Son livianos y cuentan con memory foam original de HyperX, lo que permite brindar un nivel de confort legendario durante sesiones maratónicas de juego. Sus orejeras giratorias de 90 grados pueden descansar cómodamente alrededor de tu cuello durante los descansos.',
precio: 1348,
precioOferta: 765,
existencia: false,
codigoProducto: '43REQ-TYI1'
},
{
id: 4,
imagen: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/producto4.png?alt=media&token=6c0ae77e-e48a-4b49-babc-0fc1023aa66a',
nombre: 'Tarjeta madre Gigabyte B550M-DS3H Ryzen 3000 series Matx',
descripcionCorta: 'Soporta AMD 3rd Gen Ryzen™ y 3rd Gen Ryzen™ con Radeon™ GPU',
descripcionLarga: 'Las placas base de la serie GIGABYTE UD utilizan un diseño MOSFET PWM + Low RDS(on) digital puro de 5 + 3 fases para admitir las CPU AMD Ryzen ™ de tercera generación al ofrecer una precisión increíble en la entrega de energía a los componentes más sensibles a la energía y a la energía de la placa base.Además de ofrecer un rendimiento mejorado del sistema y la máxima escalabilidad del hardware.',
precio: 2699,
existencia: false,
codigoProducto: 'TYUT7-FNTG'
}
];
//Pintamos las terjetas cuando carga el documento
pintarCards($('.cards .contenedorCards'), datosCards);
//Lanzamos la modal de detalles rapidos
$('.card .detalleRapido').click(function(){
let id = $(this).data('id');
let info = datosCards.find(prod => prod.id == id);
detallesRapidos(info);
})
//Sumar o restar un producto para enviar al carrito
$(document).on('click', '.component_toCartCantidad .toCartBoton', function(){
const boton = $(this);
toCartCantidad(boton, boton.hasClass('mas') ? 'suma' : boton.hasClass('menos') ? 'resta' : null);
});
//Enviar producto a favoritos
$(document).on('click', '.aFavs', function(){
$(this).toggleClass('esFav');
})
//Cargamos el zoomIn a la imagen para verla mejor xD
$(document).on('click', '.infoRapidaModal .zoomWatch', function(){
var areaImagen = $(this).parent();
zoomImg(areaImagen);
})
//Salir de la modal dando clic en la tecla de escape
$(document).keydown(function(e){
if ($('.infoRapidaModal').length && e.keyCode === 27) {
$('.infoRapidaModal').fadeOut(function(){
$(this).remove();
})
}
})
//Fx que mapea los datos para pintarlos en el contenedor
function pintarCards(contenedorCards, datos){
datos.map(card => {
let clases = 'card';
if (!card.precioOferta) clases += ' oferta';
if (!card.existencia) clases += ' out';
contenedorCards.append(`
<div class="${clases}">
<div class="innerProd">
<div class="imgWrapper">
<div class="detalleRapido" data-id="${card.id}">
<div class="icono">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path d="M39.049 39.049L56 56"></path>
<circle cx="27" cy="27" r="17"></circle>
</svg>
</div>
<p>Vista rapida</p>
</div>
<div class="imgProd" style="background-image: url(${card.imagen});"></div>
</div>
<a class="info" href="#">
<p class="prodName">${card.nombre}</p>
<p class="prodDesc">${card.descripcionCorta}</p>
<div class="precios">
<p class="precio">${card.precioOferta || card.precio}</p>
<div>
${card.precioOferta ? `<p class="precioOriginal">${card.precio}</p>`:''}
<p class="stock ${!card.existencia ? 'out' :''}">${card.existencia ? 'En existencia' : 'Fuera de stock'}</p>
</div>
</div>
</a>
<div class="actions">
<div class="boton alCarrito">Agregar al carrito</div>
<div class="row-buttons">
<div class="checkBox comparar">
<input type="checkbox">
<div class="icon"></div>
<p class="checkBoxLabel">Comparar</p>
</div>
<div class="aFavs favoritos">
<div class="icono">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path d="M47 5c-6.5 0-12.9 4.2-15 10-2.1-5.8-8.5-10-15-10A15 15 0 0 0 2 20c0 13 11 26 30 39 19-13 30-26 30-39A15 15 0 0 0 47 5z"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>`
);
})
}
//Fx que dibuja y lanza la modal de detalles rapidos
function detallesRapidos(datos){
const { codigoProducto, descripcionLarga, existencia, imagen, nombre, precio, precioOferta } = datos;
if (!$('.infoRapidaModal').length) {
$('body').append(`
<div class="infoRapidaModal">
<div class="closeModal"></div>
<div class="modalContainer">
<div class="topContent">
<div class="imagenContainer zoom_section">
<div class="zoom_launcher zoomWatch" title="Ampliar imagen">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path d="M2.002 40h22v22h-22z"></path>
<path d="M2 28V2h60v60H36"></path>
<path d="M30 34l22-22m-16 0h16v16"></path>
</svg>
</div>
<div class="zoom_imgOrigin wrapperImg">
<div class="zoom_imgSource imagen" style="background-image: url(${imagen});"></div>
</div>
</div>
<div class="texto">
<div class="wrapper">
<p class="nombre">${nombre}</p>
<div class="precios">
<p class="precio">${precioOferta || precio}</p>
${precioOferta ? `<p class="precioOferta">${precio}</p>` :''}
</div>
<p class="stock ${existencia ?'':'out'} bold">${existencia ? 'Disponible en tienda y listo para enviar' : 'Fuera de stock'}</p>
<p class="codigo"><span class="bold">Código Producto: </span>${codigoProducto}</p>
<div class="actions">
<div class="component_toCartCantidad ${!existencia ? 'disabled':''}">
<div class="toCartBoton menos disabled"></div>
<div class="toCartCantidad">1</div>
<div class="toCartBoton mas"></div>
</div>
<div class="botonTextoIcono ${!existencia ? 'disabled' : ''}">
<label class="labelBoton">Agregar al carrito</label>
<div class="icono">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path d="M2 6h10l10 40h32l8-24H16"></path>
<circle cx="23" cy="54" r="4"></circle>
<circle cx="49" cy="54" r="4"></circle>
</svg>
</div>
</div>
<div class="aFavs botonIcono">
<div class="icono">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path d="M47 5c-6.5 0-12.9 4.2-15 10-2.1-5.8-8.5-10-15-10A15 15 0 0 0 2 20c0 13 11 26 30 39 19-13 30-26 30-39A15 15 0 0 0 47 5z"></path>
</svg>
</div>
</div>
</div>
<p class="descripcion">${descripcionLarga}</p>
<a class="boton" href="#">Ver detalles completos</a>
</div>
</div>
</div>
</div>
</div>
`);
}
$('.infoRapidaModal').fadeIn().css('display', 'flex');
$('.infoRapidaModal .closeModal').click(function(){
$(this).parent().fadeOut(function(){
$(this).remove();
})
})
}
//Fx que actualiza la cantidad de articulos que queremos enviar al carrito
function toCartCantidad(boton, operacion){
const container = boton.parents('.component_toCartCantidad');
const numero = container.find('.toCartCantidad');
let tipoAnim = 'normal';
if (operacion == 'resta') {
if (parseInt(numero.text()) == 1) return false;
if (parseInt(numero.text() - 1) == 1) {
boton.addClass('disabled');
}
tipoAnim = 'reverse';
numero.text(parseInt(numero.text()) - 1);
} else if (operacion == 'suma') {
boton.siblings('.toCartBoton.disabled').removeClass('disabled');
numero.text(parseInt(numero.text()) + 1);
} else {
console.log('El tipo de operacion (suma / resta) es obligatorio');
return false;
}
numero.addClass(tipoAnim == 'reverse' ? 'animacion-reverse' : 'animacion');
numero.one('animationend', function () {
numero.removeClass(tipoAnim == 'reverse' ? 'animacion-reverse' : 'animacion');
});
}
//Fx que maneja el zoomIn en la imagen
function zoomImg(zoomArea, escala = 3){
if ($(window).width() > 768) {
zoomArea.find('.zoom_launcher').fadeOut('fast');
const imagen = zoomArea.find('.zoom_imgOrigin');
const urlImagen = zoomArea.find('.zoom_imgSource')[0].style.backgroundImage;
const dimensiones = {
imagen: {width: imagen.outerWidth(), height: imagen.outerHeight()},
lupa: {width: imagen.outerWidth() / escala, height: imagen.outerHeight() / escala}
};
const estiloInicial = {
backgroundImage: urlImagen,
backgroundSize: parseInt(imagen.css('padding')) ? `calc(100% - (${(parseInt(imagen.css('padding')) / 2) * escala}px))` : 'contain',
transform: `scale(${escala}) translateX(${dimensiones.imagen.width / escala}px) translateY(${dimensiones.imagen.height / escala}px)`
};
imagen.append(`<div class="zoom_lupa"></div>`);
zoomArea.append(`<div class="zoom_imgAlt zoomImg"><div class="zoom"></div></div>`);
const scaleArea = zoomArea.children('.zoom_imgAlt');
const zoom = scaleArea.children('.zoom');
const lupa = imagen.children('.zoom_lupa');
scaleArea.fadeIn();
zoom.css(estiloInicial);
lupa.css(dimensiones.lupa);
imagen.mousemove(function(e){
let movimientoLupa = {x: e.pageX, y: e.pageY};
let centroImagen = {
x: (imagen.offset().left + (dimensiones.imagen.width / 2)),
y: (imagen.offset().top + (dimensiones.imagen.height / 2))
}
let posicionLupa = {
x: centroImagen.x - movimientoLupa.x,
y: centroImagen.y - movimientoLupa.y
}
let transformLupa = {
x: (movimientoLupa.x - (dimensiones.lupa.width / 2)) - imagen.offset().left,
y: (movimientoLupa.y - (dimensiones.lupa.height / 2)) - imagen.offset().top
}
var transformZoom = (`scale(${escala}) translateX(${posicionLupa.x}px) translateY(${posicionLupa.y}px)`);
zoom.css('transform', transformZoom);
lupa.css('transform', `translateX(${transformLupa.x}px) translateY(${transformLupa.y}px)`);
});
imagen.mouseout(function(){
lupa.remove();
zoomArea.find('.zoom_launcher').fadeIn('fast');
scaleArea.fadeOut('fast', function(){
scaleArea.remove();
})
})
} else {
console.warn('Solo disponible para pc');
}
}
})
That’s all! hopefully, you have successfully created E-Commerce Shop Card with Zoom View in jQuery. If you have any questions or suggestions, feel free to comment below.
