TypeError: Product.ConfigurableSwatches is not a constructor in Magento 1.9.3

Question

I'm using Magento 1.9.3.1 and facing below error on configurable product detail page

TypeError: Product.ConfigurableSwatches is not a constructor

Why am I getting this error and how can I fix it?

Foskett

Answer 1

That seems to be a bug in Magento since I was able to reproduce it on a fresh installation when the following two conditions are meet:

• Configurable product with a config attribute other than color.
• Configurable swatches are disabled for that attribute.

You can solve it by checking if Product.ConfigurableSwatches exists before calling it:

1) Open this file: app/design/frontend/rwd/default/template/configurableswatches/catalog/product/view/type/configurable/swatch-js.phtml

2) Change this:

<script type="text/javascript">
    document.observe('dom:loaded', function() {
        var swatchesConfig = new Product.ConfigurableSwatches(spConfig);
    });
</script>

To this:

<script type="text/javascript">
    document.observe('dom:loaded', function() {
        if (Product.ConfigurableSwatches) {
            var swatchesConfig = new Product.ConfigurableSwatches(spConfig);
        }
    });
</script>

Rhearheba

Which still leads to an error if JS merging is disabled, because in the ?configurableswatches.xml layout file, it tries to use the configurableswatches/getSwatchesProductJs helper to get the path of a JS file to be included. But if the configurable swatches are disabled, this helper returns nothing, which leads to Magento trying to load an "empty" JS file à la: <script type="text/javascript" src="https://example.org/skin/frontend/package/theme/"></script>. Best solution for me was to disabled the Configurable Swatches extension completely. – Pitzer

Answer 2

Late answer but came across this today and wanted to provide alternative solution.

It looks like two bugs in one Magento feature:

1. Conditional load of Product.ConfigurableSwatches:

• the js/configurableswatches/swatches-product.js script which defines Product.ConfigurableSwatches is loaded conditionally in getSwatchesProductJs helper depending on the product's configurable attributes
• but swatch-js.phtml template uses Product.ConfigurableSwatches not checking if it was loaded, thus you get the "Product.ConfigurableSwatches is not a constructor" error.

2. The helper's logic to conditionally load a script returns an empty string when configurable swatches are disabled. It's then used in configurableswatches.xml layout like this:

    <action method="addItem">
        <type>skin_js</type>
        <name helper="configurableswatches/getSwatchesProductJs"></name>
    </action>
   

   The returned empty string is not handled here, so it causes rendering a script which references an empty file (note there is nothing after /theme/ in src):

    <script type="text/javascript" src="https://example.org/skin/frontend/package/theme/">
    </script>
   

My solution to both issues was to stop using the getSwatchesProductJs helper and load the swatches-product.js file even when the product has no attributes with configurable swatches enabled. So I have added this to my local.xml:

<PRODUCT_TYPE_configurable>
    <reference name="head">
        <action method="removeItem">
            <type>skin_js</type>
            <name helper="configurableswatches/getSwatchesProductJs"></name>
        </action>
        <action method="addItem">
            <type>skin_js</type>
            <name>js/configurableswatches/swatches-product.js</name>
        </action>
    </reference>
</PRODUCT_TYPE_configurable>

Endamage