Miva Merchant 9.13.x Bug Reports

[Eric Foresman]

Brennan screenshot attached

Hi Psydde,

the column that is reporting the error "Product_Order" is the product display order column. my guess is that someone has set a negative display order for those products at some point. you should be able to fix this by just turning on the "edit display order" and saving the current display order again without making any changes. that should reset everything to a positive value without changing the current display order in any way.

-Eric

[Leanne]

Below is the js code the error is referencing in the console for the scripts file

Uncaught ReferenceError: gallery is not defined
at HTMLSpanElement.<anonymous> (prodscripts.js:284)

// ---- Open Product Image Gallery ---- //

productGallery: function (trigger) {

trigger.on('click', function (e) {

var startAt = Number($(this).attr('data-index'));



e.preventDefault();

if (gallery.length > 0) {X

$.magnificPopup.open({

callbacks: {

open: function () {

$.magnificPopup.instance.goTo(startAt);

}

},

gallery: {

enabled: true

},

items: gallery,

type: 'image'

});

}

else {

$.magnificPopup.open({

items: {

src: $('#js-main-image').attr('data-image')

},

type: 'image'

});

};

});

}



},

Did you ever get a resolution to this? I have a site experiencing the same error.

[lesliekirk]

Did you ever get a resolution to this? I have a site experiencing the same error.

Wow, talk about timing. I was just about to post this same issue. I can post a link if need be.

[SidFeyDesigns]

Did you ever get a resolution to this? I have a site experiencing the same error.

No I have not been given a resolution for this.

Glad I'm not the only one experiencing the issue.

Hopefully they will have a solution for us soon.

[rguisewite]

Having trouble implementing the deferred and async script features to the PROD image machine. We are on the suiavant ready theme with a slightly altered image machine script.

I changed the head and body items to the following:

<mvt:item name="product_display_imagemachine" param="head_deferred" />
<mvt:item name="product_display_imagemachine" param="body_deferred:product:id" />

This is the code in the image machine after removing the script tags as instructed.

<mvt:assign name="l.settings:clean:product:name" value="glosub(l.settings:product:name, asciichar(39), '&#39;')" />

var gallery = [],
thumbnailIndex = 0;

ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function (thumbnail_image, main_image, closeup_image, type_code) {
var thumbnail,
img;

thumbnail = document.createElement('span');
thumbnail.setAttribute('data-index', thumbnailIndex++);

if (typeof(thumbnail_image) == 'string' && thumbnail_image.length > 0) {
img = document.createElement('img');
img.src = thumbnail_image;
thumbnail.appendChild(img);
};
if (typeof(closeup_image) == 'string' && closeup_image.length > 0) {
gallery.push({
src: closeup_image,
title: '&mvt:clean:product:name;'
});
};
return thumbnail;
};

After I made those changes the images can no longer be clicked on to view the full sized image.

This is the error the console was giving me.

prodscripts.min.js:4 Uncaught ReferenceError: gallery is not defined
at HTMLSpanElement.<anonymous> (prodscripts.min.js:4)
at HTMLSpanElement.dispatch (jquery-3.4.0.min.js:2)
at HTMLSpanElement.v.handle (jquery-3.4.0.min.js:2)
(anonymous) @ prodscripts.min.js:4
dispatch @ jquery-3.4.0.min.js:2
v.handle @ jquery-3.4.0.min.js:2

I updated to jquery-3.4.0 before making the changes for the deferred scrip tags and everything was working as normal.

Thanks in advance for the help.

-Nick

Hey Nick,

