Appendix: Catalyst

Plan: B2B Developer

Lesson 24 of 25 · 5 min

The hands-on exercises in this course focused on using the Buyer Portal in a Stencil storefront, but the general development techniques are applicable to any storefront type.

The main differences between Stencil and headless storefronts lie in the way the Buyer Portal is initialized and handles authentication. Throughout the course, we’ve noted where the integration with Catalyst, the headless storefront maintained by BigCommerce, differs from Stencil.

Below is a summary of the key points to be aware of when integrating with Catalyst.

Experimental Integration

The experimental integration available from BigCommerce jump-starts your Buyer Portal experience on Catalyst storefronts.

See the Catalyst integration documentation for details on the key aspects that differ from a Stencil implementation, including initial setup and deployment.

Initialization

• In Stencil: The Buyer Portal is initialized via header and footer scripts configured in Script Manager in the BigCommerce control panel.
• In Catalyst: The Buyer Portal initialization scripts are incorporated directly in the Catalyst codebase.

Product Detail Page Buttons

• In Stencil: Buttons like “Add to quote” are injected into the product detail page by the Buyer Portal app and reflect the styles configured in the B2B Edition control panel.
• In Catalyst: These buttons are implemented directly in the storefront codebase with native components, and their theming reflects the overall storefront theme rather than the control panel settings.

B2B GraphQL API

• In Stencil: The Buyer Portal controls the login page. A login mutation in the B2B GraphQL API provides a B2B storefront token.
• In Catalyst: The existing login process produces a customer access token for the BigCommerce GraphQL Storefront API. The B2B REST API is used to exchange this for a B2B storefront token.

BigCommerce GraphQL Storefront API

• In Stencil: A separate B2B mutation is used to obtain a token for the BigCommerce GraphQL Storefront API. Calls to this API are made directly from the browser.
• In Catalyst: Calls to this API are proxied through an endpoint in the B2B backend. No separate token is required.

Deployment

The build files from your custom Buyer Portal must be hosted.

• In Stencil: You must choose a third-party host or CDN to host your build files, or consider using the built-in WebDAV storage available with your BigCommerce store.
• In Catalyst: Build files can be hosted with a CDN or WebDAV, but it’s also possible to deploy them with your Catalyst project.