fdk-blogs

Deprecation Notice

Vue-based themes will soon be deprecated. Please switch to React-based themes, as all future updates and support will focus exclusively on React.

Blogs Action Component

Tag

fdk-blog

Description

The action component manages blog post functions by retrieving a list of blogs from the store based on parameters such as page number, page size, tags, and search criteria. The append_items boolean parameter determines whether to append the items for infinite scrolling (true) or replace the current list for pagination (false).

Props

Key	Type	Description	Payload
fetchBlogs	function	This function fetches a list of blogs from the store based on page number, page size, tags, and search criteria, with append_items determining whether to append items for infinite scrolling (true) or pagination (false)	{pageNo, pageSize, append_items, tags, search}

Example

<fdk-blog>
      <template v-slot="{ fetchBlogs }">
        <template v-if="getPageConfigValue(page_config, 'infinite_scroll')">
          <fdk-infinite-scrolling
            @loadmore="loadmoreBlogs(fetchBlogs)"
          >
            <div class="blogs">
              <div
                class="blog"
                :class="{ 'blog-lg': i % 7 === 0 }"
                v-for="(blog, i) in context.blogs?.items"
                :key="i"
              >
                <div class="blog__info">
                  <h3
                    class="blog__info--title font-header"
                    :class="{ h1: i % 7 === 0 && isDesktop }"
                  >
                    <fdk-link
                      :link="`/blog/${blog.slug}`"
                      :title="blog.title"
                      :target="'_blank'"
                    >
                      {{ blog.title }}
                    </fdk-link>
                  </h3>
                </div>
              </div>
              <fdk-infinite-scrolling/>
            </div>
        </template>
      </template>
    </fdk-blog>

   loadmoreBlogs(fetchBlogs) {
      if (this.context?.blogs?.page?.has_next) {
        fetchBlogs({ pageNo: this.context?.blogs?.page?.current + 1 });
      }
    },