Forum
Shipping method in cart using "template includes"
I'm using a "template include" in my "cart.html" template to display the shipping methods on the cart page. It's not working. Is there a better way to display shipping methods in the cart?
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<perch:if id="product_count" match="gt" value="0">
<perch:form id="cart" app="perch_shop">
<perch:input type="submit" value="Update" hidden="true" aria-hidden="true" />
<div class="table-responsive">
<table class="table cart">
<thead>
<tr>
<th class="cart-product-remove"> </th>
<th class="cart-product-thumbnail"> </th>
<th class="cart-product-name">Item</th>
<th class="cart-product-price">Price</th>
<th class="cart-product-quantity">Quantity</th>
<th class="cart-product-subtotal">Total</th>
</tr>
</thead>
<tbody>
<perch:cartitems>
<tr class="cart_item">
<td class="cart-product-remove text-center">
<button type="submit" class="remove_cart" name="del:<perch:cartitem id="identifier" />" value="1"><i class="icon-trash2"></i></button>
</td>
<td class="cart-product-thumbnail">
<perch:repeater id="rptProductImages">
<perch:if exists="perch_item_first">
<perch:cartitem id="image" type="image" width="80" height="80" density="1.6" crop="true" output="tag" />
</perch:if>
</perch:repeater>
<perch:cartitem id="image" type="image" width="80" height="80" density="1.6" crop="true" output="tag" />
</td>
<td class="cart-product-name">
<h5 class="mb-0"><perch:cartitem id="title" /></h5>
<p><i><perch:cartitem id="variant_desc" /></i></p>
<div class="desc">
<perch:cartitem id="description" type="textarea" markdown="true" />
</div>
</td>
<td class="cart-product-price">
<perch:cartitem id="price_without_tax" />
</td>
<td class="cart-product-quantity">
<perch:input id="qty:<perch:cartitem id="identifier" />" value="<perch:cartitem id="quantity" />" type="number" min="0" />
</td>
<td class="cart-product-subtotal">
<span class="amount"><perch:cartitem id="total_without_tax_formatted" /></span>
</td>
</tr>
</perch:cartitems>
<tr class="cart_item">
<td colspan="6">
<div class="row clearfix">
<div class="col-lg-4 col-4 nopadding">
<div class="row">
<div class="col-lg-8 col-7">
<perch:input type="text" value="" class="sm-form-control" placeholder="Enter Coupon Code.." id="discount_code" />
</div>
<div class="col-lg-4 col-5">
<perch:input type="submit" value="Apply Coupon" class="button button-3d button-black nomargin"/>
</div>
</div>
</div>
<div class="col-lg-8 col-8 nopadding">
<perch:input type="submit" value="Update Cart" class="button button-3d nomargin fright"/>
<a href="checkout" class="button button-3d notopmargin fright">Checkout now</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row clearfix">
<div class="col-lg-6 clearfix">
<perch:template path="content/method_form.html" />
</div>
<div class="col-lg-6 clearfix">
<h4>Cart Totals</h4>
<div class="table-responsive">
<table class="table cart">
<tbody>
<perch:if id="total_discounts" match="gt" value="0.00">
<tr class="cart_item">
<th colspan="5">
<strong>Discount (<perch:shop id="discount_code" />)</strong>
</th>
<td class="cart-product-name">
<span class="amount"><perch:shop id="total_discounts_formatted" /></span>
</td>
</tr>
<tr class="cart_item">
<th colspan="5">
<strong>Cart Subtotal</strong>
</th>
<td class="cart-product-name">
<span class="amount"><perch:shop id="total_items_discounted_formatted" /></span>
</td>
</tr>
<perch:else />
<tr class="cart_item">
<th colspan="5">
<span class="amount"><strong>Cart Subtotal</strong></span>
</th>
<td class="cart-product-name">
<span class="amount"><perch:shop id="total_items_formatted" /></span>
</td>
</tr>
</perch:if>
<tr class="cart_item">
<th colspan="5">
<strong>Shipping</strong>
</th>
<td class="cart-product-name">
<span class="amount">Free Delivery</span>
</td>
</tr>
<tr class="cart_item">
<th colspan="5">
<strong>Tax</strong>
</th>
<td class="cart-product-name">
<span class="amount"><perch:shop id="total_tax_formatted" /></span>
</td>
</tr>
<tr class="cart_item">
<th colspan="5">
<strong>Total</strong>
</th>
<td class="cart-product-name">
<span class="amount color lead"><strong><perch:shop id="grand_total_formatted" /></strong></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</perch:form>
<perch:else />
<div class="style-msg errormsg">
<div class="sb-msg"><i class="icon-remove"></i><strong>Oh snap!</strong> Your cart is empty.</div>
</div>
</perch:if>
</div>
</div>
</section>
How is it failing? Have you turned on debug to check what's happening?
The shipping options do not populate the select box.
Have you turned on debug to check what's happening?
Here is what's on my page.
It looks like it is being used. What's in the template?
This is "method_form.html"
Hello Justin,
What you have at the moment is:
Even if Perch renders the inner form correctly (use your browser dev tools to check), I'm not sure that's going to work as
<form>
elements aren't supposed to have other<form>
elements inside them. See HTML5 docs:I removed the "template include". Instead just placed the code in the template. When I debug I see the options.
If I view the source code from the browser the options are not there. ~~ <div> <select id="form1_shipping" name="shipping" class="selectpicker" placeholder="Please choose" required="required"><option disabled="disabled" selected="selected" value="">Please choose</option><option selected="selected" value=""></option></select>
~~
Here is the template I'm using.
I have not altered the code on the page, so the code above for the page is still the same.
Are you using
perch_shop_shipping_method_form()
?That works if I add it to my page, but I want to have the shipping method options within my template. I'm not sure how to accomplish this? My first attempt was to use a template include, that didn't work.
Well, I found a workaround that I'm happy with. I added the perch_shop_shipping_method_form(), and changed the "method_form.html" template to just use it as a modal.
"method_form.html"