Zen Colorbox

[simon1066]

Whenever I've had an issue with an action taking two clicks for it to work, that has usually pointed to a javascript problem. Sometimes it is the order in which the various script files are loaded, I troubleshoot this by selectively disabling scripts one-by-one.

In your case I think it might be due to your having two versions of jquery loaded -

/includes/templates/responsive_classic/jscript/jscript_a_jquery.js
/includes/templates/responsive_classic/jscript/jscript_jquery-1.12.4.min.js

I stand to be corrected but I don't think you should be loading both of these.

[simon1066]

Whenever I've had an issue with an action taking two clicks for it to work, that has usually pointed to a javascript problem. Sometimes it is the order in which the various script files are loaded, I troubleshoot this by selectively disabling scripts one-by-one.

In your case I think it might be due to your having two versions of jquery loaded -

/includes/templates/responsive_classic/jscript/jscript_a_jquery.js
/includes/templates/responsive_classic/jscript/jscript_jquery-1.12.4.min.js

I stand to be corrected but I don't think you should be loading both of these.

Looking at it again the jscript_a_jquery.js seems to be a customised version of jquery so that may be needed, but I forgot to mention the Google loaded jquery version of /ajax/libs/jquery/3.4.1/jquery.min.js, so it does seem that you have v3.4.1 and v1.12.4 loaded at the same time.

Getting a bit beyond my pay grade so hopefully someone can confirm this.

[mvstudio]

Looking at it again the jscript_a_jquery.js seems to be a customised version of jquery so that may be needed, but I forgot to mention the Google loaded jquery version of /ajax/libs/jquery/3.4.1/jquery.min.js, so it does seem that you have v3.4.1 and v1.12.4 loaded at the same time.

Getting a bit beyond my pay grade so hopefully someone can confirm this.

Thank you for looking into it. I hadn't noticed I had two version of the same thing.

I don't know much about this at all, so I tested it out.

The google one I know is for the bootstrap functionality on the products pages. I assume because it's the newest version that's the one that should stay(?) (in theory at least...).

So I went ahead and removed the 1.12.4 first and then the google one, and unfortunately nothing changed. I tried in chrome and to my surprise no matter if both, one or the other are installed, the popup doesn't work at all.

Maybe I'm using this the wrong way?....

[mc12345678]

So, something isn't loaded/installed correctly.

Looking at the code sequence of the generated page as compared to the downloaded version of 2.1.2, the GitHub instance of 2.1.2 and the proposed 2.1.3, the includes/modules/pages/product_info/jscript_zen_colorbox.php file has this basic sequence:
load the jquery.colorbox-min.js file
then load the colorbox options, preventing loading of the productMainImageReview image on the main reviews page.
then basically load the link that is to be available.

For some reason on this site, that set of "code" happens after an earlier script load that "attempts" to establish a link to be clicked on as if the display_js_link code was called before the colorbox has been initiated and then also the display_link code is called as well... I don't know how/why the display_js_link code was called, how/why it was to be displayed before the colorbox was initiated and/or directly associated with the object to which action was to be taken.

Basically, the JScript file(s) have been modified away from the default and not in a sequence supporting operation. There may be other JavaScript/jquery issues, but to also add discussion about jquery-1.12.4.min.js, it is set to load *if* jQuery hasn't been loaded, so it should not be in the work space nor have any impact if loaded after the Zen Cart's normal version of jQuery or anything that has already defined jQuery.

In short, I am not seeing that version 2.1.2 is actually installed and don't know what has been modified from that installation to give the layout/configuration currently on the site...

[mvstudio]

So, something isn't loaded/installed correctly.

Looking at the code sequence of the generated page as compared to the downloaded version of 2.1.2, the GitHub instance of 2.1.2 and the proposed 2.1.3, the includes/modules/pages/product_info/jscript_zen_colorbox.php file has this basic sequence:
load the jquery.colorbox-min.js file
then load the colorbox options, preventing loading of the productMainImageReview image on the main reviews page.
then basically load the link that is to be available.

For some reason on this site, that set of "code" happens after an earlier script load that "attempts" to establish a link to be clicked on as if the display_js_link code was called before the colorbox has been initiated and then also the display_link code is called as well... I don't know how/why the display_js_link code was called, how/why it was to be displayed before the colorbox was initiated and/or directly associated with the object to which action was to be taken.

Basically, the JScript file(s) have been modified away from the default and not in a sequence supporting operation. There may be other JavaScript/jquery issues, but to also add discussion about jquery-1.12.4.min.js, it is set to load *if* jQuery hasn't been loaded, so it should not be in the work space nor have any impact if loaded after the Zen Cart's normal version of jQuery or anything that has already defined jQuery.

In short, I am not seeing that version 2.1.2 is actually installed and don't know what has been modified from that installation to give the layout/configuration currently on the site...

Thank you for the reply. Colorbox 2.1.2 is actually installed, otherwise product images wouldn't work, and they work just fine without any issue at all.

I downloaded the plugin again, just a while ago and compared every file again just to make sure. With the exception of one file all the others are exactly the same as the ones I just downloaded. The only file I modified was the tpl_modules_main_product_image.php and added a "forward" statement to the first span class

<span class="imgLink forward">

so the text link which I replaced with a small image, would align to the right.

The issue I'm having isn't actually with the product images, but with a popup window I'm trying colorbox to open up, and surely doing it the wrong way.

In the product pages https://www.byvalenti.com/index.php?...products_id=43 I added a banner group, which sits at the top of the product title. In the banner manager html area I added the following code, with the intention for it to open the popup window of the coupon page containing the information of the coupon.

