product.js error

[shanekunz]

On a freshly made theme, product.js is throwing an error.

I ran "yarn create slate-theme my-new-theme", modified my .env file, and ran "yarn start". Site loads fine. In the console, there's errors.

[LucaThemes]

The reason error appears is that on a given page there's no DOM element with data-product-form attribute. Mainly because on a dev env you may not necessarily have a product added yet.

If you go to src/scripts/sections/product.js and replace the following:

this.product = await this.getProductJson(
  productFormElement.dataset.productHandle,
);
this.productForm = new ProductForm(productFormElement, this.product, {
  onOptionChange: this.onFormOptionChange.bind(this),
});

with:

if(productFormElement !== null) {
  this.product = await this.getProductJson(
    productFormElement.dataset.productHandle,
  );
  this.productForm = new ProductForm(productFormElement, this.product, {
    onOptionChange: this.onFormOptionChange.bind(this),
  });
}

it will fix the problem.

[shanekunz]

Thanks. Can I make a pull request to fix this issue?

[LucaThemes]

Sure, go ahead :)

[shanekunz]

I just tried to fix this one for fun, however I can't figure it out. I tried following the CONTRIBUTING.md. yarn bootstrap does not work on yarn version 1.16.0 and node version 12.14.1. And I don't see any "src" folder in this repository by default. I'm moving on, since this project isn't maintained and I use Theme Kit now anyways.

[LucaThemes]

Phew, I wasn't even aware of Theme Kit existence. And as it turns out, people recommend using it instead of Slate. Might need to give it a try then.

[shanekunz]

Yeah, you should check it out if you're not using Slate. It's just a simple terminal based tool to upload and download theme files to Shopify. At our company, we started storing all our theme code in git repositories. Then you don't have to worry about multiple people editing files, or what's on the Shopify cloud in general because all your changes are saved in separate repo. You just run theme deploy and can push your theme code to any theme. You can also pull down existing theme code to start or compare files via theme download. When you're actively working on a project, run theme watch to push any files you save. It's pretty unfortunate Shopify seems to have given up on Slate, but at least Theme Kit is a nice tool. The config.yml is pretty simple too. If you have multiple themes on the same store you can configure the config.yml to allow theme deploy --env=MAIN_THEME_NAME_HERE or theme deploy --env=OTHER_THEME_NAME_HERE