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

  • 1 week ago

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 2406 points
Perch Support

How are you implementing the buttons?

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.