Shopify购买按钮未显示在手机上

Question

I have some shopify Buy buttons on my website. They show fine on desktop browsers - the site is responsive and the buttons show on all viewport queries on desktop browsers.

When viewing the site on mobile I get no buy buttons. I thought it may be a cross-origin issue so I hosted the shopify javascript files locally and I get the same behaviour.

I have tried all the different versions of the buy now button and I get the same behaviour.

Is there a reason I can't see buy buttons on mobile? Site is www.redlamp.com.au/myriad/shopify2.html

Answer 1

There is an error in the shopify code buy-button-storefront.min.js:7 TypeError: Failed to execute 'fetch' on 'Window': Invalid value(…)

It seems that fetch is not available on your Android device see more info here .

Try to add a polyfill like that one before running the Shopify code.

or maybe there is really an error on their sides. You can address the problem on their GitHub repo

Answer 2

I found the culprit - I had extended the Object with my own rudimentary add/remove class functions. Removing the following code fixed the problem:

Object.prototype.addClass = function(clas) {        

    if (this.classList)
        this.classList.add(clas);
    else
        this.className += ' ' + clas;

}

Object.prototype.remClass = function(clas) {        

    if (this.classList)
        this.classList.remove(clas);
    else
        return;
}

Thanks!