Puedes utilizar diferentes fragmentos de código para ocultar o mostrar franjas horarias de recogida específicas, después de haber Configurado las horas de recogida.

Continúa solo si te sientes cómodo editando el código. Comunícate con nosotros por chat; estaremos encantados de implementar esto por tí.

Versiones de widgets 1 y 2

Estos pasos se aplican solo al widget Zapiet - Recogida + Entrega versión 1 o 2. ¿Cuál versión del widget estoy usando?

Si tienes una versión heredada, comunícate con nosotros a través del chat y estaremos encantados de actualizar el widget a la versión más nueva para tí.

Deberá agregar el código en Zapiet - Recogida + Entrega > Ajustes > Desarrolladores en Scripts personalizados.

Ocultar horarios de recogida para todos los días y todas las ubicaciones

Cambia los valores de tiempo a aquellos que te gustaría desactivar.

El código de ejemplo desactivará las horas 2:00 p. m., 2:30 p. m., 3:00 p. m. y 3:00 p. m.

window.ZapietEvent.listen('pickup.timepicker.opened', function() {
var pickerList = document.getElementsByClassName("picker__list")[0];
var timeLabels = ["2:00 PM", "2:30 PM", "3:00 PM", "3:30 PM"];

if (!pickerList) {
return;
}

for (var i = 0; i < pickerList.children.length; i++) {
var timeOption = pickerList.children[i];
var ariaLabel = timeOption.getAttribute("aria-label");

if (timeLabels.includes(ariaLabel)) {
timeOption.style.display = "none";
}
}
});

Si estás utilizando nuestro reloj de 24 horas, tu código debería verse así:

window.ZapietEvent.listen('pickup.timepicker.opened', function() {
var pickerList = document.getElementsByClassName("picker__list")[0];
var timeLabels = ["14:00", "14:30", "15:00", "15:30"];

if (!pickerList) {
return;
}

for (var i = 0; i < pickerList.children.length; i++) {
var timeOption = pickerList.children[i];
var ariaLabel = timeOption.getAttribute("aria-label");

if (timeLabels.includes(ariaLabel)) {
timeOption.style.display = "none";
}
}
});

Ocultar horarios de recogida para productos específicos por etiqueta

Cambia los valores de tiempo a aquellos que le gustaría desactivar.

El siguiente código de ejemplo desactivará las horas 2:00 p. m., 2:30 p. m., 3:00 p. m. y 3:00 p. m.

Si utilizas nuestro reloj de 24 horas, reemplace '2:00 PM' por '14:00'.

Si deseas utilizar otra etiqueta (en lugar de "Prueba"), puedes cambiarla a continuación y luego etiquetar tus productos en consecuencia.

function productHasTag(product, tag) { 
var tags = product.tags; 
for (var i = 0; i < tags.length; i++) { 
if (tags[i] == tag) { 
return true; 
} 
} 
return false; 
}

function cartHasTag(tag) { 
var products = ZapietWidgetConfig.products; 
for (let i = 0; i < products.length; i++) { 
if (productHasTag(products[i], tag)) { 
return true; 
} 
} 
return false; 
} 

if (cartHasTag("Test")) { 
window.ZapietEvent.listen('pickup.timepicker.opened', function() { 
var pickerList = document.getElementsByClassName("picker__list")[0];
var timeLabels = ["2:00 PM", "2:30 PM", "3:00 PM", "3:30 PM"];

if (!pickerList) {
return;
}

for (var i = 0; i < pickerList.children.length; i++) {
var timeOption = pickerList.children[i];
var ariaLabel = timeOption.getAttribute("aria-label");

if (timeLabels.includes(ariaLabel)) {
timeOption.style.display = "none";
}
}
});
}

Ocultar/mostrar horarios de recogida por ubicación

Este código se puede utilizar para apuntar a una ubicación específica. Deberá cambiar ZapietOutletId ("12345") para que coincida con el ID de ubicación al que se dirige.

El ID de la ubicación se puede encontrar en Zapiet - Recogida + Entrega > Ubicaciones > [nombre de la ubicación], si te desplazas hasta la parte inferior de la página.