The issue here is likely one of two things, possibly both (without knowing the full context of what you're doing/how you're doing it, it's not possible to know with 100% certainty, but the two things below are likely the culprit).

1. When you switched over to using async, that first code block (the one declaring var gallery) becomes wrapped in an anonymous function, taking any variable or function declared within that block out of the global context and placing it into the local context. As a result, anything attempting to access "gallery" outside of that block will no longer be able to access it. A simple fix for this is to just change "var gallery = [];" to "window.gallery = [];" and "gallery" becomes defined in the global context. This will 100% lead to the error you have above if left unchanged, because you're attempting to access gallery from prodscripts.min.js

2. If prodscripts.min.js is NOT loaded asynchronously and happens to be called before the block that sets up "gallery", even if #1 above is changed, you'll still run into JS issues, because that data won't have been created yet. The fix for that is to make sure whatever code is attempting to do stuff based on gallery is done AFTER the above block is run. This can be done the same way we do the above block, by wrapping it in an anonymous (or non-anonymous if it is inside a class) function and triggering it to be run based on the 'imagemachine_initialize' event being fired on the window. See below for an example:

(function( obj, eventType, fn )
{
    if ( obj.addEventListener )
    {
        obj.addEventListener( eventType, fn, false );
    }
    else if ( obj.attachEvent )
    {
        obj.attachEvent( 'on' + eventType, fn );
    }
})( window, 'imagemachine_initialize', function()
{
    // Your code run from prodscripts.min.js attempting to do stuff based on "gallery" should be run here
});

Let me know if you have any problems with the above, or need further clarification.

Ryan

[SidFeyDesigns]

Hey Nick,

The issue here is likely one of two things, possibly both (without knowing the full context of what you're doing/how you're doing it, it's not possible to know with 100% certainty, but the two things below are likely the culprit).

1. When you switched over to using async, that first code block (the one declaring var gallery) becomes wrapped in an anonymous function, taking any variable or function declared within that block out of the global context and placing it into the local context. As a result, anything attempting to access "gallery" outside of that block will no longer be able to access it. A simple fix for this is to just change "var gallery = [];" to "window.gallery = [];" and "gallery" becomes defined in the global context. This will 100% lead to the error you have above if left unchanged, because you're attempting to access gallery from prodscripts.min.js

2. If prodscripts.min.js is NOT loaded asynchronously and happens to be called before the block that sets up "gallery", even if #1 above is changed, you'll still run into JS issues, because that data won't have been created yet. The fix for that is to make sure whatever code is attempting to do stuff based on gallery is done AFTER the above block is run. This can be done the same way we do the above block, by wrapping it in an anonymous (or non-anonymous if it is inside a class) function and triggering it to be run based on the 'imagemachine_initialize' event being fired on the window. See below for an example:

(function( obj, eventType, fn )
{
if ( obj.addEventListener )
{
obj.addEventListener( eventType, fn, false );
}
else if ( obj.attachEvent )
{
obj.attachEvent( 'on' + eventType, fn );
}
})( window, 'imagemachine_initialize', function()
{
// Your code run from prodscripts.min.js attempting to do stuff based on "gallery" should be run here
});

Let me know if you have any problems with the above, or need further clarification.

Ryan

Hi Ryan,

Thank you for the super easy fix. Only needed to do #1 from your suggestion.

"A simple fix for this is to just change "var gallery = [];" to "window.gallery = [];" and "gallery" becomes defined in the global context."

For others following this thread and needing a fix, this change was made in the Product Display Layout Image Machine head template section.

And to be more specific, the suivant readytheme is what we use for our site.

Our PROD pages are now well into the green for google pagespeed score. No more render blocking javascript warnings.

Thanks again Ryan,

Nick

[Leanne]

Ryan,

Thank you, step 1 fixed the issue for the site I had the issue with as well.

Leanne

[Leanne]

Is anyone else using Magic Zoom with the current updates? I now have another problem where implementing the deferred js is breaking Magic Zoom. I am getting the following console errors:

ReferenceError: MivaEvents is not defined

TypeError: window[("image_data" + MMNum)] is undefined

[rguisewite]

Is anyone else using Magic Zoom with the current updates? I now have another problem where implementing the deferred js is breaking Magic Zoom. I am getting the following console errors:

ReferenceError: MivaEvents is not defined

TypeError: window[("image_data" + MMNum)] is undefined

It is likely that Magic Zoom is not being deferred ("ReferenceError: MivaEvents is not defined"), so it is attempting to access something that has yet to be loaded. The TypeError is probably a result of the MivaEvents failure. Try making Magic zoom deferred and see if that fixes the issue?

[lesliekirk]

Below is the js code the error is referencing in the console for the scripts file

Uncaught ReferenceError: gallery is not defined
at HTMLSpanElement.<anonymous> (prodscripts.js:284)

// ---- Open Product Image Gallery ---- //

productGallery: function (trigger) {

trigger.on('click', function (e) {

var startAt = Number($(this).attr('data-index'));



e.preventDefault();

if (gallery.length > 0) {X

$.magnificPopup.open({

callbacks: {

open: function () {

$.magnificPopup.instance.goTo(startAt);

}

},

gallery: {

enabled: true

},

items: gallery,

type: 'image'

});

}

else {

$.magnificPopup.open({

items: {

src: $('#js-main-image').attr('data-image')

},

type: 'image'

});

};

});

}



},

Did you by chance get this resolved? I've got the same problem.

[Leanne]

It is likely that Magic Zoom is not being deferred ("ReferenceError: MivaEvents is not defined"), so it is attempting to access something that has yet to be loaded. The TypeError is probably a result of the MivaEvents failure. Try making Magic zoom deferred and see if that fixes the issue?

Unfortunately, that does not resolve the problem. When I defer Magic Zoom, I get this error:

ReferenceError: $J is not defined magic-miva-imagemachine.js:29:133

[lesliekirk]

Hey Nick,

The issue here is likely one of two things, possibly both (without knowing the full context of what you're doing/how you're doing it, it's not possible to know with 100% certainty, but the two things below are likely the culprit).

1. When you switched over to using async, that first code block (the one declaring var gallery) becomes wrapped in an anonymous function, taking any variable or function declared within that block out of the global context and placing it into the local context. As a result, anything attempting to access "gallery" outside of that block will no longer be able to access it. A simple fix for this is to just change "var gallery = [];" to "window.gallery = [];" and "gallery" becomes defined in the global context. This will 100% lead to the error you have above if left unchanged, because you're attempting to access gallery from prodscripts.min.js

2. If prodscripts.min.js is NOT loaded asynchronously and happens to be called before the block that sets up "gallery", even if #1 above is changed, you'll still run into JS issues, because that data won't have been created yet. The fix for that is to make sure whatever code is attempting to do stuff based on gallery is done AFTER the above block is run. This can be done the same way we do the above block, by wrapping it in an anonymous (or non-anonymous if it is inside a class) function and triggering it to be run based on the 'imagemachine_initialize' event being fired on the window. See below for an example:

(function( obj, eventType, fn )
{
if ( obj.addEventListener )
{
obj.addEventListener( eventType, fn, false );
}
else if ( obj.attachEvent )
{
obj.attachEvent( 'on' + eventType, fn );
}
})( window, 'imagemachine_initialize', function()
{
// Your code run from prodscripts.min.js attempting to do stuff based on "gallery" should be run here
});

Let me know if you have any problems with the above, or need further clarification.

Ryan

Hey Ryan - the "simple fix" didn't work in my case. I now have

clientside.mvc?T=959…ImageMachine.js:164 Uncaught TypeError: this.ImageMachine_Generate_Thumbnail is not a function at ImageMachine.Initialize (clientside.mvc?T=959…ImageMachine.js:164) at ImageMachine.oninitialize (clientside.mvc?T=959…=ImageMachine.js:93) at TM-SENSPE.html:685 

ImageMachine.Initialize
@
clientside.mvc?T=959…ImageMachine.js:164


ImageMachine.oninitialize
@
clientside.mvc?T=959…=ImageMachine.js:93


(anonymous)
@
TM-SENSPE.html:685

it looks like I need to add the code you have mentioned but where do I place it?

[rguisewite]

Hey Ryan - the "simple fix" didn't work in my case. I now have

clientside.mvc?T=959…ImageMachine.js:164 Uncaught TypeError: this.ImageMachine_Generate_Thumbnail is not a function at ImageMachine.Initialize (clientside.mvc?T=959…ImageMachine.js:164) at ImageMachine.oninitialize (clientside.mvc?T=959…=ImageMachine.js:93) at TM-SENSPE.html:685 

ImageMachine.Initialize
@
clientside.mvc?T=959…ImageMachine.js:164


ImageMachine.oninitialize
@
clientside.mvc?T=959…=ImageMachine.js:93


(anonymous)
@
TM-SENSPE.html:685

it looks like I need to add the code you have mentioned but where do I place it?

Probably the root level of whatever is calling the code failing in TM-SENSEPE.html on line 685. Since I can't actually see what's going on there... That's just a guess. Can you PM me a link to the page that's failing? I might have a better idea of what's going on and where things should go if I can see the bigger picture.

[rguisewite]

Unfortunately, that does not resolve the problem. When I defer Magic Zoom, I get this error:

ReferenceError: $J is not defined magic-miva-imagemachine.js:29:133

Deferring execution gets complicated when there are a lot of moving parts all relying on one another. It's possible that magic-miva-imagemachine.js needs to be updated to support deferred functionality. You might just need to have someone who is familiar with deferred scripting look at your specific setup and see if it is actually doable with the plugins and scripts you're using. The scripts themselves may or may not need to be modified, deferred, etc. We made our scripts fairly easy to hook into, but if the outside scripts haven't been made to utilize that behavior, then the deferred stuff just won't work right.

[Leanne]

Deferring execution gets complicated when there are a lot of moving parts all relying on one another. It's possible that magic-miva-imagemachine.js needs to be updated to support deferred functionality. You might just need to have someone who is familiar with deferred scripting look at your specific setup and see if it is actually doable with the plugins and scripts you're using. The scripts themselves may or may not need to be modified, deferred, etc. We made our scripts fairly easy to hook into, but if the outside scripts haven't been made to utilize that behavior, then the deferred stuff just won't work right.

Thanks, that's kind of what I was thinking. I did some work with some other deferred scripts over the weekend and quickly discovered how complex it can get to make them all still talk to each other in the order they require. I'll reach out to the Magic Zoom folks and see if they have any suggestions.