sdelay-sayt-dlya-prodazhi-su/script.js

const products = [
  {
    id: 1,
    name: "Сумка классическая",
    price: 12900,
    desc: "Элегантная сумка из экокожи премиум класса",
    image: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=600"
  },
  {
    id: 2,
    name: "Сумка кросс-боди",
    price: 8900,
    desc: "Компактная сумка через плечо на каждый день",
    image: "https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=600"
  },
  {
    id: 3,
    name: "Сумка тоут",
    price: 15900,
    desc: "Вместительная сумка для работы и шопинга",
    image: "https://images.unsplash.com/photo-1591561954557-26941169b49e?w=600"
  },
  {
    id: 4,
    name: "Клатч вечерний",
    price: 6900,
    desc: "Изысканный клатч для особых случаев",
    image: "https://images.unsplash.com/photo-1566150905458-1bf1dad1f565?w=600"
  },
  {
    id: 5,
    name: "Рюкзак городской",
    price: 11900,
    desc: "Стильный рюкзак для города и путешествий",
    image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=600"
  },
  {
    id: 6,
    name: "Сумка хобо",
    price: 13900,
    desc: "Мягкая сумка в богемном стиле",
    image: "https://images.unsplash.com/photo-1590874103328-eac38a683ce7?w=600"
  },
  {
    id: 7,
    name: "Сумка седло",
    price: 10900,
    desc: "Трендовая сумка в форме седла",
    image: "https://images.unsplash.com/photo-1575207365668-42a2021e5a6b?w=600"
  },
  {
    id: 8,
    name: "Сумка шоппер",
    price: 5900,
    desc: "Эко-сумка для повседневных покупок",
    image: "https://images.unsplash.com/photo-1597484661643-2f5fef640dd1?w=600"
  }
];

let cart = [];

function renderProducts() {
  const grid = document.getElementById('productsGrid');
  grid.innerHTML = products.map(p => `
    <div class="product-card">
      <img src="${p.image}" alt="${p.name}" class="product-image">
      <div class="product-info">
        <h3 class="product-name">${p.name}</h3>
        <p class="product-desc">${p.desc}</p>
        <div class="product-price">${p.price.toLocaleString()} ₸</div>
        <button class="add-to-cart" onclick="addToCart(${p.id})">В корзину</button>
      </div>
    </div>
  `).join('');
}

function addToCart(id) {
  const product = products.find(p => p.id === id);
  cart.push(product);
  updateCart();
  showNotification('Добавлено в корзину!');
}

function removeFromCart(index) {
  cart.splice(index, 1);
  updateCart();
}

function updateCart() {
  document.getElementById('cartCount').textContent = cart.length;
  
  const cartItems = document.getElementById('cartItems');
  if (cart.length === 0) {
    cartItems.innerHTML = '<div class="empty-cart">Корзина пуста</div>';
    document.getElementById('cartTotal').textContent = '0';
  } else {
    cartItems.innerHTML = cart.map((item, index) => `
      <div class="cart-item">
        <img src="${item.image}" alt="${item.name}" class="cart-item-image">
        <div class="cart-item-info">
          <div class="cart-item-name">${item.name}</div>
          <div class="cart-item-price">${item.price.toLocaleString()} ₸</div>
        </div>
        <button class="cart-item-remove" onclick="removeFromCart(${index})">Удалить</button>
      </div>
    `).join('');
    
    const total = cart.reduce((sum, item) => sum + item.price, 0);
    document.getElementById('cartTotal').textContent = total.toLocaleString();
  }
}

function showNotification(message) {
  const notification = document.createElement('div');
  notification.style.cssText = `
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #2d2d2d;
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    z-index: 2000;
    animation: slideIn 0.3s ease;
  `;
  notification.textContent = message;
  document.body.appendChild(notification);
  setTimeout(() => notification.remove(), 2000);
}

function openCart() {
  document.getElementById('cartModal').classList.add('active');
}

function closeCart() {
  document.getElementById('cartModal').classList.remove('active');
}

function openCheckout() {
  if (cart.length === 0) {
    showNotification('Корзина пуста');
    return;
  }
  closeCart();
  document.getElementById('checkoutModal').classList.add('active');
  
  const summary = document.getElementById('orderSummary');
  const total = cart.reduce((sum, item) => sum + item.price, 0);
  summary.innerHTML = `
    <h4>Ваш заказ:</h4>
    ${cart.map(item => `
      <div class="order-summary-item">
        <span>${item.name}</span>
        <span>${item.price.toLocaleString()} ₸</span>
      </div>
    `).join('')}
    <div class="order-summary-item" style="font-weight: 700; margin-top: 10px; border-top: 1px solid #e5e5e5; padding-top: 10px;">
      <span>Итого:</span>
      <span>${total.toLocaleString()} ₸</span>
    </div>
  `;
}

function closeCheckout() {
  document.getElementById('checkoutModal').classList.remove('active');
}

function submitOrder(e) {
  e.preventDefault();
  
  const name = document.getElementById('customerName').value;
  const phone = document.getElementById('customerPhone').value;
  const address = document.getElementById('customerAddress').value;
  const comment = document.getElementById('customerComment').value;
  
  const total = cart.reduce((sum, item) => sum + item.price, 0);
  const itemsList = cart.map(item => `- ${item.name}: ${item.price.toLocaleString()} ₸`).join('%0A');
  
  const message = `Здравствуйте! Хочу сделать заказ:%0A%0A${itemsList}%0A%0AИтого: ${total.toLocaleString()} ₸%0A%0AДанные доставки:%0A👤 ${name}%0A📞 ${phone}%0A📍 ${address}%0A%0A${comment ? 'Комментарий: ' + comment : ''}`;
  
  const whatsappUrl = `https://wa.me/77771234567?text=${message}`;
  window.open(whatsappUrl, '_blank');
  
  cart = [];
  updateCart();
  closeCheckout();
  showNotification('Заказ оформлен! Переход в WhatsApp...');
}

document.getElementById('cartBtn').addEventListener('click', openCart);
document.getElementById('closeCart').addEventListener('click', closeCart);
document.getElementById('closeCheckout').addEventListener('click', closeCheckout);
document.getElementById('checkoutBtn').addEventListener('click', openCheckout);
document.getElementById('checkoutForm').addEventListener('submit', submitOrder);

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    const href = this.getAttribute('href');
    if (href !== '#') {
      e.preventDefault();
      document.querySelector(href).scrollIntoView({ behavior: 'smooth' });
    }
  });
});

renderProducts();
updateCart();