Closeup Image not working for some products

[lesliekirk]

I swear I already posted this issue but I can't even find it in my own recent posts. The example product uses the same template as other products but the Closeup Image is not working

http://www.flightquarters.com/bird-d...lightpack.html - not working

http://www.flightquarters.com/bird-d...lightsuit.html - works

The only difference I see if that the "pack" packages also use swatch swap.

Question (Bruce) - now that Firebug is "dead" - what is a good tool to debug javascript errors?

[Matt Zimmermann]

Hi Leslie,

It appears that the HTML is different between the two pages. Are they using the same PROD code or is one an alternate product page?

As for JavaScript debugging, I like the Chrome developer tools.

[lesliekirk]

As I mentioned, they are both using the same PROD Page template.

[lesliekirk]

Now to figure out why this one works http://www.flightquarters.com/bird-d...lightpack.html

[Bruce - PhosphorMedia]

I swear I already posted this issue but I can't even find it in my own recent posts. The example product uses the same template as other products but the Closeup Image is not working

http://www.flightquarters.com/bird-d...lightpack.html - not working

http://www.flightquarters.com/bird-d...lightsuit.html - works

The only difference I see if that the "pack" packages also use swatch swap.

Question (Bruce) - now that Firebug is "dead" - what is a good tool to debug javascript errors?

Same with Matt. Chrome Inspector. its a bit less 'organized' than Firebug was (at least for js debugging) but basically has the same tools.

[lesliekirk]

Same with Matt. Chrome Inspector. its a bit less 'organized' than Firebug was (at least for js debugging) but basically has the same tools.

Thanks to both of you. I'm not sure if I'm using it correctly or not - I'm not seeing any javascript errors.

[lesliekirk]

FYI - all of the EconoPack product pages don't enlarge either. For example:

http://www.flightquarters.com/bird-d...econopack.html

Still the same PROD page template.

[razertip]

The code is different around line 450

<div class="column whole medium-half product-information--images">
<span class="flag flag--">
<span data-icon="&#x54;" id="js-main-image-zoom" class="main-image" data-index="0"><img src="graphics/en-US/cssui/blank.gif" alt="Lime Green FlightSuit&amp;trade;" title="Lime Green FlightSuit&amp;trade;" id="js-main-image" data-image="graphics/00000001/Green-FlightSuit-on-Bird.jpg" /></span>
</span>
<div class="row thumbnail-wrapper">

<div class="column whole medium-half product-information--images">
<span class="flag flag--">
<span class="main-image" data-index="0"><img src="graphics/en-US/cssui/blank.gif" alt="Petite FlightPack" title="Petite FlightPack" id="js-main-image" data-image="" /></span>
</span>
<div class="row thumbnail-wrapper">

I hope that helps narrow it down.

[lesliekirk]

The code is different around line 450

<div class="column whole medium-half product-information--images">
<span class="flag flag--">
<span data-icon="&#x54;" id="js-main-image-zoom" class="main-image" data-index="0"><img src="graphics/en-US/cssui/blank.gif" alt="Lime Green FlightSuit&amp;trade;" title="Lime Green FlightSuit&amp;trade;" id="js-main-image" data-image="graphics/00000001/Green-FlightSuit-on-Bird.jpg" /></span>
</span>
<div class="row thumbnail-wrapper">

<div class="column whole medium-half product-information--images">
<span class="flag flag--">
<span class="main-image" data-index="0"><img src="graphics/en-US/cssui/blank.gif" alt="Petite FlightPack" title="Petite FlightPack" id="js-main-image" data-image="" /></span>
</span>
<div class="row thumbnail-wrapper">

I hope that helps narrow it down.

That helped a LOT!!!

<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:productimagecustomfields:main">
                <span data-icon="&#x54;" id="js-main-image-zoom" class="main-image" data-index="0"><img src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" title="&mvte:product:name;" id="js-main-image" data-image="&mvt:product:customfield_values:productimagecustomfields:main;" /></span>
            <mvt:else>
                <span class="main-image" data-index="0"><img src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" title="&mvte:product:name;" id="js-main-image" data-image="&mvt:product:customfield_values:productimagecustomfields:main;" /></span>
            </mvt:if>

And now I know why I wasn't using the Image Type Main - I was trying to have a different image display because it was being thrown off by the inventory variant images...geeez, I wish their was an easier way to do this.

THANKS for the catch!!!