handlebars.jsbigcommercebigcommerce-stencil-cli

BigCommerce get featured blog based on blog post tag

I am trying to get the featured blog post based on the "featured" tag assigned to it. Below are my code logic. Is there any issue on the code below? I only want to display one featured blog-post in blog page. Using below code I am getting error in frontend "Server Error".

Here is how I assign "featured" tag to featured blog post:

Here is how I assign "featured" tag to featured blog post

Code in "Templates >> Page >> blog.html" 

{{#each blog.posts}}
        {{ assignVar "found" "no" }}
        {{#if post.tags}}
            {{#each post.tags}}
                {{#if name "==" "featured"}}
                    {{ assignVar "found" "yes" }}
                    {{break}}
                {{/if}}
            {{/each}}
        {{/if}}
        
        {{#if getVar "found"  '=='  "yes"}}
             <div class="sushil-featured-blog">
                <div class="sushil-featured-blog-image">
                    {{#if thumbnail}}
                        <figure class="blog-thumbnail">
                            <a href="{{url}}">
                                {{> components/common/responsive-img
                                    image=thumbnail
                                    fallback_size=theme_settings.blog_size
                                    lazyload=theme_settings.lazyload_mode
                                }}
                            </a>
                        </figure>
                    {{/if}}
                </div>
            </div>
            {{break}}
        {{/if}}
    {{/each}}

Solution

  • There are a few issues with your code. The first is that in order to get a variable inside an if statement, you must use parentheses. The second is post.tags (should just be tags). The third potential issue is that I don't think "break" does anything.

    Here is the revised code with items 1 and 2 resolved.

    {{#each blog.posts}}
{{ assignVar "found" "no" }}
{{#if tags}}
    {{#each tags}}
        {{#if name "==" "featured"}}
            {{ assignVar "found" "yes" }}
            {{break}}
        {{/if}}
    {{/each}}
{{/if}}

{{#if (getVar "found")  '=='  "yes"}}
        <div class="sushil-featured-blog">
        <div class="sushil-featured-blog-image">
            {{#if thumbnail}}
                <figure class="blog-thumbnail">
                    <a href="{{url}}">
                        {{> components/common/responsive-img
                            image=thumbnail
                            fallback_size=theme_settings.blog_size
                            lazyload=theme_settings.lazyload_mode
                        }}
                    </a>
                </figure>
            {{/if}}
        </div>
    </div>
    {{break}}
{{/if}}
{{/each}}

    Note: if "break" doesn't work, it may show more than one post, and you may need to come up with another way to only show the first.