This Catalyst project supports the lab work for BigCommerce Catalyst Essentials.

• Node.js 20 or later

Copy the starter branch.

npx create-next-app@latest -e https://github.com/bigcommerce-edu/lab-catalyst-faqs/tree/starter /path/to/working/directory

Custom query/component to load "FAQs" on product detail page.

Requires metafields on a product matching the following details:

• namespace: "FAQ"
• permission: "read_and_sf_access"
• value: JSON string matching the following schema:

{
  "question": "Question string",
  "answer": "Answer string"
}

Completed Lab 1 state

• Step 1: Add placeholder to product page
• Step 2: Fetch FAQ metafields
• Step 3: Basic FAQ display

Full Lab 1 diff

Fresh setup:

npx create-next-app@latest -e https://github.com/bigcommerce-edu/lab-catalyst-faqs/tree/lab-faq-enhancements-start /path/to/working/directory

Completed Lab 2 state

• Step 2: Add Accordion UI
• Step 3: Load More button
• Step 4: Data fetch for Load More
• Step 5: Loading state for initial FAQs
• Step 6: Loading state for Load More
• Step 7: Error handling

Full Lab 2 diff

Set up with all features complete:

npx create-next-app@latest -e https://github.com/bigcommerce-edu/lab-catalyst-faqs/tree/lab-faq-enhancements-complete /path/to/working/directory