Códigos HTML COD - OV DIVI

HTML GALERÍA:

<div class="product-gallery">
  <img id="main-image" src="" alt="Producto principal" class="main-image">
  <div class="thumbnail-container">
      <!-- Las miniaturas se generarán dinámicamente con JavaScript -->
  </div>
</div>


HTML DETALLES:

<div class="product-details">
  <h1 id="product-name"></h1>
  <p class="product-price"><span id="product-price"></span></p>
  <form class="product-form">
      <div id="product-attributes">
          <!-- Los atributos se generarán dinámicamente con JavaScript -->
      </div>
      <p class="warning" id="attribute-warning">Por favor, selecciona todas las opciones antes de agregar al carrito.</p>
      <button type="button" id="add-to-cart">Agregar al Carrito</button>
  </form>
</div>


HTML CARRITO:

<div class="card" id="cart">
  <h2>Carrito de Compras</h2>
  <ul id="cart-items"></ul>
  <p class="total">Total: <span id="cart-total"></span></p>
  <button id="checkout">Realizar Pedido Contra Entrega</button>
  <button id="clear-cart">Limpiar Carrito</button>
  <p class="warning" id="cart-warning">Por favor, agrega productos al carrito antes de realizar el pedido.</p>
</div>


HTML POPUP FINALIZAR COMPRA:

<div id="popup">
  <div class="popup-content">
    <span id="close-popup" class="close-icon">&#x4d;</span>
    <h2>Finalizar Pedido</h2>
    <div class="popup-header">
        <img id="popup-image" src="" alt="Producto">
        <div>
            <p id="popup-product-name"></p>
            <p id="popup-price"></p>
        </div>
    </div>
    <form id="order-form">
        <div class="form-grid">
            <input type="text" name="nombres" placeholder="Nombre(s)" required>
            <input type="text" name="apellidos" placeholder="Apellidos" required>
            <input type="text" name="calle_numero" placeholder="Calle y número" required>
            <input type="text" name="colonia" placeholder="Colonia o Barrio" required>
            <input type="text" name="codigo_postal" placeholder="Código Postal" required>
            <input type="text" name="localidad" placeholder="Localidad o Ciudad" required>
            <input type="text" name="estado" value="Oaxaca" readonly> <!-- Reemplazar estado -->
            <input type="text" name="pais" value="México" readonly> <!-- Reemplazar país -->
            <select name="envio" class="shipping-options">
                <option value="" disabled selected>Opciones de envío</option>
                <option value="Normal">Envío normal (5-8 días) - $0</option>
                <option value="Express">Envío Express (1-3 días) - $90</option> <!-- Reemplazar precio de envío -->
            </select>
            <select name="pago" class="payment-options">
                <option value="" disabled selected>Método de pago</option>
                <option value="Efectivo">Efectivo</option>
                <option value="Deposito">Depósito</option>
                <option value="Transferencia">Transferencia bancaria</option>
            </select>
        </div>
        <p class="whatsapp-notice">Serás contactado por WhatsApp para que confirmes tu pedido. Si no confirmas por WhatsApp, no se despacha el paquete.</p>
        <button type="submit" id="send-whatsapp">
            Hacer Pedido por WhatsApp - Total: <span id="whatsapp-total"></span>
        </button>
    </form>
  </div>
</div>