Puedes cambiar los valores de hora a aquellos que desees habilitar/deshabilitar; los valores serán diferentes según el tipo de reloj que estés utilizando (12 horas o 24 horas). Si utilizas nuestro reloj de 24 horas, reemplaza '2:00 PM' por '14:00'.

window.ZapietOutletId = '';

window.ZapietEvent.listen('locationSelected', function(payload) {
if (payload.method == "pickup") {
// Store the selected outletId in a global variable
window.ZapietOutletId = String(payload.location.id);
}
});

window.ZapietEvent.listen('pickup.timepicker.opened', function() {
// Specify the exact outletId number to enable the specific times on
if (window.ZapietOutletId === '123456') {
var pickerList = document.querySelector(".picker__list");

if (pickerList) {
// Hides all pickup times
var timeOptions = pickerList.querySelectorAll("[aria-label]");
timeOptions.forEach(function(timeOption) {
timeOption.style.display = "none";
});

// Enable both 9:00 AM and 4:00 PM
var timeToShow = ["9:00 AM", "4:00 PM"];
timeToShow.forEach(function(time) {
var specificTimeOption = pickerList.querySelector("[aria-label='" + time + "']");
if (specificTimeOption) {
specificTimeOption.style.display = "block";
}
});
}
}
});

Ocultar horarios de recogida para una fecha específica

Puedes editar el "martes 21 de diciembre" para ocultar la fecha que necesitas. Si estás utilizando un número de un solo dígito, agrega un 0 antes (por ejemplo, "martes, 01 de marzo").

Si utilizas un idioma que no sea el inglés, deberás traducir el día y el mes al que se dirige. Por ejemplo, si usas francés, "sábado, 24 de diciembre" debería ser "sábado, 24 de diciembre".

Puedes cambiar los valores de hora a aquellos que te gustaría desactivar; los valores serán diferentes según el tipo de reloj que estés utilizando (12 horas o 24 horas). Si utilizas nuestro reloj de 24 horas, reemplaza '2:00 PM' por '14:00'.

window.ZapietEvent.listen('pickup.timepicker.opened', function() {
var dateButton = document.querySelector("[aria-label^='Fri, 30 June']");
var isDateSelected = dateButton && (dateButton.getAttribute("aria-selected") == "true");
var pickerList = document.querySelector(".picker__list");

if (isDateSelected) {
hideTimeLabel(pickerList, "2:00 PM");
hideTimeLabel(pickerList, "2:30 PM");
hideTimeLabel(pickerList, "3:00 PM");
hideTimeLabel(pickerList, "3:30 PM");
} else {
showTimeLabel(pickerList, "2:00 PM");
showTimeLabel(pickerList, "2:30 PM");
showTimeLabel(pickerList, "3:00 PM");
showTimeLabel(pickerList, "3:30 PM");
}
});

function hideTimeLabel(parentElement, timeLabel) {
if (parentElement) {
var timeOption = parentElement.querySelector("[aria-label='" + timeLabel + "']");
if (timeOption) {
timeOption.style.display = "none";
}
}
}

function showTimeLabel(parentElement, timeLabel) {
if (parentElement) {
var timeOption = parentElement.querySelector("[aria-label='" + timeLabel + "']");
if (timeOption) {
timeOption.style.display = "block";
}
}
}

Ocultar horarios de recogida para fechas específicas y una ubicación específica

Si deseas orientar sus anuncios a más fechas o a una ubicación específica, utiliza el código siguiente.

Puedes editar el "Martes, 21 de diciembre" para ocultar las fechas que necesitas. Si estás utilizando un número de un solo dígito, agrega un 0 antes (por ejemplo, "martes, 01 de marzo").

Si utilizas un idioma que no sea el inglés, deberás traducir el día y el mes al que se dirige. Por ejemplo, si usas francés, "sábado, 24 de diciembre" debería ser "sábado, 24 de diciembre".

Deberá cambiar ZapietOutletId ("12345") para que coincida con el ID de ubicación al que se dirige. El ID de la ubicación se puede encontrar en Zapiet - Recogida + Entrega > Ubicaciones > [nombre de la ubicación], si te desplazas hasta la parte inferior de la página.

