Hi, I am very thankful for you for this Tutorial , after few hours of trying , I finally get it, I have to say I am a novice on webflow, but I have a little detail to add and I can't do it, I want to add an icon image inside my tab link and on the top of my text link. do any one can help
Wow this gave me so many great implementation ideas! Right off the bat, I’m thinking about seeing how I can possibly add an image to the actual tab button? Where the tab-name would traditionally be. I’m guessing I’d jut change the CMS collection component into an image instead of text? But I’m curious to know if the JavaScript generator would work for that part once I do that, haha
@@Finsweet At least I know how to push the boundaries & explore the possibilities! Haha, I find "at the moment" to be a hopeful statement! I'm sure you all will continue introducing many incredible features as the months go by 😆
@@Finsweet Just following, is this still the case? I would love to add a dynamic tab icon along with the tab name from CMS. Any thoughts as to how to implement?
I have used this a couple times on various Webflow projects and it works awesome! I do have a question about something that might be slightly more custom. I have a project with different categories like software, user guide, data sheet, etc. and I only want one tab name created for each of those categories but each category has 5-10 (or more) items. Is that possible using the dynamic tabs component? Right now if I have 5 software items it will create 5 tabs named software that act as one huge tab (all 5 are selected at once if you click on any one of them) and show all 5 items in every one of those tabs. The issue is I have a different amount of categories for each product. So product A might not have data sheets but Product B does and I need those tabs to be dynamically generated based on the product and then show all the data sheets Product B has in the data sheets tab.
Hi - great video but this implementation won't fit my requirement.. i have a documents collection and these documents are categorized. for example, 4 documents; 1 in category A, 1 in category B and 2 in category C.. my requirement needs to be 3 tabs; category A showing 1 doc, category B showing 1 doc and category C showing 2 docs. instead i am getting 4 tabs; Category A, Category B, Category C, Category C. is what i am trying to do possible? thanks
Hi! Thanks for the script, it's amazing! I just implemented it and have a question. When several items in the collection share the same "tab-name", it seems to create as many tabs. Have I done something wrong (i.e. is the script supposed to detect duplicates of tab-names and only create one tab?)
You're welcome! The number of tabs created is equal to the number of items in the collection! If you need help with implementation, please message us on sweetjs.io! :)
@@Finsweet Thanks for the quick answer! I guess I got it wrong. What I'm trying to do is more like: "I have a list of articles. Each article is linked to a category. I was trying to create the tabs based on the categories and have the articles displayed in the tab-pane, filtered by category for each tab." I think I'll have a look at your filter videos instead. Thanks!
Hi Joe! This is great! Is it possible to have tabs referencing one collection with the content in each tab showing CMS items from a different, linked collection? For example, if I had an authors collection and wanted a tab for each author, but then within each author's tab, a list of their blog posts would show from the blog posts collection (each blog post is linked to 1 author).
Hey one question I want to build a news tab on one side there are expert news and on the other there are health news in each tab i want multiple different news generated with cms how do I do that so multiple different cms elements in one Tab
Hey, first of all thanks for this video! Iam facing a problem - i want the number in the tab list not to be cms-dynamic. It should be "01" "02" "03". How can i do that?
really cool thank you!! question, would there be an easy way to add a dynamic small description under the tab name (for vertical tabs mainly) could be useful. Thanks!
@@Finsweet Seconded on this feature. Would be awesome to be able to add a few different pieces of dynamic content here. Thanks for everything thus far on this, though. Brilliant solve.
Hey I'm editing my comment. I did get it to work but the visual script tool isn't working the way it does in this video anymore. I typed it out by hand and got it to work
@@Finsweet same here, the visual script writer does not include many of the classes as it does in the video. Try it out for the tabs and you will see when you add classes, it is missing some code
Not sure if this was fixed yet but here's the little bug I noticed - tabName is deprecated (according to @Finsweet documentation) for "cmslibrary-v1.8.js" but the Visual Script Writer, at this point of highlighting this, still uses that property name. Quick fix: change 'tabName' to 'tabContent' Hopefully the video is updated or maybe the script writer is updated. Either way, great video content and solution implementation!
great develop technic and tool, thank you for that. But you really should cut the material preparing part and those repeating of every explanatory part in the video. It doesnt help and made the video way too long than it should be.
Hello, I did it, however, the script is interfering with the Add to Cart button. If I put the code on the body or the footer, the Add to Cart button won't work. If I delete the code the button works. Do you know why is this happening?
Ok, wow!!! Thank you!!! I am sitting here 2 days and trying to figure it out, and boom here is this gem.
Can't get over how useful this is (and how excellently you designed the tutorial for making it). Thanks so much for detailing this process.
Hi, I am very thankful for you for this Tutorial , after few hours of trying , I finally get it, I have to say I am a novice on webflow, but I have a little detail to add and I can't do it, I want to add an icon image inside my tab link and on the top of my text link. do any one can help
Wow this gave me so many great implementation ideas! Right off the bat, I’m thinking about seeing how I can possibly add an image to the actual tab button? Where the tab-name would traditionally be. I’m guessing I’d jut change the CMS collection component into an image instead of text? But I’m curious to know if the JavaScript generator would work for that part once I do that, haha
Hey! It is not possible to add images for tab-names at the moment.
@@Finsweet At least I know how to push the boundaries & explore the possibilities! Haha, I find "at the moment" to be a hopeful statement! I'm sure you all will continue introducing many incredible features as the months go by 😆
@@Wildenfree Yes! We have more updates coming soon!!!
@@Finsweet Just following, is this still the case? I would love to add a dynamic tab icon along with the tab name from CMS. Any thoughts as to how to implement?
Thank you so much! This helped me a lot... I'm excited for your next videos :)
You're welcome!!!
I have used this a couple times on various Webflow projects and it works awesome! I do have a question about something that might be slightly more custom. I have a project with different categories like software, user guide, data sheet, etc. and I only want one tab name created for each of those categories but each category has 5-10 (or more) items. Is that possible using the dynamic tabs component? Right now if I have 5 software items it will create 5 tabs named software that act as one huge tab (all 5 are selected at once if you click on any one of them) and show all 5 items in every one of those tabs.
The issue is I have a different amount of categories for each product. So product A might not have data sheets but Product B does and I need those tabs to be dynamically generated based on the product and then show all the data sheets Product B has in the data sheets tab.
Hey! Could you please message us on sweetjs.io? One of devs will help you out!
@@Finsweet Same here, please help
Thank you for creating such easy to follow videos and simple components. I've created a dynamic slider and dynamic tabs with ease. Incredible!
That's awesome!!! Can you share what you did? :)
@@Finsweet Absolutely! It's not live yet, but when the site is live I'll post it :)
Wow thanks for this video! I have one question: Will each tab have a unique URL using this method?
16:29 i can't see cms list class field...!
can you help me plz?
simply genius. you rock
Thank you!!!
you are a legend! thank you so much man
You're welcome!!!
Does this still work? im getting duplicated tabs with werid numbers on them
Is there a way to add Animation Interactions and Legacy Animation with this CMS Slider
Hi - great video but this implementation won't fit my requirement.. i have a documents collection and these documents are categorized. for example, 4 documents; 1 in category A, 1 in category B and 2 in category C.. my requirement needs to be 3 tabs; category A showing 1 doc, category B showing 1 doc and category C showing 2 docs. instead i am getting 4 tabs; Category A, Category B, Category C, Category C. is what i am trying to do possible? thanks
Hi!
Thanks for the script, it's amazing!
I just implemented it and have a question. When several items in the collection share the same "tab-name", it seems to create as many tabs. Have I done something wrong (i.e. is the script supposed to detect duplicates of tab-names and only create one tab?)
You're welcome! The number of tabs created is equal to the number of items in the collection! If you need help with implementation, please message us on sweetjs.io! :)
@@Finsweet Thanks for the quick answer! I guess I got it wrong. What I'm trying to do is more like: "I have a list of articles. Each article is linked to a category. I was trying to create the tabs based on the categories and have the articles displayed in the tab-pane, filtered by category for each tab." I think I'll have a look at your filter videos instead. Thanks!
Hi Joe! This is great! Is it possible to have tabs referencing one collection with the content in each tab showing CMS items from a different, linked collection? For example, if I had an authors collection and wanted a tab for each author, but then within each author's tab, a list of their blog posts would show from the blog posts collection (each blog post is linked to 1 author).
Hey, Olivier! Thanks! It's not possible to nest 2 seperate collections within Tabs!
I love this tutorial
Hey one question I want to build a news tab on one side there are expert news and on the other there are health news in each tab i want multiple different news generated with cms how do I do that so multiple different cms elements in one Tab
Hey! Are you referring to something like this - cmsdocs-howto.webflow.io/filter/example3 ?
Hey, first of all thanks for this video! Iam facing a problem - i want the number in the tab list not to be cms-dynamic. It should be "01" "02" "03". How can i do that?
really cool thank you!! question, would there be an easy way to add a dynamic small description under the tab name (for vertical tabs mainly) could be useful. Thanks!
Thanks so much!!! It's not possible to do that for now, but we'll push an update for this as soon as we can!!!
@@Finsweet Seconded on this feature. Would be awesome to be able to add a few different pieces of dynamic content here. Thanks for everything thus far on this, though. Brilliant solve.
Thanks man!!!!
You're welcome!!!
Hey I'm editing my comment. I did get it to work but the visual script tool isn't working the way it does in this video anymore. I typed it out by hand and got it to work
Hey! What went wrong? Could you please make a Loom video of the error and send it to communications@finsweet.com?
@@Finsweet same here, the visual script writer does not include many of the classes as it does in the video. Try it out for the tabs and you will see when you add classes, it is missing some code
Not sure if this was fixed yet but here's the little bug I noticed - tabName is deprecated (according to @Finsweet documentation) for "cmslibrary-v1.8.js" but the Visual Script Writer, at this point of highlighting this, still uses that property name.
Quick fix: change 'tabName' to 'tabContent'
Hopefully the video is updated or maybe the script writer is updated. Either way, great video content and solution implementation!
great develop technic and tool, thank you for that. But you really should cut the material preparing part and those repeating of every explanatory part in the video. It doesnt help and made the video way too long than it should be.
You're welcome! Check out the shorter version: th-cam.com/video/tjK19AnScJ4/w-d-xo.html
Finsweet thanks for respond and sharing man, cool
Hello, I did it, however, the script is interfering with the Add to Cart button. If I put the code on the body or the footer, the Add to Cart button won't work. If I delete the code the button works. Do you know why is this happening?
Hey, @@juannoguera5918! Can you shoot us a message on www.sweetjs.io/ ? One of our devs will take a look!
@@Finsweet Alright, I just sent links and explaniation through slack.
I already did. But they said there was a conflict between the library and add to cart button. No solution yet.
dope video anyways
@@juannoguera5918 Thanks!