Puedes utilizar diferentes fragmentos de código para ocultar o mostrar franjas horarias de entrega específicas, una vez que haya configurado las franjas horarias de entrega.

Procede únicamente si te siente cómodo editando el código por ti mismo. Pónte en contacto con nosotros a través del chat: estaremos encantados de implementarlo por ti.

Widget versiones 1 y 2

Estos pasos sólo se aplican al widget Zapiet - Recogida + Entrega versión 1 o 2. ¿Qué versión del widget estoy utilizando?

Si utilizas una versión anterior, ponte en contacto con nosotros a través del chat y estaremos encantados de actualizar el widget a la versión más reciente.

Deberás añadir el código en Zapiet - Recogida + Entrega > Desarrolladores, en Scripts personalizados.

Ocultar franjas horarias de entrega para todos los días y todos los lugares

Cambia los valores de tiempo por los que desee desactivar.

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

window.ZapietEvent.listen('delivery.timepicker.opened', function() {
    var pickerList = document.getElementsByClassName("picker__list")[0];
    var timeLabels = ["2:00 PM", "3:00 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á utilizando nuestro reloj de 24 horas, tu código debería tener este aspecto:

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

    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 franjas de entrega para productos específicos por etiqueta

Cambie los valores de tiempo por los que desees desactivar.

El código de ejemplo de abajo desactivará las horas 2:00pm y 3:00pm.

Si utiliza nuestro reloj de 24 horas, sustituya "14:00" por "14:00".

Si deseas utilizar otra etiqueta (en lugar de "Prueba"), puedes cambiarla a continuación y, a continuación, 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("Prueba")) {
  window.ZapietEvent.listen("delivery.timepicker.opened", function () {
    var pickerList = document.getElementsByClassName("picker__list")[0];
    var timeLabels = ["2:00 PM", "3:00 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 franjas horarias de entrega por ubicación

Este código puede utilizarse para seleccionar una ubicación específica. Tendrás que cambiar el ZapietOutletId ('123456') para que coincida con el ID de la ubicación a la que se dirige.

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

Puedes cambiar los valores de la hora por los que quieras activar/desactivar -los valores serán diferentes dependiendo del tipo de reloj que estés utilizando (12 o 24 horas). Si utilizas nuestro reloj de 24 horas, sustituye "14:00" por "14:00".

window.ZapietOutletId = '123456';

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

window.ZapietEvent.listen('delivery.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 delivery times
            var timeOptions = pickerList.querySelectorAll("[aria-label]");
            timeOptions.forEach(function(timeOption) {
                timeOption.style.display = "none";
            });
            
            // Enable both 10:00 AM and 4:00 PM
            var timeToShow = ["10:00 AM", "4:00 PM"];
            timeToShow.forEach(function(time) {
                var specificTimeOption = pickerList.querySelector("[aria-label='" + time + "']");
                if (specificTimeOption) {
                    specificTimeOption.style.display = "block";
                }
            });
        }
    }
});

Ocultar franjas horarias de entrega para una fecha concreta

Puedes editar el código para ocultar la fecha que necesite. Si utiliza un número de una sola cifra, añádale un 0 delante (por ejemplo, "Mar, 01 de marzo").

Si utilizas un idioma distinto del inglés, tendrás que traducir el día y el mes a los que te diriges. Por ejemplo, si utiliza el Español, "Sat, 24 December" debería ser "Sab, 24 Diciembre".

Puedes cambiar los valores de la hora por los que quieras desactivar-los valores serán diferentes dependiendo del tipo de reloj que estés utilizando (12 o 24 horas). Si utilizas nuestro reloj de 24 horas, sustituye "14:00" por "14:00".

window.ZapietEvent.listen("delivery.timepicker.opened", function () {
  var dateButton = document.querySelector("[aria-label^='Fri, 22 December']");
  var isDateSelected =
    dateButton && dateButton.getAttribute("aria-selected") == "true";
  var pickerList = document.querySelector(".picker__list");
  if (isDateSelected) {
    hideTimeLabel(pickerList, "2:00 PM");
    hideTimeLabel(pickerList, "3:00 PM");
  } else {
    showTimeLabel(pickerList, "2:00 PM");
    showTimeLabel(pickerList, "3:00 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 franjas horarias de entrega para fechas y un lugar concretos

Si deseas seleccionar más fechas o un lugar concreto, utiliza el código siguiente, que puede modificar para ocultar las fechas que necesite. Si utiliza un número de una sola cifra, añada un 0 delante (por ejemplo, "Mar, 01 de marzo").

Si utilizas un idioma distinto del inglés, tendrás que traducir el día y el mes a los que te diriges. Por ejemplo, si utiliza el Español, "Sat, 24 December" debería ser "Sab, 24 Diciembre".

Tendrás que cambiar el ZapietOutletId ('12345') para que coincida con el ID de ubicación al que está apuntando. El ID de ubicación se puede encontrar en Zapiet - Recogida + Entrega > Ubicaciones > [nombre de la ubicación], si se desplaza hasta la parte inferior de la página.

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

var dates = ["Thu, 09 November", "Fri, 10 November"];
var hours = ["2:00 PM", "3:00 PM"];
var locationId = "123456";
window.ZapietOutletId = "";
if (typeof locationId != "undefined") {
  window.ZapietEvent.listen("locationSelected", function (payload) {
    if (payload.method == "delivery") {
      window.ZapietOutletId = String(payload.location.id);
    }
  });
}
window.ZapietEvent.listen("delivery.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 diferentes franjas horarias de entrega para días laborables y fines de semana

Si deseas ocultar franjas horarias específicas de entrega en días laborables y franjas horarias diferentes durante el fin de semana, utiliza el código que aparece a continuación.

Puedes editar el código para ocultar las franjas horarias de entrega que necesite. Si utilizas nuestro reloj de 24 horas, sustituye "14:00" por "14:00".

Si utilizas un idioma distinto del inglés, tendrás que traducir el día de la semana. Por ejemplo, si utiliza el Español, "Sat" debería ser "Sab" y "Sun" debería ser "Dom". Puedes encontrar las etiquetas de los días de la semana en Zapiet - Recogida + Entrega > Configuración > Texto y diseño > Calendario.

window.ZapietEvent.listen('delivery.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 entrega específicas en función de las etiquetas de los productos

Cambia los valores de fecha por los que desees desactivar.

El código de ejemplo de abajo desactivará las horas 2:00pm y 3:00pm.

Si utilizas nuestro reloj de 24 horas, sustituye "14:00" por "14:00".

Si deseas utilizar otra etiqueta (en lugar de "Prueba"), puedes cambiarla a continuación y, a continuación, 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("Prueba")) {
   window.ZapietEvent.listen('delivery.datepicker.rendered', function () {
      document.querySelectorAll('.picker__day[aria-label="Fri, 01 December, 2023"]').forEach(function (element) {
         element.classList.add("picker__day--disabled");
      });
   });
}

Si deseas añadir más fechas, utilice el código siguiente.

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("Prueba")) {
  window.ZapietEvent.listen("delivery.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?

Las horas que ha desactivado ahora estarán ocultas en Zapiet - Pickup + Delivery widget.

Solución de problemas

Si el código no funciona, pruebe a añadir jQuery sobre el archivo del carrito.

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