2

My Expresso-store shipping dropdown is coded like this:

<strong>Please select your delivery/collection preference:</strong> <br />
<span class="bluetext">(please note we do not deliver outside the zones listed here) </span>
<br />
<select name="shipping_method">
<option value="">Select collection or delivery preference...</option>
{shipping_method_options}
</select>
{if error:shipping_method}<p class="form_error">Please select either collection or delivery.</p>{/if}

I would like the buyer to see, by default in the dropdown, 'Select collection or delivery preference...' If they don't change the selection to something else, I'd like for them to get an error message.

If I remove that option and just leave {shipping_method_options} the buyer does not need to change the dropdown, so no error message again.

What would cause an error message to actually appear for shipping methods? Is there a way I can make selection of a method mandatory?

Thank you!

3

Simply add require="shipping_method" to your template:

{exp:store:checkout require="shipping_method"}
    <select name="shipping_method">
        <option value="">Select collection or delivery preference...</option>
        {shipping_method_options}
    </select>
    {if error:shipping_method}<p class="form_error">Please select either collection or delivery.</p>{/if}
{/exp:store:checkout}
| improve this answer | |
  • That is so much easier. Makes a lot more sense too if you are not already using javascript to evaluate the checkout information. – Justin Long Nov 30 '12 at 23:55
1

The easiest way to achieve what you are after would be to do it with a bit of javascript. Personally I like Validate jQuery plugin. So you could do it a few ways with that.

<select name="shipping_method" class="required">
<option value="">Select collection or delivery preference...</option>
{shipping_method_options}
</select>

Which should prevent the form from being submitted if they haven't selected an option. You could also prevent the first option from being selected by the user using the disable parameter.

<select name="shipping_method" class="required">
<option value=""  disabled="disabled">Select collection or delivery preference...</option>
{shipping_method_options}
</select>

The other option would be to write your own custom rule for the validation something along the lines of (as seen here):

 $.validator.addMethod("valueNotEquals", function(value, element, arg){
  return arg != value;
 }, "Value must not equal arg.");

 // configure your validation
 $("form").validate({
  rules: {
   SelectName: { valueNotEquals: "" }
  },
  messages: {
   SelectName: {
    valueNotEquals: "Please select either collection or delivery."
   }
  }  
 });
| improve this answer | |
  • I already had the required:shipping_method in the template. I'll try the second solution. Thank you! – Alissa J. Robinson Dec 2 '12 at 11:20
  • I'm afraid none of these solutions worked. I don't know how to write js, so using the code above didn't work and I don't know how to tweak it to make it work. And sadly, using class="required" and ensuring shipping_methods is a required field don't work either. I have a temporary work-around solution in place, but it isn't ideal. – Alissa J. Robinson Dec 2 '12 at 11:57
  • Apparently this is a bug which will be fixed in the next release of Store, according to them. – Alissa J. Robinson Dec 12 '12 at 1:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.