Minor Bug Causing HTML Parsing Errors in Kajabi Encore Page 2.3.0 and Website 1.3.0

A minor bug regarding an extra quotation mark can cause a lot of HTML parsing errors in both Encore Page 2.3.0 and Encore Website 1.3.0.

In this example, lines 483 and 484 are both quotation marks. Line 483 is the valid quotation mark that closes the class attribute from Line 473.

The extra quotation mark happens to each blocks whose parent section is not a carousel. This almost affects all blocks in the page and cause lots of HTML parsing errors.

The offending code is inside block.liquid at Line 19. Placing the quotation outside the if-statement will make the quotation mark always appear regardless of whether the section is a carousel or not. This is not desirable because the quotation mark is specific to the data-slick-id attribute that is used only when the parent section is a carousel.

Modern browsers are smart enough to correct these at the expense of a longer parsing time (usually a couple of milliseconds). However, heuristically correcting this at parsing time may vary the results between browsers and can cause DOM and CSS conflicts.

Solution

Fortunately the solution is simple. For those with access to theme code editor you can do the following:

1. Create a new page then modify it's code. This will open the Theme Code Editor.
2. Open the Snippets dropdown in the sidebar.
3. Click blocks.liquid. This will open it's code to the editor.
4. Locate line #19.
5. Change {% endif %}" into "{% endif %}
6. Click Save.
7. If you are using the new Encore Website 1.3.0, do the same steps.

The offending code is usually at Line 19. If you can't find it or if your theme was modified already with custom coding then look for the line that says:

  {% if carousel %}data-slick-id="{{ block.id }}{% endif %}"

Then proceed with Step #5 making it:

  {% if carousel %}data-slick-id="{{ block.id }}"{% endif %}

Further Analysis

Looks like only the block.liquid has this code. Searching for possible trailing quotation marks yields no further culprits.

Searching for other "data-slick-id"

Searching for "if carousel"

Searching for '{% endif %}"'

It's really a minor bug with an easy fix!