https://sampletienda.netlify.app/js/tenis.js

1// Función principal para agregar el producto UrbanFit al carrito
2function addToCart() {
3  const size = document.getElementById('size').value;
4  const color = document.getElementById('color').value;
5  const quantity = document.getElementById('quantity').value;
6
7  const message = document.getElementById('cart-message');
8  message.textContent = `¡Añadido al carrito! Talla: ${size}, Color: ${color}, Cantidad: ${quantity}`;
9  message.classList.remove('hidden');
10
11  setTimeout(() => {
12    message.classList.add('hidden');
13  }, 4000);
14}
15
16// Cambiar imagen principal al hacer clic en miniaturas
17const thumbnails = document.querySelectorAll('.image-gallery img');
18const mainImage = document.getElementById('main-image');
19
20thumbnails.forEach(thumb => {
21  thumb.addEventListener('click', () => {
22    const newSrc = thumb.getAttribute('data-src');
23    if (newSrc) {
24      mainImage.classList.add('fade');
25      setTimeout(() => {
26        mainImage.setAttribute('src', newSrc);
27        mainImage.classList.remove('fade');
28      }, 150);
29
30      thumbnails.forEach(img => img.classList.remove('active'));
31      thumb.classList.add('active');
32    }
33  });
34});
35
36// Modal de productos relacionados
37const modal = document.getElementById('product-modal');
38const modalTitle = document.getElementById('modal-title');
39const modalImage = document.getElementById('modal-image');
40const modalDescription = document.getElementById('modal-description');
41const modalPrice = document.getElementById('modal-price');
42const modalSize = document.getElementById('modal-size');
43const modalColor = document.getElementById('modal-color');
44
45let selectedProduct = null;
46
47function openModal(productId) {
48  const products = {
49    nike: {
50      name: 'Tenis Nike Air',
51      image: 'assets/images/nike-yellow.jpg',
52      description: 'Tenis deportivos con amortiguación Air, ideales para correr o caminar.',
53      price: '$29.99'
54    },
55    puma: {
56      name: 'Tenis Puma Street',
57      image: 'assets/images/puma.jpg',
58      description: 'Tenis urbanos con estilo moderno y suela cómoda.',
59      price: '$22.99'
60    },
61    reebok: {
62      name: 'Tenis Reebok Classic',
63      image: 'assets/images/reebok.jpeg',
64      description: 'Diseño clásico con soporte acolchado para uso diario.',
65      price: '$25.99'
66    },
67    newbalance: {
68      name: 'Tenis New Balance 574',
69      image: 'assets/images/new-balance.jpg',
70      description: 'Estilo retro con tecnología de amortiguación moderna.',
71      price: '$27.99'
72    },
73    fila: {
74      name: 'Tenis Fila Retro',
75      image: 'assets/images/fila.jpg',
76      description: 'Tenis con diseño vintage y suela resistente.',
77      price: '$23.99'
78    },
79    asics: {
80      name: 'Tenis Asics Retro',
81      image: 'assets/images/asics.jpg',
82      description: 'Tenis deportivos con soporte ergonómico y estilo clásico.',
83      price: '$33.99'
84    }
85  };
86
87  selectedProduct = products[productId];
88
89  if (selectedProduct) {
90    modalTitle.textContent = selectedProduct.name;
91    modalImage.setAttribute('src', selectedProduct.image);
92    modalDescription.textContent = selectedProduct.description;
93    modalPrice.textContent = selectedProduct.price;
94
95    // Resetear selecciones
96    modalSize.value = '7';
97    modalColor.value = 'Negro';
98
99    modal.classList.remove('hidden');
100  }
101}
102
103function closeModal() {
104  modal.classList.add('hidden');
105}
106
107function addRelatedToCart() {
108  const size = modalSize.value;
109  const color = modalColor.value;
110
111  if (selectedProduct) {
112    alert(`¡Añadido al carrito!\nProducto: ${selectedProduct.name}\nTalla: ${size}\nColor: ${color}\nPrecio: ${selectedProduct.price}`);
113    closeModal();
114  }
115}