Forum

Thread tagged as: Question, Problem, Shop

Add to cart not working

Hi All

Add to cart on the product page is not working

but im using the same code on product details page and it works

Product page OR list.html ----- Not Working

<div class="buttons">
                    <div class="view-item">
                        <a href="/knives/products/<perch:shop id="slug" type="slug" />/">
                            <div class="button">
                                <i class="fa fa-search" aria-hidden="true"></i> View Details
                            </div>
                        </a>
                    </div>
                    <div class="buy-item">
                        <perch:if not-exists="has_variants">
                            <perch:form id="add_to_cart" app="perch_shop" action="/knives/cart">
                                <perch:input id="product" type="hidden" value="<perch:shop id="productID" type="hidden" />" />
                                <perch:input type="submit" value="&#xf217; Add to Basket" class="add-to-cart button" />
                            </perch:form>
                        </perch:if>
                    </div>
                </div>

List_detail.html ---- Working

<div class="buttons-inner">
                <div class="large-6 medium-6 small-12 columns">
                    <perch:if not-exists="has_variants">
                        <perch:form id="add_to_cart" app="perch_shop" action="/knives/cart">
                            <perch:input id="product" type="hidden" value="<perch:shop id="productID" type="hidden" />" />
                            <perch:input type="submit" value="&#xf217; Add to Basket" class="add-to-cart button left" />
                        </perch:form>
                    </perch:if>
                </div>
                <div class="large-6 medium-6 small-12 columns">
                    <perch:form id="add_to_cart" app="perch_shop" action="/knives/checkout">
                        <perch:input id="product" type="hidden" env-autofill="false" value="<perch:shop id="productID" type="hidden" />" />
                        <perch:input type="submit" value="&#xf217; Buy Now" class="add-to-cart button right" />
                    </perch:form>
                </div>
            </div>
Anthony Elleray

Anthony Elleray 2 points

  • 5 years ago

With some digging

the add to cart button would not work because of a form i had in no results

but not sure why

<perch:form id="blade_request" method="post" app="perch_forms">
<div>
<perch:input type="text" id="name" required="true" label="Name" placeholder="Your Name"/>
<perch:error for="name" type="required">Please add your name</perch:error>
</div>
<div>
<perch:input type="email" id="email" required="true" label="Email" placeholder="Your Email Address" />
<perch:error for="email" type="required">Please add your email address</perch:error>
<perch:error for="email" type="format">Please check your email address</perch:error>
</div>
<div>
<perch:input type="textarea" id="message" required="true" label="Message" placeholder="Please Include Details Of The Blade Specification You Require" />
<perch:error for="message" type="required">Please add a message</perch:error>
</div>
<div>
<perch:input type="submit" id="submit" value="Send" class="button" />
</div>
</perch:form>

ok so required="true" on the form makes the add to cart not work

how can i get round this ?

i want the fields to be required but also have a working add to cart

Drew McLellan

Drew McLellan 2638 points
Perch Support

What's the URL of your product page?

/knives/ displays the list of all products list.html

/knives/product/(slug) displays the item list_detail.html

Drew McLellan

Drew McLellan 2638 points
Perch Support

Is your slug parameter named product? If so make sure you use env-autofill="false" to stop your hidden field called product being populated with that value.

i have env-autofill="false" on all the add to cart and buy now buttons

but still not working

i think the slug parameter is product

Drew McLellan

Drew McLellan 2638 points
Perch Support

You don't have it in your list.html template above.

i currently have this in list.html

<div class="buy-item">
    <perch:if not-exists="has_variants">
            <perch:form id="add_to_cart" app="perch_shop" action="/knives/cart">
                 <perch:input id="product" type="hidden" env-autofill="false" value="<perch:shop id="productID" type="hidden" env-autofill="false"/>" />
                  <perch:input id="submit" type="submit" value=" Add to Basket" class="add-to-cart button" />
          </perch:form>
    </perch:if>
</div>

but not working

Drew McLellan

Drew McLellan 2638 points
Perch Support

It needs to go on the perch:input tag.

sooo like this

<div class="buy-item">
    <perch:if not-exists="has_variants">
                  <perch:form id="add_to_cart" app="perch_shop" action="/knives/cart">
                          <perch:input env-autofill="false" id="product" type="hidden" value="<perch:shop id="productID" type="hidden" />" />
                           <perch:input env-autofill="false" id="submit" type="submit" value="&#xf217; Add to Basket" class="add-to-cart button" />
                    </perch:form>
          </perch:if>
</div>
Drew McLellan

Drew McLellan 2638 points
Perch Support

Yes, that's right.

ok that did not work

its like it is trying to submit the contact form in the no results still

if i remove required="true" from the contact form it all works

with required="true" on the contact form

if i click add to cart it takes me to the cart but does not add the product

