Magento: Configurable Product Options not populating dropdown

0
votes

I have setup a configurable product and associated the relative simple products to it. I have gone through Magento's guide for doing this multiple times.

Magento is outputting the option menus on the product page but the only option is "Choose an option...".

In the HTML I see

<script type="text/javascript">
    var spConfig = new Product.Config({"attributes":{"144":{"id":"144","code":"size_mens_necklace","label":"Size","options":[{"id":"45","label":"18 in | 46 cm","price":"0","oldPrice":"0","products":["820","821","822","823"]},{"id":"44","label":"20 in | 51 cm","price":"0","oldPrice":"0","products":["824","825","826","827"]},{"id":"43","label":"24 in | 61 cm","price":"0","oldPrice":"0","products":["828","829","830","831"]}]},"92":{"id":"92","code":"color","label":"Color","options":[{"id":"18","label":"Gold Tone","price":"0","oldPrice":"0","products":["820","821"]},{"id":"17","label":"Rose-Gold Tone","price":"0","oldPrice":"0","products":["822","823"]},{"id":"16","label":"Silver Tone","price":"0","oldPrice":"0","products":["824","826"]},{"id":"15","label":"Two Tone","price":"0","oldPrice":"0","products":["825","827"]},{"id":"14","label":"Black","price":"0","oldPrice":"0","products":["828","829"]},{"id":"13","label":"Blue","price":"0","oldPrice":"0","products":["830","831"]}]},"141":{"id":"141","code":"material","label":"Materials","options":[{"id":"28","label":"ENAMEL","price":"0","oldPrice":"0","products":["820","822"]},{"id":"27","label":"METAL","price":"0","oldPrice":"0","products":["821","823"]},{"id":"26","label":"STERLING SILVER","price":"0","oldPrice":"0","products":["824","825"]},{"id":"25","label":"STAINLESS STEEL","price":"0","oldPrice":"0","products":["831"]},{"id":"24","label":"TITANIUM","price":"0","oldPrice":"0","products":["827","830"]},{"id":"23","label":"RODIUM","price":"0","oldPrice":"0","products":["826"]},{"id":"22","label":"COPPER","price":"0","oldPrice":"0","products":["828"]},{"id":"19","label":"ACRYLIC","price":"0","oldPrice":"0","products":["829"]}]}},"template":"$#{price}","basePrice":"18","oldPrice":"25","productId":"809","chooseText":"Please Select Size","taxConfig":{"includeTax":false,"showIncludeTax":true,"showBothPrices":false,"defaultTax":0,"currentTax":0,"inclTaxTitle":"Incl. Tax"}});
</script>

In the browser console I see:

The value "160dpi" for key "target-densitydpi" was truncated to its numeric prefix. mens-necklace-with-configurable-options.html:13
The key "target-densitydpi" is not supported. mens-necklace-with-configurable-options.html:13
Uncaught TypeError: Cannot read property 'msie' of undefined jquery.uniform.min.js:1
Uncaught TypeError: Cannot read property 'msie' of undefined jquery.colorbox-min.js:4
Uncaught TypeError: Cannot call method 'carousel' of null mens-necklace-with-configurable-options.html:292
Uncaught TypeError: Cannot call method 'click' of null mens-necklace-with-configurable-options.html:307
Uncaught TypeError: Object #<Object> has no method 'attachEvent' 6856a05de8509fa18d4dff9124c059b4.js:983
Uncaught TypeError: Cannot read property 'length' of undefined 6856a05de8509fa18d4dff9124c059b4.js:2459
Uncaught TypeError: Cannot call method 'carousel' of null mens-necklace-with-configurable-options.html:2911
Uncaught TypeError: Cannot call method 'click' of null mens-necklace-with-configurable-options.html:2926
Uncaught TypeError: Object [object Object] has no method 'uniform' mens-necklace-with-configurable-options.html:234
Failed to load resource: the server responded with a status of 404 (Not Found) http://domain.com/bonpo/media/catalog/category/198-women-jewelry_1.jpg
Failed to load resource: the server responded with a status of 404 (Not Found) http://domain.com/bonpo/media/catalog/category/fashion-jewelry7_2.jpg
Failed to load resource: the server responded with a status of 404 (Not Found) http://domain.com/bonpo/media/catalog/category/100313_mens_cross_jewelry_1.jpg
Failed to load resource: the server responded with a status of 404 (Not Found) http://domain.com/bonpo/media/catalog/category/jewelry-for-men_3.jpg
Failed to load resource: the server responded with a status of 404 (Not Found) http://domain.com/bonpo/media/catalog/category/fashion-jewelry7_3.jpg
Failed to load resource: the server responded with a status of 404 (Not Found) http://domain.com/bonpo/media/catalog/category/198-women-jewelry_2.jpg
Failed to load resource: the server responded with a status of 404 (Not Found) http://domain.com/bonpo/media/catalog/category/jewelry-for-men_4.jpg
Failed to load resource: the server responded with a status of 404 (Not Found) http://domain.com/bonpo/index.php/necklaces/men/all-men-s-necklaces/0
Failed to load resource: the server responded with a status of 404 (Not Found) http://domain.com/bonpo/index.php/necklaces/men/all-men-s-necklaces/
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

