Tous nos scripts

CMS

Ajouter un button Favoris dans le CMS

<script>
document.addEventListener('DOMContentLoaded', function () {
  let favorites = JSON.parse(localStorage.getItem('favorites')) || [];

  function updateLocalStorage() {
    localStorage.setItem('favorites', JSON.stringify(favorites));
  }

  function updateButtonStates() {
    document.querySelectorAll('[js-cmsfavorites-element="add-favorite"]').forEach((button) => {
      const itemId = button.closest('[js-cmsfavorites-id]').getAttribute('js-cmsfavorites-id');
      const likeClass =
        button.closest('[js-cmsfavorites-class]')?.getAttribute('js-cmsfavorites-class') || 'liked';
      if (favorites.includes(itemId)) {
        button.classList.add(likeClass);
      } else {
        button.classList.remove(likeClass);
      }
    });
  }

  function handleLikeButtonClick(event) {
    event.preventDefault();
    const button = event.currentTarget;
    const itemId = button.closest('[js-cmsfavorites-id]').getAttribute('js-cmsfavorites-id');

    if (favorites.includes(itemId)) {
      favorites = favorites.filter((fav) => fav !== itemId);
    } else {
      favorites.push(itemId);
    }
    updateLocalStorage();
    updateButtonStates();
    displayFavorites();
    updateFavoritesCount();
  }

  document.querySelectorAll('[js-cmsfavorites-element="add-favorite"]').forEach((button) => {
    button.addEventListener('click', handleLikeButtonClick);
  });

  function displayFavorites() {
    const wishlistContainer = document.querySelector('[js-cms-favorites="list-wrapper"]');
    const allItems = document.querySelectorAll('[js-cmsfavorites-id]');

    if (!wishlistContainer) return;

    wishlistContainer.innerHTML = '';

    favorites.forEach((itemId) => {
      const item = [...allItems].find((el) => {
        return el.getAttribute('js-cmsfavorites-id') === itemId;
      });

      if (item) {
        const clonedItem = item.cloneNode(true);

        const clonedButton = clonedItem.querySelector('[js-cmsfavorites-element="add-favorite"]');
        if (clonedButton) {
          const likeClass =
            clonedButton
              .closest('[js-cmsfavorites-class]')
              ?.getAttribute('js-cmsfavorites-class') || 'liked';
          clonedButton.classList.add(likeClass);
          clonedButton.addEventListener('click', handleLikeButtonClick);
        }

        wishlistContainer.appendChild(clonedItem);
      }
    });
  }

  function updateFavoritesCount() {
    const countContainer = document.querySelector('[js-cmsfavorites-element="count"]');
    if (countContainer) {
      countContainer.textContent = favorites.length;
    }
  }

  updateButtonStates();
  displayFavorites();
  updateFavoritesCount();
});

</script>

Etape 1 - Ajouter le script sur la page ou le projet Webflow

<!-- Scripts by Justa | CMS Items Favoriting -->
<script src="https://cdn.jsdelivr.net/npm/@justaa/scripts/dist/cms/favorites.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  let favorites = JSON.parse(localStorage.getItem('favorites')) || [];

  function updateLocalStorage() {
    localStorage.setItem('favorites', JSON.stringify(favorites));
  }

  function updateButtonStates() {
    document.querySelectorAll('[js-cmsfavorites-element="add-favorite"]').forEach((button) => {
      const itemId = button.closest('[js-cmsfavorites-id]').getAttribute('js-cmsfavorites-id');
      const likeClass =
        button.closest('[js-cmsfavorites-class]')?.getAttribute('js-cmsfavorites-class') || 'liked';
      if (favorites.includes(itemId)) {
        button.classList.add(likeClass);
      } else {
        button.classList.remove(likeClass);
      }
    });
  }

  function handleLikeButtonClick(event) {
    event.preventDefault();
    const button = event.currentTarget;
    const itemId = button.closest('[js-cmsfavorites-id]').getAttribute('js-cmsfavorites-id');

    if (favorites.includes(itemId)) {
      favorites = favorites.filter((fav) => fav !== itemId);
    } else {
      favorites.push(itemId);
    }
    updateLocalStorage();
    updateButtonStates();
    displayFavorites();
    updateFavoritesCount();
  }

  document.querySelectorAll('[js-cmsfavorites-element="add-favorite"]').forEach((button) => {
    button.addEventListener('click', handleLikeButtonClick);
  });

  function displayFavorites() {
    const wishlistContainer = document.querySelector('[js-cms-favorites="list-wrapper"]');
    const allItems = document.querySelectorAll('[js-cmsfavorites-id]');

    if (!wishlistContainer) return;

    wishlistContainer.innerHTML = '';

    favorites.forEach((itemId) => {
      const item = [...allItems].find((el) => {
        return el.getAttribute('js-cmsfavorites-id') === itemId;
      });

      if (item) {
        const clonedItem = item.cloneNode(true);

        const clonedButton = clonedItem.querySelector('[js-cmsfavorites-element="add-favorite"]');
        if (clonedButton) {
          const likeClass =
            clonedButton
              .closest('[js-cmsfavorites-class]')
              ?.getAttribute('js-cmsfavorites-class') || 'liked';
          clonedButton.classList.add(likeClass);
          clonedButton.addEventListener('click', handleLikeButtonClick);
        }

        wishlistContainer.appendChild(clonedItem);
      }
    });
  }

  function updateFavoritesCount() {
    const countContainer = document.querySelector('[js-cmsfavorites-element="count"]');
    if (countContainer) {
      countContainer.textContent = favorites.length;
    }
  }

  updateButtonStates();
  displayFavorites();
  updateFavoritesCount();
});

