Como funciona el Plugin Store

Cómo funciona el JS "Plugin Store" para Blogger

Este tutorial explica cómo funciona el JS que convierte tu blog de Blogger en una tienda con carrito de compras y pagos vía PayPal. También detalla qué elementos HTML necesita para funcionar correctamente.

1. Configuración global (schema + getConfig)

El plugin define un esquema de configuración global con cuatro valores clave:

  1. paypalEmail: correo de la cuenta PayPal donde se recibirán los pagos.
  2. returnUrl: URL a la que se dirigirá el cliente después de un pago exitoso.
  3. cancelUrl: URL a la que se dirigirá el cliente si cancela el pago.
  4. mostrarContador: valor true o false que determina si se muestra el botón flotante del carrito.

La función getConfig() busca un <div id="config-store"> en el HTML y lee sus atributos data-* para sobreescribir los valores por defecto. Si no existe el div, el JS usa valores por defecto y lanza un console.warn.

El resultado final se guarda en window.TIENDA_CONFIG, accesible por todo el JS.

<!-- Gadget: Configuración Tienda / Carrito -->
<div id="config-store" hidden
     data-paypalemail="tu-email-aquí"
     data-returnurl="https://tusitio.com/p/gracias.html"
     data-cancelurl="https://tusitio.com/p/cancelado.html"
     data-mostrarcontador="true">
</div>
Necesita: un gadget HTML con el Plugin Store en la plantilla de Blogger con id="config-store" y los data-* configurados.

2. Constantes y utilidades

El plugin usa localStorage con la clave "cart" para guardar el carrito del usuario. Contiene funciones comunes:

  • actualizarContadorGlobal(): busca el botón flotante .cart-float y lo muestra u oculta según mostrarContador. También actualiza el número de productos en #cart-count.
  • ajustarCarritoFlotante(): ajusta la posición del carrito flotante (bottom: 16px).
<!-- ===== BOTÓN FLOTANTE CARRITO ===== -->
<a href="/p/carrito.html" class="cart-float">
  🛒 <span id="cart-count">0</span>
</a>
Necesita: un gadget HTML con un botón flotante de carrito en el HTML, con estructura mínima:

3. Botón de pago directo ("Comprar ahora")

El script detecta:

  1. El título del producto en .titulo-producto.
  2. El precio en .precio (formato numérico, extraído de content o texto).
  3. Si el producto está agotado con .disponibilidad.agotado.

Al hacer clic en #pago, el script:

  • Si el precio es 0 o está agotado, muestra un alert indicando que no se puede comprar.
  • Si el precio es válido y está disponible, genera un enlace a PayPal usando los datos de window.TIENDA_CONFIG y abre la ventana de pago.
Necesita: en la ficha de producto, botones con id="pago" y elementos de precio y disponibilidad correctamente etiquetados.

4. Botón "Añadir al carrito"

El script lee desde la ficha de producto:

  • Nombre del producto: .titulo-producto
  • SKU (si existe): [itemprop='sku']
  • Imagen: img[itemprop='image']
  • Precio: .precio
  • Disponibilidad: .disponibilidad.agotado

Al hacer clic en #add-to-cart:

  • Si está agotado o el precio ≤ 0, desactiva el botón y muestra "Agotado" o "No disponible".
  • Si es válido, añade el producto a localStorage, actualiza el contador flotante y cambia temporalmente el texto del botón a "Añadido ✓".
Necesita: en la ficha de producto un botón con id="add-to-cart" y elementos de precio, SKU, imagen y disponibilidad correctamente configurados.

5. Página del carrito (/p/carrito.html)

El JS genera dinámicamente la tabla del carrito:

  • Muestra imagen, nombre, precio, cantidad, subtotal y botón de eliminar.
  • Actualiza total automáticamente.
  • Permite cambiar la cantidad de cada producto y eliminarlo del carrito.
  • Genera el enlace de PayPal con todos los productos válidos (precio > 0).
<div class="tabla-carrito">
  <table id="cart-table">
    <thead>
      <tr>
        <th>Imagen</th>
        <th>Producto</th>
        <th>Precio</th>
        <th>Cantidad</th>
        <th>Subtotal</th>
        <th>Eliminar</th>
      </tr>
    </thead>
    <tbody>
      <!-- filas generadas por JS -->
    </tbody>
  </table>

  <div id="total">Total: $0.00</div>
  <a href="#" id="paypal-link" class="paypal-btn">Pagar con PayPal</a>
</div>
Necesita: una página estatica con el HTML del carrito en blogger.

Conclusión

El JS "Plugin Store" convierte un blog de Blogger en un ecommerce funcional usando solo HTML y localStorage. Para que funcione correctamente, cada sección necesita datos específicos:

  • Gadget config-store con los data-* correctamente configurados.
  • Botón flotante .cart-float con #cart-count.
  • Fichas de producto con título, precio, SKU, imagen y disponibilidad etiquetados correctamente.
  • Página de carrito con #cart-table, #total y #paypal-link.
Con estos elementos bien configurados, el plugin funciona automáticamente: controla el carrito, los botones de pago y la actualización de cantidades.