BigCommerce: Show Product Description with jQuery

So, my sister runs Lupine Ridge Botanicals, and as happens with family, she generally comes to me when she has website problems. I’m alright with that, it’s usually either interesting, or quick. Today it was both. She’s building out her online store using BigCommerce, and for some reason the product description wouldn’t show by default, and she wasn’t able to figure out a way to make that happen. Knowing she had access to the code for the store, I knew it would be simple enough, though.

Where to edit the BigCommerce template

Before we begin, here are the instructions on where to go to edit the template:

On BigCommerce go to Settings > Design > Edit HTML/CSS and then I put that code on ProductDetails.html. I had to click Product.html before I saw ProductDetails.html show in the top of the column on the left. – Jessica, Lupine Ridge Botanicals

 

Now on to the code!

The first thing I did was look at the page.

A BigCommerce product page.

Shaving cream anyone?

Once I had that open, I went ahead and checked out the source of the product description button. What I was looking for was to see if it was clearly identified. There are two things I’m looking for there: Class names and ID field values.

Source from BigCommerce page that shows the ID field.

It has both

So there you have it, we know what it is, and how to tell it apart from the rest of the page. So I opened up the Chrome Developer Console, and played around with some variations on calling the click event on the element. Why did I do that? Because I knew that I could open it with my mouse if I clicked on that line, so I knew if I simulated a click event on the element I would be able to open it up. I just had to find the right element. In this case, it turned out to be the h2 element inside the actual block. The header element wasn’t named or IDed in any way, but I was able to go off of the parent element and direct my actions to the h2 child of that parent element.

Line of code added to BigCommerce page to make Product Description open.

Yea, what I just said…

The first time we put the code in place, I only gave her the jQuery code. Once we realized that didn’t work, it occurred to me that BigCommerce might be calling the jQuery code before the page elements had rendered fully, which would mean the JS code had nothing to do, so we added the 1 second delay before calling the code. What that did was not only open the product description, but it did it in such a way that the customer’s eye is drawn to the box, so they are led from the product image, which everyone looks at first, and then to the description.

BigCommerce page with product description open

Looks good, doesn’t it.

So, really, that was all there was to it. It didn’t take long to get it fixed, in fact I think I’ve spent more time writing this post than I did actually doing the code. It’s just interesting to me that BigCommerce doesn’t have a simple interface that allows you to make this change. But, even if they did, I would suggest using this method, as it gives that attention drawing action, which just having the description open wouldn’t have.