I have read that javascript conflicts can cause this issue. I am using jQuery but have included noConflict().

1
javascriptmagentoconfigurable-product
Did you find any solution? @ TylersSN - Gem

1 Answers

4
votes

The way Magento programmatically generates that list is to

  1. Generate an empty select list

  2. Uses the values in spConfig to populate the select list with options. This happens when your browser executes var spConfig = new Product.Config(...).

If we format the javascript object string, we can see Magento knows about your configured products

{
    "attributes": {
        "144": {
            "id": "144",
            "code": "size_mens_necklace",
            "label": "Size",
            "options": [{
                "id": "45",
                "label": "18 in | 46 cm",
                "price": "0",
                "oldPrice": "0",
                "products": ["820", "821", "822", "823"]
            }, {
                "id": "44",
                "label": "20 in | 51 cm",
                "price": "0",
                "oldPrice": "0",
                "products": ["824", "825", "826", "827"]
            }, {
                "id": "43",
                "label": "24 in | 61 cm",
                "price": "0",
                "oldPrice": "0",
                "products": ["828", "829", "830", "831"]
            }]
        },
        "92": {
            "id": "92",
            "code": "color",
            "label": "Color",
            "options": [{
                "id": "18",
                "label": "Gold Tone",
                "price": "0",
                "oldPrice": "0",
                "products": ["820", "821"]
            }, {
                "id": "17",
                "label": "Rose-Gold Tone",
                "price": "0",
                "oldPrice": "0",
                "products": ["822", "823"]
            }, {
                "id": "16",
                "label": "Silver Tone",
                "price": "0",
                "oldPrice": "0",
                "products": ["824", "826"]
            }, {
                "id": "15",
                "label": "Two Tone",
                "price": "0",
                "oldPrice": "0",
                "products": ["825", "827"]
            }, {
                "id": "14",
                "label": "Black",
                "price": "0",
                "oldPrice": "0",
                "products": ["828", "829"]
            }, {
                "id": "13",
                "label": "Blue",
                "price": "0",
                "oldPrice": "0",
                "products": ["830", "831"]
            }]
        },
        "141": {
            "id": "141",
            "code": "material",
            "label": "Materials",
            "options": [{
                "id": "28",
                "label": "ENAMEL",
                "price": "0",
                "oldPrice": "0",
                "products": ["820", "822"]
            }, {
                "id": "27",
                "label": "METAL",
                "price": "0",
                "oldPrice": "0",
                "products": ["821", "823"]
            }, {
                "id": "26",
                "label": "STERLING SILVER",
                "price": "0",
                "oldPrice": "0",
                "products": ["824", "825"]
            }, {
                "id": "25",
                "label": "STAINLESS STEEL",
                "price": "0",
                "oldPrice": "0",
                "products": ["831"]
            }, {
                "id": "24",
                "label": "TITANIUM",
                "price": "0",
                "oldPrice": "0",
                "products": ["827", "830"]
            }, {
                "id": "23",
                "label": "RODIUM",
                "price": "0",
                "oldPrice": "0",
                "products": ["826"]
            }, {
                "id": "22",
                "label": "COPPER",
                "price": "0",
                "oldPrice": "0",
                "products": ["828"]
            }, {
                "id": "19",
                "label": "ACRYLIC",
                "price": "0",
                "oldPrice": "0",
                "products": ["829"]
            }]
        }
    },
    "template": "$#{price}",
    "basePrice": "18",
    "oldPrice": "25",
    "productId": "809",
    "chooseText": "Please Select Size",
    "taxConfig": {
        "includeTax": false,
        "showIncludeTax": true,
        "showBothPrices": false,
        "defaultTax": 0,
        "currentTax": 0,
        "inclTaxTitle": "Incl. Tax"
    }
}

This points to the reason your option list isn't generating as

  1. The myriad javascript errors listed in your console, while unrelated to product options, have halted execution of Javascript on the page and Magento never gets to defining spConfig

  2. Someone's added customizations to js/varien/configurable.js which prevents the options labels from loading (reloadOptionLabels and fillSelect are the methods you're interested in here)