A Little upgrade to Timothy Ricks Favoriting system

Community resources Show & Tell
1

Hey,

I have recently watched T.RICKS video about setting up CMS favoriting system using jQuery and cookies and I was eager to try it out.

At first it worked perfectly, but when I introduced second CMS-wrapper with a filter, it failed. And to my (very minimal) understanding it failed, because jQuery script just “grabbed” CMS items based off of their position in a list and it introduced clashing between separate CMS-wrappers. Noticing that, I came up with a solution: create unique ID’s to my CMS items and rewrite script so that it would select items by their ID.

Set up:

  1. Insert embed inside your CMS item
    image

  2. Give unique ID to your products based on their slugs:

<script>
document.currentScript.closest('div.w-dyn-item').id = 'SLUG';
</script>

lol
lol798×180 6.7 KB

  1. Add this script to your All pages footer code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>
<script>

// Set a cookie
Cookies.set("webflowTutorial", "Newest Tutorial", { expires: 365 });

// Get a cookie
Cookies.get("cookieName");

// Check a cookie
if (Cookies.get("cookieName") == "cookieValue") {
   // do something
}

// Delete a cookie
Cookies.remove('cookieName');

if (Cookies.get("view") == "list") {
  $('.projects_button').toggleClass('active');
  $('.products-list-wrapper').toggleClass('is--show');
}

$('.projects_button').on('click', function() {
  let currentView = $(this).attr('data-view');
  Cookies.set("view", currentView, { expires: 365 });
  $('.projects_button').toggleClass('active');
  $('.products-list-wrapper').toggleClass('is--show');
});
  
// Loop through each .product-item element and apply the selected class based on cookie values
$(".product-item").each(function (index) {
  let uniqueId = $(this).attr('id');
  let cookieName = "item-" + uniqueId;
  if (Cookies.get(cookieName) == "saved") {
    $(this).addClass('selected');
  }
});
  
// FAVORITE FUNCTIONALITY
$('.heart-block').on('click', function() {
  let uniqueId = $(this).closest('.product-item').attr('id');
  let savedParent = $('#' + uniqueId);
  let parentIndex = savedParent.index();
  savedParent.toggleClass('selected');
  savedParent.closest('.products-list-wrapper').siblings('.products-list-wrapper').find('.product-item').eq(parentIndex).toggleClass('selected');
  if (savedParent.hasClass('selected')) {
    let cookieName = "item-" + uniqueId;
    Cookies.set(cookieName, "saved", { expires: 365 });
  } else {
    let cookieName = "item-" + uniqueId;
    Cookies.remove(cookieName);
  }
});
</script>
  1. Go to Timothy Ricks channel on youtube and say thank you. His contribution to this community is just insane.

P.s I have very limited knowledge using jQuery and cant guarantee that this script will work for you, but it definitely worked for me.