Search code examples
javascriptjqueryjspatg

Web elements not showing in China


I am having a very strange issue. I have an international website built with ATG/BCC Ecommerce framework. On the product page, I am using JavaScript to display size options related to a style. My issue is ONLY IN CHINA the sizes do not appear at all. I am not able to reproduce the issue, but customers are calling and complaining. I have had several people in China test this issue, and they are not able to reproduce either. The customers have tried different browsers and clearing their cache, but are still unable to see the sizes. I have read that China blocks certain websites, but since some users in China do not have the issue, I am assuming it is not that.

I really don't think it's an issue with my code, since it works fine in every other region and for most Chinese users.

Does anybody have an idea what might be causing this issue only in China?

HTML

<div id="product-sizes">
    <%-- Sizes will be rendered using the JS template below --%>
</div>
<script type="text/template" id="tml-productsizes">
    <ul>{{#sizes}}<li class="{{cssClass}} {{selected}}" data-name="{{key}}">{{name}}</li>{{/sizes}}</ul>
</script>

Script

var $productSizesTemplate = $("#tml-productsizes");
if (typeof isColor !== "undefined" && isColor) {
    this.renderSizes($productSizesEl, $productSizesTemplate, this.getSelectedColor());
}
renderSizes: function ($targetEl, $template, color) {
        var templatedata = [],
            productSizes = this.sizes, // array of {key: "m", value: "med"}
            isPartialSale = this.isPartialSale(),
            colorSizes = this.getColorSizes(color);


        for (var i = 0, len = productSizes.length; i < len; i++ ) {
            var size = productSizes[i],
                sku = this.skus[color+size.key];

                templatedata.push({
                    'cssClass': ($.inArray(size.key, colorSizes) >= 0)? 'size ' + ((sku && sku.onSale) ? "is-onsale": ''):'size unavailable',
                    'key': size.key,
                    'name': size.value,
                    'selected': (this.getSelectedSize() === size.key )? 'selected': undefined
                });
        }

        $targetEl.html(Mustache.render($template.html(), {sizes:templatedata}));
    });

Solution

  • I ended up finding the issue. In my code I had a reference to jQuery that sat on Google's servers. The QA team tested using software that allowed them to use a computer in China. They found that the jQuery from Google's CDN was taking up to 50 SECONDS TO LOAD at times!! I moved the jQuery file to our CDN and that solved the problem.

    The great firewall of China....