Forums / All Other Contributions/Addons / Attribute image replaces main product image on select [Support Thread]

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

Views: 44,653

Results 101 to 120 of 177
4 Aug 2017, 12:21 AM
#101
IDEASLady avatar

IDEASLady

Totally Zenned

Join Date:
Aug 2005
Location:
Trujillo Alto, Puerto Rico
Posts:
1,449
Plugin Contributions:
3

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

Hey MC, I think I catch a bug.

Everything was working fine until today 2 items had the alternative color "1st" in the options list. The main picture will change to the LAST option of the list (even if is not the default). I thought that uploading the image for that option will fix the issue (since customer is not uploading picture for the attribute if the option is the main image); but that didn't fix it.

I also tried using the "default" button for the attribute, and doesn't work neither.

I can sen you by PM the links for you to take a look.

IDEASLady
IDEAS Creative Studio

Your image... our business!

4 Aug 2017, 12:27 AM
#102
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

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

ideasgirl:

Hey MC, I think I catch a bug.

Everything was working fine until today 2 items had the alternative color "1st" in the options list. The main picture will change to the LAST option of the list (even if is not the default). I thought that uploading the image for that option will fix the issue (since customer is not uploading picture for the attribute if the option is the main image); but that didn't fix it.

I also tried using the "default" button for the attribute, and doesn't work neither.

I can sen you by PM the links for you to take a look.
Please do.

ZC Installation/Maintenance Support <- Site
Contribution for contributions welcome...

4 Aug 2017, 12:45 AM
#103
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

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

If I understand correctly (not yet having received the link(s)), there are two or more attributes (option names), each has at least one option value that has an attribute image. When chosen or set, the image for the last option name is what is presented?

Or is it option 2, where the image of the last available selection is the one presented? (ie. 2 or more option names and it is the last option value out of all of the option names that shows the replaced image.)

Again, I expect to understand better once the link(s) received, but helps to identify the issue if a little more clarity can be provided. :)

ZC Installation/Maintenance Support <- Site
Contribution for contributions welcome...

4 Aug 2017, 3:17 AM
#104
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

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

Okay, I have some answers now.

Basic description is a single option name, multiple option values.

Now, for the "fun" part...

When page is loaded and ALLLLLL javascript has completed, each of the option values have been selected and Attribute Image Swap has attempted to resolve the image for each such selection. The source of this event is one of many javascript operations that execute onload. Additionally, there are three versions of jquery loaded, there are html validation errors, and I am not sure which type of viewer is used to make the image larger, but it does not look like the colorbox version available for download from the plugins, also it is using an older javascript version of the colorbox javascript. I imagine it is something to do with whatever javascript compression/loader is being used, but there is something that seems to systematically select each of the attribute options. With so many scripts involved and such a long load time for the entire page (144.95 seconds to load 4,397.91 KB with 116 requests) then on a page reload: 98 requests 5,164.76 KB, 91.30 seconds.

Ohhh.. And might suggest using the latest version of the plugin. The version installed/edited does not include the use of the ZC zcJS javascript variable (even if that variable is not present), which means that the issue(s) identified, corrected, and associated with the previous version remain.

ZC Installation/Maintenance Support <- Site
Contribution for contributions welcome...

4 Aug 2017, 12:42 PM
#105
IDEASLady avatar

IDEASLady

Totally Zenned

Join Date:
Aug 2005
Location:
Trujillo Alto, Puerto Rico
Posts:
1,449
Plugin Contributions:
3

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

Correct. There is 1 option name, few options value; and the last option value is the presented.

Or is it option 2, where the image of the last available selection is the one presented? (ie. 2 or more option names and it is the last option value out of all of the option names that shows the replaced image.)

How should I know which one to eliminate?

Additionally, there are three versions of jquery loaded, ...

Lightbox is the viewer for larger image (and IH4 ins installed). I will check the colorbox scripts and versions.

... there are html validation errors, and I am not sure which type of viewer is used to make the image larger, but it does not look like the colorbox version available for download from the plugins, also it is using an older javascript version of the colorbox javascript.

Correct. That was my thought at the beginning, but since it changes the image AFTER all the loading it threw me off. :wacko:

I imagine it is something to do with whatever javascript compression/loader is being used, but there is something that seems to systematically select each of the attribute options.

