Vous pouvez utiliser différents extraits de code pour masquer ou afficher des créneaux horaires de ramassage spécifiques, après avoir configuré les heures de ramassage.

Ne continuez que si vous êtes à l’aise avec la modification du code vous-même. Veuillez nous contacter par chat en direct, nous serons heureux de mettre cela en œuvre pour vous.

Widgets versions 1 et 2

Ces étapes s'appliquent uniquement au widget Zapiet - Ramassage + Livraison version 1 ou 2. Quelle version du widget est-ce que j'utilise ?

Si vous utilisez une ancienne version, veuillez nous contacter par chat en direct et nous serons heureux de mettre à jour le widget vers la version la plus récente pour vous !

Vous devrez ajouter le code dans Zapiet - Ramassage + Livraison > Développeurs, sous Scripts personnalisés.

Masquer les heures de ramassage pour tous les jours et tous les emplacements

Remplacez les valeurs de temps par celles que vous souhaitez désactiver.

L'exemple de code désactivera les heures 2:00 PM, 2:30 PM, 3:00 PM et 3:30 PM.

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 vous utilisez notre horloge 24 heures, votre code devrait ressembler à ceci :

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

Masquer les heures de ramassage pour des produits spécifiques par balise

Remplacez les valeurs de temps par celles que vous souhaitez désactiver.

L'exemple de code ci-dessous désactivera les heures 2:00 PM, 2:30 PM, 3:00 PM et 3:30 PM.

Si vous utilisez notre horloge 24 heures, remplacez "2:00 PM" par "14h00".

Si vous souhaitez utiliser une autre balise (au lieu de "Test"), vous pouvez la modifier ci-dessous, puis baliser vos produits en conséquence.

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

Masquer/afficher les heures de ramassage par emplacement

Ce code peut être utilisé pour cibler un emplacement spécifique. Vous devrez modifier le ZapietOutletId ("12345") pour qu'il corresponde à l'ID de l'emplacement que vous ciblez.

L'ID de l'emplacement peut être trouvé dans Zapiet - Ramassage + Livraison > Emplacements > [nom de l'emplacement], si vous faites défiler vers le bas de la page.

Vous pouvez modifier les valeurs d'heure pour celles que vous souhaitez activer/désactiver. Les valeurs seront différentes selon le type d'horloge que vous utilisez (12 heures ou 24 heures). Si vous utilisez notre horloge 24 heures, remplacez "2:00 PM" par "14h00".

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

Masquer les heures de ramassage pour une date spécifique

Vous pouvez modifier le "Mar, 21 Décembre" afin de masquer la date dont vous avez besoin. Si vous utilisez un numéro à un chiffre, ajoutez un 0 devant (par exemple "Mar, 01 Mars").

Vous pouvez modifier les valeurs d'heure pour celles que vous souhaitez désactiver. Les valeurs seront différentes selon le type d'horloge que vous utilisez (12 heures ou 24 heures). Si vous utilisez notre horloge 24 heures, remplacez "2:00 PM" par "14h00 ".

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

Masquer les heures de ramassage pour des dates spécifiques et un emplacement spécifique

Si vous souhaitez cibler plus de dates ou un emplacement spécifique, utilisez le code ci-dessous.

Vous pouvez modifier le "Mar, 21 Décembre" afin de masquer les dates dont vous avez besoin. Si vous utilisez un numéro à un chiffre, ajoutez un 0 devant (par exemple "Mar, 01 Mars").

Vous devrez modifier le ZapietOutletId (« 12345 ») pour qu'il corresponde à l'ID de l'emplacement que vous ciblez. L'ID de l'emplacement peut être trouvé dans Zapiet - Ramassage + Livraison > Emplacements > [nom de l'emplacement], si vous faites défiler vers le bas de la page.

Si vous souhaitez utiliser plusieurs dates, mais appliquer à tous les emplacements, supprimez cette ligne : 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";
});
}
}

Masquer les créneaux de ramassage à différentes dates et heures différentes

L'exemple de code ci-dessous désactivera les créneaux horaires de 6:00 PM et 7:00 PM le 24 décembre, et les plages horaires de 4:00 PM, 5:00 PM, 6:00 PM et 7:00 PM le 31 décembre.

Vous pouvez modifier le code afin de masquer les emplacements de ramassage dont vous avez besoin. Si vous utilisez notre horloge 24 heures, remplacez "2:00 PM" par "14h00".

Si vous utilisez une langue autre que l'anglais, vous devrez traduire le jour et le mois que vous ciblez. Par exemple, si vous utilisez le français, "Sat, 24 December"devrait être "Sam, 24 Décembre". Vous pouvez trouver vos étiquettes de jour de la semaine dans Zapiet - Ramassage + Livraison > Paramètres > Texte et design > Calendrier.

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

Masquer les différents créneaux horaires de ramassage pour la semaine et le week-end

Si vous souhaitez masquer des créneaux de ramassage spécifiques en semaine et différents créneaux le week-end, utilisez le code ci-dessous.

Vous pouvez modifier le code afin de masquer les emplacements de ramassage dont vous avez besoin. Si vous utilisez notre horloge 24 heures, remplacez "2:00 PM" par "14h00".

Si vous utilisez une langue autre que l'anglais, vous devrez traduire le jour de la semaine. Par exemple, si vous utilisez le français, "Sat" doit être "Sam" et "Sun" doit être "Dim". Vous pouvez trouver vos étiquettes de jour de la semaine dans Zapiet - Ramassage + Livraison > Paramètres > Texte et design > Calendrier.

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

Masquer les dates de ramassage spécifiques en fonction des balises de produits

Remplacez les valeurs de date par celles que vous souhaitez désactiver.

L'exemple de code ci-dessous désactivera les heures 2:00 PM et 3:00 PM.

Si vous utilisez notre horloge de 24 heures, remplacez "2:00" par "14h00".

Si vous souhaitez utiliser une autre balise (au lieu de « Test »), vous pouvez la modifier ci-dessous, puis baliser vos produits en conséquence.

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 vous souhaitez ajouter plus de dates, utilisez le code ci-dessous.

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

À quoi cela ressemblera-t-il dans le widget ?

Les horaires que vous avez désactivés seront désormais masqués dans le widget Zapiet - Ramassage + Livraison.

Dépannage

Si le code ne fonctionne pas, essayez d'ajouter jQuery en haut du fichier panier.

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