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

Somente proceda se estiver confortável em editar código. Caso contrário, entre em contato via chat, e ficaremos felizes em implementar isso para você.

Versões de Widget 1 e 2

Esses passos se aplicam somente ao widget Zapiet - Entrega e Recolhas versões 1 ou 2. Qual versão do widget estou utilizando?

Se estiver usando uma versão antiga, entre em contato via chat para atualizarmos para a versão mais recente.

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

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

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

O código abaixo desativará os horários 14:00, 14:30, 15:00 e 15:30.

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

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

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 horários de recolha por etiquetas de produto

Requisitos:

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

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

O código de exemplo abaixo desativará os horários 14:00, 14:30, 15:00 e 15:30.

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

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

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

Esse código pode ser usado para direcionar um local específico. Você precisará alterar o ZapietOutletId ('12345') 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], rolando até o final da página.

Você pode alterar os valores de horário para aqueles que deseja ativar/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.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 horários de recolha para uma data específica

Você pode editar "Ter, 21 Dezembro" para ocultar a data necessária. Se estiver usando um número de um único dígito, adicione um 0 antes dele (por exemplo, "Ter, 01 Março").

Se estiver usando um idioma diferente do português, você precisará traduzir o dia e o mês que está direcionando. Por exemplo, se estiver usando francês, "Sáb, 24 Dezembro" deverá ser "Sam, 24 Décembre".

Você pode alterar os valores de horário para aqueles que deseja 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('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 horários de recolha para datas específicas e um local específico

Se você deseja direcionar mais datas, ou um local específico, use o código abaixo. Você pode editar "Ter, 21 Dezembro" para ocultar as datas necessárias. Se estiver usando um número de um único dígito, adicione um 0 antes dele (por exemplo, "Ter, 01 Março").

Se estiver usando um idioma diferente do português, precisará traduzir o dia e o mês que está direcionando. Por exemplo, se estiver usando francês, "Sáb, 24 Dezembro" deverá ser "Sam, 24 Décembre".

Você precisará alterar o ZapietOutletId ('12345') 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], rolando até o final da página.

Se você deseja usar várias datas, mas aplicar a todos os locais, remova esta linha: 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 horários de recolha em diferentes datas com diferentes horários

O código de exemplo abaixo desativará os horários de recolha das 18:00 e 19:00 no dia 24 de dezembro, e os horários das 16:00, 17:00, 18:00 e 19:00 no dia 31 de dezembro.

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

Se você estiver usando um idioma diferente do português, será necessário traduzir o dia e o mês que está direcionando. Por exemplo, se estiver usando francês, "Sat, 24 December" deverá ser "Sam, 24 Décembre". Você pode encontrar os rótulos de dias da semana em Zapiet - Entrega e Recolhas > Configurações > Texto e Design > Calendário.

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 horários de recolha para dias de semana e fins de semana

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

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

Se você estiver usando um idioma diferente do português, será necessário traduzir o dia da semana. Por exemplo, se estiver usando francês, "Sat" deverá ser "Sam" e "Sun" deverá ser "Dim". Você pode encontrar os rótulos de dias da semana em Zapiet - Entrega e Recolhas > Configurações > Texto e Design > Calendário.

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

Requisitos:

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

Altere os valores de data para aqueles que deseja desativar.

Se quiser usar outra etiqueta (em vez de "Teste"), você pode alterá-la abaixo e, em seguida, etiquetar 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("pickup.datepicker.opened", function () {
window.Zapiet.disableDates(['2024-08-14','2024-08-15','2024-08-16','2024-08-24'])
});
}

Como será exibido no widget?

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

Solução de problemas

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