LiteMage and Hyvä-template not working

[martinstoehr]

We ran in an issue with Litemage and our new Magento Hyvä-Template.

Every page with a custom-vary was not in cache (x-litespeed-cache: miss).

Because of Litemage is using Require-Js and Hyvä is using Alpine.js the require-call in litespeed/module-litemage/view/frontend/templates/inject/customvary.phtml was failing.

For our needs we changed this

<script>
    require(['jquery'],function(){
        jQuery(document).ready(function() {
            if (document.cookie.indexOf('litemage-custvary') == -1) {
                jQuery.ajax({
                    url: '<?php echo $block->getCheckUrl();?>',
                    type: 'POST',
                    success: function(response){
                        if(response.ajaxReload){
                            window.location.reload(true);
                        }
                    }
                });
                return false;
            };
        });
    });
</script>

to this

<div x-data="{
    checkAndReload() {
        if (document.cookie.indexOf('litemage-custvary') == -1) {
            fetch('<?php echo $block->getCheckUrl();?>', {
                method: 'POST',
            })
            .then(response => response.json())
            .then(data => {
                if (data.ajaxReload) {
                    window.location.reload(true);
                }
            })
            .catch(error => console.error('Error:', error));
        }
    }
}" x-init="checkAndReload()"></div>

and Litemage works with Hyvä! "x-litespeed-cache: hit,litemage" on every custom-vary-page!

Maybe you find this useful and implement it in a future release...

thx Martin

[kokers]

Hey @martinstoehr thanks for submitting this.

This solution still depends on the JS library and ideally we wouldn't rely on any in this case.

If you have a bit of time and are able to, can you test if the following code will solve the issue for you?

<script>
var shouldReload = function(){
    if (document.cookie.indexOf('litemage-custvary') == -1) {
        fetch('<?php echo $block->getCheckUrl();?>', {
            method: 'POST',
        })
        .then(response => response.json())
        .then(data => {
            if (data.ajaxReload) {
                window.location.reload(true);
            }
        });
        return false;
    }
};

if (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
    shouldReload();
} else {
    document.addEventListener("DOMContentLoaded", shouldReload);
}
</script>

it's very similar to yours, but it doesn't rely on any JS library.

Let me know. Thanks!

[martinstoehr]

Hey @kokers ,

i will try out within the next days and let you know.

thanks.

[martinstoehr]

Hey @kokers,

your code works with both luma and hyva themes. great!

cheers, Martin

[kokers]

Thank you for testing the solution. Much appreciated. Glad to hear it works without issues. Will look into adding this in future release.