DOCSEARCHbyAlgolia
Submit Docs

Vision Spectrum Storefront Documentation

website·Indexed 29 days ago

https://storefront-docs.vhc.dev

Internal documentation for the Vision Spectrum e-commerce storefront application. Includes details on the StorefrontConfig system, Hygraph component architecture, Azure deployment pipelines, and Pulse Azure Functions for event processing. Covers configuration for specific stores like Bärbel Drexel and VitaminExpress, product feed structures, and supported pickup point providers.

Tokens
14.6K
Snippets
63
Records
164
Agent score
50%

What's inside Vision Spectrum Storefront

  1. Overview of available storefront product feeds

    The storefront automatically generates several product feeds for marketing channels and integrations. These are typically regenerated during nightly builds (6:00 AM Amsterdam time), with some updated more frequently via cron jobs.
    FeedFormatPurposeUpdate Frequency
    Google v2XMLGoogle Shopping, Microsoft Ads, MetaEvery 2 hours
    iCatCSV (zipped)iCat affiliate marketingOn build
    ShigeruJSONInternal product recommendationsOn build
    EmarsysCSVEmail marketing personalizationEvery 2 hours
    ReviewsXMLGoogle Product ReviewsOn build

  2. Overview of Pulse Azure Functions service

    Pulse is an Azure Functions service that acts as a central event processor. It listens to events from CommerceTools (Order and delivery events) and Hygraph CMS (Content changes and webhooks) to trigger automated workflows such as analytics tracking, coupon redemption, review aggregation, and URL path updates.

  3. Overview of Hygraph Storefront Component Architecture

    The storefront utilizes a component-based architecture. Content editors in Hygraph use these pre-built components to construct pages, which are then rendered on the frontend to create rich, flexible content pages.

  4. Manage Vision Spectrum Storefront Configuration

    Each storefront uses a specific configuration to control UI theming (e.g., colors, corner rounding), feature toggles (e.g., subscriptions, favorites), checkout options (e.g., invoice locales, WhatsApp opt-in), and product display settings. Detailed configurations are managed via the StorefrontConfig.

  6. Understand the Storefront Azure release pipeline workflow

    The Storefront uses two automated Azure release pipelines to manage deployments:

    1. Staging Pipeline: Automatically deploys on every merge to the main branch. Used for testing and QA.
    2. Production Pipeline: Triggered manually after changes are validated on staging to ensure only approved changes reach live customer environments.

  7. Implement Pickup Point Selection

    Allow customers to choose a delivery pickup point. This feature supports multiple providers including DHL, PostNL, and PostNord. Key components involved are PickupPointSelect, PickupPointDialog, and ShippingMethod.

  8. Understand the Hygraph component architecture

    The storefront utilizes a consistent pattern for all Hygraph components to ensure predictability in data fetching and styling:

    • GraphQL Fragments: Every component is mapped to a specific GraphQL fragment (e.g., HeroFragment, CtaComponentFragment).
    • Props: Component props are structured to match the corresponding GraphQL fragment.
    • Responsiveness: Components typically provide separate variants for desktop and mobile views.
    • Styling: Styling is implemented using Tailwind CSS and class-variance-authority (CVA) for managing component variants.

  9. Revalidate storefront pages via Hygraph updates

    Pulse includes a service bus integration that automatically revalidates storefront pages when updates are made in Hygraph. This ensures that changes saved in the CMS are reflected on the live website. Note that in some environments with multiple running services, revalidation may have intermittent reliability issues.

  10. Automatically update Hygraph URL paths

    The Hygraph URL Path Updater automatically maintains SEO URL paths when identifiers change in Hygraph. It supports the following models: Products, Categories, Blogs, Blog Types, and Content Pages.

    Workflow:

    1. Listens for publish events on supported models.
    2. Retrieves updated SEO information.
    3. Calculates the correct URL path based on parent relationships.
    4. Updates the urlPath field in Hygraph and publishes the entity.

  12. Integrate CommerceTools with Voucherify

    The CommerceTools → Voucherify function processes order events to automate coupon redemption and loyalty point tracking.
    EventDescription
    OrderCreatedProcesses new orders for coupon redemption
    OrderStateChangedUpdates Voucherify when order state changes
    OrderPaymentStateChangedUpdates Voucherify when payment state changes