Anyone can share a tutorial how to use switch component...

At a glance

The post is about a community member who wants to include a switch above their pricing cards to toggle between monthly and annual pricing. The comments provide a suggested workaround, where the community member puts the switch inside a form, adds a button to the form, and uses JavaScript to click the button when the switch is toggled. The key steps include setting the form method to GET, leaving the action blank, and using the switch's name to conditionally render content. While there is no explicitly marked answer, the community members provide a detailed solution to the problem.

Useful resources

RRichardKistnen

I have a pricing table on my website. Want to include a switch above the pricing cards to toggle between monthly and annual pricing. I have zero idea how to affect the cards when the switch status is changed. Any help is appreciated

Attachment

13 comments

AAsh

I'm working on the same thing and just configured things a few hours ago.
Since WebStudio doesn't support global data variables yet, @TrySound was very kind to suggest a workaround here: https://discord.com/channels/955905230107738152/1297247623962689616

Here's how I configured things:
First, I put the switch inside a form, and added a button to the form as well

(for some reason a document.getElementById('myForm').submit(); was throwing an error for me)

Also, to the Switch, I added a child HTML Embed

Attachment

AAsh

I set the form Method to GET .

Edit: Leaving the Action blank works

Attachment

BBogdan

Try to leave action empty. It should use current page then

BBogdan

Ah, didn't work?

BBogdan

Where did it redirect?

AAsh

Next I made sure my button was set to submit, and gave it an ID.

Attachment

AAsh

Now, I couldn't programatically reference the button anymore if I disabled the show, so I set a display: none; on the button

Attachment

AAsh

Next, I added the following code to the expression editor (not the HTML code directly).

Plain Text

`<script> 
console.log(${switch}) // Just for testing
document.getElementById('pricing-form-button').click()
</script>`

Attachment

AAsh

This clicks my button everytime I toggle the switch 🎉

AAsh

Last, make sure your switch has a name
That's what shows up in the url parameters

Attachment

AAsh

Now you can use the name you just defined to conditionally render stuff in a collection or any other element

Attachment

AAsh

Just checked this, removed the Action, it still works!
Editing my previous comment.

RRichardKistnen

Thanks for sharing this. I’ll give it a whirl and see how far I get. I really appreciate it!

Add a reply

Join the Webstudio community

Anyone can share a tutorial how to use switch component?