<a href="javascript:couponpopupWindow('index.php?main_page=popup_coupon_help&cID=32')"><img src="images/banners/promoproduct6.jpg"></a> 

The first time the banner is clicked it opens a blank window, it's the second time the banner is clicked that actually loads the popup at least for mozilla. On chrome won't load for me at all.

I guess my question at this point is, how can I use colorbox to properly load this coupon popup window? What am I doing wrong?...

[rlexyd]

Hi, thank you for this plugin.
I'm running a fresh install of 1.5.7c on PHP 7.4 using Responsive Classic template and IH5.
It has recently come to my attention that our website is throwing 3 red errors when inspecting on WAVE (web accessibility evaluation tool) due to 3x Empty buttons from this plugin.
I'm not sure if I did something to cause these errors?!
Is there a way to remove them safely to stop these Errors but keep Colorbox functioning correctly?
Thank you for your assistance.
I do not want the web URL posted on here, but you can see the link to the site in the image snapshot below.
https://i.imgur.com/anqe0AB.png

[mc12345678]

Hi, thank you for this plugin.
I'm running a fresh install of 1.5.7c on PHP 7.4 using Responsive Classic template and IH5.
It has recently come to my attention that our website is throwing 3 red errors when inspecting on WAVE (web accessibility evaluation tool) due to 3x Empty buttons from this plugin.
I'm not sure if I did something to cause these errors?!
Is there a way to remove them safely to stop these Errors but keep Colorbox functioning correctly?
Thank you for your assistance.
I do not want the web URL posted on here, but you can see the link to the site in the image snapshot below.
https://i.imgur.com/anqe0AB.png

I hope you understand the irony in the situation... The desire is to correct an "accessibility" issue, which is being done through a non-accessibility method of sharing information... :)

That said, I was able to reproduce the issue on a "similar" site (responsive classic template with this module installed), and have generated a potential patch for the issue. The patch adds a title to the associated html button(s) which appears should resolve the problem(s) reported by WAVE. The patch can be found at:
https://github.com/mc12345678/zen-co...b5c547d3358eae

Content in red is "deleted" with content in green "added". While the above commit shows an entire line affected, that is because the code had been minified to reduce its overall size. There are four places within that line where information had been added to provide the associated title parameter to the <button /> tags. As this section of code is basically in clear text, the html parameter and associated value could be directly entered without loss of "minification".

[dbltoe]

It has recently come to my attention that our website is throwing 3 red errors when inspecting on WAVE (web accessibility evaluation tool) due to 3x Empty buttons from this plugin.

It looks as if you have the problems identified in WebAIM solved.

It should be noted that the problem was identified as an empty button which is not fixed by adding a title. The lack of title or label would probably be identified when/if the button had some text. Having an ID for each MAY have eliminated the need for a title or label.

<button type="button" id="cboxPrevious"></button>

is one example and should probably, as a minimum, be

<button type="button" id="cboxPrevious">Previous</button>

The reason they were not seen in the text of the page and were seen by the tool is that the surrounding div was display:none.

display:none does NOT keep some accessibility tools or Search Engines from "seeing the code" that is hidden in the background of your browser.

You'll note that there is no error for not having a H1 tag on your site. However, our (myZencartHost.com) tool catches that the H1 is set to display:none on line 456 of your includes/templates/responsive_classic/css/stylesheet.css and logs a missing H1. A moderate level error. Why is this so? Big differences between what the SEs see and the text-readers see on any site.

Another thing I'll be addressing soon in github is the requirement for language and reading direction in the html tag. Zen Cart and responsive_classic have

<html dir="ltr" lang="en">

showing when you view page source. This is correct (for those using English) but, a couple of the testing tools show violations due to their being missing. I imagine it may be necessary to put that call together differently.

Right now, it's done

<html <?php echo HTML_PARAMS; ?>>

being in YOUR_TEMPLATEs english.php file. The version of the english.php ships with

// Global entries for the <html> tag
  define('HTML_PARAMS','dir="ltr" lang="en"');

so it may just need some tweak to get it in place at the right time for the tools to "see it". Not my area of expertise.

[mc12345678]

It looks as if you have the problems identified in WebAIM solved.

It should be noted that the problem was identified as an empty button which is not fixed by adding a title. The lack of title or label would probably be identified when/if the button had some text. Having an ID for each MAY have eliminated the need for a title or label.

<button type="button" id="cboxPrevious"></button>

is one example and should probably, as a minimum, be

<button type="button" id="cboxPrevious">Previous</button>

The reason they were not seen in the text of the page and were seen by the tool is that the surrounding div was display:none.

display:none does NOT keep some accessibility tools or Search Engines from "seeing the code" that is hidden in the background of your browser.

What I have found interesting is that the browser being used to run the WAVE check makes a difference.

When using microsoft edge no problem is reported in this area, so far when using Google Chrome, the error was identified but also the title content wasn't carried over. In part not sure if there is some caching involved through the process. As to an ID being present, thus far all cases of a problem "empty button" have included an ID, so I would say that particular theory doesn't apply in WAVE's evaluation.

Continuing to look into ways to modify the js code to produce more globally acceptable accessibility results.

[dbltoe]

Continuing to look into ways to modify the js code to produce more globally acceptable accessibility results.

Thanx for that MC.

I appreciate your taking the time to make it better for others.

I've learned to use the WebAIM as an initial look. The tool we(myZenCartHost.com) have is pretty accurate. It's the one that doesn't like the way the lang and dir are done in ZC.

There are a couple of commercial versions that are slightly more accurate but, they have a lot of false positives.

I use a Grammarly plugin with chrome and it's always listed as a problem with one of the commercial ones. Don't know why a browser extension should cause an issue but, it does.