← Web Components

Web Components · Blog

<mmm-blog-list>

Index of blog posts as cards. Reads from window.BlogStore, supports category filtering, post-count limits, and a "Load more" CTA for paginated lists. Clicking a card dispatches blog:clicked just before navigation.

Overview

Lightweight blog index for marketing pages. Each card shows the cover image, title, excerpt, optional author, optional date, and a tag list. The category attribute pre-filters by slug; limit caps the number of cards rendered before "Load more" appears (when show-load-more="true").

When to use

  • On /blog as the canonical index.
  • On the home page as "Latest from the blog" with limit="3".
  • Inside a category template — pair with <mmm-blog-category>.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-blog-list header="From the blog" limit="6" show-load-more="true"></mmm-blog-list>

Attributes

AttributeTypeDefaultDescription
headerstring—Optional title rendered above the grid.
categorystring—Pre-filter by category slug. Omit to show all categories.
limitnumber10Maximum cards rendered per page.
show-load-morebooleantrueShow a "Load more" button when there are more results.
button-textstringRead MoreLabel for the per-card read-more CTA. (The load-more button text is fixed.)
show-authorbooleantrueShow the author byline on each card.
show-datebooleantrueShow the published date on each card.
excerpt-lengthnumber150Character cap for the card excerpt; the rest ellipsizes.

Events

EventTargetPayload
blog:clickedwindow{ slug: string, title: string }

Fires when a blog card is clicked, just before navigation.

Live preview

store sample-store tag <mmm-blog-list>

Examples

1. Full index with load-more

<mmm-blog-list header="Journal" limit="9" show-load-more="true"></mmm-blog-list>

2. Compact home-page strip (3 posts, no controls)

<mmm-blog-list
  header="Latest from the journal"
  limit="3"
  show-load-more="false"
  show-author="false"
  excerpt-length="100">
</mmm-blog-list>

3. Category-scoped list

<mmm-blog-list category="how-to" limit="12" button-text="More how-to posts"></mmm-blog-list>

4. Track post clicks

window.addEventListener('blog:clicked', (e) =>
  analytics.track('blog_open', { slug: e.detail.slug, title: e.detail.title })
);