I will see if programmer that created template and did the integration of the plugin will do that.

Ohhh.. And might suggest using the latest version of the plugin. The version installed/edited does not include the use of the ZC zcJS javascript variable (even if that variable is not present), which means that the issue(s) identified, corrected, and associated with the previous version remain.

IDEASLady
IDEAS Creative Studio

Your image... our business!

4 Aug 2017, 1:29 PM
#106
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

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

Sorry, on a mobile device making "part" answers time consuming:

ideasgirl:

Correct. There is 1 option name, few options value; and the last option value is the presented.

How should I know which one to eliminate?

Lightbox is the viewer for larger image (and IH4 ins installed). I will check the colorbox scripts and versions.

Correct. That was my thought at the beginning, but since it changes the image AFTER all the loading it threw me off. :wacko:

I will see if programmer that created template and did the integration of the plugin will do that.

Generally speaking, there should only be the latest version needed to support operation installed... but, there are "tools" that make it possible for multiple versions which it appears to be the case, though 1.4.4 I think it was, is significantly old and whatever is requiring that should be updated or abandoned (in my opinion).

As to lightbox, if discussing the version that is available for download (which it looks like it is), there is software upon which it depends (slimbox) that has been abandoned and not being updated at least as of a few years ago. Colorbox and it's foundation continue to be supported.

Regarding the last two items, if memory serves (and based on the change notes for the most recent version), the problem seen (last option value of an option name always becoming active on initial load) was a reason for the most recent version being published. As other issues were corrected (js error on initial page load that did not have the product in the cart), the code was seeking through all checkbox and radio selections to land or ultimately go with the last one. This was corrected in the ais_init() function around line 176 where a check was performed to see if the selection had been checked before attempting to execute the associated onclick action. At least adding that if around the area would resolve the described issue, but would suggest a full update instead of just that line change. Update is to simply replace the files and as necessary incorporate any modifications that may have been made. Based on the visible javascript code, version 1.5.7 is installed with v1.5.8 released a few weeks ago (5 days after the version currently installed) that corrected the identified issue.

ZC Installation/Maintenance Support <- Site
Contribution for contributions welcome...

4 Aug 2017, 7:46 PM
#107
IDEASLady avatar

IDEASLady

Totally Zenned

Join Date:
Aug 2005
Location:
Trujillo Alto, Puerto Rico
Posts:
1,449
Plugin Contributions:
3

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

Thank you very much MC :hug:I managed to update those jscripts and upgrade the module and that not only made the trick it also made the loading time much faster. :smartalec:

IDEASLady
IDEAS Creative Studio

Your image... our business!

4 Aug 2017, 10:24 PM
#108
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

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

ideasgirl:

Thank you very much MC :hug:I managed to update those jscripts and upgrade the module and that not only made the trick it also made the loading time much faster. :smartalec:

Glad that it all worked for the better. :)

ZC Installation/Maintenance Support <- Site
Contribution for contributions welcome...

4 Feb 2018, 9:36 PM
#109
soxophoneplayer avatar

soxophoneplayer

Totally Zenned

Join Date:
Feb 2008
Posts:
534
Plugin Contributions:
0

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

zc 1.5.5f new install test site; clone of responsive_classic template, IH5, newest Colorbox, newest SbyA, newest Attrib Image Swap

I'm playing with this Attrib Image Swap version July 2017 on test site. In Beyond Compare I'm looking at a difference I don't know how to merge in includes/modules/YOUR_TEMPLATE/attributes.php

