Attribute image replaces main product image on select [Support Thread]

[mc12345678]

Here is the way this code renders:

function init() {
  var n=document.forms.length;
  var i;
  for (i = 0; i < n; i += 1) {
    if (document.forms[i].name === theFormName) {
      theForm = document.forms[i];
      //continue; // Unnecessary though had originally thought of building more into this area.
    }
  }
  n=theForm.elements.length;
  for (i = 0; i < n; i += 1) {
    switch (theForm.elements[i].type) {
      case "select":
      case "select-one":
        theForm.elements[i].addEventListener("change", function () {
          xhr.getPrice();
        });
        break;
      case "textarea":
      case "text":
        theForm.elements[i].addEventListener("input", function () {
          xhr.getPrice();
        });
        break;
      case "checkbox":
      case "radio":
        theForm.elements[i].addEventListener("click", function () {
          xhr.getPrice();
        });
        break;
      case "number":
        theForm.elements[i].addEventListener("change", function () {
          xhr.getPrice();
        });
        theForm.elements[i].addEventListener("keyup", function () {
          xhr.getPrice();
        });
        theForm.elements[i].addEventListener("input", function () {
          xhr.getPrice();
        });
        break;
    }
  }
    xhr.createSB();
  xhr.getPrice();
}

Uncaught TypeError: xhr.createSB is not a function
at init (matrox-g200-mms-p-1.html:1329)

That would be because the third to last line is different between the two sets of code. There are also significant differences in the remainder of the code.

This particular forum thread is not about how to properly install/update some other plugin (in this case dynamic price updater) and while the version installed to the purchased template is causing problems with this plugin it would with almost any other that happens to load before DPU. Again, I encourage you to update Dynamic Price Updater in its entirety (not just to patch a line here or there) for several reasons such as previous versions (similar to what appears to be installed to that template) would not pass javascript page validation, do not take advantage of the ZC ajax process which in itself as I understand helps extend the users session time by recognizing that the user is taking action on the page, and also offers additional screen/content updating features that did not exist in previous versions.

I encourage that the issue be resolved; however, also suggest continuing to do that in a separate forum thread that is either directly applicable to DPU or in a newly started thread within the ZC forum. Ultimately, the custom theme developer should be approached to address these issues and that individual/organization should support resolving the problem that they have created.

[dvtalk]

I understand what you are saying. I misunderstood your first reply, I thought you were showing a fix. I checked DPU version and it's 3.0 which I understand is several versions behind. I will try to update the DPU to 3.2.0 first, and then try and go back to Image Swap fix. IUnfortunately the template maker is not cooperating so that avenue is not available to me.

Thanks again, will post with an update.

David

[dvtalk]

Again, I encourage you to update Dynamic Price Updater in its entirety (not just to patch a line here or there) for several reasons such as previous versions (similar to what appears to be installed to that template) would not pass javascript page validation, do not take advantage of the ZC ajax process which in itself as I understand helps extend the users session time by recognizing that the user is taking action on the page, and also offers additional screen/content updating features that did not exist in previous versions.

Thanks for pointing me to the right direction. After updating the DPU, adding back the <div id="productMainImage"> to the tpl_modules_main_product_image.php that the theme authors have omitted, and installing the Attribute image plugin, it is finally working!

[mc12345678]

Thanks for pointing me to the right direction. After updating the DPU, adding back the <div id="productMainImage"> to the tpl_modules_main_product_image.php that the theme authors have omitted, and installing the Attribute image plugin, it is finally working!

Glad that worked out. Yeah, I had considered adding a field to the configuration to support use of an alternate id field, but had been working to make improvements in some relative steps.

If you have the "time" I would suggest comparing other template files for that template to see what, if anything else, is missing. Of course it will be affected by the associated css, so keep that in mind as you go along.

[dvtalk]

Here is what I had to do to successfully install this plugin with third party theme (claiming to be ZC 1.5.5.f compatible):

Copy/overwrite admin/includes/languages/english/options_name_manager.php
Copy/overwrite admin/options_name_manager.php
Copy/overwrite includes/modules/alto/attributes.php
Copy admin/includes/auto_loaders/config.attribute_image_swap.php
Copy includes/classes/observers/auto.attrib_image_swap.php
Copy includes/modules/pages/product_info/jscript_ais.php

Did not copy includes/modules/pages/product_info/on_load_ais.js - not sure what this does

[mc12345678]

Here is what I had to do to successfully install this plugin with third party theme (claiming to be ZC 1.5.5.f compatible):

Copy/overwrite admin/includes/languages/english/options_name_manager.php
Copy/overwrite admin/options_name_manager.php
Copy/overwrite includes/modules/alto/attributes.php
Copy admin/includes/auto_loaders/config.attribute_image_swap.php
Copy includes/classes/observers/auto.attrib_image_swap.php
Copy includes/modules/pages/product_info/jscript_ais.php

Did not copy includes/modules/pages/product_info/on_load_ais.js - not sure what this does

Without this (when the plugin is installed on its own), effectively by omitting that file when returning to the product from the shopping cart the image will not update to what was identified as the current selection until one of the options is changed.

