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
CRITICAL 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.
WARNING CONDITIONS
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.