Webstudio

Log inLog into community

Join the Webstudio community

Updated 4 weeks ago

Anyone can share a tutorial how to use switch component?

Anyone can share a tutorial how to use switch component?

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

Screenshot_2024-10-19_at_5.16.18_PM.png

A

B

R

13 comments

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

I set the form Method to GET .

Edit: Leaving the Action blank works

Attachment

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

Ah, didn't work?

Where did it redirect?

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

Attachment

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

Attachment

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

This clicks my button everytime I toggle the switch 🎉

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

Attachment

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

Attachment

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

Sign up and join the conversation on Discord

`","upvoteCount":0,"dateCreated":"2024-10-19T22:05:56.331Z","datePublished":"2024-10-19T22:05:56.331Z","dateModified":"2024-10-19T22:05:56.331Z","url":"https://help.webstudio.is/anyone-can-share-a-tutorial-how-to-use-switch-component-WlWQyjyCLpQM#e5eff0dc-8341-4c15-bf5f-987b9bd6d1af","author":{"@type":"Person","url":"https://help.webstudio.is/members/3e1fcfa0-e900-4d79-a1f6-dee2844ab775","name":"Ash","identifier":"3e1fcfa0-e900-4d79-a1f6-dee2844ab775","image":"https://cdn.discordapp.com/embed/avatars/4.png"}},{"@type":"Answer","text":"This clicks my button everytime I toggle the switch 🎉","upvoteCount":0,"dateCreated":"2024-10-19T22:06:29.447Z","datePublished":"2024-10-19T22:06:29.447Z","dateModified":"2024-10-19T22:06:29.447Z","url":"https://help.webstudio.is/anyone-can-share-a-tutorial-how-to-use-switch-component-WlWQyjyCLpQM#f0440ced-2ccb-4d63-86b1-ad35eb015985","author":{"@type":"Person","url":"https://help.webstudio.is/members/3e1fcfa0-e900-4d79-a1f6-dee2844ab775","name":"Ash","identifier":"3e1fcfa0-e900-4d79-a1f6-dee2844ab775","image":"https://cdn.discordapp.com/embed/avatars/4.png"}},{"@type":"Answer","text":"Last, make sure your switch has a nameThat's what shows up in the url parameters","upvoteCount":0,"dateCreated":"2024-10-19T22:07:22.923Z","datePublished":"2024-10-19T22:07:22.923Z","dateModified":"2024-10-19T22:07:22.923Z","url":"https://help.webstudio.is/anyone-can-share-a-tutorial-how-to-use-switch-component-WlWQyjyCLpQM#8189b2f3-12c0-4459-92a1-b59c396543d0","author":{"@type":"Person","url":"https://help.webstudio.is/members/3e1fcfa0-e900-4d79-a1f6-dee2844ab775","name":"Ash","identifier":"3e1fcfa0-e900-4d79-a1f6-dee2844ab775","image":"https://cdn.discordapp.com/embed/avatars/4.png"}},{"@type":"Answer","text":"Now you can use the name you just defined to conditionally render stuff in a collection or any other element","upvoteCount":0,"dateCreated":"2024-10-19T22:08:42.890Z","datePublished":"2024-10-19T22:08:42.890Z","dateModified":"2024-10-19T22:08:42.890Z","url":"https://help.webstudio.is/anyone-can-share-a-tutorial-how-to-use-switch-component-WlWQyjyCLpQM#088d9051-213a-4886-a145-c7b6a37bc876","author":{"@type":"Person","url":"https://help.webstudio.is/members/3e1fcfa0-e900-4d79-a1f6-dee2844ab775","name":"Ash","identifier":"3e1fcfa0-e900-4d79-a1f6-dee2844ab775","image":"https://cdn.discordapp.com/embed/avatars/4.png"}},{"@type":"Answer","text":"Just checked this, removed the Action, it still works!Editing my previous comment.","upvoteCount":0,"dateCreated":"2024-10-19T22:12:13.132Z","datePublished":"2024-10-19T22:12:13.132Z","dateModified":"2024-10-19T22:12:13.132Z","url":"https://help.webstudio.is/anyone-can-share-a-tutorial-how-to-use-switch-component-WlWQyjyCLpQM#bc2b5344-1726-45eb-8485-8e8f34c52dce","author":{"@type":"Person","url":"https://help.webstudio.is/members/3e1fcfa0-e900-4d79-a1f6-dee2844ab775","name":"Ash","identifier":"3e1fcfa0-e900-4d79-a1f6-dee2844ab775","image":"https://cdn.discordapp.com/embed/avatars/4.png"}},{"@type":"Answer","text":"Thanks for sharing this. I’ll give it a whirl and see how far I get. I really appreciate it!","upvoteCount":0,"dateCreated":"2024-10-20T00:46:14.676Z","datePublished":"2024-10-20T00:46:14.676Z","dateModified":"2024-10-20T00:46:14.676Z","url":"https://help.webstudio.is/anyone-can-share-a-tutorial-how-to-use-switch-component-WlWQyjyCLpQM#51ef6b03-6779-419a-8748-64611e6cd138","author":{"@type":"Person","url":"https://help.webstudio.is/members/af3300e8-6e16-44fe-9556-eb1ce10e3a62","name":"RichardKistnen","identifier":"af3300e8-6e16-44fe-9556-eb1ce10e3a62","image":"https://cdn.discordapp.com/avatars/1184553690204475392/c9c27bd404fbcb5e1efc8c2b0de65ac3.webp?size=256"}}]}}