Multiple Input Counters doesn't work

I don’t know what I’m missing but I can’t have additional input counters to work

Live link
https://input-counter-test.webflow.io/

Preview link
https://preview.webflow.com/preview/input-counter-test?utm_medium=preview_link&utm_source=designer&utm_content=input-counter-test&preview=cb48882a1c8829da36159dda6dc61807&workflow=preview

Attribute used

Thanks!

Hey @jpthedio! to have several counters please add a suffix at the end of the second instance. so your setup would be

fs-inputcounter-element="input"
fs-inputcounter-element="increment"
fs-inputcounter-element="decrement"

and

fs-inputcounter-element="input-2"
fs-inputcounter-element="increment-2"
fs-inputcounter-element="decrement-2"

and so on

2 Likes

Thanks, Luis!
I got it working.
Would be nice to add this note to the Attributes page for others. :slight_smile:

1 Like

Hello @Support-Luis ! How are you?
I was wondering whether is possible to implement that in the floating cart. In that case when I apply “-#” in one item of the list… all other items get automatically the same atribute.
Would you please advise on that?
Best.

hey @scunioci! There are several ways to achieve this, can you share your links so I can take a look?

Feel free to start your own thread!

Hey @Support-Luis ! Thanks for the quick response.

I am going to share with you one product page. That page presents the implementation I was able to provide successfully.

This is the floating cart. This is the element I would like to have it working.

You will be able to access the link here.

Thank you very much!

hey @scunioci! Can you explain a little bit more the desired workflow? When would the user be able to increase/decrease the amount on the floating cart?

Hello @Support-Luis .

Sure!

Once the user opens the cart, I would like him to change the number of products within the floating cart using plus and minus buttons via attributes input counter.

When I do that, while applying “-#” in one item of the list… all other items get automatically the same atribute. In the end, the conter with buttons does not work.

Thanks.

If you want to add a suffix to CMS Items you can add a plain text field to the collection setup and then use Webflow’s native dynamic attributes option to set the different suffixes for the items.

if this is not the issue can you please add the +/- buttons and let me now so I can debug?

Ok @Support-Luis .

In order to check please follow the steps:

  1. go to the link and add a product to the cart > Contracorrente Ecomm
  2. go to the link and add another product to the cart > Contracorrente Ecomm
  3. open the floating cart
  4. try to increase or decrease any product by clicking the plus or minus button
  5. i noticed webflow piles up shopping cart items as a regular collection. What I would like to know is whether there is a way to make input counters work in a floating cart.

Thanks.

We could look for a way to interact or detect when the items have been added to this collection and then use JS to add unique suffixes to each instance. I have not worked with floating carts before so if you have any input on this I can help with the code

Hello @Support-Luis !

Alright! Thanks for the quick response.

You guidance is very much appreciated. I am just not sure about what kind of input you would like me to add. Would you please let me know how can I set basis for the conversation?

Best,

Hello @Support-Luis !
Did you get the chance to have a look on this?
Best,

hey @scunioci! I am sorry for the late response.

I was hoping you would know more about the floating carts’ functionality as this is the first time I’ve worked with them on Webflow. If there are no docs available we can try the custom code route but I can not assure it will be fast.