Puede cambiar los valores de hora a aquellos que le gustaría desactivar; los valores serán diferentes según el tipo de reloj que esté utilizando (12 horas o 24 horas). Si utiliza nuestro reloj de 24 horas, reemplaza '2:00 PM' por '14:00'.

Si deseas utilizar varias fechas, pero aplicar a todas las ubicaciones, elimina esta línea: var locationId = "12345";

var dates = [
"Wed, 28 June",
"Thu, 29 June"
];

var hours = [
"2:00 PM",
"2:30 PM",
"3:00 PM",
"3:30 PM"
];

var locationId = "12345";
window.ZapietOutletId = '';
if (typeof locationId != "undefined") {
window.ZapietEvent.listen('locationSelected', function(payload) {
if (payload.method == "pickup") {
window.ZapietOutletId = String(payload.location.id);
}
});
}

window.ZapietEvent.listen('pickup.timepicker.opened', function() {
var selectedDate = document.querySelector('.picker__day[aria-selected="true"]').getAttribute('aria-label');
var pickerList = document.querySelector(".picker__list");

var hourSelectorQuery = hours
.map(function(hour) {
return '[aria-label^="' + hour + '"]';
})
.join(",");

var isAnyDateSelected = dates.some(function(date) {
return selectedDate.includes(date);
});

var isLocationSelected = (typeof locationId !== "undefined") && (window.ZapietOutletId === locationId);
var shouldHideHours = (typeof locationId !== "undefined") ? isAnyDateSelected && isLocationSelected : isAnyDateSelected;

if (shouldHideHours) {
hideHours(pickerList, hourSelectorQuery);
} else {
showHours(pickerList, hourSelectorQuery);
}
});

function hideHours(parentElement, selectorQuery) {
if (parentElement) {
var hourOptions = parentElement.querySelectorAll(selectorQuery);
hourOptions.forEach(function(hourOption) {
hourOption.style.display = "none";
});
}
}

function showHours(parentElement, selectorQuery) {
if (parentElement) {
var hourOptions = parentElement.querySelectorAll(selectorQuery);
hourOptions.forEach(function(hourOption) {
hourOption.style.display = "block";
});
}
}

Ocultar espacios de recogida en diferentes fechas con diferentes horarios

El siguiente código de ejemplo deshabilitará los intervalos de tiempo de 6:00 p. m. y 7:00 p. m. el 24 de diciembre, y los intervalos de tiempo de 4:00 p. m., 5:00 p. m., 6:00 p. m. y 7:00 p. m. el 31 de diciembre.

Puede editar el código para ocultar las ranuras de recogida que necesita. Si utilizas nuestro reloj de 24 horas, reemplace '2:00 PM' por '14:00'.

Si utiliza un idioma que no sea el inglés, deberá traducir el día y el mes al que se dirige. Por ejemplo, si usa francés, "sábado, 24 de diciembre" debería ser "sábado, 24 de diciembre". Puedes encontrar las etiquetas del día de la semana en Zapiet - Recogida + Entrega > Ajustes > Texto y Diseño > Calendario.

window.ZapietEvent.listen('pickup.timepicker.opened', function() {
const config = [
{
'date': 'Sun, 24 December, 2023',
'times': [
'6:00 PM',
'7:00 PM'
],
}, 
{
'date': 'Sun, 31 December, 2023',
'times': [
'4:00 PM',
'5:00 PM',
'6:00 PM',
'7:00 PM',
]
}
];

const pickerList = document.querySelector(".picker__list");

for (let i = 0; i < config.length; i++) {
const settings = config[i];

const dateButton = document.querySelector("[aria-label^='" + settings.date + "']");

const isDateSelected = dateButton && (dateButton.getAttribute("aria-selected") == "true");

if (! isDateSelected) {
continue;
}

for (let x = 0; x < settings.times.length; x++) {
const time = settings.times[x].toUpperCase();
hideTimeLabel(pickerList, time);
}
}
});

function hideTimeLabel(parentElement, timeLabel) {
if (parentElement) {
var timeOption = parentElement.querySelector("[aria-label='" + timeLabel + "']");
if (timeOption) {
timeOption.style.display = "none";
}
}
}

