Why am I seeing 'Routes is not defined' error in Dawn Template?

Clicking the Add button cause this issue:

Uncaught ReferenceError: routes is not defined
at ProductForm.onSubmitHandler (product-form.js?v=106714731521289003461653532105:33:16)

Current code that it takes me to shows the error lies in the following:

fetch(${routes.cart_add_url}, config)
.then((response) => response.json())
.then((response) => {
if (response.status) {
this.handleErrorMessage(response.description);

I haven’t changed any of the coding at all so I’m not sure what has happened.

Hi @hnt88 ,

Follow the example code provided by shopify. You need to add the variantID (or productID if no variant), and the quantity. Refer to documentation here.

let formData = {
 'items': [{
  'id': 36110175633573,
  'quantity': 2
  }]
};

fetch(window.Shopify.routes.root + 'cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(formData)
})
.then(response => {
  return response.json();
})
.catch((error) => {
  console.error('Error:', error);
});

Oh by bad. I thought you are writing a fetch function. You might have miss some comma or semi-colon. If you did not change much on the product-form.js. I recommend, to add a new Dawn theme. Copy the product-form.js contents and replace the product-form.js contents in your old theme.

@made4Uo All good. I’ve just tried to do a exact copy of the product-form new Dawn theme and replaced it on my old theme and nothing had changed. So I’m not sure what else could’ve happened.

Not sure if making a difference but can you try this code instead of the routes.cart_add_url

fetch(window.Shopify.routes.root + 'cart/add.js', config)
2 Likes

@made4Uo you absolute legend! Seems like the template had incorrect coding from the start. Your solution fixed it!

1 Like

Glad to know

Actually, this routes were set in the theme.liquid.

Perfect solution! Worked like a charm. :smiling_face_with_sunglasses:

NB: I’m using Sense theme.

1 Like