0

We have an instagram widget on our site. Perfect for desktops - but very negative for the pagespeed score on mobile.

So I would like to prevent it from loading on mobile. Not hide it with {display:none;} (than it's still being loaded in the background)

A friend wrote this script for me, but that does not work.

 <script>
    let details = navigator.userAgent;

    let regexp = /android|iphone|kindle|ipad/i;

    let isMobileDevice = regexp.test(details);

    if (!isMobileDevice) {
        document.write("{{widget type="WeltPixel\InstagramWidget\Block\Widget\Instagram" instagram_api_type="basic_api" images_in_new_tab="1" images_per_row="col-5" images_have_padding="0" images_alt_text="1" images_have_caption="0" optimize_image_layout="1" enable_lazyload="1" limit="5" }}");
    } 
</script>

I added he widget code into this between the " ", but that does not work and gives "); } as output on all devices.

My friend is currently unavailable. Can someone help me solve this?

3
  • This work can't be done using Javascript, we have to use PHP instead. Do you use Varnish for caching on your Magento site?
    – Tu Van
    Commented Nov 13, 2022 at 8:49
  • we use both. but the problem is that it has to be in a static block in magento
    – Ronny
    Commented Nov 14, 2022 at 6:59
  • ok, I'll take a look. Because your task is complex, I'm not sure that I can give you the solution quickly, but keep following your post.
    – Tu Van
    Commented Nov 14, 2022 at 7:16

1 Answer 1

0

I think there is no need to write JavaScript code for it. This can be achieved using PHP also.

To detect that the website is being opened in mobile, I would do something like this:

// Create the function, so you can use it
function isMobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}

and then check:

if(!isMobile()){
    // Call your widget here
}

Note: The expression used in preg_match() may be old, so it may not work for some of the latest devices.

Please let me know if it helped.

1
  • That does not work for me. We use it in a magento static block.
    – Ronny
    Commented Nov 11, 2022 at 16:44

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.