In the Image Swap Version, around line #188:

 $products_options_array[sizeof($products_options_array)-1]['text'] .= $products_options_display_price;

                  // collect weight information if it exists
                  if (($flag_show_weight_attrib_for_this_prod_type=='1' and $products_options->fields['products_attributes_weight'] != '0')) {
                    $products_options_display_weight = ATTRIBUTES_WEIGHT_DELIMITER_PREFIX . $products_options->fields['products_attributes_weight_prefix'] . round($products_options->fields['products_attributes_weight'],2) . TEXT_PRODUCT_WEIGHT_UNIT . ATTRIBUTES_WEIGHT_DELIMITER_SUFFIX;
                    $products_options_array[sizeof($products_options_array)-1]['text'] .= $products_options_display_weight;

In the same file I previously merged with Stock by Attributes, the same lines are:

 $products_options_array[count($products_options_array)-1]['text'] .= $products_options_display_price;

                  // collect weight information if it exists
                  if (($flag_show_weight_attrib_for_this_prod_type=='1' and $products_options->fields['products_attributes_weight'] != '0')) {
                    $products_options_display_weight = ATTRIBUTES_WEIGHT_DELIMITER_PREFIX . $products_options->fields['products_attributes_weight_prefix'] . round($products_options->fields['products_attributes_weight'],2) . TEXT_PRODUCT_WEIGHT_UNIT . ATTRIBUTES_WEIGHT_DELIMITER_SUFFIX;
                    $products_options_array[count($products_options_array)-1]['text'] .= $products_options_display_weight;
                  } else {

Which should I use?

Thanks!

4 Feb 2018, 11:12 PM
#110
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

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

At this very moment, it does not matter which. There has been some discussion by the php powers that be that sizeof (alias to count) will go away in future php versions. It was thought (and at one point voted) to be removed in php 7.2, but as of yet has not.

That said, I would suggest that count be used if either of them are to be used. Again it mostly likely is a non-issue either way, but certainly makes it easier to be consistent.

ZC Installation/Maintenance Support <- Site
Contribution for contributions welcome...

5 Feb 2018, 1:51 PM
#111
soxophoneplayer avatar

soxophoneplayer

Totally Zenned

Join Date:
Feb 2008
Posts:
534
Plugin Contributions:
0

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

Thanks for answer to previous q.

New question.
Using test site on wamp with zc1.5.5f, IH5, clone of responsive_classic, SbyA 1.54 for zc 1.5.5f, Colorbox 2.1.2. , One Page Checkout most current, wamp php 7.1.13, one category with one product. Product has 4 size attributes with stock. Product info has 4 additional images (not attribute). Size attribute photos installed via attributes controller. All photos are jpg.

Dynamic Dropdowns set to 0 (off)
SbyA config in Stock - Display Attribute images set to 1. (tried setting as on with single attribute option and radio selected)
Attribute Settings - Enable attribute images set to true.
IH5 set to resize images, on. (also tried with set to off)
Option Name controller- Size attribute set to radio, and display option 6 selected with images per row left blank (also tried 1, 4). (also tried display option 7 and 8)

When clicking on the size radio button on the product page the attribute image is not swapping in. Also tried removing the non-attribute additional images from the propduct info page.

The following error gets logged when attempting to select an attribute:

05-Feb-2018 01:08:42 UTC] PHP Fatal error:  Uncaught Error: Call to a member function notify() on null in C:\wamp\www\includes\modules\doug_responsive\main_product_image.php:19
Stack trace:
#0 C:\wamp\www\includes\classes\ajax\zcAttrib_prod_info.php(48): require_once()
#1 C:\wamp\www\ajax.php(76): zcAttrib_prod_info->swap_image()
#2 {main}
  thrown in C:\wamp\www\includes\modules\doug_responsive\main_product_image.php on line 19

I note that main_prodcut_image.php line 19 is a merged change from IH5. Beyond that, I haven't a clue what the error means ;-)

5 Feb 2018, 5:36 PM
#112
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

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

soxophoneplayer:

Thanks for answer to previous q.

New question.
Using test site on wamp with zc1.5.5f, IH5, clone of responsive_classic, SbyA 1.54 for zc 1.5.5f, Colorbox 2.1.2. , One Page Checkout most current, wamp php 7.1.13, one category with one product. Product has 4 size attributes with stock. Product info has 4 additional images (not attribute). Size attribute photos installed via attributes controller. All photos are jpg.

Dynamic Dropdowns set to 0 (off)
SbyA config in Stock - Display Attribute images set to 1. (tried setting as on with single attribute option and radio selected)
Attribute Settings - Enable attribute images set to true.
IH5 set to resize images, on. (also tried with set to off)
Option Name controller- Size attribute set to radio, and display option 6 selected with images per row left blank (also tried 1, 4). (also tried display option 7 and 8)

When clicking on the size radio button on the product page the attribute image is not swapping in. Also tried removing the non-attribute additional images from the propduct info page.

The following error gets logged when attempting to select an attribute:

05-Feb-2018 01:08:42 UTC] PHP Fatal error: Uncaught Error: Call to a member function notify() on null in C:\wamp\www\includes\modules\doug_responsive\main_product_image.php:19
Stack trace:
#0 C:\wamp\www\includes\classes\ajax\zcAttrib_prod_info.php(48): require_once()
#1 C:\wamp\www\ajax.php(76): zcAttrib_prod_info->swap_image()
#2 {main}
thrown in C:\wamp\www\includes\modules\doug_responsive\main_product_image.php on line 19

