shopify wishlist

Lista de deseos de Shopify

Un conjunto de archivos utilizados para implementar una lista de deseos de clientes simple en una tienda Shopify.

Versión: 2.3.0 - Compatible con Tienda Online 2.0

Versiones anteriores:

• v2.1.0 (Tienda en línea 1.0)
• v2.0.0
• v1.0.0

Instalación

Para comenzar a usar Shopify Wishlist , debes copiar algunos de los archivos de este repositorio en el código de tu tema de Shopify.

Nota : esta configuración supone que tiene un fragmento para mostrar una tarjeta de producto.

Archivos para copiar:

Archivo de repositorio	Ubicación del tema Shopify
button-wishlist.liquid	snippets/
icon-heart.liquid	snippets/
wishlist-template.liquid	sections/
product-card-template.liquid	sections/
page.wishlist.json	templates/
product.card.json	templates/
Wishlist.js	assets/

1. Coloque el fragmento de button-wishlist.liquid dentro del fragmento de tarjeta de producto existente o en la plantilla product.liquid
   • {%- render 'button-wishlist', product: product -%}
   • Esto permitirá al cliente agregar o eliminar artículos de su lista de deseos.
2. Reemplace el fragmento en la sección product-card-template.liquid con el fragmento de su tarjeta de producto existente
   • Mismo fragmento del paso 1
   • El fragmento de su tarjeta de producto puede usar un nombre de variable de producto diferente, verifíquelo dos veces.
3. Agregue el nombre de clase del elemento de su tarjeta de producto al objeto selectors en Wishlist.js
   • Ejemplo: si el nombre de clase de su tarjeta de producto es .product-item , la variable selectors se vería así:

      const selectors = {
       button: '[button-wishlist]',
       grid: '[grid-wishlist]',
       productCard: '.product-item', // your classname here
     };
     

4. Crea una nueva página en el administrador de Shopify:
   • Administrador > Tienda en línea > Páginas > Agregar página
   • Establezca la template de la nueva página en page.wishlist
   • Esta página mostrará los elementos de la lista de deseos guardados de un cliente.
5. Coloque el script en theme.liquid antes de la etiqueta de cierre </head>
   • <script src="{{ 'Wishlist.js' | asset_url }}" defer="defer"></script>

¡Eso es todo! Al visualizar tu tienda Shopify, deberías ver los botones de la lista de deseos dentro de las tarjetas de tus productos (probablemente en las páginas de colecciones) o en la plantilla del producto. Un clic en el botón de la lista de deseos agregará/eliminará el artículo de la lista de deseos del cliente y activará el estilo activo en el botón. Después de agregar elementos de la lista de deseos, puede ver su lista de deseos navegando a la página creada en el paso 3.

Tienda Shopify de demostración

Notas

• Esta lista de deseos utiliza Javascript y localStorage para guardar la lista de deseos del cliente en su navegador. El almacenamiento local no persistirá si el usuario borra el almacenamiento del navegador o navega en modo incógnito.
• A medida que los clientes buscan productos y los agregan a su lista de deseos, el script establecerá automáticamente cualquier botón de la lista de deseos en estado activo si el producto correspondiente ya está incluido en la lista de deseos.
• Estos archivos vienen sin estilo ni estructura para que puedas personalizarlos según sea necesario. Esto tiene como objetivo brindarle la funcionalidad básica de una lista de deseos sin lujos.
• Si está trabajando en un tema no publicado, también deberá crear nuevas plantillas en el tema publicado. El administrador de Shopify solo te permitirá asignar una página a una plantilla si la plantilla existe en el tema publicado.
• Si está actualizando a la versión 2.0 de la Tienda en línea, se le pedirá que elimine las plantillas anteriores de tarjetas de productos y listas de deseos .liquid .