← Web Components

Web Components · Blog

<mmm-blog-details>

Individual blog-post page — banner image, title, author + date metadata, rich HTML body, and an optional "Similar posts" rail. Reads slug from the attribute or derives it from the URL path.

Overview

Renders a single blog post by slug. Layout is hero-image → title → byline → body → similar posts. Fires blog:loaded on success (with the full post object) and blog:error on failure (with the error). Use these for analytics, schema.org injection, or fallback UI.

When to use

  • On /blog/{slug} as the canonical post detail.
  • For long-form storytelling, how-tos, brand journals.

Quick start

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

<!-- Slug comes from the URL automatically -->
<mmm-blog-details></mmm-blog-details>

Attributes

AttributeTypeDefaultDescription
slugstringURL-derivedPost slug. When omitted, parsed from the URL.
show-bannerbooleantrueRender the hero cover image at the top.
show-authorbooleantrueShow the author byline below the title.
show-datebooleantrueShow the published date.
show-similarbooleantrueRender the "Similar posts" rail below the body.

Events

EventTargetPayload
blog:loadedwindow{ slug: string, title: string }
blog:errorwindow{ error: string }

Live preview

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

Examples

1. Default — slug from URL

<mmm-blog-details></mmm-blog-details>

2. Explicit slug, no banner

<mmm-blog-details
  slug="how-we-built-our-loyalty-program"
  show-banner="false"
  show-similar="false">
</mmm-blog-details>

3. Inject dynamic JSON-LD on load

window.addEventListener('blog:loaded', (e) => {
  const ld = document.createElement('script');
  ld.type = 'application/ld+json';
  ld.textContent = JSON.stringify({
    '@context': 'https://schema.org',
    '@type':    'BlogPosting',
    headline:   e.detail.title,
    url:        location.href,
    identifier: e.detail.slug
  });
  document.head.appendChild(ld);
});

4. Handle missing post (404 fallback)

window.addEventListener('blog:error', (e) => {
  console.warn('Blog load failed:', e.detail.error);
  location.replace('/blog');
});