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

Ne procédez que si vous êtes à l'aise pour modifier le code vous-même. N'hésitez pas à nous contacter sur le chat en direct—nous serons ravis de mettre cela en place pour vous.

Widget versions 1 et 2

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

Si vous utilisez une ancienne version, contactez-nous sur le 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 créneaux de livraison pour tous les jours et tous les emplacements

Remplacez les valeurs d'heure par celles que vous souhaitez désactiver.

L'exemple de code désactive les heures de 2:00 p.m and 3:00 p.m.

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

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

Masquer les créneaux de livraison pour des produits spécifiques par balise

Exigences

Vous devez utiliser le widget du panier (cette option ne fonctionnera pas de manière fiable dans le panier tiroir).

Remplacez les valeurs d'heure par celles que vous souhaitez désactiver.

L'exemple de code ci-dessous désactive les heures 2:00 p.m et 3:00 p.m.

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

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

Cacher/afficher les créneaux de livraison par emplacement

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

L'identifiant de l'emplacement se trouve dans Zapiet - Ramassage + Livraison > Emplacements > [nom de l'emplacement], si vous faites défiler la page jusqu'en bas.

Vous pouvez modifier les valeurs d'heure en fonction de 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 de 24 heures, remplacez "2:00 PM" par "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";
                }
            });
        }
    }
});

Masquer les créneaux de livraison pour une date spécifique

Vous pouvez modifier le code afin de masquer la date dont vous avez besoin. Si vous utilisez un nombre à un chiffre, ajoutez un 0 avant celui-ci (par exemple, "Mar, 01 Mars").

Si vous utilisez une langue autre que l'anglais, vous devrez traduire le jour et le mois que vous visez. Par exemple, si vous utilisez le français, "Sat, 24 December" doit être traduit par "Sam, 24 Décembre".

Vous pouvez modifier les valeurs d'heure en fonction de 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 de 24 heures, remplacez "2:00 PM" par "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";
    }
  }
}

Masquer les créneaux de livraison pour des dates et un emplacement spécifiques

Si vous souhaitez cibler plus de dates ou un emplacement spécifique, utilisez le code ci-dessous. Vous pouvez modifier le code afin de masquer les dates dont vous avez besoin. Si vous utilisez un nombre à un chiffre, ajoutez un 0 avant celui-ci (par exemple, "Mar, 01 Mars").

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

Vous pouvez remplacer les valeurs d'heure par 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 de 24 heures, remplacez "2:00 PM" par "14:00".

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

Cacher des créneaux de livraison différents pour les jours de semaine et les fins de semaine

Si vous souhaitez masquer des créneaux de livraison spécifiques en semaine et différents créneaux horaires pendant les fins de semaine, utilisez le code ci-dessous.

Vous pouvez modifier le code afin de masquer les créneaux de livraison dont vous avez besoin. Si vous utilisez notre horloge 24 heures, remplacez "14:00 PM" par "14:00".

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

Masquer des dates de livraison spécifiques en fonction des balises des produits

Exigences

Vous devez utiliser le widget du panier (cette option ne fonctionnera pas de manière fiable dans le panier tiroir).

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

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

Comment cela se présentera-t-il dans le widget ?

Les heures que vous avez désactivées seront désormais cachées dans le widget Zapiet - Ramassage + Livraison.

Dépannage

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

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