Ajouter un button Favoris dans le CMS

Ajouter un button pour Liker les Items

Language: Javascript

Catégorie : 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>

Sommaire

Utiliser un LLM pour résumer ou expliquer ce script

Le script

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>

Les attributes

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

Valeur

{identifier}

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-list

Valeur

favorite-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

Code source du 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>