0

I'm building my first Expresso store, and have hit an issue with IE8. Any page that contains "add to cart" buttons renders everything up to the buttons but the rest of the page is blank.

IE shows this error:

Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)

I presume it's Expresso's inline JS that's causing this, and that IE doesn't like it manipulating the page before it's fully loaded? Has anyone else come across this or found a solution?

EDIT:

I've now narrowed it down to a very simple template that still shows this error:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <div class="container">
        BEFORE
        {exp:channel:entries channel="discography" limit="1" disable="categories|category_fields|member_data|trackbacks|pagination"}
            {exp:store:product entry_id="{entry_id}" return="cart"}
                <input type="text" name="item_qty" size="3" value="1" />
                <input type="submit" name="submit" value="Buy now" class="submit" />
            {/exp:store:product}
        {/exp:channel:entries}
        AFTER
    </div>
    </body>
</html>

When I view that in IE8 or lower I don't see the "AFTER" text, and I get the same parsing error as before. If I remove the .container div, it renders as expected. So I assume that Expresso is trying to manipulate the page before IE has finished rendering the container div. Any ideas?

Improve this question
2
  • What happens if you run the page through validator.w3.org ?
    – Adrian Macneil
    Apr 27, 2014 at 4:37
  • It passed validation fine. I've just edited my question to include a more precise example...
    – Frank Harrison
    Apr 27, 2014 at 12:26

1 Answer 1

Reset to default
1

Admittedly it's a few months late but I too was having this issue. It's caused by Store loading it's JS into the body tag before the page has finished loading.

The fix is to wrap it in a document.ready function. This is on line 159 of AbstractTag.php which can be found in third_party/store/src/Store/Tag

So replace

return '
(function() {
    ExpressoStore.config = '.$this->ee->store->config->config_json().';
    if (!ExpressoStore.scriptElement) {
        var script = ExpressoStore.scriptElement = document.createElement("script");
        script.type = "text/javascript"; script.async = true;
        script.src = "'.$theme_url.'";
        document.getElementsByTagName("body")[0].appendChild(script);
    }
})();';

with 

return '
$(document).ready(function() {
    (function() {
        ExpressoStore.config = '.$this->ee->store->config->config_json().';
        if (!ExpressoStore.scriptElement) {
            var script = ExpressoStore.scriptElement = document.createElement("script");
            script.type = "text/javascript"; script.async = true;
            script.src = "'.$theme_url.'";
            document.getElementsByTagName("body")[0].appendChild(script);
        }
    })();
});';

And it should fix the issue.

Improve this answer
1
  • Aha – interesting! I think I've since found another way round what I was trying to do but good to know there's a solution for next time. (Would be great if Expresso incorporates this into the source code too, hint hint...)
    – Frank Harrison
    Aug 11, 2014 at 12:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.