La tienda no necesita sub-páginas de productos, sino que lista los artículos directamente con una breve descripción.
Por lo tanto, sólo activo la integración en mi archivo Nunjucks
para la tienda:
En shop.njk:
---
title: Shop
snipcart: true
---
Obtenemos los productos y sus propiedades a través de un archivo json
:
En shop.json:
{
"products": [
{
"name": "Libro El verano más largo",
"type": "Libro",
"description": "Los textos de los que se compone este libro los escribí entre los meses de septiembre y noviembre. Lo mío es escribir canciones, grabar discos y hacer conciertos. El verano más largo son apuntes con forma de poemas que me apetecía compartir",
"id": "libro-verano",
"price": "12.00",
"image": "/assets/images/shop/libro-verano.jpg"
},
{
// ...
}
]
}
Snipcart necesita algunos datos necesarios para crear los productos y procesar la compra. Obtenemos estos datos de nuestro archivo shop.json
utilizando un "loop":
{% for product in shop.products %}
<button
class="snipcart-add-item"
id="{{ product.id }}"
data-item-id="{{ product.id }}"
data-item-price="{{ product.price }}"
data-item-url="/shop/"
data-item-description="{{ product.description }}"
data-item-image="{{ product.image }}"
data-item-name="{{ product.name }}"
>
añadir al carrito
</button>
{% endfor %}
Este button
es suficiente para activar Snipcart. Se requiere el nombre del producto, un ID de producto único, el precio del producto, la URL del producto (donde se encuentra el button
"añadir al carrito", utilizado por su rastreador cuando comprueba la integridad del pedido), la descripción del producto y la URL de la imagen del producto.
La clase CSS snipcart-add-item
también es necesaria para que funcione. Dentro del loop utilizo estos datos para mostrar los productos en la interfaz de usuario.
Para el "toggle" del carrito de la compra tenemos el siguiente código:
<button class="snipcart-checkout">ver carrito</button>
Esto nos permite comprobar el estado de nuestra cesta de la compra sin añadir nada nuevo a ella.
También proporcionamos a los visitantes una visión general concisa de la cesta de la compra en el resumen de productos:
Productos eligidos: <span class="snipcart-items-count"></span> Total:
<span class="snipcart-total-price"></span>
Aquí se puede ver siempre cuántos productos hay en la cesta y cuál sería el precio total en este momento. Esto funciona con una inyección de Javascript.
Snipcart también busca nuestro atributo de idioma en el HTML para ajustar automáticamente el idioma mostrado:
<html lang="es"></html>
Para la mayor seguridad posible de nuestras webs, establecemos cabeceras de respuesta HTTP. La cabecera de la Política de Seguridad de Contenidos (CSP) es una capa adicional de seguridad que ayuda a detectar y mitigar ciertos tipos de ataques como el cross-site scripting (XSS) y los ataques de inyección de datos. Lo hacemos especificando exactamente qué recursos puede cargar el navegador.
Para que Snipcart funcione, tenemos que habilitar la recuperación de scripts a través de Snipcart en la cabecera de la Política de Seguridad de Contenidos.
Según hemos conseguido nuestra primera venta, consta el artículo automáticamente dentro de la sección de productos. El comprador está listado en la sección de clientes y en la sección de pedidos aparece la transacción con los detalles del cliente.
En este caso, manejo directamente la creación de los productos en el archivo json
. Sin embargo, para clientes, esto sería bastante engorroso. En su lugar, pueden introducir los productos y sus propiedades en una hoja de Google (Excel) y luego convierto este formato en un archivo json
que puedo utilizar directamente.
Cada cliente tiene necesidades individuales. Shopify es la primera opción para muchos por su flexibilidad, facilidad de uso y buena relación calidad-precio. Algunas grandes empresas también utilizan Shopify.
Para las páginas web de jamstack en las que la tienda es más bien un accesorio, Snipcart es una solución perfecta con su combinación de fácil configuración y profunda personalización.
Para una página de Wordpress, el propio plugin Woocommerce del CMS es un clásico. También es posible combinar Wordpress con otros soluciones de tiendas.
En el momento de hacer una decisión hay que responder a las siguientes preguntas:
Al final, el trabajo y el dinero invertidos en un sitio web de tienda rápido, atractivo y seguro siempre merecen la pena. Se reflejará en las ventas, y los costes incurridos al principio se recuperarán pronto.
¿Tienes un proyecto en mente y no sabes cómo llevarlo a cabo?