### CLI Project Setup Source: https://github.com/blazity/commerce-docs/blob/main/setup.mdx Installs the Enterprise Commerce project using the provided CLI tool. This simplifies the setup by allowing direct input of API keys or enabling a demo mode. ```shell yarn create commerce # or npm create commerce ``` -------------------------------- ### Start Local Development Server Source: https://github.com/blazity/commerce-docs/blob/main/README.md Starts the Mintlify local development server. This command should be run from the root directory of your documentation project, where the 'mint.json' file is located. ```bash mintlify dev ``` -------------------------------- ### Install Mintlify CLI Source: https://github.com/blazity/commerce-docs/blob/main/README.md Installs the Mintlify Command Line Interface globally using npm. This tool is essential for previewing documentation changes locally. ```bash npm i -g mintlify ``` -------------------------------- ### Install CLI Source: https://github.com/blazity/commerce-docs/blob/main/features/cli.mdx Global installation of the commerce-cli using npm, pnpm, or yarn. ```bash # npm npm install -g commerce-cli # pnpm pnpm add -g commerce-cli # yarn yarn global add commerce-cli ``` -------------------------------- ### Meilisearch Document Template Example Source: https://github.com/blazity/commerce-docs/blob/main/ai-features/vector-search.mdx This example shows a document template used for generating AI embeddings in Meilisearch. It specifies which product attributes (title, price, description) should be sent to the AI model. ```text A product titled '{{doc.title}}' worth '{{doc.minPrice}}' , whose description starts with {{doc.description|truncatewords: 20}} ``` -------------------------------- ### Generate Feature Flag Secret Source: https://github.com/blazity/commerce-docs/blob/main/setup.mdx Generates a secure, base64url encoded secret for feature flag management using Node.js's crypto module. This secret should be added to your .env.local file. ```javascript node -e "console.log(crypto.randomBytes(32).toString('base64url'))" ``` -------------------------------- ### Example OG Image Usage Source: https://github.com/blazity/commerce-docs/blob/main/features/og-images.mdx Demonstrates how to embed an OG image within a frame component for social media sharing. ```jsx Product OG image ``` -------------------------------- ### Vercel Toolbar Image Embeds Source: https://github.com/blazity/commerce-docs/blob/main/features/vercel-toolbar.mdx Examples of how images are embedded within the Vercel Toolbar documentation using the Frame component. ```html Toolbar comments ``` ```html Toolbar share ``` ```html Toolbar feature flags ``` -------------------------------- ### Shopify Category Setup (Automated) Source: https://github.com/blazity/commerce-docs/blob/main/features/hierarchical-categories.mdx Create automated categories in Shopify based on product tags for efficient hierarchical organization. This method simplifies product assignment by leveraging tags. ```Shopify When creating your category, consider where it belongs in the hierarchy so you can set appropriate conditions. For example: Given the following structure, we want to create a top-level Fashion category. ``` - Fashion - Men - Shorts - Blazers & suits - Women - Skirts - Dresses ``` To simplify the process of product assignment, create a condition based on matching tags for each sub-category. For sub-categories, create them following the same principle but with fewer conditions, as the whole point of hierarchies is to narrow down the results! ``` -------------------------------- ### Display Dynamic Content Based on Bucket Source: https://github.com/blazity/commerce-docs/blob/main/features/ab-tests.mdx An example of a React component that displays different content based on the 'bucket' parameter received in its props. This allows for A/B testing of UI elements like hero section titles. ```tsx export default function Homepage({ params: { bucket } }) { const heroTitles = { a: "Your daily trendsetting deals", b: "Your daily top deals", } return } ``` -------------------------------- ### Shopify & Algolia Starter Link Source: https://github.com/blazity/commerce-docs/blob/main/starters.mdx Provides a direct link to the Shopify and Algolia starter project on GitHub. ```markdown - [Shopify & Algolia](https://github.com/blazity/enterprise-commerce/tree/main/starters/shopify-algolia) ``` -------------------------------- ### Shopify & Meilisearch Starter Link Source: https://github.com/blazity/commerce-docs/blob/main/starters.mdx Provides a direct link to the Shopify and Meilisearch starter project on GitHub. ```markdown - [Shopify & Meilisearch](https://github.com/blazity/enterprise-commerce/tree/main/starters/shopify-meilisearch) ``` -------------------------------- ### Re-install Mintlify Dependencies Source: https://github.com/blazity/commerce-docs/blob/main/README.md Re-installs Mintlify dependencies. This command is useful for troubleshooting when the 'mintlify dev' command is not running correctly. ```bash mintlify install ``` -------------------------------- ### Architecture Diagram Source: https://github.com/blazity/commerce-docs/blob/main/starters.mdx Displays the architecture diagram for Enterprise Commerce. ```html architecture ``` -------------------------------- ### CLI Usage Source: https://github.com/blazity/commerce-docs/blob/main/features/cli.mdx Basic usage of the commerce-cli, including how to access help. ```bash commerce-cli [command] [options] commerce-cli -h ``` -------------------------------- ### Enabling AI Reviews Summary Source: https://github.com/blazity/commerce-docs/blob/main/features/reviews.mdx To enable the AI-powered reviews summary feature, set the OPEN_AI_API_KEY environment variable. ```bash OPEN_AI_API_KEY= ``` -------------------------------- ### Vercel Toolbar Features Overview Source: https://github.com/blazity/commerce-docs/blob/main/features/vercel-toolbar.mdx This section outlines the key features of the Vercel Toolbar, including its capabilities for comments, dashboard navigation, deployment sharing, draft mode, feature flags, and layout shifts. ```markdown ## Features ### Comments The Vercel Toolbar allows you to leave feedback on deployments using the Comments feature. This enables effective communication and collaboration among team members. ### Dashboard Navigation The toolbar provides quick access to important dashboard pages, allowing you to navigate seamlessly through your project's dashboard. ### Deployment Sharing With the Vercel Toolbar, you can easily share your deployments with others, facilitating collaboration and feedback gathering. ### Draft Mode The Draft Mode feature enables you to preview unpublished content from your headless CMS, allowing you to review and iterate on your content before making it live. Learn more in [Draft Mode page](/features/draft-mode) ### Feature Flags The toolbar allows you to read and set feature flag overrides for your applications, providing granular control over feature availability. ### Layout Shifts The Vercel Toolbar helps you identify and check for layout shifts in your deployment, ensuring a smooth and consistent user experience. ``` -------------------------------- ### OG Image Generation Resources Source: https://github.com/blazity/commerce-docs/blob/main/features/og-images.mdx Provides links to tools and documentation for generating and optimizing OG images. ```html You can use this tool to test and preview OG image cards generated with `@vercel/og` Learn how to optimize social media image generation through the Open Graph Protocol and `@vercel/og` library. ``` -------------------------------- ### Webhook for Near Real-time Review Updates Source: https://github.com/blazity/commerce-docs/blob/main/features/reviews.mdx Illustrates the webhook flow for near real-time review updates, involving the review provider, search index, and data cache revalidation. ```javascript // When a new review is added: // Call a webhook to update search index. // After data update: // Have the search index call another webhook to revalidate the Next.js data cache. ``` -------------------------------- ### Algolia API Keys Source: https://github.com/blazity/commerce-docs/blob/main/providers.mdx Details the necessary API keys for Algolia integration, including Application ID, Write API Key, and index names for products, categories, and reviews. ```env ALGOLIA_APP_ID ALGOLIA_WRITE_API_KEY ALGOLIA_PRODUCTS_INDEX ALGOLIA_CATEGORIES_INDEX ALGOLIA_REVIEWS_INDEX - only if you're using reviews feature ``` -------------------------------- ### Enable AI Image Captioning Source: https://github.com/blazity/commerce-docs/blob/main/ai-features/image-captioning.mdx Enables the AI Image Captioning feature by setting the IS_IMAGE_CAPTIONING_ENABLED environment variable to true and providing your Replicate API key. This configuration is necessary for the system to automatically generate captions for product images. ```bash IS_IMAGE_CAPTIONING_ENABLED=true REPLICATE_API_KEY="your api key" ``` -------------------------------- ### Webhook Command Source: https://github.com/blazity/commerce-docs/blob/main/features/cli.mdx Manages webhooks for a commerce platform, allowing creation, listing, modification, and deletion of webhooks. It can be used via CLI options or an interactive UI. ```bash commerce-cli webhook | w [opts] Options: -c, --create Create a webhook for your store -l, --list List and manage all webhooks for your store -u, --url Shopify store URL -t, --token Shopify admin access token -env, --envFilePath Path to your .env file commerce-cli webhook ``` -------------------------------- ### Environment Variables Source: https://github.com/blazity/commerce-docs/blob/main/features/cli.mdx Required environment variables for CLI operations, including Shopify and search platform specific keys. ```bash Shopify admin access token: SHOPIFY_ADMIN_ACCESS_TOKEN Shopify store URL: SHOPIFY_STORE_DOMAIN Meilisearch admin key: MEILISEARCH_ADMIN_KEY Meilisearch Host: MEILISEARCH_HOST Categories index: MEILISEARCH_CATEGORIES_INDEX Products index: MEILISEARCH_PRODUCTS_INDEX Algolia AppId: ALGOLIA_APP_ID Algolia Write Api Key: ALGOLIA_WRITE_API_KEY Categories index: ALGOLIA_CATEGORIES_INDEX Products index: ALGOLIA_PRODUCTS_INDEX ``` -------------------------------- ### Sync Command Source: https://github.com/blazity/commerce-docs/blob/main/features/cli.mdx Synchronizes products and categories from a commerce platform to a search and merchandise solution. It does not modify Shopify products and can optionally set up webhooks for continuous synchronization. ```bash commerce-cli sync | s [opts] Options: -url, --storeUrl : Platform store URL -token, --adminAccessToken : Store admin access token -host, --searchHost : Search host -adminKey, --searchAdminKey : Search admin key -categoriesIndex, --categoriesIndex : Search categories index -productsIndex, --productsIndex : Search products index -env, --envFilePath : Path to your .env file ``` -------------------------------- ### Web Performance Optimization Techniques Source: https://github.com/blazity/commerce-docs/blob/main/performance.mdx This section details the core strategies employed by Blazity Enterprise Commerce to achieve high web performance. It covers the benefits of Next.js App Router for JavaScript delivery, the advantages of static content and Incremental Static Regeneration (ISR) for faster loading, and the practice of maintaining small, feature-rich bundles with essential libraries. ```javascript /* * Next.js App Router: Optimizes JavaScript delivery for faster loading times. * Improves metrics like Total Blocking Time (TBT) and Time To Interactive (TTI). */ /* * Static Content and ISR (Incremental Static Regeneration): * Leverages static pages for instant display, contrasting with dynamic pages. * Improves metrics like Speed Index. */ /* * Small & Feature-Rich Bundles: * Maintains minimal bundle sizes. * Integrates essential libraries such as React Hook Form, Zod, and SWR. */ ``` ```html Real performance score of Enterprise Commerce ``` -------------------------------- ### Shopify API Keys Source: https://github.com/blazity/commerce-docs/blob/main/providers.mdx Lists the essential API keys required for Shopify integration. These include store domain, storefront access token, admin access token, and app API secret key. ```env SHOPIFY_STORE_DOMAIN SHOPIFY_STOREFRONT_ACCESS_TOKEN SHOPIFY_ADMIN_ACCESS_TOKEN SHOPIFY_APP_API_SECRET_KEY ``` -------------------------------- ### Algolia Virtual Replica Naming Convention Source: https://github.com/blazity/commerce-docs/blob/main/providers.mdx Illustrates the naming convention for Algolia virtual replicas used for sorting. This pattern ensures that sorting options like price and update time are correctly configured. ```text {indexName}_price_desc {indexName}_price_asc {indexName}_rating_desc {indexName}_updated_asc {indexName}_updated_desc ``` -------------------------------- ### Environment Variables for Reviews Integration Source: https://github.com/blazity/commerce-docs/blob/main/features/reviews.mdx Required environment variables for integrating the Judge.me reviews provider. These should be set in your Vercel Dashboard or .env.local file. ```bash JUDGE_BASE_URL= JUDGE_API_TOKEN= SHOPIFY_STORE_DOMAIN= ``` -------------------------------- ### Meilisearch Products Index Configuration Source: https://github.com/blazity/commerce-docs/blob/main/providers.mdx Defines the filterable and sortable attributes for the Meilisearch products index. These settings optimize search performance and filtering capabilities. ```JSON [ "collections", "collections.handle", "collections.id", "flatOptions", "handle", "minPrice", "tags", "variants.availableForSale", "vendor", "hierarchicalCategories", "hierarchicalCategories.lvl0", "hierarchicalCategories.lvl1", "hierarchicalCategories.lvl2", "avgRating" ] ``` ```JSON [ "minPrice", "updatedAtTimestamp", "avgRating" ] ``` -------------------------------- ### Meilisearch Environment Variables Source: https://github.com/blazity/commerce-docs/blob/main/providers.mdx Essential environment variables required for Meilisearch integration. These variables store API keys, index names, and host information. ```APIDOC MEILISEARCH_PRODUCTS_INDEX MEILISEARCH_CATEGORIES_INDEX MEILISEARCH_ADMIN_KEY MEILISEARCH_HOST MEILISEARCH_REVIEWS_INDEX - only if you're using reviews feature ``` -------------------------------- ### Enterprise Commerce Reviews API Source: https://github.com/blazity/commerce-docs/blob/main/features/reviews.mdx Documentation for the Enterprise Commerce Reviews API, outlining key functionalities and data structures. Note: Specific endpoints and schemas are conceptual and may vary based on implementation. ```APIDOC ReviewProviderIntegration: description: Manages integration with third-party review providers. providers: - name: Judge.me authentication: type: API_KEY parameters: - name: JUDGE_BASE_URL type: string description: Base URL for the Judge.me API. required: true - name: JUDGE_API_TOKEN type: string description: API token for authenticating with Judge.me. required: true data_sync: method: CRON_JOB frequency: daily description: Periodically syncs reviews with the search index. webhooks: on_new_review: description: Triggered when a new review is submitted. action: Call webhook to update search index. on_data_update: description: Triggered after review data is updated in the search index. action: Call webhook to revalidate data cache. AISummary: description: Generates and manages AI-powered summaries for product reviews. configuration: - name: OPEN_AI_API_KEY type: string description: API key for OpenAI to generate review summaries. required: false update_frequency: description: Weekly update trigger. condition: Only if the product receives a new review. functionality: - Generates summaries highlighting product's best and worst aspects. - Ensures SEO can index changes while providing relevant user information. ``` -------------------------------- ### FilterBuilder Usage with Algolia Source: https://github.com/blazity/commerce-docs/blob/main/features/filtering.mdx Illustrates the usage of the FilterBuilder class for Algolia queries, showcasing how to build filter expressions with comparisons, logical operators, and grouped conditions, noting potential syntax differences. ```typescript const filter = new FilterBuilder() .where("price", 100, ComparisonOperators.GreaterThan) .and() .group((sub) => sub.where("category", "Electronics").or().where("category", "Computers") ) .build(); // This will generate the following filter expression: // price > 100 AND (category:"Electronics" OR category:"Computers") ``` -------------------------------- ### Dynamic Metadata Generation Source: https://github.com/blazity/commerce-docs/blob/main/features/seo.mdx Export an async function `generateMetadata` in your `page.tsx` or `layout.tsx` file for dynamic metadata. This function receives route parameters, fetches data, and returns a `Promise`. ```typescript export async function generateMetadata({ params: { slug } }: { params: { slug: string } }): Promise { const page = await getPage(slug) return { title: page?.seo?.title || page?.title, description: page?.seo?.description || page?.bodySummary, referrer: "origin-when-cross-origin", creator: "Blazity", publisher: "Blazity", } } ``` -------------------------------- ### Redirects Configuration File Source: https://github.com/blazity/commerce-docs/blob/main/features/redirects.mdx Defines the structure for managing SEO redirects. Each key is an old URL path, with values specifying the destination URL and redirect type (permanent or temporary). ```json { "/old": { "destination": "/new", "permanent": true }, "/blog/post-old": { "destination": "/blog/post-new", "permanent": true }, "/external": { "destination": "https://example.com", "permanent": true } } ``` -------------------------------- ### Syncing Categories with Search Platform Source: https://github.com/blazity/commerce-docs/blob/main/features/hierarchical-categories.mdx Push category data to the search platform using the CLI sync command. Ensure the SHOPIFY_HIERARCHICAL_NAV_HANDLE variable matches your navigation handle. ```CLI Use our [CLI](/cli#sync) with the `sync` command. Ensure that `SHOPIFY_HIERARCHICAL_NAV_HANDLE` variable matches your navigation handle. ``` -------------------------------- ### Enable Google Analytics Source: https://github.com/blazity/commerce-docs/blob/main/features/analytics.mdx Enable Google Analytics integration by setting the IS_GTM_ENABLED flag to 'true' in your .env file. This automatically adds the Google Analytics tracking code. ```bash IS_GTM_ENABLED=true ``` -------------------------------- ### Next.js Metadata API Source: https://github.com/blazity/commerce-docs/blob/main/features/seo.mdx API documentation for customizing meta tags in a Next.js application. Covers static metadata export using a `metadata` object and dynamic metadata generation via `generateMetadata` function. ```APIDOC Next.js Metadata API: 1. Static Metadata: - Export a constant `metadata` object in `page.tsx` or `layout.tsx`. - Suitable for static metadata values. - Example: ```typescript export const metadata: Metadata = { title: "Page Title", description: "Page Description", } ``` 2. Dynamic Metadata: - Export an async function `generateMetadata` in `page.tsx` or `layout.tsx`. - Receives route parameters: `({ params: { slug } }: { params: { slug: string } })`. - Returns `Promise`. - Use for data fetching or dynamic operations before returning metadata. - Example: ```typescript export async function generateMetadata({ params: { slug } }: { params: { slug: string } }): Promise { const page = await getPage(slug); return { title: page?.seo?.title || page?.title, description: page?.seo?.description || page?.bodySummary, }; } ``` Dependencies: - `getPage(slug)`: Assumed function to fetch page data based on slug. Metadata Object Structure: - `title`: string - `description`: string - `openGraph`: object (optional) - `title`: string - `description`: string - `referrer`: string (optional) - `creator`: string (optional) - `publisher`: string (optional) ``` -------------------------------- ### Algolia Products Index Faceting Attributes Source: https://github.com/blazity/commerce-docs/blob/main/providers.mdx Specifies the attributes for faceting within the Algolia 'products' index. This configuration is crucial for filtering and searching product data effectively. ```json [ "collections.handle", "collections.id", "flatOptions.color", "handle", "minPrice", "tags", "variants.availableForSale", "vendor", "hierarchicalCategories.lvl0", "hierarchicalCategories.lvl1", "hierarchicalCategories.lvl2", "avgRating" ] ``` -------------------------------- ### FilterBuilder API Reference Source: https://github.com/blazity/commerce-docs/blob/main/features/filtering.mdx Provides a detailed reference for the FilterBuilder class, including its enums for operators and descriptions of all available methods for constructing filter expressions. ```apidoc Enums: ComparisonOperators: Equal ( = ) NotEqual ( != ) GreaterThan ( > ) GreaterThanOrEqual ( >= ) LessThan ( < ) LessThanOrEqual ( <= ) To ( TO ) LogicalOperators: And (AND) Or (OR) Not (NOT) SpecialOperators: Exists (EXISTS) IsEmpty (IS EMPTY) IsNull (IS NULL) Methods: where(attribute: string, operator: ComparisonOperators | SpecialOperators, value?: Value): FilterBuilder Adds a filtering condition to the expression. Parameters: attribute: The attribute to filter on. operator: The comparison or special operator to use. value (optional): The value to compare against. Can be a single value or an array of values. Returns: The FilterBuilder instance for chaining. to(attribute: string, min: number, max: number): FilterBuilder Adds a range filtering condition to the expression. Parameters: attribute: The attribute to filter on. min: The minimum value of the range. max: The maximum value of the range. Returns: The FilterBuilder instance for chaining. exists(attribute: string): FilterBuilder Adds an "EXISTS" condition to the expression. Parameters: attribute: The attribute to check for existence. Returns: The FilterBuilder instance for chaining. isEmpty(attribute: string): FilterBuilder Adds an "IS EMPTY" condition to the expression. Parameters: attribute: The attribute to check for emptiness. Returns: The FilterBuilder instance for chaining. isNull(attribute: string): FilterBuilder Adds an "IS NULL" condition to the expression. Parameters: attribute: The attribute to check for null value. Returns: The FilterBuilder instance for chaining. in(attribute: string, values: (string | number)[]): FilterBuilder Adds an "IN" condition to the expression. Parameters: attribute: The attribute to filter on. values: An array of values to check against. Returns: The FilterBuilder instance for chaining. ``` -------------------------------- ### Configure A/B Test Routes Source: https://github.com/blazity/commerce-docs/blob/main/features/ab-tests.mdx Defines the routes for A/B testing, specifying the page, cookie name, and buckets for each route. This configuration is essential for enabling A/B testing on different parts of the storefront. ```tsx const ROUTES: Record = { "/": { page: "/home", cookie: "bucket-home", buckets: BUCKETS.HOME, }, } ``` -------------------------------- ### FilterBuilder Usage with Meilisearch Source: https://github.com/blazity/commerce-docs/blob/main/features/filtering.mdx Demonstrates how to construct a complex filter expression using the FilterBuilder class for Meilisearch queries. It includes chaining methods for comparisons, logical operators, and grouped conditions. ```typescript const filter = new FilterBuilder() .where("price", ComparisonOperators.GreaterThan, 100) .and() .group((sub) => sub .where("category", "=", "Electronics") .or() .where("category", "=", "Computers") ) .build(); // This will generate the following filter expression: // price > 100 AND (category = "Electronics" OR category = "Computers") ``` -------------------------------- ### Meilisearch Categories Index Configuration Source: https://github.com/blazity/commerce-docs/blob/main/providers.mdx Specifies the filterable attributes for the Meilisearch categories index, enabling efficient searching and filtering of category data. ```JSON [ "handle", "id" ] ``` -------------------------------- ### FilterBuilder Build Expression Source: https://github.com/blazity/commerce-docs/blob/main/features/filtering.mdx The build method compiles the constructed filtering conditions into a final string representation. ```APIDOC build(): string Builds the final filtering expression as a string. Returns the filtering expression string. ``` -------------------------------- ### Static Metadata Export Source: https://github.com/blazity/commerce-docs/blob/main/features/seo.mdx Export a constant `metadata` object in your `page.tsx` or `layout.tsx` file for static metadata. This is suitable when metadata values are static and do not require dynamic processing. ```typescript export const metadata: Metadata = { title: "Acme", openGraph: { title: "Acme", description: "Acme is a...", }, } ``` -------------------------------- ### Enable/Disable Vercel Analytics Source: https://github.com/blazity/commerce-docs/blob/main/features/analytics.mdx Configure Vercel Analytics by setting the IS_VERCEL_ANALYTICS_ENABLED flag in your .env file. Set to 'true' to enable or 'false' to disable. ```bash IS_VERCEL_ANALYTICS_ENABLED=false ``` -------------------------------- ### Algolia Categories Index Faceting Attributes Source: https://github.com/blazity/commerce-docs/blob/main/providers.mdx Defines the attributes for faceting within the Algolia 'categories' index. This ensures proper categorization and filtering of category data. ```json handle ``` -------------------------------- ### Hierarchical Categories Data Structure Source: https://github.com/blazity/commerce-docs/blob/main/features/hierarchical-categories.mdx This JSON structure defines how to represent hierarchical categories when pushing products to a search solution. It includes levels from lvl0 to lvl2, with each level containing category paths. ```json { "hierarchicalCategories": { "lvl0": ["fashion"] "lvl1": ["fashion > women", "fashion > men"] "lvl2": ["fashion > women > skirts", "fashion > women > dresses", "fashion > men > shorts", "fashion > men > blazers-and-suits"] } } ```