Crea el nuevo widget de categorías en el editor de widgets de Photoslurp siguiendo el mismo procedimiento que para la página de inicio y los widgets de página de producto en los pasos 3 y 4. Una vez que hayas configurado el widget de categorías en Photoslurp, dirígete a "Moderation -> HTML and JavaScript snippets" en el menú superior del panel de Idosell.
Se te presentará una lista de campañas que contienen los fragmentos de código que deseas ejecutar en páginas específicas de tu sitio web. Haz clic en el botón "Agregar una campaña" ubicado en la parte superior de la lista de campañas, escribe un nombre para tu nueva campaña (por ejemplo, "widgets Photoslurp"), activa la campaña y selecciona los sitios donde deseas que esté activa. Después de guardar la configuración, puedes volver a la lista de campañas haciendo clic en el enlace "Back to campaigns list".
Ahora haz click en el link "edit the snippets" de la campaña de Photoslurp creada hace un instante y haz click en el botón "New Snippet". Se mostrará el siguiente formulario:
Sigue los siguientes pasos para configurar el widget:
- Dale a la sección un nombre descriptivo (e.g. "Widget categoría ropa infantil")
- Configura "Active" con "Yes"
- Configura "Snippet type" con "JavaScript"
- Marca todas las casillas de "Screen Size" con "Display on devices"
- Configura "Automatic control and deactivation" con "No"
- Configura "Display in" con "Body section end"
- Configura "Show on subpages" con "Selected" y marca la casilla de al lado de "Search results".
- Configura "Entered discount code" con "no"
Una vez que hayas configurado los ajustes, ha clic en la pestaña "Edit JS" del editor de código y pega el siguiente código:
Nota: Debes editar el código para incluir el ID de tu widget de categoría desde el editor de widgets de Photoslurp. Las líneas 2 y 4 del código están comentadas con instrucciones para establecer el ID del widget y, opcionalmente, modificar la posición del widget en la página.
let widgetAttributes = {};
// PASTE THE ID OF YOUR CATEGORY WIDGET FROM THE PHOTOSLURP WIDGET EDITOR IN THIS VALUE
widgetAttributes.id = "PASTE THE WIDGET ID HERE";
// CHANGE THIS VALUE TO A VALID CSS SELECTOR TO MODIFY THE WIDGET POSITION
widgetAttributes.positionBefore = "footer";
let targetNode = document.querySelector(widgetAttributes.positionBefore);
let container = document.createElement('div');
container.setAttribute("class", "ps-container");
let widget = document.createElement('ps-widget');
widget.setAttribute("data-config", widgetAttributes.id);
container.appendChild(widget);
let widgetInsert = document.querySelector(widgetAttributes.positionBefore);
widgetInsert.parentNode.insertBefore(container, widgetInsert);
window.photoSlurpWidgetSettings = window.photoSlurpWidgetSettings || {};
photoSlurpWidgetSettings[widgetAttributes.id] = {
lang: document.documentElement.lang,
productType: document.querySelector(".breadcrumbs .bc-active").innerText
};
if (!photoSlurpWidgetSettings) {
var photoSlurpWidgetSettings = {};
}
var script = document.createElement('script');
script.async = true;
script.src = 'https://static.photoslurp.com/widget/v3/loader.js';
var entry = document.getElementsByTagName('script')[0];
targetNode.parentNode.insertBefore(script, targetNode);
Para finalizar, haz clic en el botón "Duplicate in all languages" ubicado en la esquina superior derecha del editor para que el widget se muestre en todos los idiomas disponibles de tu tienda, y haz clic en el botón "Add" en la parte inferior de la página. para guardar los cambios.
El widget debería aparecer en las páginas de categorías que tienen imágenes conectadas después de unos minutos.