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.
Top comments (3)
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-...
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
joinoreachoptions. I know Cornerstone useslimitnow 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.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 :)