Enterprise Commerce

repository·main·Indexed 20 days ago

https://github.com/blazity/enterprise-commerce

An open-source, enterprise-grade Next.js template for high-performance e-commerce. It utilizes a decoupled architecture with Shopify as the backend and Algolia as a data middle-layer for searching, filtering, and recommendations. Features include ISR/SSG/PPR rendering strategies, a Shopify-to-Algolia sync script, Bloom Filter-based redirect handling, and an optimized Algolia client wrapper for managing product indices and facets.

Tokens
23.8K
Snippets
77
Records
92
Agent score
71%

What's inside Enterprise Commerce

  1. Overview of Enterprise Commerce Architecture

    main

    Enterprise Commerce is an open-source, enterprise-grade Next.js template designed for high-performance e-commerce. It uses a decoupled architecture:

    • Shopify: Acts as the e-commerce backend for product data and categories.
    • Algolia: Serves as the data middle-layer for fast-lookup tasks including searching, faceting, filtering, and recommendations.
    • Next.js (App Router): Powers the storefront with optimized rendering strategies.

    This architecture is designed to handle massive product volumes and complex search/filter combinations with minimal latency.

  2. Key Storefront Features

    main

    The template includes several enterprise-ready features:

    • Search & Discovery: Instant search, faceting, and filtering via Algolia with typo tolerance and word similarity.
    • Redirects: High-performance redirect handling using Bloom Filters to manage tens of thousands of redirects without latency.
    • SEO & Performance: Optimized crawling budget with critical content visible without JavaScript; high performance scores.
    • Navigation: ISR MegaNav with client-side hot-reload (SWR) and platform-agnostic hierarchical categories.
    • Testing & Analytics: Built-in A/B testing setup and easy provider switching for analytics (Vercel Analytics / Google Analytics).
    • Page-Specific Optimizations:
      • HP: Optimized category carousels and sales banners.
      • CLP: CMS-driven cover images and product showcases.
      • PLP: Sub-second search, intelligent faceting (vendor, rating, variants, price), and query-param driven shareable links.
      • PDP: Robust variant handling, image carousels, FAQ sections, and recommended products.
  3. Understand the Frontend Rendering and Caching Strategies

    main

    The project employs different rendering and caching strategies for various page types to balance SEO, performance, and dynamic user experiences.

    Page TypeFull NameRendering StrategyCaching StrategyA/B Testing / Personalization
    HPHome PageISR/SSG/PPRStaticISR (above fold) / CSR or PPR (below fold)
    CLPCategory Landing PageISR/SSG/PPRStaticISR (above fold) / CSR or PPR (below fold)
    PLPProduct Listing PageISR (main categories) / PPR/CSR/SSR/ISR (filtering/sorting)1. Static (SEO URLs)<br/>2. Dynamic (faceting/filtering/sorting)PPR/ISR (SEO URLs) / CSR/SSR (long tail)
    SRPSearch Results PageSSR/ISR/CSRDynamicPPR or CSR
    PDPProduct Details PageSSG (bestsellers) / ISR (long tail)1. Static (above fold)<br/>2. Dynamic (below fold)ISR (above fold) / CSR or PPR (below fold)
  4. How the Shopify to Algolia sync script works

    main

    The sync script provides a reliable and idempotent way to synchronize data from Shopify to Algolia. It follows a specific lifecycle to ensure that Algolia indices accurately reflect the current state of Shopify without redundant updates.

    The Sync Process:

    1. Fetch: Retrieves products, categories, and hierarchical collections from Shopify. If enabled, it also fetches reviews.
    2. Enrich: Combines products with their hierarchical category data and reviews.
    3. Compare: Fetches current items from Algolia indices and performs a Delta Calculation.
    4. Delta Calculation: For each entity (Products, Categories, Reviews), the script maps Algolia objects by objectID and compares them to Shopify data using deep equality (omitting the objectID).
      • Updates: Items that are new or have changed are added to an update list.
      • Deletions: Algolia objectIDs that are no longer present in the Shopify dataset are marked as obsolete.
    5. Execute: Performs batch updates for changed objects and batch deletes for obsolete objects in Algolia.
  5. Manage the Shopping Cart

    main

    The Cart object represents the user's current shopping session.

    Cart Structure

    • lines: A connection of BaseCartLine objects representing items in the cart.
    • cost: The CartCost of the cart.
    • buyerIdentity: Information about the customer or their location.
    • discountCodes: Applied discount codes.

    Cart Line Items

    Each BaseCartLine includes:

    • merchandise: The product/variant being purchased.
    • quantity: The number of items.
    • cost: The CartLineCost.
    • Deprecated: Use cost instead of estimatedCost.

    Cart Operations and Errors

    Mutations for updating the cart (like CartLinesAddPayload or CartLinesUpdatePayload) return userErrors of type CartUserError.

    Common CartErrorCode values:

    • INVALID
    • INVALID_DELIVERY_GROUP
    • INVALID_MERCHANDISE_LINE
    • MISSING_DISCOUNT_CODE
    • PAYMENT_METHOD_NOT_SUPPORTED
  6. Manage Articles and Blogs

    main

    The API provides types for managing blog content.

    Article

    An Article contains content, metadata, and author information.

    • Deprecated: Use authorV2 instead of author.
    • Fields: content, contentHtml, excerpt, handle, publishedAt, tags, etc.

    Blog

    A Blog acts as a container for Article objects.

    • Fields: articles (a connection), authors, handle, title.

    Sorting Articles

    When querying articles, you can use ArticleSortKeys to sort the results:

    • AUTHOR
    • BLOG_TITLE
    • ID
    • PUBLISHED_AT
    • RELEVANCE
    • TITLE
    • UPDATED_AT
    export enum ArticleSortKeys {
      Author = "AUTHOR",
      BlogTitle = "BLOG_TITLE",
      Id = "ID",
      PublishedAt = "PUBLISHED_AT",
      Relevance = "RELEVANCE",
      Title = "TITLE",
      UpdatedAt = "UPDATED_AT",
    }
  7. How the Shopify client abstracts API complexity

    main

    The createShopifyClient factory acts as a high-level abstraction layer over two distinct Shopify APIs:

    1. Storefront API: Used for public-facing, read-heavy, and customer-session operations (Products, Collections, Carts, Customers). It uses a storefrontAccessToken.
    2. Admin API: Used for sensitive, write-heavy, or system-level operations (Webhooks, Product Feeds, Admin Product details). It uses an adminAccessToken.

    The client abstracts the complexity of:

    • Authentication: Managing different tokens for different API types.
    • Normalization: Converting raw GraphQL responses into clean, predictable Platform* TypeScript types.
    • Pagination: Automatically handling cursor-based pagination for methods like getAllProducts and getAllCollections.
    • ID Formatting: Using utilities like makeShopifyId and cleanShopifyId to ensure IDs are correctly formatted for queries and returned in a usable format.
  8. Work with Metafields and Metaobjects

    main

    Shopify uses Metafields and Metaobjects to extend data models.

    Metafields

    Metafields are key-value pairs attached to resources like Product, Customer, or Order.

    • Metafield: Contains id, key, namespace, type, and the value (as a string).
    • MetafieldReference: A metafield can reference other entities like Collection, ProductVariant, or MediaImage.
    • HasMetafields: An interface implemented by resources that support metafields.

    Metaobjects

    Metaobjects allow you to define custom data structures.

    • Metaobject: Contains a type (the definition handle), fields (an array of MetaobjectField), and a handle.
    • MetaobjectField: Represents a specific field within a metaobject definition.
  9. Manage Collections

    main

    Collections group products together.

    Collection

    A Collection includes:

    • products: A connection to the products within the collection.
    • handle: The unique identifier for the collection.
    • title: The display name.
    • description: Text and HTML descriptions.

    Sorting Collections

    Use CollectionSortKeys to order collections:

    • ID
    • RELEVANCE
    • TITLE
    • UPDATED_AT
    export enum CollectionSortKeys {
      Id = "ID",
      Relevance = "RELEVANCE",
      Title = "TITLE",
      UpdatedAt = "UPDATED_AT",
    }
  10. Understand Selling Plan Price Adjustments

    main

    Selling plans (subscriptions or special offers) can include price adjustments. These adjustments are represented by the SellingPlanPriceAdjustment type, which uses a union type SellingPlanPriceAdjustmentValue.

    Available adjustment types include:

    • SellingPlanFixedAmountPriceAdjustment: A specific amount subtracted/added.
    • SellingPlanFixedPriceAdjustment: A fixed price for the plan.
    • SellingPlanPercentagePriceAdjustment: A percentage-based adjustment.

    Additionally, SellingPlanAllocationPriceAdjustment provides details on how the price is adjusted per delivery, including compareAtPrice, perDeliveryPrice, and price (all as MoneyV2).

    export type SellingPlanPriceAdjustmentValue =
      | SellingPlanFixedAmountPriceAdjustment
      | SellingPlanFixedPriceAdjustment
      | SellingPlanPercentagePriceAdjustment;