Creating an interactive pricing calculator | Webflow Logic + JS + Airtable
ฝัง
- เผยแพร่เมื่อ 6 ส.ค. 2024
- Hey friends! Here's a little tutorial on how I made this interactive calculator with Webflow Logic, some Javascript, and Airtable automations.
Links
Live Site: logic-sample-product-photo.we...
Clone Here: webflow.com/made-in-webflow/w...
My Website: www.kckat.com/
* A note: I cannot find where I found that codepen increment counter code but if anybody knows where it came from hmu and I'll link it.
0:00 Overview
2:12 Webflow designer setup
5:56 Javascript time
12:36 Webflow Logic
19:55 Airtable automations
21:30 finished product!
![บุษบา - วงชานเมือง [LiveCoverVertion] Original : เมนทอล](http://i.ytimg.com/vi/Dm81sKcd9rs/mqdefault.jpg)
This was fricken Awesome! Thank you so much for taking the time to go over all this and to share the cloneable. It's things like this that are the reason why I stay up late in the night trying to "build along" with you in youtube.
KC! This is awesome! Thank you so much for putting this together 🎉
This is one of the coolest things I've seen! Thanks for sharing :)
Nice work - looks really slick.
Thank you for an amazing tutorial KC! Few times I experienced some issues honestly, but that was only my fault tbh 😂 for anyone wondering, these were the issues that I experienced:
1. keep.track.of.your.changes.in.naming.stuff - I was changing the script ids and then adjusted ids of my elements (instead of products I needed pages etc.) and FORGOT that when I change the Name of the element it immediately changes the id name. So make sure you name everything correctly, I didn't and it took me half an hour to realise that hahah
2. Airtable works wonders, but, I also didn't listen very much to the crucial part (again, my fault) - using the "Bearer". I too have like zero experience with APIs, therefore I didn't really know that the word bearer needs to be in there as well. So like, bearer + space + api key. Had to create 3 credentials just to test it hahaha.
3. I thankfully had Success Message immediately in Webflow Logic, but when I tried to test live form, I received error message. I didn't realise I am using recaptcha on my website and that was the reason - so make sure you have recaptcha inserted in this form (which I quite struggled with because well... where to put it so I don't mess up the amazing layout you created?).
After these three were solved, the calculator now works magic. I also had to use rounding in total amount, so if anyone is working with prices like $199 you should also incorporate this in your script. :)
So yeah, it works perfectly, thank you very much for this amazing tutorial, subscribe button hit! 🫶
KC you're goated. Thanks so much, this helped me A LOT with my client!
I love this! Gonna watch this x10 times and try it myself later :D ty
Incredible thank you for sharing hoping to recreate this!
Awesome KC! Love to see it.
this was very helpful thanks for sharing KC!
Great tutorial
Amazing work, I am inspired
The only tutorial that works to me! Tnx! 🤗
Thank you so much for sharing this just what I needed!
This is so helpful, thank you!
Love this!! 🚀
Hey KC Katalbas, great tutorial! Would you know how to connect the final calculated price to a checkout page in the context of an e-commerce site? Thanks 😊
SOOOOO COOOOOOOOL!!!
Hey, Thank you for the tutorial, It's really helpful, just wanted to know if we have a Radio button instead of Checkbox how can we make it work?
So cute...thanks
That's so cool, thank you for this tutorial, one question remain, how can we embed a payment link in the email at the end of the processus ? I thought to use stripe and zapier so before sending mail we can automate product creation and then attach to the mail. Let me know what do you think about this solution ! Thanks again that's super useful.
Thank you for this tutorial KC! Has anyone done this with a styled email template using SendGrid, Mailchimp etc?
What a great video! What is the difference between using webflow logic and wized? Have you got any ideias on that? I am trying to learn webflow and I am trying to learn how to use logic! Great channel! 1+ Subscriber!
Welcome back lol
Hey @Kc Katalbas! What a great Video. I did everything the exact same way and even in Webflow Logic get the Status Successful Message. But in the JSON Code under the success message, it says:
{
"error": {
"type": "INVALID_REQUEST_BODY",
"message": "Could not parse request body"
}
}
And nothing gets posted into the Airtable Base.... Anyone has any idea how to fix this?? Would be highly appreciated
Somehow.. nothing works for me :'D The totalCost do not show up, no matter what I do. Got all the IDs right und copy-pasted the custom code into webflow. Doesn't work. Any ideas?
same here, did you manage to solve this?
No cats in the intro? 💔