> 
> I note that main_prodcut_image.php line 19 is a merged change from IH5. Beyond that, I haven't a clue what the error means ;-)

So the error message above:

05-Feb-2018 01:08:42 UTC] PHP Fatal error: Uncaught Error: Call to a member function notify() on null in C:\wamp\www\includes\modules\doug_responsive\main_product_image.php:19
Stack trace:
#0 C:\wamp\www\includes\classes\ajax\zcAttrib_prod_info.php(48): require_once()
#1 C:\wamp\www\ajax.php(76): zcAttrib_prod_info->swap_image()
#2 {main}
thrown in C:\wamp\www\includes\modules\doug_responsive\main_product_image.php on line 19


is reporting an issue with this line: 

$zco_notifier->notify('NOTIFY_MODULES_MAIN_PRODUCT_IMAGE_START');


Specifically saying that member function notify() is being called on an undefined variable. The "undefined" variable is $zco_notifier.  In ZC this is defined as a "global" type variable and in "normal" operation (viewing of a product) the main_product_image.php module file is in the global space and therefore $zco_notifier is defined.  The way that this module has been put together, that module file is called within a class so that the operations performed by that module do not have to be rewritten and historically have fallen in line with the initial provided data to give a final result.  That said, though, IH5 introduced notifiers into the module file, which in design is not a problem, but this module did not previously include all of the ZC defined "global" variables that are possible (not needed, don't include them right?)

So, to resolve this there are two approaches that can be taken. One specifically for this plugin, one that could be done for the modified main_product_file, although the modification suggested for that file would not be historically consistent with other files that are expected to be in the global space.

For this module (or of course any module that was including the main_product_image.php file outside of the global space) look at includes/classes/ajax/zcAttrib_prod_info.php and modify this portion
from:

function swap_image()
{
global $db;

to:

function swap_image()
{
global $db, $zco_notifier;


And that will resolve the issue.

Another supposedly "acceptable" modification would be to define $zco_notifier to be equal to the current class because the current class extends the base class and that means that the current class also has access to the notify member function, so:

function swap_image()
{
global $db;

$products_options_values_id = (int)$_POST['products_options_values_id'];
 
could become:

function swap_image()
{
global $db;

$zco_notifier = $this;
$products_options_values_id = (int)$_POST['products_options_values_id'];
But then below this point $zco_notifier could be accessed like: $zco_notifier->swap_image() which may not seem right... :P
or it could be rewritten like this:

function swap_image()
{
global $db;

$zco_notifier = $GLOBALS['zco_notifier'];
$products_options_values_id = (int)$_POST['products_options_values_id'];

For the time being, I'd go with the first suggestion. :)

The other alternative suggestion which doesn't exactly go in line with other modules using an notifier would be to modify the includes/modules/YOUR_TEMPLATE/main_product_image.php file from:

// This notifier lets an observer know that the module has begun its processing.
//
$zco_notifier->notify('NOTIFY_MODULES_MAIN_PRODUCT_IMAGE_START');

to:

// This notifier lets an observer know that the module has begun its processing.
//
if (!isset($zco_notifier)) {
global $zco_notifier;
}

$zco_notifier->notify('NOTIFY_MODULES_MAIN_PRODUCT_IMAGE_START');


or similar to bring $zco_notifier into the space of the module.  Thing is, generally speaking whatever the module needs to be able to operate, the calling/including/requiring code probably should be sure to provide to it, even if there has been a change in how the module operates/is written. For example if the module did something with money, then likely the $currencies global variable would need to be made available for it to do its business.

Thank you for identifying this issue, I am incorporating the first suggestion above into the file on github as addressed in [issue #2](https://github.com/mc12345678/Attribute_image_Swap/issues/2) and this [commit](https://github.com/mc12345678/Attribute_image_Swap/commit/91a1785acec55ba014c3419578fdb4ad300eb0eb).

ZC Installation/Maintenance Support <- Site
Contribution for contributions welcome...

5 Feb 2018, 6:02 PM
#113
soxophoneplayer avatar

soxophoneplayer

Totally Zenned

Join Date:
Feb 2008
Posts:
534
Plugin Contributions:
0

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

I tried suugestion #1 and that indeed worked. Many thanks!

6 Feb 2018, 1:01 PM
#114
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

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

soxophoneplayer:

I tried suugestion #1 and that indeed worked. Many thanks!
Glad that worked. It's incorporated into the github distribution for the next version.

Hopefully also revisited the settings for SBA as a few of those described (understandably set at time of posting to just try anything to get it to work) would not support the expected operation at least as provided in the fileset. Thank you though for identifying all the interconnected modules and that things are working. It certainly is a lot to have all together.

ZC Installation/Maintenance Support <- Site
Contribution for contributions welcome...

4 Apr 2018, 2:52 AM
#115
dvtalk avatar

dvtalk

New Zenner

Join Date:
Mar 2018
Location:
USA
Posts:
30
Plugin Contributions:
0

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

I hope you can help me with this plugin as well. I have a custom theme that I purchased elsewhere, and it is causing me all sorts of headaches as they don't seem to be following the ZC convention for some things. Basically, so far I managed to get most div ids and tags changed to make it compatible, however the theme handles the onchange events via custom script to update price.

Here is the snippet from the init() function that handles such events:

  var n=theForm.elements.length;
  for (var i=0; i<n; i++) {
    switch (theForm.elements[i].type) {
      case 'select':
      case 'select-one':
        theForm.elements[i].onchange = function () { xhr.getPrice(); }
        break;
      case 'text':
        theForm.elements[i].onkeyup = function () { xhr.getPrice(); }
        break;
      case 'checkbox':
      case 'radio':
        theForm.elements[i].onclick = function () { xhr.getPrice(); }
        break;
    }
  }

What I am trying to do is to add the getattribimage() function to each of the above and pass the right parameneters but I am hitting the limits of my knowledge.

Could you please suggest the fix?

Thank you!

Dave

4 Apr 2018, 3:39 AM
#116
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

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

dvtalk:

I hope you can help me with this plugin as well. I have a custom theme that I purchased elsewhere, and it is causing me all sorts of headaches as they don't seem to be following the ZC convention for some things. Basically, so far I managed to get most div ids and tags changed to make it compatible, however the theme handles the onchange events via custom script to update price.

Here is the snippet from the init() function that handles such events:

var n=theForm.elements.length;
for (var i=0; i<n; i++) {
switch (theForm.elements[i].type) {
case 'select':
case 'select-one':
theForm.elements[i].onchange = function () { xhr.getPrice(); }
break;
case 'text':
theForm.elements[i].onkeyup = function () { xhr.getPrice(); }
break;
case 'checkbox':
case 'radio':
theForm.elements[i].onclick = function () { xhr.getPrice(); }
break;
}
}

> 
> What I am trying to do is to add the getattribimage() function to each of the above and pass the right parameneters but I am hitting the limits of my knowledge.
> 
> Could you please suggest the fix?
> 
> Thank you!
> 
> Dave
I'd suggest upgrading the special "price" program to use Dynamic Price Updater or at least for it to use similar code.
For example the above portion was changed to:
```
  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;
    }
  }
```

One reason for this change was that the use of .onchange prevented other javascript from executing which is basically what you seem to be describing.

ZC Installation/Maintenance Support <- Site
Contribution for contributions welcome...

4 Apr 2018, 4:02 AM
#117
dvtalk avatar

dvtalk

New Zenner

Join Date:
Mar 2018
Location:
USA
Posts:
30
Plugin Contributions:
0

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

Sorry, I think I should have copied the entire function:

var xhr = new objXHR;

function init() {
  var n=document.forms.length;
  for (var i=0; i<n; i++) {
    if (document.forms[i].name == theFormName) {
      theForm = document.forms[i];
      continue;
    }
  }

  var n=theForm.elements.length;
  for (var i=0; i<n; i++) {
    switch (theForm.elements[i].type) {
      case 'select':
      case 'select-one':
        theForm.elements[i].onchange = function () { xhr.getPrice(); }
		theForm.elements[i].onchange = function () { getattribimage(); }
        break;
      case 'text':
        theForm.elements[i].onkeyup = function () { xhr.getPrice(); }
        break;
      case 'checkbox':
      case 'radio':
        theForm.elements[i].onclick = function () { xhr.getPrice(); }
        break;
    }
  }

<?php
  $show_dynamic_price_updater_sidebox = true;

    if ($show_dynamic_price_updater_sidebox == true)
    {
?>
    createSB();
<?php
    }
?>
  xhr.getPrice();
}

Their select tab does not have an "onchange". Instead, this is what a select menu looks like (example product):

<select name="id[4]" id="attrib-4" class="form-control">
  <option value="1">4 mb</option>
  <option value="2">8 mb ( +$50.00 )</option>
  <option value="3">16 mb ( +$70.00 )</option>
</select>

Thanks for your help.

4 Apr 2018, 4:12 AM
#118
dvtalk avatar

dvtalk

New Zenner

Join Date:
Mar 2018
Location:
USA
Posts:
30
Plugin Contributions:
0

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

Please ignore line: ```
theForm.elements[i].onchange = function () { getattribimage(); }

It was an artifact of a test I was performing.
4 Apr 2018, 5:17 AM
#119
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

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

dvtalk:

Sorry, I think I should have copied the entire function:

var xhr = new objXHR;

function init() {
var n=document.forms.length;
for (var i=0; i<n; i++) {
if (document.forms[i].name == theFormName) {
theForm = document.forms[i];
continue;
}
}

var n=theForm.elements.length;
for (var i=0; i<n; i++) {
switch (theForm.elements[i].type) {
case 'select':
case 'select-one':
theForm.elements[i].onchange = function () { xhr.getPrice(); }
theForm.elements[i].onchange = function () { getattribimage(); }
break;
case 'text':
theForm.elements[i].onkeyup = function () { xhr.getPrice(); }
break;
case 'checkbox':
case 'radio':
theForm.elements[i].onclick = function () { xhr.getPrice(); }
break;
}
}

<?php $show_dynamic_price_updater_sidebox = true; if ($show_dynamic_price_updater_sidebox == true) { ?>
createSB();
<?php } ?>

xhr.getPrice();
}

> 
> Their select tab does not have an "onchange". Instead, this is what a select menu looks like (example product):
> 
> ```
<select name="id[4]" id="attrib-4" class="form-control">
  <option value="1">4 mb</option>
  <option value="2">8 mb ( +$50.00 )</option>
  <option value="3">16 mb ( +$70.00 )</option>
</select>

Thanks for your help.
I'm very familiar with the way that code is/was written, again it is from Dynamic Price Updater. That section of code currently looks like:

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;
    }
  }
<?php
  $show_dynamic_price_updater_sidebox = true;
    if ($show_dynamic_price_updater_sidebox === true)
    {
?>
    xhr.createSB();
<?php
    }
?>
  xhr.getPrice();
}

Regarding the "select" tab onchange statement, I think there is a lack of understanding in the whole situation.

In javascript, by setting the onchange event for a specific object (theForm.elements[I]) the event described on the right side dedicates the operation to occur for that event. When discussing a select menu item, the javascript onchange event is triggered any time the selection within the dropdown (select box) is changed. Hence onchange... By using "theForm.elements[I].onchange =" instead of "theForm.elements[I].addEventListener" any other "onchange" events defined by/for other javascript are basically cancelled unless the others can load later/after... It is this type of coding that is causing your issue (and one reason DPU was modified).

The price updater as previously written takes control of all of the attribute type selectors (select (dropdown), text box, checkbox, radio button, etc...) preventing any other javascript code from being able to respond... The above code modifies that operation so that instead of taking the event monitoring over it instead adds to the event list so that DPU can work WITH other javascript code not take it over...

The updated DPU code also takes advantage of ZCs ajax processing and offers a number of other improvements from where it was a while ago...

ZC Installation/Maintenance Support <- Site
Contribution for contributions welcome...

4 Apr 2018, 5:30 AM
#120
dvtalk avatar

dvtalk

New Zenner

Join Date:
Mar 2018
Location:
USA
Posts:
30
Plugin Contributions:
0

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

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)