and i debug this is displayed


Array ( [name] => required [email] => required [message] => required )

if i remove required="true" from the contact form

and click add to cart it takes me to the cart adds tha product and that code is not in the debug

Drew McLellan

Drew McLellan 2638 points
Perch Support

Contact form? I thought this was an add to cart form. What are you trying to achieve?

yes the contact form in the no-results is breaking the add to cart

list.html

the form at the bottom is stoping the add to cart working --- unless i remove required="true"

<perch:before>
    <div class="row">
        <div class="large-12 columns product-listing">
        </perch:before>
        <div class="large-4 medium-6 small-12 columns product <perch:if exists="perch_item_last">end</perch:if>">
            <div class="image">
                <img src="<perch:shop id="image" type="image" width="360" height="240" density="1.6" crop="true" />">
                <div class="buttons">
                    <div class="view-item">
                        <a href="/knives/products/<perch:shop id="slug" type="slug" />/">
                            <div class="button">
                                <i class="fa fa-search" aria-hidden="true"></i> View Details
                            </div>
                        </a>
                    </div>
                    <div class="buy-item">
                        <perch:if not-exists="has_variants">
                            <perch:form id="add_to_cart" app="perch_shop" action="/knives/cart">
                                <perch:input id="product" type="hidden" env-autofill="false" value="<perch:shop id="productID" type="hidden" env-autofill="false" />" />
                                <perch:input type="submit" env-autofill="false" value="&#xf217; Add to Basket" class="add-to-cart button" />
                            </perch:form>
                        </perch:if>
                    </div>
                </div>
            </div>
            <div class="title">
                <a href="/knives/products/<perch:shop id="slug" type="slug" />/">
                    <h3><perch:shop id="title" type="text" /></h3>
                </a>
            </div>
            <div class="details">
                <perch:shop id="description" type="textarea" label="Description" editor="markitup" order="3" markdown="true" words="20" append=" ..."  />
                <strong>Blade type:</strong><perch:shop id="blade_type" type="select" label="Blade Type"  />
                <strong>Blade length:</strong><perch:shop id="blade_length" type="text" label="Blade Length"  />
            </div>
            <div class="price">
                <perch:if exists="on_sale">
                  <span class="sale-price"><perch:shop id="sale_price" type="shop_currency_value" label="Price" size="m" min="0" step="any" /></span>
                  <span class="price-was"><perch:shop id="price" type="shop_currency_value" label="Price" size="m" min="0" step="any" /></span>
                <perch:else />
                  <perch:shop id="price" type="shop_currency_value" label="Price" size="m" min="0" step="any" />
                </perch:if>
            </div>


        </div>
        <perch:every count="1">
        <div class="show-for-small-only">
            <hr />
        </div>
        </perch:every>
        <perch:every count="2">
        <div class="show-for-medium-only">
            <hr />
        </div>
        </perch:every>
        <perch:every count="3">
        <div class="show-for-large">
            <hr />
        </div>
        </perch:every>
        <perch:after>
        </div>
    </div>
</perch:after>
<perch:noresults>
<div id="no_results">
    <div class="row">
        <div class="title text-center">
            <h3>Sorry we could not find a Bear Blade to your specfication</h3>
            <p>Please fill in the form below with details of your required specification and we will get back to you ASAP</p>
        </div>
        <div class="large-8 medium-12 small-12 collumns large-offset-2">
            <perch:form id="blade_request" method="post" app="perch_forms">

                <div>
                    <perch:input env-autofill="false" type="text" id="name" required="true" label="Name" placeholder="Your Name"/>
                    <perch:error for="name" type="required">Please add your name</perch:error>
                </div>

                <div>
                    <perch:input env-autofill="false" type="email" id="email" required="true" label="Email" placeholder="Your Email Address" />
                    <perch:error for="email" type="required">Please add your email address</perch:error>
                    <perch:error for="email" type="format">Please check your email address</perch:error>
                </div>

                <div>
                    <perch:input env-autofill="false" type="textarea" id="message" required="true" label="Message" placeholder="Please Include Details Of The Blade Specification You Require" />
                    <perch:error for="message" type="required">Please add a message</perch:error>
                </div>

                <div>
                    <perch:input type="submit" id="submit" value="Send" class="button" />
                </div>

            </perch:form>
        </div>
    </div>
</div>
</perch:noresults>

Drew McLellan

Drew McLellan 2638 points
Perch Support

Ok, then you'll need to remove the contact form from the no results section.

so forms are not supported in the no results -- just text ?

Drew McLellan

Drew McLellan 2638 points
Perch Support

They work, but you can see the obvious logic problem you're facing, right? If the form is only sometimes there, you can't have required fields, as they must always be present.

ah ok i see i will just remove the required part :)

Thanks