Build configurator using webflow collection

This topic has 8 replies, 2 voices, and was last updated 4 years, 6 months ago by gallain.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
2020-05-04 at 5:25 pm #27164

gallain
Participant

Hello all,

I am building a configurator for furniture.
I want to manage my collection of fabric through a collection in Webflow. So that I can sort out by material type, eventually fabric brand etc…
And once selected I have list of available fabric, I click on it and updates the texture and color.

I thought about managing that with collection and use buttons in the list. The only issue is that the link between the button action and the puzzle is with the ID of the button… which is not a changeable parameter based on collection item.

Is there a workaround for that ? That would help me a lot.
Thanks

Guillaume

2020-05-05 at 4:58 am #27174

Yuri Kovelenov
Staff

Hi,

besides element IDs, you can use the more advanced query selectors
You can select HTML elements based on their CSS class, attributes/values, tag name, child-parent relation or other criteria.

https://www.w3schools.com/cssref/css_selectors.asp

Chief 3D Verger | LinkedIn | Twitter

2020-05-05 at 8:32 am #27184

gallain
Participant

Thanks a lot for the quick answer.

What I am using now is shown in attached pic.

So you mean that if I include a new attribute (example manual_id below) I could be able to access it through query selector?

2020-05-05 at 8:47 am #27190

Yuri Kovelenov
Staff

you should check what Webflow generated

if needed you should assign IDs manually in order to access them from puzzles

Chief 3D Verger | LinkedIn | Twitter

2020-05-05 at 8:52 am #27191

gallain
Participant

Sorry I thought I included what Webflow generated.
Here it is below
If I could access to the manual_id attribute and check its value to identify the button I’m clicking on, that would be perfect !

” “

2020-05-05 at 8:52 am #27192

gallain
Participant

2020-05-05 at 8:52 am #27193

gallain
Participant

id=”Button_peacock” manual_id=”blue” class=”button-color-peacocl w-button”

2020-05-05 at 10:25 am #27208

Yuri Kovelenov
Staff

I see you got id (”Button_peacock”) – no need for manual_id
so it does not work?

Chief 3D Verger | LinkedIn | Twitter

2020-05-05 at 10:32 am #27209

gallain
Participant

Sorry for being unclear.
The code extract is without the collection set up.
I removed the collection for now, to progress on other stuff.

Given that my list of material visible to configure my furniture would be variable depending on the filter I put on my collection, I cannot set ID unless there is link with some info in the database. I cannot do that in webflow (and I am not an expert in coding)

However I can add new attributes (like the manual_id and link it to a content of my database). my whole challenge is to identify the button which will be used in my filtered collection. Sometimes I would display fabrics of supplier X and sometimes of supplier Y. But when I click on the button representing one of the fabric of this supplier (unique identifier), then I want it to be applied on my 3d model.

I will check all that tonight and provide more code extracts or clearer question if I don’t manage to solve it based on your first comments.
THanks!
Author

Posts