Zapiet - Opciones de Producto ofrece dos bloques de aplicación: el bloque de aplicación de opciones de producto para la página del producto y el bloque de aplicación de la página del carrito para la página del carrito.
El bloque de aplicación de opciones de producto debe estar habilitado para que nuestra aplicación funcione correctamente.
El bloque de aplicación de opciones del carrito es opcional y requiere cambios adicionales en el archivo del tema para funcionar como se espera.
Requisitos
Para habilitar el bloque de la aplicación, necesitarás tener permiso para gestionar aplicaciones por parte del propietario de la tienda.
Para habilitar el bloque de la aplicación, debes estar utilizando un tema de Tienda en Línea 2.0. No soportamos temas heredados.
Habilitar el bloque de aplicación de opciones de producto
El bloque de aplicación de opciones de producto permitirá a tus clientes seleccionar opciones en las páginas de productos de tu tienda.
En Zapiet - Opciones de Producto, haz clic en Ajustes.
En la sección de Temas, selecciona el tema que te gustaría editar.
Recomendamos habilitar nuestra aplicación en un tema duplicado primero.
En la sección del bloque de aplicación de opciones de producto, haz clic en Habilitar.
Esto abrirá la configuración de Personalización en tu tema y habilitará el bloque de la aplicación.
Puedes cambiar la ubicación del bloque de la aplicación según las necesidades de tu negocio.
Haz clic en Guardar.
El bloque de aplicación de opciones de producto ahora será visible en tu tienda. Antes de realizar pruebas, asegúrate de haber creado tanto las opciones como los conjuntos de opciones.
Si habilitaste el bloque de la aplicación en un tema duplicado, publica el tema después de las pruebas para que tus clientes puedan seleccionar opciones de productos en tu tienda.
Habilitar el bloque de aplicación de la página del carrito
El bloque de aplicación de la página del carrito permitirá a tus clientes realizar cambios en las opciones que han seleccionado directamente en la página del carrito.
En Zapiet - Opciones de Producto, haz clic en Ajustes.
En la sección de Temas, selecciona el tema que te gustaría editar.
Recomendamos habilitar nuestra aplicación en un tema duplicado primero.
En la sección del bloque de aplicación de la página del carrito, haz clic en Habilitar.
Esto abrirá la configuración de Personalización en tu tema y habilitará la integración de la aplicación.
Haz clic en Guardar.
Después de habilitar la integración de la aplicación, necesitas editar el código en tu tema.
Editar tu Tema
Si no te sientes cómodo editando el código, háznoslo saber en el chat y estaremos encantados de ayudarte.
Ve a Tienda en Línea > Temas, expande el menú junto al tema que deseas editar y luego haz clic en Editar código.
Abre el archivo liquid para la página del carrito.
Comúnmente, los archivos relacionados con el carrito se encuentran en: plantillas (por ejemplo, cart.liquid), secciones (por ejemplo, cart-template.liquid) o fragmentos para fragmentos de código reutilizables relacionados con el carrito (por ejemplo, cart-item.liquid).
Busca este fragmento en el código.
{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{%- if property.last != blank and property_first_char != '_' -%}
<div class="product-option">
<dt>{{ property.first }}: </dt>
<dd>
{%- if property.last contains '/uploads/' -%}
<a href="{{ property.last }}" class="link" target="_blank">
{{ property.last | split: '/' | last }}
</a>
{%- else -%}
{{ property.last }}
{%- endif -%}
</dd>
</div>
{%- endif -%}
{%- endfor -%}Agrega esta línea de código a continuación para crear una nueva clase.
<div class ="edit-cart-options-button-container" id="{{ item.id }}" </div>Abre el archivo liquid para el cajón del carrito.
Busca en las secciones o fragmentos los archivos que puedan estar relacionados con el cajón del carrito. Nombres de archivos comunes incluyen: cart-drawer.liquid, cart.liquid, drawer-cart.liquid, mini-cart.liquid.
Busca este fragmento en el código.
{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{%- if property.last != blank and property_first_char != '_' -%}
<div class="product-option">
<dt>{{ property.first }}: </dt>
<dd>
{%- if property.last contains '/uploads/' -%}
<a href="{{ property.last }}" class="link" target="_blank" aria-describedby="a11y-new-window-message">
{{ property.last | split: '/' | last }}
</a>
{%- else -%}
{{ property.last }}
{%- endif -%}
</dd>
</div>
{%- endif -%}
{%- endfor -%}
Agrega esta línea de código a continuación para crear una nueva clase.
<div class ="edit-cart-options-button-container" id="{{ item.id }}</div>
Haz clic en Guardar.
Ahora tus clientes podrán editar las opciones que han seleccionado directamente en la página del carrito.
Si algo salió mal y no puedes editar las opciones seleccionadas en la página del carrito, ¡Háznoslo saber en el chat!
Notas
Si estás usando un tema gratuito de la tienda de temas de Shopify, probablemente necesitarás agregar el código en la línea 159 del archivo
main-cart-item.liquidy en la línea 206 del archivocart-drawer.liquid.
Limitaciones
Si tu tienda tiene un botón de Añadir Rápido, las opciones de producto sólo aparecerán para los productos con variantes.
Los productos sin variantes pueden añadirse directamente al carrito sin seleccionar opciones.
Para evitar que los clientes pasen por alto las opciones de producto, puede desactivar el botón de adición rápida. Esta configuración es específica de cada tema, por lo que puede que tenga que ponerse en contacto con el desarrollador de su tema para obtener ayuda.