User Interactive Checkbox?

Support
#1

I wonder if Cornerstone has a capability to make interactive buttons on the frontend. For example, there is a checkbox that instead of filtering products like a filter plugin, it adds an overlay to “hide” the product image from view.

Using divs, absolute positioning and conditions to test how this would work, you can add an image overlay on stuff that should be hidden. Condition could be if a product has a certain term/tag used.

With CSS, making buttons that will react to user input is not too tricky as seen below:

However, CSS doesn’t store values so a refresh will just return you to the default state. If there was a way to either store or toggle a value (ie. check = token_value = 1, unchecked = token_value = 0) then you can have a conditional set to check if the token has value or not.

With some Javascript, this is probably doable but I’m curious if Cornerstone has a feature I should look in to. This thread (User interactions with API data) is kinda close but not quite there.

#2

Hello @dobaco,

Thank you for the inquiry.

You might be looking for the Cookies Dynamic Content feature, which can help you persist state even after a page reload. For more information about this feature, please check out this documentation and watch the corresponding video.

— https://theme.co/docs/cookies-dynamic-content
— https://www.youtube.com/watch?v=5m7EtG4Dw9s

Let us know if this is what you’re after.

Best regards,

#3

Thanks for the reminder on this.

So as a rudimentary test, I made a simple HTML checkbox just to test that a cookie is set or not and put that in a Raw Content element.

<input type="checkbox" id="ilter_check" onclick="FilterCheck()">
<label for="filter_check" >Toggle content filter on and off </label>

Under Global JS, I added the following:

function FilterCheck() {
  var checkBox = document.getElementById("filter_check");
 
  if (checkBox.checked == true) {
    document.cookie = "filter_check=true";
  } else {
    document.cookie = "filter_check=false";
  }
}

The code does work. Sorta. The Javascript code only seems to execute after the page is refreshed and not automatically. For what it’s worth, I based my code off of information found from W3Schools: https://www.w3schools.com/howto/howto_js_display_checkbox_text.asp

#4

Hello @dobacco,

Thanks for sharing your code.

Cheers.