Add-to-cart no longer working

I have a write-in purchase button for my calendar that suddenly stopped working. I am running the latest 3.2 Backlight and wondering if there are known changes or problems that would cause the behavior change. I get the simple error, “Something went wrong” whenever I click on the button. I verified that nothing in my cart has changed, and am sitting here scratching my head on the cause.

Here’s my button format (without opening and closing bracket), where “Calendar” is the name of the pricing scheme. I verified that the images are in place as expected.

button class=“add-to-cart cart-button” data-item=“Calendar” data-name=“Serene New England” data-price=“Calendar” data-thumbnail="…/backlight/custom/images/ne-cover.jpg">  BUY NOW  </button

You can see the behavior on my test site here: http://www.mabtesting.dreamhosters.com/ne-cal/.

All suggestions for curing this weird problem would be appreciated.

Check your pricing, including Shipping pricing. If any of that is incomplete, that will often throw an error.

Also, I think that the pricing scheme is case sensitive. So check the spelling between the pricing scheme and the data-price attribute in the button.

The pricing hasn’t changed. is all ‘complete’, and the pricing scheme name is correct. That’s why I’m scratching my head. Is it possible that my cart has somehow been corrupted? The gallery pricing scheme is working fine as expected.

Check the quote marks.
In your post above, some of the quote marks in the button code are curly and some are straight.
(The curlies might show up as slanted in a text editor)
I think they all need to be straight.

I’ve been bit by the quote marks before and just verified that they’re all the straight kind in the markup language (they only showed up slanted in this post). It’s gotta be something else. Just don’t know what.

hmmm…did you also update the Cart when you updated Backlight to 3.2?

Yes, and I even forced it to re-install Backlight and the Cart twice to be sure. Same results. Reset my Cart and cleared the template cache too just in case.

I’m seeing an error in the Console. Unfortunately, I don’t know how to interpret it.
Ben will need to take a look.

Thanks for all the help, Rod. Much appreciated.

@mblanchette1, the source of the error isn’t leaping out at me. I do see various issues with the page, though.

First, resources are being referenced with ?ppf=on appended to the URLs. I don’t know what that is. Is there some sort of compression or caching or something being performed by your host?

The layout at the top of your page is a wreck. The content area, beginning with the text “2021 Serene New England”, goes all the way up to the top of the viewport, and is overlaid by the masthead logo and navigation. In my desktop browser, this created conflicting text blocks that are difficult to read, and the Buy Now button is unclickable because the masthead element is on top of it.

At mobile display sizes, the masthead, content and navigation squish up even more, and there’s still more conflict for space. Visually, it’s a mess, and it makes parts of the interface just impossible to use.

Possible solutions include some combination of:

  1. Increasing the margin-top on your content area to push it beneath the masthead.
  2. Giving the top-pallet and masthead height, or what’s referred to as “hasLayout” properties. Basically, they should take up space, so that the content naturally falls beneath them, rather than jumping up underneath them. If you have any custom CSS in play, for example, you can cause an element to lose its “hasLayout” property by setting it to use position: absolute.

The script error itself is being thrown by jQuery, so there’s probably a syntax error somewhere in the page that’s causing things to fall over. Best way to find that would be to peel back any of your own code that’s been added. Keep the button, as that’s what’s triggering the event, but remove everything else. Then try the button; if it works, add something, try again; and so on, until we see where the error is being introduced.

If the error is somewhere in Backlight’s code, we’ll need to figure out reproduction steps.

OK, will do. The weird part of this problem is that this has been working for a long time. I’ve been selling this calendar since mid-2020 without a problem. It’s only very recently that the button stopped working, which is what compelled me to report the issue.

Did it break during an upgrade? Like, was it working during 3.1, then breaking after the 3.2 update? Or did it just suddenly break, seemingly without cause? Backlight doesn’t mutate of its own accord, so if it broke separate from an application update, then it might be due to some change with your host. Like whatever that ?ppf=on thing is, if that’s new and causing a syntax error somehow … Not saying that’s the problem; I literally have no idea what that thing is. But it’s one possibility.

FWIW, the write in buttons are working on my Backlight 3.2 sites after the upgrade

It wasn’t related to the upgrade to 3.2 because I went back and tested it against a 3.1 installation and it did the same thing. That’s what’s got me so baffled.

Now that you mention it, in trying to isolate the problem, I copied the code to one of a friend’s Backlight 3.2 installation on a new page and it worked on her host. I’m on DreamHost but she’s not. Is it possible that something has changed at the host that would influence this behavior?

Usually, when things break seemingly without cause, it’s because of some underlying change on the host.

Looking at where it’s failing, the cart passes a version of the current page URL as a parameter. It looks like the forward slashes is causing your server to respond with a 500 error. It could be that your site is using mod_security, which can inadvertently flag such requests. Can you check with your hosts whether they have installed mod_security and whether they can track what the error is when visiting a link such as:

http://www.mabtesting.dreamhosters.com/backlight/cart/?jsoncallback=jQuery32102474439492963868_1612674847233&c=ajax&a=getPurchaseOptions&pricing_scheme=Calendar&photo_path=http%3A__www.mabtesting.dreamhosters.comxne-calx..%2Fbacklight%2Fcustom%2Fimages%2Fne-cover.jpg&_=1612674847238

OK, I’ll check with them

Ben, you’re good! It was exactly the problem you suggested: mod_security. DreamHost did an upgrade a few weeks ago and apparently set all domains to include extra security. Turning that option off made it all work like before. Phew! That was a head scratcher. I sent them your script and they were immediately able to see the problem. All better now. Thanks for the quick turnaround, Ben.

1 Like