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 ;-)

[mc12345678]

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...
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 and this commit.

[soxophoneplayer]

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

[mc12345678]

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.

[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

[mc12345678]

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.

[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.

[dvtalk]

Please ignore line:

theForm.elements[i].onchange = function () { getattribimage(); }

It was an artifact of a test I was performing.

[mc12345678]

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...

[dvtalk]

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)