https://dominic3.com/js/favorite_button.js

1$(function() {
2  var favoriteButton = '[data-favorite-button-selector]';
3  var maxFavoriteProductsCount = 20;
4  var favoriteProducts = Cookies.getJSON('favorite_products');
5  // Cookie̤ÅÐÏ¿¤Î¾ì¹ç¤Ç¤â¡¢ÇÛÎó¤Ë¤·¤Æ¤ª¤¯ (Cookie¤ÎÄɲäˡ¢ÇÛÎó¥á¥½¥Ã¥É¤ò»È¤¦¤¿¤á)
6  if (favoriteProducts === undefined) {
7    favoriteProducts = [];
8  }
9
10  // ¤ªµ¤¤ËÆþ¤êÄɲúѤߤξ¦Éʤˡ¢¤ªµ¤¤ËÆþ¤êºÑ¤ß¤Î¥¯¥é¥¹¤òÅö¤Æ¤ë
11  render();
12  $('body').on('click', favoriteButton, function() {
13    var productId = $(this).attr('data-product-id');
14
15    if (favoriteProducts.indexOf(productId) === -1) {
16      // ¤ªµ¤¤ËÆþ¤ê¤ÎÅÐÏ¿¾å¸Â¤òĶ¤¨¤¿¤é¡¢¸Å¤¤¤â¤Î¤òºï½ü¤·¤Æ¤«¤éÅÐÏ¿¤¹¤ë
17      if (favoriteProducts.length >= maxFavoriteProductsCount) {
18        favoriteProducts.splice(-1, 1);
19      }
20      favoriteProducts.unshift(productId);
21    } else {
22      favoriteProducts.splice(favoriteProducts.indexOf(productId), 1);
23    }
24
25    render();
26    Cookies.set('favorite_products', favoriteProducts, { expires: 365 });
27  });
28
29  // ¤ªµ¤¤ËÆþ¤êÅÐÏ¿ºÑ¤ß¥¯¥é¥¹¤ÎÄɲᦺï½ü
30  function render() {
31    $(favoriteButton).each(function() {
32      var addedClass = $(this).attr('data-added-class');
33
34      if (favoriteProducts.indexOf($(this).attr('data-product-id')) !== -1) {
35        $(this).addClass(addedClass);
36      } else {
37        $(this).removeClass(addedClass);
38      }
39    });
40  }
41
42});