Blog - Shopi

`shop.blog.list(params?)`

Returns a paginated list of published blog posts, ordered by published_at descending.

const { posts, total } = await shop.blog.list({ limit: 6, offset: 0 });

Parameters

Param	Type	Default	Description
`limit`	`number`	`20`	Max posts to return (max 50)
`offset`	`number`	`0`	Pagination offset

Response

{
  posts: BlogPost[];
  total: number;
}

BlogPost type (list)

{
  id: string;
  title: string;
  slug: string;
  excerpt: string | null;
  featured_image: string | null;
  author_name: string | null;
  published_at: string | null;
  tags: string[] | null;
  meta_title: string | null;
  meta_description: string | null;
}

Example — Blog listing page

const { posts, total } = await shop.blog.list({ limit: 9 });

posts.forEach(post => {
  blogGrid.innerHTML += `
    <article>
      ${post.featured_image ? `<img src="${post.featured_image}" alt="${post.title}" />` : ''}
      <h2><a href="/blog/${post.slug}">${post.title}</a></h2>
      <p>${post.excerpt ?? ''}</p>
      <time>${new Date(post.published_at!).toLocaleDateString()}</time>
    </article>
  `;
});

`shop.blog.getBySlug(slug)`

Returns a single blog post by slug, including full content and rendered HTML.

const post = await shop.blog.getBySlug('my-first-post');

Parameters

Param	Type	Description
`slug`	`string`	The post’s URL slug

Additional fields (single post)

{
  content?: string;
  rendered_html?: string | null;
  rendered_css?: string | null;
}

Example — Blog post page

const slug = window.location.pathname.split('/').pop()!;
const post = await shop.blog.getBySlug(slug);

document.title = post.meta_title ?? post.title;

if (post.rendered_html) {
  if (post.rendered_css) {
    const style = document.createElement('style');
    style.textContent = post.rendered_css;
    document.head.appendChild(style);
  }
  articleBody.innerHTML = post.rendered_html;
} else {
  articleBody.textContent = post.content ?? '';
}

// Tags
post.tags?.forEach(tag => {
  const chip = document.createElement('span');
  chip.className = 'tag';
  chip.textContent = tag;
  tagsContainer.appendChild(chip);
});