GemPages V7 actualmente no permite dividir automáticamente la descripción del producto en elementos acordeón según las etiquetas de encabezado, como en V6. Sin embargo, puedes lograr el mismo resultado preparando la descripción de tu producto de Shopify con etiquetas de encabezado y añadiendo un fragmento de código personalizado a cada elemento acordeón. Esta guía te guía por todo el proceso para que puedas implementarlo tú mismo sin necesidad de la ayuda del equipo técnico.
Vista General
Este método funciona dividiendo la descripción del producto en varias secciones mediante etiquetas de encabezado HTML. El elemento Acordeón mostrará cada sección según su orden mediante un fragmento de código personalizado. Puede usar cualquier nivel de encabezado (H1-H6). El fragmento utiliza como ejemplo, pero puedes reemplazarlo con cualquier etiqueta de encabezado que uses en la descripción de tu producto.
Paso 1: Preparar la descripción del producto en Shopify
- Vaya a Administrador de Shopify → Productos → abra su producto.
- En el campo Descripción, divida su contenido en secciones separadas.
- Inserte una etiqueta de encabezado antes de cada sección. Debe usar el mismo tipo de encabezado siempre (H1–H6). El código detectará la etiqueta de encabezado que use.
Ejemplo de estructura:
Material
Detalles sobre el material…
Guía de tallas
Detalles de tamaño…
Garantía
Información de garantía…
Si prefiere utilizar H2, H3, H5, etc., simplemente reemplácelos con su etiqueta de encabezado preferida y ajuste el código más tarde.
Paso 2: Agregar un elemento de acordeón en GemPages
- Abra el editor GemPages (V7).
- Arrastre y suelte el elemento Acordeón en su página.
- Crea tantos elementos de acordeón como necesites. Cada elemento mostrará una sección de la descripción de tu producto.
Paso 3: Insertar el fragmento de código personalizado
Insertarás el mismo fragmento de código en cada elemento del Acordeón. Luego, para cada pestaña, solo cambiarás el valor de secNum según la sección que quieras mostrar.
Cómo insertar:
1. Seleccione un elemento del acordeón.
2. En la barra lateral izquierda, abra Contenido → Código personalizado.
3. Pegue el fragmento de código completo.
|
{% asignar secNum = 2 %} {% asignar descSec = producto.descripción | dividir: ' ' %} {% asignar gPDCount = 0 %} {% asignar chosenDescSec = ” %} {% por segundo en la descripciónSec %} {% asignar testDescSec = seg | dividir: ' ' %} {% si testDescSec[1] %} {% asignar testDescSec = testDescSec[1] %} {% else%} {% asignar testDescSec = testDescSec[0] %} {% terminara si %}
{% asignar checkSec = testDescSec | strip_html %} {% asignar checkSec = checkSec | eliminar %}
{% asignar isMediaSec = falso %} {% si testDescSec contiene 'img' o testDescSec contiene 'video' o testDescSec contiene 'iframe' %} {% si testDescSec contiene 'src' %} {% asignar isMediaSec = verdadero %} {% terminara si %} {% terminara si %}
{% si checkSec != ” o isMediaSec %} {% asignar gPDCount = gPDCount | más: 1 %} {% si gPDCount == secNum %} {% asignar chosenDescSec = testDescSec %} {% romper %} {% terminara si %} {% terminara si %} {% endfor%}
{% si se eligióDescSec %} {{ chosenDescSec | strip }} {% else%} {{ product.description | strip }} {% terminara si %} </div> |
Paso 4: Ajustar la etiqueta de encabezado
El código utiliza como ejemplo porque es el encabezado más común utilizado en las descripciones de productos.
Si la descripción de su producto utiliza un encabezado diferente, reemplácelo con su etiqueta de encabezado dentro de esta parte:
{% assign descSec = producto.descripción | split: '' %}
Ejemplos:
Si su descripción de Shopify utiliza , cambiar a:
{% assign descSec = producto.descripción | split: '' %}
Si su descripción utiliza , cambiar a:
{% assign descSec = producto.descripción | split: '' %}
Paso 5: Establezca el número de sección para cada elemento del acordeón
La variable secNum controla qué sección aparece dentro de cada elemento del acordeón.
Por ejemplo:
Pestaña de acordeón 1 → secNum = 1
Pestaña de acordeón 2 → secNum = 2
Pestaña de acordeón 3 → secNum = 3
Para editar este número, modifique esta parte:
{% asignar secNum = 1 %}
Cambie sólo el número de cada pestaña.
Paso 6: Guardar y obtener una vista previa
- Haga clic en Guardar en el editor de GemPages.
- Obtenga una vista previa de su página de producto.
- Confirme que cada elemento del Acordeón muestre la sección correcta de la Descripción del Producto.
gracias por tus comentarios