1

I'm creating a product page for a product with multiple variants. In this case the variant represents a different size (with unique SKU, stock, etc..).

It's laid out like so (don't mind the ugly styling):

product box

I don't want to pre-select a size option because I want to avoid people adding the wrong product to their cart.

In the template there's a hidden field with the purchasableId of the variant. The value attribute starts empty and when people click one of the options it is set to the corresponding id.

<input type="hidden" name="purchasableId" value="">

However, when people click 'Add to cart' right away, without selecting a size the following Craft\Exception is shown:

Not a purchasable ID

How can I customize this error message to notify the customer that they have to select a size option?

I could of course solve this problem by using javascript but that doesn't seem very solid to me. So is there a way of validating the stuff added to the cart in the back-end and getting something like a JSON response?

Improve this question
1
  • 1
    Just an opinion, but this seems to me like exactly the sort of thing you would validate on the front end using js/css/whatever
    – aw04
    Dec 23, 2016 at 20:34

1 Answer 1

Reset to default
2

Well, if you submit to your add to cart form via ajax, you will already get a json response - with an error - you can simply grab that error, test for Not a purchasable ID and then change the text to whatever you want.

If you're submitting in a non ajax fashion, you won't get a JSON response no matter what clearly.

I agree with the comment above - I'd generally handle this in front end JS, by disabling the add to cart until a size is selected. And I guess if you're allowing your site to use no-js, then in that case I would probably just pre-select the most popular option (Medium, presumably).

You can also write a plugin that listens to https://craftcommerce.com/docs/events-reference#commerce_cart.onbeforeaddtocart and does whatever validation you need, and returns a response any way you want, including via JSON (i.e. $this->returnJson(["success"=>true]); or e.g. $this->returnErrorJson($errors); where $errors holds your validation errors...)

Improve this answer
2
  • Actually, when sending the form via ajax, you will get a 500 Internal Server Error if you don't add the purchasableId to the query. So I will have to validate this before actually sending anything to the back-end.
    – Floriskoch
    Dec 26, 2016 at 12:41
  • Well, that's a bug you should report to support@craftcommerce.com then - the intended behaviour would definitely not be a 500 internal server error. E.g an incorrect purchasableId gives an error...and a missing one obviously should too. Looking at the cart controller it does seem like it isn't handling a missing Id indeed....
    – Jeremy Daalder
    Dec 26, 2016 at 21:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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