Hide/Show Button (Agree to Terms) Ecommerce

Hi Everyone,

I currently added a pretty nifty way to add a “Agree to Terms” button to my eCommerce checkout page. I hide the button until the customer clicks on the Agree to Terms button. The issue is that I want to reverse that process to where if the customer were to deselect the button, I want to hide the button. I tried to create it and was able to successfully view the effect within the designer but the site will not show the desired effect on the published version.

chrome-capture

This may have something to do with the Initial State for the purchase button to be “Hide” followed by on-click > Opacity+Move+Show Button. When I try and to reverse this effect (customer clicks the agree to terms box again to deselect) the button is completely hidden from the site.

Sharelink: https://preview.webflow.com/preview/kvcode?utm_source=kvcode&preview=21bd37c2817a40c8628bf7751fb99335

Live Link: https://kvcode.webflow.io/checkout

Please help!

Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/kvcode?utm_source=kvcode&preview=21bd37c2817a40c8628bf7751fb99335

Oh I worked on a very similar issue lemme see if I can find it and post how I did it.

1 Like

That’d be awesome @miekwave! Appreciate anything at this point :call_me_hand:

@David_Sheltren

I don’t think this forum allows me to share link my video solution :confused:

How do I share only a link?

replace quotation

“https”://“drive.google.com”/file/d/1fKEcX3aUkdYVEjiMfZyCNPAFllAIGB_I/view

^ Is this your intended result?

  1. image
  2. image
  3. image

Summary:
– Define CLICK-ON to trigger button tweening sequence.
– Define CLICK-OFF to trigger button tweening in reverse.
– Define your INITIAL state with the SECOND-OFF click, not on FIRST-ON click.

Awesome! Thanks @miekwave! After troubleshooting it a bit more, I discovered that the div wrapper that contained my embed block for the checkbox was the trigger and I wasn’t clicking that element to trigger the interaction. Long story short, I recreated the animated checkbox with interactions and scrapped the embed block to have more control over the clickable element.

Works like a champ! Your video and input played a crucial step in dissecting this a bit further so thanks again!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.