What is this?

Cratejoy CodeChecker

Because Cratejoy provides an open platform to design your store front, it is possible that errors may be introduced in the template. The Cratejoy CodeChecker will detect and highlight errors and warnings in your store code.

Running the CodeChecker

The CodeChecker runs when you open a design in the code editor.

Any files that contain issue will be highlighted in red. To see the error, open the file.

CodeChecker runs when saving a file

When you attempt to save a file, the CodeChecker will validate the file. If the validation passes the file will be saved.

**If there are detected conditions, the file will be saved only if the file is not part of a published design in a live store.

If the file has errors, they will be highlighted in the code.

Understanding CodeChecker Dialogs

When the CodeChecker displays a detected condition, it will appear in a dialog near the offending line. The image below illustrates how a CRITICAL (RED) condition and a WARNING (YELLOW) condition will be presented in the code editor.

The dialog will show the name of the condition (in brackets), a helpful message specific to the condition and some indication on the symptom this would cause and a hint on how to fix the problem.

Detected Conditions


Reference to missing template file

If your template extends a file that does not exist, you must either create the referenced file OR reference the correct file.

background-image: url(..) required for bgimage editor

In your source, if a 'bgimage' editor is set for a tag, the tag must contain style="background-image: url();" in order for the designer to properly set the url. Below is an example offending line.

Duplicate barley tag

For editable content, the 'data-barley' attribute value MUST be unique within the template and included and extended files. If the value is not unique, the designer will not be able to properly set the content.

HTML Syntax error

Will detect if the HTML cannot be parsed.

Missing asset reference

Will detect if the template accesses an asset (image, js, etc) that does not exist.

Jinja Syntax error

Will detect if there is an issue in the Jinja syntax.


Direct reference to image index

Reference to a product image by index, will sometimes cause an old product image to be displayed. You should use the 'object_img_tag' filter to display a product image. Generally, don't do this:

{{ product.images[0].url | img_tag(css_class="product_image") }}

Do this:

{{ product | object_img_tag(css_class="product_image") }}

Absolute URL to asset

Access to all assets should use the 'asset_url' filter which forms the right URL and handles cache properly. If you directly link to the CDN, changes to the asset will not be shown until the cache expires.

To avoid this, use

<img src={{ 'images/SA_Recipe_Card_front_web.jpg' | asset_url }}>

not this:

<img src="//s3.amazonaws.com/cratejoy_vendor_images/dev_store/tasty/images/SA_Recipe_Card_front_web.jpg"/>

CDN URL belongs to wrong theme

Due to a past issue, in some cases, images were being uploaded to the published theme name. If this condition exists, you may have trouble changing your images in the designer.

Unknown barley editor

The 'data-barley-attribute' value is not one of the supported editors (simple, plus, advanced, etc..)

Missing barley editor tag

The tag is marked editable, but does not have a 'data-barley-editor' attribute.

Barley id cannot be parsed /

Blocks inside tags will split the tag onto multiple pages

There is some condition that prevents finding the 'data-barley' attribute. This can be due to a syntax error or splitting HTML tags across template files. All data-barley attributes must be contained within a proper HTML tag element.

Don't do this:

This bit of code is included in the HTML tag from another source file like this:

Dynamic patch collision

For this, you'll have to contact support to get it fixed. If you encounter this situation, edits made in the designer will look like they are saved, but will not display when viewing the store.