</script>
Copier

Etape 2 - Ajouter les attributes correspondants

CMS List - Définir la list pour laquelle la solution doit être implémentée

Nom

js-cmsfavorites-element

Valeur

list

  • Ajouter l'attributes à la Collection List

CMS Item - Définir les Item pour lesquels la solution doit être implémentée

Nom

js-cmsfavorites-id

Copié !

Valeur

{identifier}

Copié !
  • Ajouter cet attribute au CMS Item de votre List
  • La valeur doit être unique donc utilisez le slug (ou un champ ID custom)

Div - Définir le button qui va permettre de liker un item

Nom

js-cmsfavorites-element

Valeur

add-favorite

  • Ajouter cet attribute à l'élément qui va permettre de liker un item (un bouton)

Class - Définir une class qui va être ajoutée au button une fois l'élément liké  - OPTIONNEL

Nom

js-cmsfavorites-class

Valeur

[identifier]

  • Permet d'avoir une class personnalisée qui va être ajoutée au bouton qui permet de liker une fois l'item liké (ex: le coeur qui passe en rouge)
  • Par défaut, la class "liked" est ajoutée

Div - Définir la List qui va afficher les items likés - OPTIONNEL

Nom

js-cmsfavorites-element

Valeur

list-wrapper

Cette fonctionnalité permet d'ajouter un système de Wishlist à votre site Webflow

Ajouter à une DIV qui servira de collection list pour stocker les élements likés

Text - Définir le text / paragraph qui va permettre de compter le nombre d'Items likés - OPTIONNEL

Nom

js-cmsfavorites-element

Valeur

count

  • Ajouter au texte qui permettra d'afficher le nombre d'items likés

Nom

Valeur

Tuto, template & scripts

Tuto

Template

Script

<script>
document.addEventListener('DOMContentLoaded', function () {
  let favorites = JSON.parse(localStorage.getItem('favorites')) || [];

  function updateLocalStorage() {
    localStorage.setItem('favorites', JSON.stringify(favorites));
  }

  function updateButtonStates() {
    document.querySelectorAll('[js-cmsfavorites-element="add-favorite"]').forEach((button) => {
      const itemId = button.closest('[js-cmsfavorites-id]').getAttribute('js-cmsfavorites-id');
      const likeClass =
        button.closest('[js-cmsfavorites-class]')?.getAttribute('js-cmsfavorites-class') || 'liked';
      if (favorites.includes(itemId)) {
        button.classList.add(likeClass);
      } else {
        button.classList.remove(likeClass);
      }
    });
  }

  function handleLikeButtonClick(event) {
    event.preventDefault();
    const button = event.currentTarget;
    const itemId = button.closest('[js-cmsfavorites-id]').getAttribute('js-cmsfavorites-id');

    if (favorites.includes(itemId)) {
      favorites = favorites.filter((fav) => fav !== itemId);
    } else {
      favorites.push(itemId);
    }
    updateLocalStorage();
    updateButtonStates();
    displayFavorites();
    updateFavoritesCount();
  }

  document.querySelectorAll('[js-cmsfavorites-element="add-favorite"]').forEach((button) => {
    button.addEventListener('click', handleLikeButtonClick);
  });

  function displayFavorites() {
    const wishlistContainer = document.querySelector('[js-cms-favorites="list-wrapper"]');
    const allItems = document.querySelectorAll('[js-cmsfavorites-id]');

    if (!wishlistContainer) return;

    wishlistContainer.innerHTML = '';

    favorites.forEach((itemId) => {
      const item = [...allItems].find((el) => {
        return el.getAttribute('js-cmsfavorites-id') === itemId;
      });

      if (item) {
        const clonedItem = item.cloneNode(true);

        const clonedButton = clonedItem.querySelector('[js-cmsfavorites-element="add-favorite"]');
        if (clonedButton) {
          const likeClass =
            clonedButton
              .closest('[js-cmsfavorites-class]')
              ?.getAttribute('js-cmsfavorites-class') || 'liked';
          clonedButton.classList.add(likeClass);
          clonedButton.addEventListener('click', handleLikeButtonClick);
        }

        wishlistContainer.appendChild(clonedItem);
      }
    });
  }

  function updateFavoritesCount() {
    const countContainer = document.querySelector('[js-cmsfavorites-element="count"]');
    if (countContainer) {
      countContainer.textContent = favorites.length;
    }
  }

  updateButtonStates();
  displayFavorites();
  updateFavoritesCount();
});

</script>
Copier

Etape 2 - Ajuster le code pour votre besoin

Copié dans le presse-papiers
Logo Justa

Progressez sur Webflow

Oops! Une erreur s'est produite lors de la soumission du formulaire.