Stepper implementation for dynamic listing into cart page

Questions
1

Hi @nolimits4web,

I am creating a cart product listing page using API call I am getting all data. I want to put stepper on each item, as earlier you had suggested how to initialize stepper for multiple items on same page using each loop.

This time i want to know how to do this if I want to put stepper initial value according to the API response.

Suppose I might have product quantity different for each product it might be initial value 1 for some or 2 or 10.

How do I initialize stepper using loop with dynamic initial value?

Any suggestions will be helpful.

2

Then initialize them manually with app.stepper.create after you have requested the data

3

Hi @nolimits4web

Thank you for your response, but I found a better way where we don’t need to initialize for each stepper we can do the work with below written code.

$$('.stepper').each(function (index, stepperEl) {
                            var thisData = this;
                            var stepper = app.stepper.create({
                                el: stepperEl,
                                step: 1,
                                min: 1,
                                max: 100,
                                value: parseInt($$(thisData).data('value')),
                                on: {
                                    change: function () {
                                        console.log(index+' Stepper value changed---'+$$(thisData).data('productId'))
                                    }
                                }
                            });
                        })
1 Like