CODEWITHSUNDEEP
themese-commerceblogsbigcommerce
Krutika Patel
Krutika Patel

Reputation: 322

How to display Top Three Blogs on Home Page of Bigcommerce-Stencil Theme through Customization

I am creating new theme in Big-commerce with Stencil Framework.

I want to display top three blogs' details on home page above footer.

The details are Blog Image, Blog Title and Blog Description(First 100 Characters).

Note - Stencil Framework uses handlebar language.

Current Structure of ..\templates\layout\base.html is like following.

Here, Above {{> components/common/footer }} - we can add one more html file which will display blog details(e.g. homeblog.html).

Hence, {{> components/common/homeblog}} will be included in base.html above footer.

Can anyone help, what should be written in homeblog.html file to achieve top 3 blogs' details on home page?

<!DOCTYPE html>
<html class="no-js">
    <head>
        <title>{{ head.title }}</title>
        {{{ head.meta_tags }}}
        {{{ head.config }}}
        {{#block "head"}} {{/block}}
        <link href="{{ head.favicon }}" rel="shortcut icon">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        {{{stylesheet '/assets/css/theme.css'}}}
        {{ getFontsCollection }}
        <script src="{{cdn '/assets/modernizr-custom.js'}}"></script>

        {{{head.scripts}}}
        {{{head.rsslinks}}}

        {{inject 'themeImageSizes' theme_settings._images}}
        {{inject 'genericError' (lang 'common.generic_error')}}
        {{inject 'maintenanceMode' settings.maintenance}}
        {{inject 'urls' urls}}
        {{{snippet 'htmlhead'}}}
    </head>
    <body>
        {{{snippet 'header'}}}
        <div class="icons-svg-sprite">{{> components/common/icons/icon-defs }}</div>

        {{#if settings.privacy_cookie}}
            {{> components/common/cookie}}
        {{/if}}

        {{> components/common/header }}
        {{> components/common/body }}
        {{> components/common/footer }}

        <script src="{{cdn '/assets/js/bundle.js'}}"></script>
        <script>
            // Exported in app.js
            window.stencilBootstrap("{{template_file}}", {{jsContext}}).load();
        </script>

        {{{footer.scripts}}}
        {{{snippet 'footer'}}}
    </body>
</html>

Thank you...

Upvotes: 0

Views: 1194

Answers (1)

thannes
thannes

Reputation: 778

To pull the 3 most recent blog posts on your homepage. Add the following Front-Matter attribute to the top of your "home.html" file.

blog:
    recent_posts:
        limit: 3

Now, you have access to the last 3 posts. To display each post's info, you will loop each post and display the info you'd like. 

<div class="blog">
    <h4>Recent 3 Posts</h4>
    {{#each blog.recent_posts}}
        <h5><a href="{{url}}">{{title}}</a></h5>
        <p>{{summary}}</p>
    {{/each}}
</div>

To see exactly what info you have access to, remove the closing '/' from your dev URL, and add '?debug=bar' to the end. It will display the JSON you have access to on the page. Abbreviated example below.

"recent_posts": [
      {
        "title": "test1",
        "author": "",
        "url": "/blog/test1/",
        "thumbnail": null,
        "summary": "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\r\n tempor incididunt ut labo",
        "show_read_more": true,
        "date_published": "Jul 8th 2016",
        "tags": []
      }, ....

Upvotes: 1

Related Questions