DOCSEARCHbyAlgolia
Submit Docs

High Velocity Documentation

website·Indexed 31 days ago

https://documents.gohighvelocity.com

Developer documentation for High Velocity, featuring reference guides for CMS types and commerce cart functionality. Includes detailed specifications for CMS objects like Page, Media, and various content blocks, as well as commerce types such as Order, BaseCart, and Payment.

Tokens
82.7K
Snippets
401
Records
776
Agent score
50%

What's inside High Velocity

  1. Overview of hv-ui product details components

    The hv-ui product details package provides a set of components used to display product information in an accordion format. These components are built using Radix UI's Accordion primitive. The available components are:

    • Accordion: The root wrapper that manages state and contains the accordion parts.
    • AccordionItem: A wrapper for a single collapsible section.
    • AccordionTrigger: The interactive element that toggles the collapsed state of an item.
    • AccordionContent: The collapsible area containing the item's content.
    • DetailsList: An unordered list component for rendering arrays of items (currently unused in the front-end app).

  2. Overview of High Velocity Integration Package Structure

    Integration packages for High Velocity Next.js apps provide vendor-agnostic interfaces for services like Catalog, Cart, Content, Search, and OMS. They follow a consistent structure consisting of:

    • Models: Zod schemas and type definitions acting as the contract between the integration and the app.
    • Integration Functions: Factory functions for server-side data fetching and mutations.
    • Hooks: Client-side functions for fetches and mutations.
    • UI Components: Reusable React components based on integration models.

  4. Overview of the High Velocity theming system

    Theming allows developers to control the visual look and feel of their application to enhance brand identity and ensure a cohesive user experience. The system provides centralized control over colors, fonts, and component styling. The themes are based on shadcn/ui, focusing on modern aesthetics, responsiveness, and visual coherence.

  5. Overview of High Velocity primary navigation types

    The High Velocity front-end application implements two primary navigation patterns based on viewport size and user interaction:

    1. Drawer Navigation: A hamburger or slide-in menu designed for small viewports and reduced layouts. It renders each level of the navigation tree in its own separate pane.
    2. Flyout Navigation: A menu triggered by hover or keyboard selection. It displays categories in individual panes, grouping all subcategory links and navigation content together.

    Both navigation types share the same underlying navigation model and are implemented using hv-ui components.

  6. Overview of High Velocity Structured Data for SEO

    The High Velocity front-end app uses JSON-LD structured data based on the Schema.org vocabulary to help search engines index content and generate rich snippets. The implementation utilizes the schema-dts library for TypeScript definitions. The app includes the following structured data objects:

    1. Organization: Details about the company.
    2. WebSite: Details about the website itself.
    3. WebPage: Information about specific indexable pages.
    4. Articles: Context and content for article pages.
    5. Products: Attributes and pricing for product detail pages.
    6. Video: Details regarding video content.

  7. Overview of hv-ui totals components

    The hv-ui totals package provides a suite of components to build pricing displays. The primary components include:

    • TotalsContainer: A wrapper for all totals-related components.
    • Total: A flex wrapper used to pair a TotalLabel and a TotalValue.
    • TotalLabel: Displays the description of the total (e.g., "Subtotal").
    • TotalValue: Displays the monetary value (e.g., "$999.00").
    • TotalAccordion: An optional accordion for totals content, supporting a controlled value state.
    • TotalAccordionTrigger: The trigger element for the TotalAccordion.
    • TotalValueAccordion: A wrapper used to position content within an accordion context.
    • TotalAccordionContent: The content area inside the TotalAccordion.

  9. Overview of High Velocity Navigation Menu components

    The High Velocity front-end app uses a client-side flyout navigation system built with Radix's NavigationMenuPrimitive. The navigation is structured using a tree of NavigationMenuItem nodes. The @hv/ui/navigation-menu package provides the following components:

    • NavigationMenu: The main wrapper that styles the navigation and renders children.
    • NavigationMenuList: Container for top-level menu items.
    • NavigationMenuItem: A top-level menu item containing a link or a trigger/content combination.
    • NavigationMenuTrigger: A button that toggles associated content.
    • NavigationMenuContent: A wrapper for the content associated with a trigger.
    • NavigationMenuLink: A navigation link.
    • NavigationMenuViewport: Controls the rendering of the active navigation content.
    • NavigationMenuIndicator: An optional component to highlight the active trigger (currently unused in the High Velocity front-end app).

  10. Overview of High Velocity Theming

    Theming in High Velocity allows developers to control the visual look and feel of their application to enhance brand identity and ensure a cohesive user experience. The system provides centralized control over colors, fonts, and component styling. The themes are based on shadcn/ui, focusing on modern aesthetics, responsiveness, and visual coherence.

  11. Overview of High Velocity hv-ui form components

    The hv-ui package provides a set of seven atomic form components used to build form controls within the High Velocity front-end application (specifically via the hv-common package). These components include:

    • Checkbox: Customizable checkbox element.
    • Form Select: Customizable select element.
    • Select: A select element based on Radix UI.
    • Input: Customizable input element.
    • Input Error: Feedback component for invalid form inputs.
    • Label: Standard input label.
    • Radio Group: Customizable radio group and radio group item elements.

  12. Overview of @hv/commerce UI component packages

    The @hv/commerce packages provide a set of reusable UI components built with integrated data models. These components are not standalone user interfaces; instead, they are designed to be composed into larger, custom reusable components within your application.