This is a demo store, no orders will be processed, if you want to buy products on the site visit mdnzz.com

Commerce Connectors: Integrating Optimizely SaaS CMS with BigCommerce and Shopify for Seamless Composable Commerce

Commerce Connectors: Integrating Optimizely SaaS CMS with BigCommerce and Shopify for Seamless Composable Commerce

November 18, 2024

Composable commerce allows businesses to integrate best-in-class tools to create a highly customizable, scalable, and efficient e-commerce solution. In this guide, we’ll explore Commerce Connectors, my implementation of a composable solution that integrates Optimizely SaaS CMS, BigCommerce, and Shopify. It leverages Optimizely Feature Experimentation to dynamically manage commerce providers without sacrificing performance or scalability.

Why Commerce Connectors?

Traditional e-commerce solutions often lock you into a single platform. Commerce Connectors solves this by enabling the dynamic use of multiple commerce providers while maintaining outstanding Core Web Vitals and overall performance. Here’s how:

  1. Dynamic Provider Switching: Split traffic between BigCommerce and Shopify using feature flags powered by Optimizely Feature Experimentation. This allows real-time A/B testing and performance evaluation.
  2. Static Page Delivery: All pages are generated statically, ensuring a fast, SEO-friendly experience despite complex integrations.
  3. Middleware-Driven Logic: Key business logic, such as provider switching, happens in the middleware, keeping the frontend lightweight and performant.

 

Key Features of Commerce Connectors

1. Optimizely Feature Experimentation

Commerce Connectors utilizes Optimizely Feature Experimentation to:

  • Dynamically decide which commerce provider (BigCommerce or Shopify) to use.
  • Split user traffic 50/50 or according to specific rules, such as location or user segment.
  • Experiment with commerce features without affecting site performance.

2. Seamless Integration

  • Pre-built connections to BigCommerce and Shopify, including storefront API handling and customer impersonation tokens.

3. Exceptional Core Web Vitals

Despite its complexity, Commerce Connectors achieves 100 (desktop) and 92 (mobile) Lighthouse scores by:

  • Using Next.js for static site generation.
  • Implementing edge functions for server-side logic.
  • Optimizing performance with shadcn UI and other lightweight tools.

4. Future-Proof Design

With a composable architecture, you can easily add new commerce providers or functionalities without rewriting the entire system.

 

architecture diagram

 

Setup Guide

Prerequisites

Before starting, ensure you have the following:

  1. BigCommerce and Shopify accounts.
  2. Access to Optimizely SaaS CMS and Feature Experimentation.
  3. A Vercel account for deployment (or any preferred hosting provider).

 

Environment Variables

Here’s a sample .env configuration to get started:

# ++++ BigCommerce Configuration ++++
BIGCOMMERCE_CANONICAL_STORE_DOMAIN="mybigcommerce.com"
BIGCOMMERCE_API_URL="https://api.bigcommerce.com"
BIGCOMMERCE_CDN_HOSTNAME="*.bigcommerce.com"
BIGCOMMERCE_STORE_HASH=""
BIGCOMMERCE_CHANNEL_ID=""
BIGCOMMERCE_ACCESS_TOKEN=""
BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN=""

# ++++ Shopify Configuration  ++++
SHOPIFY_REVALIDATION_SECRET=""
SHOPIFY_STOREFRONT_ACCESS_TOKEN=""
SHOPIFY_STORE_DOMAIN=""

# ++++ Optimizely CMS Configuration ++++
OPTIMIZELY_API_URL="https://cg.optimizely.com/content/v2"
OPTIMIZELY_SINGLE_KEY=""
OPTIMIZELY_REVALIDATE_SECRET=""
OPTIMIZELY_PREVIEW_SECRET=""
# ++++ Optimizely Feature Experimentation Configuration ++++
OPTIMIZELY_FEATURE_EXP_API_KEY=""
OPTIMIZELY_FEATURE_EXP_PROJECT_ID=""
# ++++ OPEN AI ++++
OPENAI_API_KEY=""

# ++++ Coveo (Optional Search Integration) ++++
NEXT_PUBLIC_PLATFORM_URL="https://platform.cloud.coveo.com"
NEXT_PUBLIC_COVEO_ORGANIZATION_ID=""
NEXT_PUBLIC_COVEO_API_KEY=""
NEXT_PUBLIC_COVEO_HUB=""

# ++++ Add custom values ++++
COMPANY_NAME="Szymon Uryga"
TWITTER_CREATOR="@BigCommerce"
TWITTER_SITE="https://nextjs.org/commerce"
SITE_NAME="DEMO STORE"

# ++++ General Configuration ++++
NEXT_PUBLIC_CMS_URL=""
VERCEL_URL=""
FLAGS_SECRET=""
DOMAIN_HOSTNAME=""

Middleware Configuration

All commerce-related logic is abstracted into middleware functions. These functions:

  • Fetch data from the appropriate provider.
  • Handle switching logic based on feature flags.
  • Provide a unified response to the frontend.

Here’s an example of a middleware function for provider switching:

code example

Static Page Generation

Using Next.js’s static site generation (SSG), all pages are pre-rendered at build time. This ensures:

  • Blazing-fast load times.
  • Excellent Core Web Vitals scores.
  • Compatibility with multilingual and multi-region deployments.

 

Next Steps

  1. Deploy to Vercel: Push your Next.js project to GitHub and connect it to Vercel for easy deployment.
  2. Add New Features: Experiment with additional providers or tools like Coveo for enhanced search functionality.
  3. Optimize Further: Monitor real-world performance metrics and refine middleware and frontend components.

 

Conclusion

Commerce Connectors showcases the power of composable commerce by seamlessly integrating Optimizely SaaS CMS with BigCommerce and Shopify. It’s an innovative approach to e-commerce, allowing for dynamic provider switching, high performance, and unparalleled flexibility.

Want to try it out or contribute? Connect with me on LinkedIn.