Product Options - cart not loading in Chrome, Safari etc

[catpro]

I'm having an issue where, if I have an item with Product Options and I choose one then try to Add to Cart, the cart won't load in Chrome, Safari etc - the cart window opens but the loader just keeps spinning. It works fine in IE11 however. Items with no product options load OK in all browsers. Any idea what's causing this?

[E-junkie_Monster]

Hello,



Sorry about the trouble! Could you please give us a link to the page where you are having this problem?

[catpro]

Yes, here are a couple of links: http://www.vetprofessionals.com/eventdetail.php?recordID=15 or http://www.vetprofessionals.com/eventdetail.php?recordID=8



The form results are passed through a database so you need to fill in the form first - just a date, name and email address will be fine. When you get to the next page and Add to Basket, in Chrome and Safari the basket won't load. It loads OK in IE11.



The problem only happens with products that have Options. Ordinary products load fine: http://www.vetprofessionals.com/publications.html

[E-junkie_Guru]

I copied your Add to Cart button code out of the post-form-submission page and pasted that into a test page, where I confirmed that code worked fine outside the context of your page, so that rules out any issue with your product settings or the button code itself. Whatever the source of the problem, it must be something in your page interfering with the normal operation of cart buttons with menu options.



Add to Cart button codes without menu options are just linked images, whereas the code with menu options are actually an HTML form, where the button is an <input type="image"> that submits the form to send the selected menu option value to the cart. I wonder if scripting in your page that catches your registration form submission may also be intercepting cart-button form submissions as well, so clicking the cart button gets as far as displaying the cart overlay in your page, but then the cart doesn't have any actual form-submission data to work with.



I'd suggest bringing this reply to the attention of whomever set up your page, which should point them in the right direction to sort things out.

[catpro]

I'm Cat Professionals' web designer, it was me that built the system. I've cut the page right back to just the View Cart & Add to Cart buttons and the info which is passed from the database - the item name and the eJunkie code for the button. There's no additional code on the page and it still doesn't work. It's a PHP form script which passes the info from the registration form to the database, then passes the info back into the success page. I've checked the database and the eJunkie code is correct:



<form action="https://www.e-junkie.com/ecom/gb.php?c=cart&i=1284764&cl=33734&ejc=2" target="ejejc" method="POST" accept-charset="UTF-8">

Choose Days:<br/>

<select name="o1">

<option value="Day 1 20 May 2014">Day 1 20 May 2014</option>

<option value="Day 2 21 May 2014">Day 2 21 May 2014</option>

<option value="Both Days">Both Days</option>

</select>

<br/>

<input type="image" src="images/add-to-basket.png" border="0" alt="Add to Cart" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this.parentNode);"/>

</form>



As you say, if I paste this code onto a plain HTML page, it works fine. But, if it comes in from the database it doesn't work in Chrome or Safari but does in IE11 and Firefox.



The problem obviously isn't with the eJunkie code, it's something to do with the way that those browsers handle HTML code passed through a mySQL database. I may raise this with the people who developed the form script and see if they know. Thanks for checking anyway!

[E-junkie_Guru]

Chrome and Safari are both derived from the WebKit rendering engine, so that would seem to be the common factor.



I captured the final rendered source of your page including our button code and pasted all of that into a test page of my own, which worked fine in Chrome for me, which should rule out any client-side scripting (JS) conflicts. Something about the way your server-side scripting is manipulating the DOM or catching form submissions would seem to be the culprit here.



If you can't get this sorted out, you might try converting the menu code to a series of separate Add to Cart linked-image buttons that each pass a predefined menu option value -- see this tutorial for details:

http://www.e-junkie.com/ej/tips.variants.button-tutorial.htm