It establishes an action to be performed when the page has been loaded (on_load event).

As to the other files, the changes made to support the plugin should be incorporated into the existing files rather than "blindly" overwriting/replacing the files. That is relatively true for all plugins.

[dvtalk]

Without this (when the plugin is installed on its own), effectively by omitting that file when returning to the product from the shopping cart the image will not update to what was identified as the current selection until one of the options is changed.

It establishes an action to be performed when the page has been loaded (on_load event).

As to the other files, the changes made to support the plugin should be incorporated into the existing files rather than "blindly" overwriting/replacing the files. That is relatively true for all plugins.

I actually did that, but decided that overwriting was the best course of action (there were minimal to no changes in files overwritten).

As far as on_load_ais.js, even after copying this to the site, I am not getting the image updated when I click the product with attributes ion shopping cart. All attribuites get populated properly. I made sure that only the one that affects the image is set to Type: 8, and rest are set to 7 (also tried 0).

Not sure if this is relevant but I am getting these errors from Chrome dev console, when I load that product page with attributes string (without attributes, no errors).

TypeError: theForm.elements[i].onclick is not a function
at ais_init (index.php?main_page=product_info&products_id=341:4e7c3b0ed19dda8c9e17d0ed3c3a1a 30:1683)
at onload (index.php?main_page=product_info&products_id=341:4e7c3b0ed19dda8c9e17d0ed3c3a1a 30:111)


Can you please help me track this (hopefully), final problem down?

Thanks,

David

[dvtalk]

Did a lot of digging but still cannot figure out. It sems that

TypeError: theForm.elements[i].onclick is not a function

is pointing to this section of the ais_init() function:

case "radio":
    if (document.getElementById(theForm.elements[i].id).checked) {
        theForm.elements[i].onclick();
    }
    break;

All attributes get populated properly, just not the image swap.

[mc12345678]

Did a lot of digging but still cannot figure out. It sems that is pointing to this section of the ais_init() function:

case "radio":
    if (document.getElementById(theForm.elements[i].id).checked) {
        theForm.elements[i].onclick();
    }
    break;

All attributes get populated properly, just not the image swap.

Had looked into this issue/situation (not only yesterday but I seem to recall some time ago as well). So here's the thing(s).

AIS applies actions only to applicable attributes that are to cause an image swap, and this is done when generating the attribute list. Therefore, it is possible that a product having attributes may not have an attribute image swap update request for all attributes. I saw two central ways to address/prevent this as far as just this plugin is concerned, one is to move the application of the action to outside of the attribute generation and into more of the ajax arena which should then also make that initial call more adaptable to only try to update the element(s) that are a part of the image swap. The other is to apply some action of some type to all attributes, whether the action causes an update or not.

Considering that DPU is also installed, the second option is relatively present assuming that the load/execution sequence of the javascript can be "controlled" if by nothing than alphabetical sorting. Might I suggest attempting to rename includes/modules/pages/product_info/on_load_ais.js to something like on_load_zais.js and seeing if that resolves the issue for now?

Another option which would involve minimal redevelopment would be to use try/catch style code in the ais_init function (prevents the need to identify/lookup the event(s) to see if they exist against the element.)

Ie. in includes/modules/pages/product_info/jscript_ais.php change:

            switch (theForm.elements[i].type) {
                case "select":
                case "select-one":
                    theForm.elements[i].onchange();
                    break;
                case "text":
                    theForm.elements[i].onkeyup();
                    break;
                case "checkbox":
                case "radio":
                    if (document.getElementById(theForm.elements[i].id).checked) {
                      theForm.elements[i].onclick();
                    }
                    break;
                case "number":
                    theForm.elements[i].onchange();
                    theForm.elements[i].onkeyup();
                    theForm.elements[i].oninput();
                    break;
            }

to:

            switch (theForm.elements[i].type) {
                case "select":
                case "select-one":
                    try {
                        theForm.elements[i].onchange();
                    } catch(err) {
                         // Action not associated with element.
                    }
                    break;
                case "text":
                    try {
                        theForm.elements[i].onkeyup();
                    } catch(err) {
                        // Action not associated with element.
                    }
                    break;
                case "checkbox":
                case "radio":
                    if (document.getElementById(theForm.elements[i].id).checked) {
                        try {
                          theForm.elements[i].onclick();
                        } catch(err) {
                            // Action not associated with element.
                        }
                    }
                    break;
                case "number":
                    try {
                        theForm.elements[i].onchange();
                    } catch(err) {
                        // Action not associated with element.
                    }
                    try {
                        theForm.elements[i].onkeyup();
                    } catch(err) {
                        // Action not associated with element.
                    }
                     try {
                        theForm.elements[i].oninput();
                    } catch(err) {
                        // Action not associated with element.
                    }
                    break;
            }

[dvtalk]

#1 made no difference.

#2 try/catch blocks worked! - Thank you!

So, seems to be a conflict with DPU, or maybe the way my custom theme is handling it. Hope this can be fixed in the future versions.

Thanks again! Now can go back to rebuilding the rest of the modules.

David