Forum

Thread tagged as: Shop

Perch Shop: Buttons with amounts --> add to cart...

I've created a form for donations that creates buttons for the set donation amounts using the <perch:productvalues> tags:

<div class="product clearfix">
    <perch:form id="add_to_cart" app="perch_shop" action="/cart">
    <perch:productopts><perch:productvalues> <button class="button button-rounded button-reveal button-large button-green"><i class="icon-gift"></i><span> <perch:productvalue id="valueTitle" /></span></button> 
</perch:productvalues> </perch:productopts>
    <perch:input id="product" type="hidden" env-autofill="false" value="<perch:shop id="productID" type="hidden" env-autofill="false" /> " />
    <perch:input type="cms" />
    </perch:form>
</div>

But I don't know how to get the product value to submit on the button press. Any help would be much appreciated!

Monty Lewis

Monty Lewis 2 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Are you asking how to add a variant to the cart?

I guess, yes. Ideally from the button push from the perch:productvalue listing. The above template outputs:

<form id="form4_add_to_cart" action="/cart" method="post">
     <button class="button button-rounded button-reveal button-large button-green"><i class="icon-gift"></i><span> $20</span></button> 
     <button class="button button-rounded button-reveal button-large button-green"><i class="icon-gift"></i><span> $40</span></button> 
     <button class="button button-rounded button-reveal button-large button-green"><i class="icon-gift"></i><span> $60</span></button> 
     <button class="button button-rounded button-reveal button-large button-green"><i class="icon-gift"></i><span> $80</span></button> 
     <button class="button button-rounded button-reveal button-large button-green"><i class="icon-gift"></i><span> $100</span></button> 
     <button class="button button-rounded button-reveal button-large button-green"><i class="icon-gift"></i><span> $150</span></button> 
     <button class="button button-rounded button-reveal button-large button-green"><i class="icon-gift"></i><span> $200</span></button> 
     <button class="button button-rounded button-reveal button-large button-green"><i class="icon-gift"></i><span> $350</span></button> 
     <button class="button button-rounded button-reveal button-large button-green"><i class="icon-gift"></i><span> $400</span></button> 
     <button class="button button-rounded button-reveal button-large button-green"><i class="icon-gift"></i><span> $450</span></button> 
     <button class="button button-rounded button-reveal button-large button-green"><i class="icon-gift"></i><span> $500</span></button> 

    <input id="form4_product" name="product" value="170 " type="hidden">
    <input type="hidden" name="cms-form" value="YWRkX3RvX2NhcnQ6cGVyY2hfc2hvcDovdGVtcGxhdGVzL3Nob3AvcHJvZHVjdHMvZ2lmdHNfb25fY2FydC5odG1sOjE0OTE0ODg0OTA=">
    </form>
Drew McLellan

Drew McLellan 2638 points
Perch Support

Yes, I think I'm doing that. I want the options to be button pushes to add the option amount to the cart. So I think it's on me to figure that out. May switch to a dropdown of options (like the example you linked) and then have the submit button...

Thank you!

so should this work? Would this be enough to get a product variant into the cart? Cant get it to add to cart.

<perch:input id="product" type="hidden" value="<perch:productvalue id="valueID" type="hidden" />" />

here's the full code:

    <perch:productopts>
        <perch:productvalues>
            <perch:form id="add_to_cart" app="perch_shop" action="/cart">
                <perch:input id="product" type="hidden" value="<perch:productvalue id="valueID" type="hidden" />" />
                <button class="button button-rounded button-reveal button-large button-green"><i class="icon-gift"></i><span> <perch:productvalue id="valueTitle" /></span></button> 
                <perch:input type="cms" />
            </perch:form>
        </perch:productvalues>
    </perch:productopts>

It correctly creates a series of forms to pass in product variant amounts, but nothing gets added to the cart.

here's a sample of the code perch is generating from the template above:

<form id="form1_add_to_cart" action="/cart" method="post">
                <input id="form1_product" name="product" value="23" type="hidden">
                <button class="button button-rounded button-reveal button-large button-green"><i class="icon-gift"></i><span> $20</span></button> 
                <input type="hidden" name="cms-form" value="YWRkX3RvX2NhcnQ6cGVyY2hfc2hvcDovdGVtcGxhdGVzL3Nob3AvcHJvZHVjdHMvZ2lmdHNfb25fY2FydF9tbC5odG1sOjE0OTQwMTM1MTM=">
            </form>

<form id="form2_add_to_cart" action="/cart" method="post">
                <input id="form2_product" name="product" value="24" type="hidden">
                <button class="button button-rounded button-reveal button-large button-green"><i class="icon-gift"></i><span> $40</span></button> 
                <input type="hidden" name="cms-form" value="YWRkX3RvX2NhcnQ6cGVyY2hfc2hvcDovdGVtcGxhdGVzL3Nob3AvcHJvZHVjdHMvZ2lmdHNfb25fY2FydF9tbC5odG1sOjE0OTQwMTM1MTM=">
            </form>

<form id="form3_add_to_cart" action="/cart" method="post">
                <input id="form3_product" name="product" value="25" type="hidden">
                <button class="button button-rounded button-reveal button-large button-green"><i class="icon-gift"></i><span> $60</span></button> 
                <input type="hidden" name="cms-form" value="YWRkX3RvX2NhcnQ6cGVyY2hfc2hvcDovdGVtcGxhdGVzL3Nob3AvcHJvZHVjdHMvZ2lmdHNfb25fY2FydF9tbC5odG1sOjE0OTQwMTM1MTM=">
            </form>

This was the solution for how to get buttons for the variants. This is useful for me for making donations of set amounts in the shop app.

<div class="product clearfix">
    <input type='hidden' 
           class='input-giftproduct-sku' 
           value='<perch:shop id="sku" type="hidden" env-autofill="false" />'/>
    <input type='hidden' 
           class='input-giftproduct-slug' 
           value='<perch:shop id="slug" type="hidden" env-autofill="false" />'/>
    <perch:productopts>
        <perch:productvalues>
            <button 
                        data-productid='<perch:productvalue id="prodoptID" />' 
                        data-optionsku='<perch:productvalue id="valueSKUCode" />' 
                        data-optionvalue='<perch:productvalue id="optionID" />'
                        class="button-sgift button button-rounded button-reveal button-large button-green">
                        <i class="icon-gift"></i>
                        <span><perch:productvalue id="valueTitle" /></span>
                    </button> 
        </perch:productvalues>
    </perch:productopts>
</div>