Forum

Thread tagged as: Question, Problem, Shop

Perch Shop - Individual product quantity in cart

Hello,

I am working on a shop. In my cart I have + and - buttons to increase or decrease item quantity in the cart. When I increase the first item in cart, the other items in the cart also show that same number as the first one.

Now when I increase the 2nd, 3rd etc. item, they individually increase, but when I update they jump back to 1.

I think there is something wrong with the identifier or something, maybe a newbie question, but what am I doing wrong?

My quantity form in cart.html:

                                <form action='#' class="qty-btns">
                                    <div class="qtyminus"></div>
                                    <perch:input env-autofill="false" class="qty" id="qty:<perch:cartitem id="identifier" />" value="<perch:cartitem env-autofill="false" id="quantity" />" type="text" min="0" />
                                    <div class="qtyplus"></div>
                                </form>
Mike Hendriks

Mike Hendriks 0 points

  • 3 years ago
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

Hello Mike,

Can you share your full template?

Hello Hussein, thanks for responding. Sure, this is my cart.html template:

<perch:if id="product_count" match="gt" value="0">
    <perch:form id="cart" app="perch_shop">
        <perch:input type="hidden" value="Update" hidden="true" aria-hidden="true" />

        <div class="container">

            <div class="row">
                <div class="col-md-12">
                    <!-- Cart -->
                    <table class="cart-table responsive-table">

                        <tr>
                            <th>Product</th>
                            <th>Beschrijving</th>
                            <th>Prijs</th>
                            <th>Hoeveelheid</th>
                            <th>Totaal</th>
                            <th></th>
                        </tr>

                        <!-- Item #1 -->
                        <perch:cartitems>
                            <tr>
                                <td>
                                    <perch:cartitem id="image" type="image" width="90" height="90" density="1.6" crop="true" output="tag" />
                                </td>
                                <td class="cart-title">
                                    <perch:cartitem id="title" />
                                </td>
                                <td>
                                    <perch:cartitem id="price" type="shop_currency_value" label="Price" divider-before="Pricing" size="s" min="0" step="any" />
                                </td>
                                <td>
                                <form action='#' class="qty-btns">
                                    <div class="qtyminus"></div>
                                    <perch:input env-autofill="false" class="qty" id="qty:<perch:cartitem id="identifier" />" value="<perch:cartitem env-autofill="false" id="quantity" />" type="text" min="0" />
                                    <div class="qtyplus"></div>
                                </form>
                                </td>
                                <td class="cart-total">€
                                    <perch:cartitem id="price_without_tax" />
                                </td>
                                <td>
                                    <button class="item-remove cart-button fa fa-remove" type="submit" name="del:<perch:cartitem id="identifier" />" value="1"></button>
                                </td>
                            </tr>
                        </perch:cartitems>

                    </table>

                    <!-- Buttons -->
                    <table class="cart-table bottom">
                        <tr>
                            <th>
                                <a href="/shop/checkout" class="button color ">Proceed to Checkout</a>
                                <perch:input class="button gray" type="submit" value="Update cart" aria-hidden="true" />
                            </th>
                        </tr>
                    </table>
                </div>
            </div>


            <div class="row">

                <div class="col-md-6">
                    <!-- Cart Totals -->
                    <div class="cart-totals">
                        <h4 class="headline with-border margin-bottom-30">Winkelwagen totaal</h4>

                        <table class="cart-table margin-top-5">

                            <tr>
                                <th>Subtotaal</th>
                                <td><strong><perch:shop id="total_items_formatted" /></strong></td>
                            </tr>

                            <tr>
                                <th>Verzendkosten</th>
                                <td>Gratis</td>
                            </tr>

                            <tr>
                                <th>Totaal</th>
                                <td><strong><perch:shop id="grand_total_formatted" /></strong></td>
                            </tr>

                        </table>

                    </div>
                </div>


            </div>

        </div>

    </perch:form>

    <perch:else />

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p>Uw winkelwagen is nog leeg.</p>
            </div>
        </div>
    </div>
</perch:if>
Drew McLellan

Drew McLellan 2638 points
Perch Support

How are you implementing the buttons?

Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

It looks like you have a <form> inside another <form> (the parent form is <perch:form>). I don't think you're allowed to nest forms in HTML. I wonder if this is what causing the unexpected behaviour.