Related Products carousel work for some products

[lesliekirk]

What would cause the javascript for the related items carousel to not fire for some products? This is one of the darnest things I've seen. I'm checking for broken code in the product description and I'm not finding any. The products all use the same PROD page template but for some of them the carousel slick-initialized slick-slider is not initializing. What heck is going on?

[Rick Wilson]

Without a link, my guess is you won't get a lot of help

[lesliekirk]

Without a link, my guess is you won't get a lot of help

Yeah, I suppose...
Non-working carousel link http://www.calendarcompany.com/calendar-I17_MOM.html
Working carousel link http://www.calendarcompany.com/calendar-W15.html

Please note it has nothing to do with the number of product assigned as related items. I have already tested that theory.

[PCINET - Andreas]

Looks like double quotes in the name break the HTML.

[lesliekirk]

Looks like double quotes in the name break the HTML.

I had seen that I tried testing without the title in Related Products, but I don't think I was thorough enough. I have an idea to try. Thanks Andreas!

[lesliekirk]

I had seen that I tried testing without the title in Related Products, but I don't think I was thorough enough. I have an idea to try. Thanks Andreas!

Sooooo...I fixed what I thought needed to be fixed but it didn't fix the problem

[lesliekirk]

I'm hoping what ever might be breaking the Related Products layout, is also the reason why the plus and minus won't increase or decrease the quantity. At first I thought it might be something in the attributes them self but I switched to a different template and the plus and minus worked as expected.

[lesliekirk]

I'm hoping what ever might be breaking the Related Products layout, is also the reason why the plus and minus won't increase or decrease the quantity. At first I thought it might be something in the attributes them self but I switched to a different template and the plus and minus worked as expected.

Which is also controlled by the script.js file - okay this is officially maddening. I have been going through this entire thing over and over again since this morning. There is a javascript error that Firebug is reporting (only on the broken page):

TypeError: document.getElementById(...) is null

// ---- Update Display Price Based on Attribute Selections (If Attribute Machine Is Not Being Used) ---- //
        if (typeof attrMachCall === 'undefined' && document.getElementById('js-product-attribute-count').value > 0) {
            for(var baseProductPrice=Number(document.getElementById("js-price-value").getAttribute("data-base-price")),regularProductPrice=Number(),productAttributeCount=Number(document.getElementById("js-product-attribute-count").value+1),productAttributes=document.getElementById("js-purchase-product").elements,attributeType=[""],i=0;i<productAttributes.length;i++){var tagName=productAttributes[i].tagName.toLowerCase(),elementType=productAttributes[i].type,type=productAttributes[i].getAttribute("data-attribute-type"), name=productAttributes[i].name;"hidden"==elementType&&null!=type&&attributeType.push(type);productAttributes[i].onchange=function(){updateProductDisplayPrice()}} function updateProductDisplayPrice(){for(var b,a,c=baseProductPrice,f=regularProductPrice,d=1;d<productAttributeCount;d++)if(b=document.getElementsByName("Product_Attributes["+d+"]:value"),"select"==attributeType[d])for(var e=0;e<b.length;e++)a=b.item(e),a=a.options.item(a.selectedIndex),c+=Number(a.getAttribute("data-option-price")),f+=Number(a.getAttribute("data-regular-price"));else if("radio"==attributeType[d]||"checkbox"==attributeType[d])for(e=0;e<b.length;e++)a=b.item(e),a.checked&&(c+=Number(a.getAttribute("data-option-price")), f+=Number(a.getAttribute("data-regular-price")));else if("text"==attributeType[d]||"memo"==attributeType[d])a=b.item(0),a.value&&(c+=Number(a.getAttribute("data-option-price")),f+=Number(a.getAttribute("data-regular-price")));b=document.getElementsByName("Quantity");c*=Number(b.item(0).value);b.item(0);document.getElementById("js-price-value").innerHTML=formatCurrency(c);document.getElementById("js-mobile-price-value")&&(document.getElementById("js-mobile-price-value").innerHTML=formatCurrency(c))} function formatCurrency(b){var a=!1;0>b&&(a=!0,b=Math.abs(b));return(a?"-$":"$")+parseFloat(b,10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g,"$1,").toString()}updateProductDisplayPrice();
        };

But what would cause this?!?

[Bruce - PhosphorMedia]

I'd bet its this error:
scripts.js:522 Uncaught TypeError: Cannot read property 'getAttribute' of null

Seems like whatever triggers the Change Price Based on Attribute selection needs to be wrapped in 'Has Attributes'

ANY Javascript error, can cause any following javascript error to fails completely as the javascript parser just 'goes away' HTH

[lesliekirk]

I'd bet its this error:
scripts.js:522 Uncaught TypeError: Cannot read property 'getAttribute' of null

Seems like whatever triggers the Change Price Based on Attribute selection needs to be wrapped in 'Has Attributes'

ANY Javascript error, can cause any following javascript error to fails completely as the javascript parser just 'goes away' HTH

While it makes sense, I'll have to look again at the template code that works and this code to see what's different. Off the top of my head - it's the same code, just put in a different place on the page.

[lesliekirk]

So I'm even more confused. The example that works has an attribute, the one that doesn't work doesn't have any attributes. So I went to see if this template is being use with a product that has attributes and doesn't work. I found this one http://www.calendarcompany.com/calendar-TY12.html. I think I'd better walk away from it...

[Gordon - Phosphor Media]

So I'm even more confused. The example that works has an attribute, the one that doesn't work doesn't have any attributes. So I went to see if this template is being use with a product that has attributes and doesn't work. I found this one http://www.calendarcompany.com/calendar-TY12.html. I think I'd better walk away from it...

The getAttribute call is JavaScript and is referring to html element attributes rather than Merchant product attributes. Essentially it is looking for an element with the ID of js-price-value and then trying to get a reference to the data-base-price attribute of that element. If the attribute data-base-price does not exist, you get this error.

[lesliekirk]

Hats off to Brennan, he pointed me into the direction that I needed to find and comment out within the script.js file. Everything works again

[William Davis]

Hats off to Brennan, he pointed me into the direction that I needed to find and comment out within the script.js file. Everything works again

Leslie, can you be a little more specific how you resolved the problem? I suspect I'm going to run into the same thing shortly.

[lesliekirk]

Turns out if was a bit more complex than anticipated. Sort of like squeezing a balloon, making a change in one place impacted other things. I had to uncomment the line I commented out, then I had to make sure I still had the default ID of js-price-value as Gordon pointed out. After that I had some issues with the Add to Cart button which, again, Brennan noticed the issue with.