BigCommerce Marketing Banners Adding Extra Commas

Slightly annoying little bug I found using BigCommerce's Stencil Framework. When you have multiple Marketing banners set to the same location in your theme, the standard way to display them all is just {{{banners.bottom}}} (the newest version of Cornerstone uses {{{limit banners.bottom 1}}} to display one of the banners). The dumb bug is that this outputs all the different Banner HTML as a comma seperated list.

The Issue

if you have three banners set to show in the bottom location of a specific page (in my case, the home page), {{{banners.bottom}}} outputs as:

<<BANNER CONTENT>>
,
<<BANNER CONTENT>>
,
<<BANNER CONTENT>>
Bulletproof your Domain for $4.88 a year!

The Fix

Instead of just outputting the banners with {{{banners.bottom}}} we're going to iterate through them and output them on their own. Check it out:

{{#each banners.bottom}}
    <div class="banner--bottom">
        {{{this}}}
    </div>
{{/each}}

which would output as:

<div class="banner--bottom">
    <<BANNER CONTENT>>
</div>
<div class="banner--bottom">
    <<BANNER CONTENT>>
</div>
<div class="banner--bottom">
    <<BANNER CONTENT>>
</div>

Ta-Daaa! Clean, comma-free banners. Let me know if this helped you at all.

Jack Harner

Jack Harner

Web Designer, Photographer, Graphic Designer, Marketer, Entrepreneur.


Pretty Much A Jack Of All Trades

Leave a Reply

Your email address will not be published. Required fields are marked *

Keep Up With Harner Designs!

Get updates about New Projects, Products, Discounts, and Giveaways from Harner Designs!

By submitting your email, you agree to our Privacy Policy and give us consent to send you marketing and promotional emails. You can unsubscribe at any time.