Perch Shop: Is there a better way to show shipping options?

tonyastley · May 7th 2020

I'm trying to find a better way to display the shipping options to the customer in a form with radio buttons.

The label for each radio button will contain the standard shipping details sorted by cost (or at least priority):

- Title
- Description

- Courier

- Price

Then have the form submit as the user so they don't have to keep pressing 'update shipping'

Here is the shipping method template with radios (template borrowed from: http://forum.grabaperch.com/fo…shipping-method-in-shop):

PHP

Code

perch_shop_shipping_method_form(['template' => 'shippings/method_form_radio.html']);

HTML for method_form_radio.html

Code

<perch:form id="shipping_method" method="post" action="/shop/checkout" app="perch_shop" class="shippingSelect">
<h2>Select A Delivery Option</h2>
<p class="method"><perch:shop id="shippingMethodID"/></p>
<perch:error for="all" type="login"> <p class="error">Sorry, there was a problem.</p> </perch:error>
<div class="shipMethods">
<perch:input type="radio" options="<perch:shop id="shippings_list" />" id="shipping" required="true" wrap="div.radiowrapper" />
<perch:error for="shipping" type="required">Required</perch:error>
</div>
<perch:input type="submit" id="submit" value="Update Shipping" class="hidden"/>
<perch:input type="hidden" id="r" />
<button type="submit" form="form1_shipping_method" value="Submit" class="update updateShipping">Update shipping cost</button>
</perch:form>

Display More

My current attempt involves using a hidden set of options using perch_shop_shipping_options(); and using javascript to copy the content into the radiowrapper div within the form, this seems anything but ideal but kinda gets the job done.

However I cannot seem to:

A: Control the order of the options generated by 'shippings_list' - I would like to sort by cost, or at least priority?
B: Get the form to submit when a radio is changed ($('#form1_shipping_method').submit(); does not work?).

Is this possible?

Byron Fitzgerald · May 7th 2020

If you want to use your own markup for a button, you'll need to add a CMS input type. This is to verify form.

Code

<perch:input type="cms">

Otherwise you can change your button to a perch:input

Code

<perch:input type="submit" form="form1_shipping_method" value="Update shipping cost" class="update updateShipping"/>

tonyastley · May 7th 2020

The button works fine and the form submits, the reason I'm doing it this way is the button seems to inherit the value from the forms previous state's submit button, ignoring whatever value I set.

tonyastley · May 7th 2020

I tried sticking to only the default button to test the form submission on change if the shipping input, but it still doesn't submit. I've tried the JS on a test form outside of this page and it works OK, it's just this form?