Comments on: Add Product Sash/Ribbon in BigCommerce Using jQuery

By: Vinay Kumar

Vinay Kumar — Tue, 22 Dec 2015 07:44:44 +0000

HI
I have On Sale banner on Home page i try this code

if($(‘.DetailRow.RetailPrice’).is(‘:visible’)) {

$(‘.ProductThumbImage .zoomPad’).append(”);

}

But this is not working on Product page, please elaborate .

By: Gene

Gene — Sat, 07 Nov 2015 08:26:09 +0000

I’m also looking for a solution for Faceted Search. It seems my product loads the tag for a brief second but then disappears. Any idea how to get this working?

By: Joe

Joe — Wed, 23 Sep 2015 13:33:34 +0000

Since Bigcommerce released Faceted Search with their enterprise users, this is not able to be done because the category template file has no GLOBAL variables for the image descriptions, but replaces it with {{product.name}}. Any work around suggestions?

By: Mike

Mike — Sun, 30 Nov 2014 02:01:30 +0000

I’ve copied all of the code into the category page and the CSS, but the sash will still not appear. Any ideas?

By: Shaiful Borhan

Shaiful Borhan — Mon, 03 Nov 2014 19:30:18 +0000

In reply to Jared Mottes.

Hi Jared,
In which template file did you paste my codes for the Category Sash in? Try pasting them into the template file category.html right after the opening tag. And you’ll need to have some basic jQuery codes go in there as well:

By: Jared Mottes

Jared Mottes — Fri, 31 Oct 2014 15:44:23 +0000

I was able to get the on sale sash to load on to each page but it was not placing itself on the sale products within the category page. It was located to the left side and upper corner of the location that I placed the code in the category.html page. Initally I placed it after all other code so it showed up at the bottom of the screen. It does not appear to be correctly attaching itself to the corresponding product pictures. It just shows up on pages that do have products on sale. I have copied the code correctly, but my theme originally had a sale badge which was disabled. “.on-sale-badge” was the name of the style so it shouldn’t affect it, unless i am wrong.

the only thing that flagged me as unusual is that “function” was not highlighting in any different color, it looked like it was being read as text. Can you provide any feedback? This is a great tutorial and I would love to get it working. Thank you.

By: Rama

Rama — Sun, 26 Oct 2014 09:15:37 +0000

Hi ..Really Great work.Thank you

By: Shaiful Borhan

Shaiful Borhan — Thu, 25 Sep 2014 09:52:51 +0000

In reply to NZ.

Hi there. Correct you can put the JS codes in the category.html layout file something like this http://d.pr/i/10weq Here’s the crude CSS code to make the sash appear on top left of the product image.

.product-sash {
    height: auto !important;
    left: 0;
    position: absolute;
    top: 0;
    width: auto !important;
}

And if you need a couple of sweet-looking product sashes graphics, look no further. Visit this post http://www.stampede-design.com/blog/2014/07/e-commerce-product-sashes-ribbons/ 🙂

By: NZ

NZ — Wed, 24 Sep 2014 23:00:41 +0000

Hi. Thank you so much for posting this. I can’t get it to work though 8( and there’s no doubt I’m doing it wrong! I would be really grateful if you could help me. Should I be putting the java on the category.html layout page or the panel/category-content or something completely different?! Also, if you are able to give an example of the css that would be amazing. I know it wasn’t meant to be a step by step tutorial but I am failing at filling in the gaps! Thanks again.

By: Shaiful Borhan

Shaiful Borhan — Tue, 26 Aug 2014 23:53:38 +0000

Hi Tara, this can be done via jQuery code that looks for the “out of stock” message in the page. If the message is present, then show the Sold Out or Out of Stock sash. That’s the general logic as far as I can tell. The prerequisite is to enable the Out of Stock message in the Inventory Settings page as well as checking the checkbox “Show out of stock message on product listing pages”. Screenshot http://d.pr/i/qNIR