Advice

Description

The advices/[...slug].vue page renders the detailed view of a single advice article on the Toolstation platform. It supports dynamic content loading, breadcrumb navigation, SEO metadata updates, sharing functionality, and tag-based navigation.

This page is data-driven, relying on the builderStore to fetch and display a single advice item, and displays related content and schema metadata.

Purpose

The primary purpose of this page is to display detailed information about an advice article for Toolstation users in a structured, accessible, and SEO-friendly manner.

Key Functional Goals:

1. Display Advice Content
   • Dynamically fetch and render a single advice article.
   • Display title, image, publish date, read time, and content blocks.
2. Provide Navigation Aids
   • Render dynamic breadcrumbs.
   • Show tag-based navigation for related articles.
3. Enhance SEO and UX
   • Dynamically update page <title> and meta <description>.
   • Generate structured content schema (JSON-LD).
   • Estimate and display read time using text analysis.
4. Visual Feedback and Skeleton Loaders
   • Show animated skeleton loaders while content is being fetched.
   • Fallback placeholders if content is missing.
5. Share Functionality
   • Support the Web Share API for native browser sharing.
   • Automatically populates share data with title, description, and URL.
6. Related Articles Carousel
   • Fetch additional articles from the store.
   • Render in a carousel using lazy-loaded components.

Flow Summary (Step-by-Step)

On page load:

• Reads the article slug from route.params.slug.
• Calls getAdviceItem() from the store with the full URL path.
• Sets adviceData with the fetched result.
• Initializes breadcrumb items.
• Extracts text blocks to compute estimated read time.

While fetching:

• Displays animated skeleton loaders for:
  • Breadcrumb
  • Hero banner
  • Article body

After fetch:

• If advice exists → renders:
  • TsBannerOverlay (title, date, read time, image)
  • TsContent with the article body
  • Tag navigation tabs
  • Related articles carousel
• If no advice → displays placeholders and loading fallback.

🛠️ How to Add Advice Detail from Builder.io

Follow these steps to add a new advice entry using Builder.io:

1. Open Builder.io

• Go to the Builder.io dashboard.
• Navigate to the Page model.

2. Select the Advice Model

• Inside the Page model, choose the Advice model from the options.

3. Create a New Entry

• Click on New Entry.
• Select Advice from the dropdown menu.

4. Enter Basic Information

• Add a Name for your advice page.
  (e.g., "All About Cross Line Lasers")
• Click on Create Page.

5. Add Detailed Information

Fill in all the required fields:

• Title
• Description
• SEO Keywords
• Tags
• Categories
• Experts
• Publish Date
• Advice Image
• Choose Author

6. Publish

• After entering all necessary details, click Publish to make the advice page live.

When user:

• Clicks Share → triggers navigator.share() with populated metadata.
• Clicks a tag → redirects to the advice list page with tag-based filtering.
• Scrolls → can interact with related advice content or support section.

Computed Properties

• headTitle: Sets the document <title>.
• headMetaDescription: Sets SEO meta description.
• totalWordCount: Calculates word count from content.

Developer Notes

• Uses defineAsyncComponent() to lazily load large components like the carousel and cards.
• Uses custom composable useTranslation() for localized strings.
• generateContentSchema() is called after fetching to register structured data for SEO.

🐞 Debugging Guide: Advice Details Page (Nuxt 3 + Pinia + Composition API)

This file contains a comprehensive set of debug steps for the Advice Details Page component, including data fetching, dynamic content, UI components, and reactive logic.

✅ Initial Debug Checklist

• Is adviceData correctly fetched and reactive?
• Are async components rendering correctly?
• Is TsBannerOverlay showing valid data?
• Are skeleton loaders displaying properly?
• Is breadcrumb showing full navigation?
• Is the "You May Also Like" carousel populated?
• Are tags and tabs shown when available?

🔍 Data Fetching Debug

Advice Fetch

await builderStore.getAdviceItem("advices", { urlPath: route.fullPath }, {});
console.log("Fetched advice:", builderStore.advice);