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>>

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. There's a lot of customization stuff that I feel like is lacking from the Stencil framework, and a lot of things that should be included with BigCommerce that isn't. Any weird bugs you've come across? Let me know in the comments.

Comments

[Karen White]

Hey Jack!

Thanks for sharing this! You're correct--because the {{banners}} object outputs an array of objects, if you want to stack banners on the front end, you'll see the delimiter unless you loop through the array with {{each}} or use the join helper:

{{{join banners.bottom ''}}}

I'm thinking this might best be addressed with documentation. What are your thoughts? Here's the current doc for {{banners}}, for reference:

developer.bigcommerce.com/stencil-...

[Jack Harner 🚀]

I definitely think those docs could be improved. More or less including an example detailing that it does return an array and listing both the join or each options. I know Cornerstone uses limit now to just show one of the banners so I don't know how many other people are actually going to run in to this problem.

[Karen White]

That's good feedback! We also recently merged a change in Cornerstone to use {{each}} in the footer (related to enhanced ecommerce support): github.com/bigcommerce/cornerstone...

That might be a good example to point to, along with the {{join}} array method. I'll get with our docs team to pass this along :)