function showTimeLabel(parentElement, timeLabel) {
if (parentElement) {
var timeOption = parentElement.querySelector("[aria-label='" + timeLabel + "']");
if (timeOption) {
timeOption.style.display = "block";
}
}
}

Ocultar diferentes franjas horarias de recogida para días laborables y fines de semana

Si deseas ocultar franjas horarias de recogida específicas entre semana y diferentes franjas horarias durante el fin de semana, utiliza el siguiente código.

Puedes editar el código para ocultar las ranuras de recogida que necesitas. Si utilizas nuestro reloj de 24 horas, reemplace '2:00 PM' por '14:00'.

Si utiliza un idioma que no sea el inglés, deberá traducir el día de la semana. Por ejemplo, si usas francés, "Sat" debería ser "Sam" y "Sun" debería ser "Dim". Puedes encontrar las etiquetas del día de la semana en Zapiet - Recogida + Entrega > Ajustes > Texto y Diseño > Calendario.

window.ZapietEvent.listen('pickup.timepicker.opened', function () {
var isWeekendSelected = document.querySelectorAll('[aria-label*="Sat,"][aria-selected=true],[aria-label*="Sun,"][aria-selected=true]').length > 0;
var pickerList = document.querySelector('.picker__list');

if (isWeekendSelected) {
hideTimeLabels(pickerList, ["3:00 PM", "4:00 PM"]);
} else {
hideTimeLabels(pickerList, ["9:00 AM", "10:00 AM"]);
}
});

function hideTimeLabels(parentElement, timeLabels) {
if (parentElement) {
var timeOptions = parentElement.querySelectorAll("[aria-label]");
timeOptions.forEach(function(timeOption) {
if (timeLabels.includes(timeOption.getAttribute("aria-label"))) {
timeOption.style.display = "none";
}
});
}
}

Ocultar fechas de recogida específicas según las etiquetas de los productos

Cambia los valores de fecha a aquellos que te gustaría deshabilitar.

El siguiente código de ejemplo desactivará las horas 2:00 p. m. y 3:00 p. m.

Si utilizas nuestro reloj de 24 horas, reemplace '2:00 PM' por '14:00'.

Si desea utilizar otra etiqueta (en lugar de "Prueba"), puede cambiarla a continuación y luego etiquetar sus productos en consecuencia.

function productHasTag(product, tag) {
var tags = product.tags;
for (var i = 0; i < tags.length; i++) {
if (tags[i] == tag) {
return true;
}
}
return false;
}

function cartHasTag(tag) {
var products = ZapietWidgetConfig.products;
for (let i = 0; i < products.length; i++) {
if (productHasTag(products[i], tag)) {
return true;
}
}
return false;
}

if (cartHasTag("Test")) {
window.ZapietEvent.listen('pickup.datepicker.rendered', function () {
document.querySelectorAll('.picker__day[aria-label="Fri, 01 December, 2023"]').forEach(function (element) {
element.classList.add("picker__day--disabled");
});
});
}

Si desea agregar más fechas, use el código a continuación.

function productHasTag(product, tag) {
var tags = product.tags;
for (var i = 0; i < tags.length; i++) {
if (tags[i] == tag) {
return true;
}
}
return false;
}

function cartHasTag(tag) {
var products = ZapietWidgetConfig.products;
for (let i = 0; i < products.length; i++) {
if (productHasTag(products[i], tag)) {
return true;
}
}
return false;
}

if (cartHasTag("Test")) {
window.ZapietEvent.listen('pickup.datepicker.rendered', function () {
document.querySelectorAll('.picker__day[aria-label="Fri, 01 December, 2023"], .picker__day[aria-label="Fri, 08 December, 2023"]').forEach(function (element) { 
element.classList.add("picker__day--disabled");
});
});
}

¿Cómo se verá en el widget?

Los horarios que has desactivado ahora estarán ocultos en Zapiet - Widget de recogida y entrega.

Solución de problemas

Si el código no funciona, intenta agregar jQuery encima del archivo del carrito.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>