Você pode usar diferentes trechos de código para ocultar ou mostrar horários específicos de entrega, após configurar os horários de entrega.

Proceda apenas se estiver confortável em editar o código você mesmo. Entre em contato conosco via chat — ficaremos felizes em implementar isso para você.

Versões 1 e 2 do widget

Essas etapas se aplicam apenas à versão 1 ou 2 do widget Zapiet - Entrega e Recolhas. Qual versão do widget estou usando?

Se você estiver usando uma versão antiga, entre em contato conosco via chat e ficaremos felizes em atualizar o widget para a versão mais recente.

Você precisará adicionar o código em Zapiet - Entrega e Recolhas > Desenvolvedores, na seção Scripts personalizados.

Ocultar horários de entrega para todos os dias e locais

Altere os valores de tempo para aqueles que deseja desativar.

O código de exemplo desativará os horários 14h e 15h.

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";
}
}
});

Se você estiver usando nosso relógio de 24 horas, seu código deverá ficar assim:

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 horários de entrega para produtos específicos por etiqueta

Requisitos:

Você precisa usar o widget da página do carrinho (esta opção não funcionará de forma confiável no carrinho suspenso).

Altere os valores de horário para aqueles que deseja desativar.

O exemplo de código abaixo desativará os horários 14h e 15h.

Se você estiver usando nosso relógio de 24 horas, substitua '2:00 PM' por '14:00'.

Se você quiser usar outra etiqueta (em vez de "Teste"), poderá alterá-la abaixo e, em seguida, marcar seus produtos de acordo.

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("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/exibir horários de entrega por local

Este código pode ser usado para direcionar um local específico. Você precisará alterar o ZapietOutletId ('123456') para corresponder ao ID do local que está direcionando.

O ID do local pode ser encontrado em Zapiet - Entrega e Recolhas > Locais > [nome do local], se você rolar até o final da página.

Você pode alterar os valores de tempo para aqueles que você gostaria de habilitar/desabilitar — os valores serão diferentes dependendo do tipo de relógio que você está usando (12 horas ou 24 horas). Se você estiver usando nosso relógio de 24 horas, substitua '2:00 PM' 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 horários de entrega para uma data específica

Você pode editar o código para ocultar a data que você precisa. Se você estiver usando um número de um único dígito, adicione um 0 antes (por exemplo, "Ter, 01 de março").

Se você estiver usando uma língua diferente de inglês, precisará traduzir o dia e o mês que está direcionando. Exemplo: "Sat, 24 December" deve ser "Sáb, 24 Dezembro" em português.

Você pode alterar os valores de horário para aqueles que gostaria de desativar — os valores serão diferentes dependendo do tipo de relógio que você está usando (12 horas ou 24 horas). Se você estiver usando nosso relógio de 24 horas, substitua '2:00 PM' 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 horários de entrega para datas específicas e um local específico

Se você quiser direcionar mais datas ou um local específico, use o código abaixo.

Você pode editar o código para ocultar as datas que você precisa. Se você estiver usando um número de um único dígito, adicione um 0 antes (por exemplo, "Ter, 01 de março").

Se você estiver usando uma língua diferente de inglês, precisará traduzir o dia e o mês que está direcionando. Exemplo: "Sat, 24 December" deve ser "Sáb, 24 Dezembro" em português.

Você precisará alterar o ZapietOutletId ('12345') para corresponder ao ID do local que você está direcionando. O ID do local pode ser encontrado em Zapiet - Entrega e Recolhas > Locais > [nome do local], se você rolar até o final da página.

Se você quiser usar várias datas, mas aplicar a todos os locais, remova esta linha: 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 horários de entrega diferentes para dias úteis e fins de semana

Se você deseja ocultar horários de entrega específicos durante os dias úteis e horários diferentes durante o fim de semana, use o código abaixo.

Você pode editar o código para ocultar os horários de entrega que você precisa. Se você estiver usando o nosso relógio de 24 horas, substitua '2:00 PM' por '14:00'.

Se você estiver usando um idioma diferente do inglês, precisará traduzir o dia da semana. Por exemplo, se você estiver usando português, "Sat" deve ser "Sáb" e "Sun" deve ser "Dom". Você pode encontrar suas etiquetas dos dias da semana em Zapiet - Entrega e Recolhas > Configurações > Texto & Design > Calendário.

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 datas de entrega específicas com base em etiquetas de produto

Requisitos:

Você precisa usar o widget da página do carrinho (essa opção não funcionará de maneira confiável no carrinho suspenso).

Altere os valores de data para aqueles que você gostaria de desativar.

Se você quiser usar outra etiqueta (em vez de "Teste"), você pode alterá-la abaixo e, em seguida, marcar seus produtos de acordo.

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("delivery.datepicker.opened", function () {
window.Zapiet.disableDates(['2024-08-14','2024-08-15','2024-08-16','2024-08-24'])
});
}

Como isso aparecerá no widget?

Os horários que você desativou agora serão ocultados no widget Zapiet - Entrega e Recolhas.

Solução de problemas

Se o código não estiver funcionando, tente adicionar jQuery no topo do arquivo do carrinho.
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```