Pack Digital

https://docs.packdigital.com
Admin
Pack Digital is a digital experience platform purpose-built for Shopify Hydrogen, offering visual...
Tokens:123,873
Snippets:837
Trust Score:8.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Initialize Blueprint Theme with Pack CLI

Source: https://docs.packdigital.com/developer-resources/blueprint-setup

This command uses the Pack CLI tool to clone the Blueprint Theme repository, install necessary Node.js packages, and prepare the development environment for immediate use. It streamlines the initial setup process for a new project.

```bash
npx @pack/create-hydrogen@latest
```

--------------------------------

### Initialize New Hydrogen Storefront with Pack CLI

Source: https://docs.packdigital.com/getting-started/quickstart

Use this command to quickly set up a new Hydrogen storefront project using Pack's command-line interface. It clones Pack's Bluprint theme, installs dependencies, and enables local development with default Shopify data, streamlining the initial setup process.

```Shell
npx @pack/create-hydrogen@latest
```

--------------------------------

### Color Field Configuration Example

Source: https://docs.packdigital.com/developer-resources/section-schema-api

Illustrates a practical example of how to configure a color field component with specific properties like name, label, description, color format, a list of predefined colors, and a default value. This JSON object demonstrates a typical setup.

```APIDOC
  {
    component: 'color',
    name: 'colorName',
    label: 'Color Field',
    description: 'Pick a color',
    colorFormat: 'hex',
    colors: ['#FF0000', '#00FF00', '#0000FF'],
    widget: 'sketch',
    defaultValue: "#00FF00",
  }
```

--------------------------------

### JavaScript Example: Bulk Publish Articles

Source: https://docs.packdigital.com/content-management-api/mutations/articlePublishBulk

Demonstrates how to use the `@pack/client` library to execute the `articlePublishBulk` GraphQL mutation. This snippet includes client initialization, the GraphQL query definition, variable setup, and the API call.

```JavaScript
import { PackClient } from '@pack/client'
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
  mutation ArticlePublishBulk($ids: [ID!]!) {
    articlePublishBulk(ids: $ids) {
      id
    }
  }
`;

const variables = {
  ids: ['1', '2']
};
const response = await packClient.fetch(query, { variables: variables });
console.log(response.data);
```

--------------------------------

### Example Configuration for Date Field Component

Source: https://docs.packdigital.com/section-schema-api

Illustrates a practical configuration for the date field component, showing how to set its name, label, and specify time and date formatting options. This example demonstrates a typical setup for embedding a date picker in a form.

```JSON
  {
    component: 'date',
    name: 'date',
    label: 'Date',
    timeFormat: true,
    dateFormat: 'MM/DD/YYYY',
  }
```

--------------------------------

### Example Configuration for Volume Field

Source: https://docs.packdigital.com/section-schema-api

This JSON snippet provides a practical example of how to configure a Volume field. It sets the component type to 'volume', assigns a name ('productVolume'), a label ('Product Volume'), and an optional description, illustrating a typical setup for a volume input field.

```JSON
  {
    component: 'volume',
    name: 'productVolume',
    label: 'Product Volume',
    description: 'Volume of the product',
  }
```

--------------------------------

### JavaScript Example: Creating a Template with PackClient

Source: https://docs.packdigital.com/content-management-api/mutations/templateCreate

Demonstrates how to use the `@pack/client` library to execute the `templateCreate` GraphQL mutation. This example shows the initialization of the PackClient with an API token, the definition of the GraphQL query, the necessary input variables, and the execution of the API call to create a new template.

```JavaScript
import { PackClient } from '@pack/client'
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
  mutation TemplateCreate($input: TemplateCreateInput!) {
    templateCreate(input: $input) {
      id
      title
      type
      sectionIds
    }
  }
`;

const variables = {
  input: {
    title: 'YOUR-TEMPLATE-TITLE',
    type: 'YOUR-TEMPLATE-TYPE',
    sectionIds: ['YOUR-SECTION-ID']
  }
};

const response = await packClient.fetch(query, { variables: variables });
console.log(response.data);
```

--------------------------------

### Example Configuration for Color Field Component

Source: https://docs.packdigital.com/section-schema-api

Illustrates a practical configuration for the color field component, showing how to set its name, label, description, color format, specific color options, widget type, and a default value. This example demonstrates a typical setup for embedding a color picker in a form.

```JSON
  {
    component: 'color',
    name: 'colorName',
    label: 'Color Field',
    description: 'Pick a color',
    colorFormat: 'hex',
    colors: ['#FF0000', '#00FF00', '#0000FF'],
    widget: 'sketch',
    defaultValue: "#00FF00",
  }
```

--------------------------------

### Example Configuration for Dimension Field

Source: https://docs.packdigital.com/section-schema-api

This JSON snippet provides a practical example of how to configure a Dimension field. It sets the component type to 'dimension', assigns a name ('productHeight'), a label ('Product Height'), and an optional description, illustrating a typical setup for a dimension input field.

```JSON
  {
    component: 'dimension',
    name: 'productHeight',
    label: 'Product Height',
    description: 'Height of the product',
  }
```

--------------------------------

### Install @pack/client using npm

Source: https://docs.packdigital.com/pack-client

This command installs the @pack/client package, a client library for interacting with the Pack GraphQL API, using npm (Node Package Manager). This is the initial step to set up the library in your project.

```Shell
npm install @pack/client
```

--------------------------------

### Install Node.js Project Dependencies

Source: https://docs.packdigital.com/developer-resources/blueprint-setup

After cloning a Pack Blueprint project, use npm to install all necessary Node.js packages. This command fetches and sets up the project's dependencies defined in `package.json`, preparing the environment for development or production builds.

```bash
npm install
```

--------------------------------

### Example Configuration for Number Field

Source: https://docs.packdigital.com/section-schema-api

This JSON snippet provides a practical example of how to configure a Number field. It sets the component type to 'number', assigns a name ('productCount'), a label ('Product Count'), and an optional description, illustrating a typical setup for a numeric input field.

```JSON
  {
    component: 'number',
    name: 'productCount',
    label: 'Product Count',
    description: 'How many products in the carousel',
  }
```

--------------------------------

### Install @pack/hydrogen client

Source: https://docs.packdigital.com/api-reference/pack-hydrogen

Installs the @pack/hydrogen package using npm, providing necessary clients and utilities for Hydrogen storefront integration.

```bash
npm install @pack/hydrogen
```

--------------------------------

### JavaScript Example: Publishing Multiple Pages with PackClient

Source: https://docs.packdigital.com/content-management-api/mutations/pagePublishBulk

This example demonstrates how to use the `@pack/client` library in JavaScript to execute the `pagePublishBulk` GraphQL mutation, including the GraphQL query definition and variable setup.

```JavaScript
import { PackClient } from '@pack/client'
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
mutation PagePublishBulk($ids: [ID!]!) {
  pagePublishBulk(ids: $ids) {
    id
  }
}
`
const variables = {
  ids: [
      "page-id-1",
      "page-id-2"
  ]
}
const response = await packClient.fetch(query, { variables: variables });
console.log(response.data);
```

--------------------------------

### JavaScript Example: Publishing a Schedule

Source: https://docs.packdigital.com/content-management-api/mutations/schedulePublish

This code snippet demonstrates how to use the `@pack/client` library in JavaScript to send a GraphQL mutation to publish a schedule. It includes client initialization, the GraphQL query definition, and variable setup for the schedule ID.

```JavaScript
import { PackClient } from '@pack/client'
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
  mutation schedulePublish($id: ID!) {
    schedulePublish(id: $id) {
      id
      name
      status
    }
  }
`;

const variables = {
  id: 'YOUR-SCHEDULE-ID'
};

const response = await packClient.fetch(query, { variables: variables });
console.log(response.data);
```

--------------------------------

### JavaScript Example: Restore Site Settings with PackClient

Source: https://docs.packdigital.com/content-management-api/mutations/siteSettingsRestore

Illustrates how to invoke the `siteSettingsRestore` GraphQL mutation using the `@pack/client` library in JavaScript. This example covers client initialization, GraphQL query definition with variables, and executing the mutation to restore site settings.

```JavaScript
import { PackClient } from '@pack/client'
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
  mutation siteSettingsRestore($revisionId: ID!) {
    siteSettingsRestore(revisionId: $revisionId) {
      id
      title
      description
      logo {
        url
      }
      favicon {
        url
      }
      theme {
        primaryColor
        secondaryColor
        backgroundColor
        textColor
      }
      socialLinks {
        name
        url
      }
      meta {
        title
        description
        keywords
      }
      createdAt
      updatedAt
    }
  }
`;
const variables = {
  revisionId: 'REVISION_ID'
};

const response = await packClient.fetch(query, { variables: variables });
console.log(response.data);
```

--------------------------------

### JavaScript Example: Creating a Blog with PackClient

Source: https://docs.packdigital.com/content-management-api/mutations/blogCreate

Illustrates how to programmatically create a blog using the `@pack/client` library in JavaScript. This example demonstrates initializing the `PackClient` with an API token, constructing a GraphQL mutation query with a fragment for blog resource fields, defining the input variables for the new blog, and executing the fetch operation to send the request and log the response data.

```JavaScript
import { PackClient } from '@pack/client'
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
  fragment BlogResourceFields on BlogResource {
    title
    handle
    description
  }
  mutation BlogCreate($input: BlogCreateInput!) {
    blogCreate(input: $input) {
      ...BlogResourceFields
    }
  }
`;

const variables = {
  "input": {
    "title": "My Blog",
    "handle": "my-blog",
    "description": "This is my blog",
    "seo": {
      "title": "My Blog",
      "description": "This is my blog",
      "image": "https://example.com/image.jpg",
      "keywords": ["blog", "example"]
    },
    "sectionIds": ["section-id"]
  }
};

const response = await packClient.fetch(query, { variables });

console.log(response.data);
```

--------------------------------

### Example Configuration for Link Field

Source: https://docs.packdigital.com/section-schema-api

This JSON snippet provides a practical example of how to configure a Link field. It sets the component type to 'link', assigns a name ('linkName'), a label ('Our company page'), and a default value with specific text and a URL, demonstrating a typical link input setup.

```JSON
    {
      component: 'link',
      name: 'linkName',
      label: 'Our company page',
      defaultValue: {
        text: 'Our mission',
        url: '/pages/about-us'
      }
    }
```

--------------------------------

### Example URL Combinations for Manual A/B Test Bucketing

Source: https://docs.packdigital.com/testing-analytics/ab-testing

Illustrates various valid combinations of query parameters that can be appended to a URL to manually bucket a user into a specific A/B test and variant. These examples demonstrate how to use `test_id`, `test_handle`, `test_variant_id`, and `test_variant_handle` together.

```HTTP Query Parameters
?test_handle=ZZZ&test_variant_handle=YYY
?test_id=ZZZ&test_variant_id=YYY
?test_handle=ZZZ&test_variant_id=YYY
?test_id=ZZZ&test_variant_handle=YYY
```

--------------------------------

### Complete Product Route Example for Remix/Hydrogen

Source: https://docs.packdigital.com/implementation-guides/route-implementation

This TypeScript code defines a full product page route, including a `meta` function for SEO, a `loader` function for data fetching, and the default component for rendering. It fetches product data from Shopify and Pack using embedded GraphQL queries, handles URL parameters for selected options, sends Shopify analytics, and renders dynamic sections. Dependencies include `@shopify/remix-oxygen`, `@remix-run/react`, `@pack/react`, and custom components.

```TypeScript
import { json } from '@shopify/remix-oxygen';
import { useLoaderData } from '@remix-run/react';
import type { LoaderFunctionArgs, MetaFunction } from '@shopify/remix-oxygen';
import { RenderSections } from '@pack/react';
import { PackTestRoute } from '@pack/hydrogen';
import { ProductProvider } from '~/components/ProductProvider';
import { Product } from '~/components/Product';
import { ProductSchemaMarkup } from '~/components/SchemaMarkup';

const PRODUCT_PAGE_QUERY = `#graphql
query ProductPage($handle: String!) {
  productPage(handle: $handle) { ... }
}
`;

const PRODUCT_QUERY = `#graphql
query Product($handle: String!, $selectedOptions: [SelectedOptionInput!]) {
  product(handle: $handle) { ... }
}
`;

const SITE_SETTINGS_QUERY = `#graphql
query SiteSettings {
  siteSettings { ... }
}
`;

export const meta: MetaFunction = ({ data }) => {
  if (!data) return [{ title: 'Product Not Found' }];
  const seo = data.productPage?.seo;
  return [
    { title: seo?.title || `${data.product.title} | ${data.siteTitle}` },
    { name: 'description', content: seo?.description || data.product.description.substring(0, 160) },
    { property: 'og:title', content: data.product.title },
    { property: 'og:description', content: data.product.description.substring(0, 160) },
    { property: 'og:image', content: data.product.images.nodes[0]?.url },
    { name: 'twitter:card', content: 'summary_large_image' },
  ];
};

export async function loader({ params, context, request }: LoaderFunctionArgs) {
  const { handle } = params;
  if (!handle) throw new Response('Product handle is required', { status: 400 });

  const selectedOptions: Array<{ name: string; value: string }> = [];
  new URL(request.url).searchParams.forEach((value, name) => {
    selectedOptions.push({ name, value });
  });

  try {
    const [packData, shopifyData, siteSettingsData] = await Promise.all([
      context.pack.query(PRODUCT_PAGE_QUERY, { variables: { handle }, cache: context.storefront.CacheLong() }),
      context.storefront.query(PRODUCT_QUERY, { variables: { handle, selectedOptions }, cache: context.storefront.CacheShort() }),
      context.pack.query(SITE_SETTINGS_QUERY, { cache: context.storefront.CacheLong() }),
    ]);

    const product = shopifyData.product;
    if (!product) throw new Response('Product not found', { status: 404 });

    const selectedVariant = product.selectedVariant ?? product.variants.nodes[0];
    if (selectedVariant) {
      context.storefront.sendShopifyAnalytics({
        pageType: 'product',
        resourceId: product.id,
        products: [{
          productGid: product.id,
          variantGid: selectedVariant.id,
          name: product.title,
          variantName: selectedVariant.title,
          brand: product.vendor,
          price: selectedVariant.price.amount,
        }],
      });
    }

    return json({
      product,
      productPage: packData.data.productPage,
      selectedVariant,
      siteTitle: siteSettingsData.data.siteSettings.seo.title,
      url: new URL(request.url).href,
      packTestInfo: packData.packTestInfo,
    });
  } catch (error) {
    console.error('Error fetching product:', error);
    throw new Response('Error fetching product data', { status: 500 });
  }
}

export default function ProductRoute() {
  const { product, productPage, selectedVariant, siteTitle, url } = useLoaderData<typeof loader>();
  return (
    <ProductProvider data={product} initialVariantId={selectedVariant?.id || null}>
      <PackTestRoute />
      <Product product={product} />
      {productPage && <RenderSections content={productPage} />}
      <ProductSchemaMarkup product={product} siteTitle={siteTitle} url={url} />
    </ProductProvider>
  );
}
```

--------------------------------

### Install @pack/client package

Source: https://docs.packdigital.com/api-reference/pack-client

This command installs the @pack/client package using npm, a popular package manager for JavaScript. It is the first step to integrate the client library into your project, allowing you to interact with the Pack GraphQL API.

```bash
npm install @pack/client
```

--------------------------------

### Install @pack/hydrogen Client

Source: https://docs.packdigital.com/pack-hydrogen

Instructions to install the @pack/hydrogen package using a package manager like npm. This is the first step to integrate Pack with your Hydrogen storefront.

```npm
npm install @pack/hydrogen
```

--------------------------------

### JavaScript Example: Publish a Blog using PackClient

Source: https://docs.packdigital.com/content-management-api/mutations/blogPublish

This JavaScript example demonstrates how to use the `@pack/client` library to execute the `blogPublish` GraphQL mutation. It shows how to initialize the client with a token, define the GraphQL query, set variables for the blog ID and an optional publish comment, and then execute the mutation to publish a blog.

```JavaScript
import { PackClient } from '@pack/client';
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
  mutation BlogPublish($id: ID!, $publishComment: String) {
    blogPublish(id: $id, publishComment: $publishComment) {
      id
      title
      handle
      description
    }
  }
`;

const variables = {
  id: 'YOUR-BLOG-ID',
  publishComment: 'YOUR-PUBLISH-COMMENT'
};

const response = await packClient.fetch(query, { variables: variables });
console.log(response.data);
```

--------------------------------

### Image Field Configuration Example

Source: https://docs.packdigital.com/developer-resources/section-schema-api

An example JSON object demonstrating how to configure an Image field with its component type, name, label, and an optional description.

```JavaScript
{
  component: 'image',
  name: 'heroImage',
  label: 'Hero Image',
  description: 'Image for hero banner',
}
```

--------------------------------

### Rich Text Field Configuration Example

Source: https://docs.packdigital.com/developer-resources/section-schema-api

An example JSON object demonstrating how to configure a Rich Text field with its component type, name, label, and an optional description.

```JavaScript
{
  component: 'rich-text',
  name: 'productInfoBlurb',
  label: 'Product Info Blurb',
  description: 'Short details and information about the product',
}
```

--------------------------------

### JavaScript Example: Publish an Article using PackClient

Source: https://docs.packdigital.com/content-management-api/mutations/articlePublish

Demonstrates how to use the `@pack/client` library to execute the `articlePublish` GraphQL mutation. This example shows how to initialize the client, define the mutation query with variables, and process the response.

```javascript
import { PackClient } from '@pack/client'
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
  mutation ArticlePublish($id: ID!, $publishComment: String) {
    articlePublish(id: $id, publishComment: $publishComment) {
      id
      title
      handle
      description
      author
      category
      tags
      sections {
        id
        title
        handle
        description
      }
    }
  }
`;
const variables = {
    "id": "1",
    "publishComment": "Publishing article."
};
const response = await packClient.fetch(query, { variables: variables });
console.log(response.data);
```

--------------------------------

### Text Area Field Configuration Example

Source: https://docs.packdigital.com/developer-resources/section-schema-api

An example JSON object demonstrating how to configure a Text Area field with its component type, name, label, and an optional description.

```JavaScript
{
  component: 'textarea',
  name: 'faqAnswer',
  label: 'FAQ Answer',
  description: 'Short description for the question',
}
```

--------------------------------

### Example HTML Product Information Blurb

Source: https://docs.packdigital.com/section-schema-api

This snippet demonstrates a multi-paragraph HTML blurb that can include various HTML elements such as strong tags, links, images, and unordered lists. It serves as an example of rich text content that might be rendered from a content field.

```HTML
  <p>This is a product info blurb</p>
  <p>It can be multiple paragraphs</p>
  <p>And can include <strong>HTML</strong></p>
  <p>Like <a href="/pages/about-us">links</a></p>
  <p>Or images</p>
  <img src="https://via.placeholder.com/150" alt="Placeholder" />
  <p>Or lists</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
```

--------------------------------

### Example: Bulk Assign Sections to Product Pages with PackClient

Source: https://docs.packdigital.com/content-management-api/mutations/productPageAddSectionsBulk

Demonstrates how to use the `@pack/client` library to execute the `productPageAddSectionsBulk` mutation. This example shows the GraphQL query, the necessary variables for page and section IDs, and how to fetch and log the response.

```JavaScript
import { PackClient } from '@pack/client'
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
  mutation ProductPageAddSectionsBulk($ids: [ID!]!, $input: [ProductPageAddSectionsInput!]!) {
    productPageAddSectionsBulk(ids: $ids, input: $input) {
      id
    }
  }
`;

const variables = {
  "ids": ["product-page-id-1", "product-page-id-2"],
  "input": [
    {
      "sectionIds": ["section-id-1", "section-id-2"],
      "strategy": "clone"
    }
  ]
};

const response = await packClient.fetch(query, { variables: variables });
console.log(response.data);
```

--------------------------------

### Image Field Configuration Example

Source: https://docs.packdigital.com/section-schema-api

An example JSON configuration object for an Image field, demonstrating how to define its component type, accessor name, label, and an optional description for use in a content schema.

```JavaScript
  {
    component: 'image',
    name: 'heroImage',
    label: 'Hero Image',
    description: 'Image for hero banner',
  }
```

--------------------------------

### Full Implementation Example of useTestExpose Hook in Layout.tsx

Source: https://docs.packdigital.com/testing-analytics/test-implementation

A complete example demonstrating how to import and use the `useTestExpose` hook within your `Layout.tsx` component. This setup ensures that A/B test experiences are delivered based on user consent and exposure events are properly tracked.

```TypeScript
import { useTestExpose } from '~/hooks/useTestExpose';

export function Layout({children}: {children: ReactNode}) {

  const { handleTestExpose, hasUserConsent } = useTestExpose();

    return (
    <>
      <PackTestProvider
        hasUserConsent={hasUserConsent}
        testExposureCallback={handleTestExpose}
      >
        <div>
          <Header />
          <main>{children}</main>
          <Footer />
          <Cart />
          <Search />
          <Modal />
        </div>
      </PackTestProvider>
    </>
  );
};
```

--------------------------------

### Run Blueprint Theme Locally for Development

Source: https://docs.packdigital.com/developer-resources/blueprint-setup

Starts a local development server for the Blueprint Theme, typically accessible at `http://localhost:3000`. This command allows developers to view and test their site in a local environment before deployment.

```bash
npm run dev
```

--------------------------------

### Example Environment Variables for Local Development

Source: https://docs.packdigital.com/developer-resources/blueprint-setup

Illustrates essential environment variables required to run the application locally, including a session secret, public store domain (e.g., `mock.shop`), and a public storefront API token. These variables simulate a Shopify storefront for development.

```plaintext
SESSION_SECRET="foobar"
PUBLIC_STORE_DOMAIN="mock.shop"
PUBLIC_STOREFRONT_API_TOKEN="foobar"
```

--------------------------------

### Build Blueprint Theme for Production Deployment

Source: https://docs.packdigital.com/developer-resources/blueprint-setup

Executes the build process for the Blueprint Theme, preparing it for live deployment. This command emulates the steps Shopify Oxygen uses when deploying the site, ensuring compatibility with the production environment.

```bash
npm run build
```

--------------------------------

### Rich Text Field Configuration Example

Source: https://docs.packdigital.com/section-schema-api

An example JSON configuration object for a Rich Text field, demonstrating how to define its component type, accessor name, label, and an optional description for use in a content schema.

```JavaScript
  {
    component: 'rich-text',
    name: 'productInfoBlurb',
    label: 'Product Info Blurb',
    description: 'Short details and information about the product',
  }
```

--------------------------------

### Example Configuration for Markdown Field

Source: https://docs.packdigital.com/section-schema-api

This JSON snippet provides a practical example of how to configure a Markdown field. It sets the component type to 'markdown', assigns a name ('privacyInfo'), a label ('Privacy Notes'), and an optional description, illustrating a typical setup for a markdown input field.

```JSON
  {
    component: 'markdown',
    name: 'privacyInfo',
    label: 'Privacy Notes',
    description: 'Details about product\'s privacy details',
  }
```

--------------------------------

### Publish Site Settings using PackClient

Source: https://docs.packdigital.com/content-management-api/mutations/siteSettingsPublish

This example demonstrates how to publish site settings using the `siteSettingsPublish` mutation via the `@pack/client` SDK. It initializes the client with a token, defines the GraphQL mutation query, sets the necessary variables, and executes the fetch operation.

```JavaScript
import { PackClient } from '@pack/client';
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
  mutation siteSettingsPublish($id: ID!) {
    siteSettingsPublish(id: $id) {
      id
      title
      description
      logo {
        url
      }
      favicon {
        url
      }
      theme {
        primaryColor
        secondaryColor
        backgroundColor
        textColor
      }
    }
  }
`;

const variables = {
  id: 'YOUR-SITESETTINGS-ID'
};

const response = await packClient.fetch(query, { variables: variables });
console.log(response.data);
```

--------------------------------

### Text Area Field Configuration Example

Source: https://docs.packdigital.com/section-schema-api

An example JSON configuration object for a Text Area field, demonstrating how to define its component type, accessor name, label, and an optional description for use in a content schema.

```JavaScript
  {
    component: 'textarea',
    name: 'faqAnswer',
    label: 'FAQ Answer',
    description: 'Short description for the question',
  }
```

--------------------------------

### Install Pack Hydrogen Package with npm

Source: https://docs.packdigital.com/developer-resources/add-to-hydrogen

This command installs the latest version of the `@pack/hydrogen` package, which is essential for integrating Pack's core functionalities with your Shopify Hydrogen project. It provides the necessary tools and APIs to connect your storefront to Pack's content management and CRO features.

```Shell
npm install @pack/hydrogen@latest
```

--------------------------------

### Date Field Configuration Example

Source: https://docs.packdigital.com/developer-resources/section-schema-api

Illustrates a practical example of how to configure a date field component with specific properties like name, label, and custom time/date format settings. This JSON object demonstrates enabling time selection and a specific date format.

```APIDOC
  {
    component: 'date',
    name: 'date',
    label: 'Date',
    timeFormat: true,
    dateFormat: 'MM/DD/YYYY',
  }
```

--------------------------------

### Pull Shopify Environment Variables with Hydrogen CLI

Source: https://docs.packdigital.com/developer-resources/blueprint-setup

Uses the Shopify Hydrogen CLI to automatically fetch and configure environment variables directly from a Shopify Hydrogen storefront. This command streamlines the setup process by populating the local `.env` file with necessary credentials.

```bash
npx shopify hydrogen env pull
```

--------------------------------

### Install Pack React Package with npm

Source: https://docs.packdigital.com/developer-resources/add-to-hydrogen

This command installs the latest version of the `@pack/react` package, which offers React components and utilities designed to work seamlessly with Pack in a Hydrogen environment. It is crucial for building dynamic user interfaces and leveraging Pack's visual editor capabilities within your storefront.

```Shell
npm install @pack/react@latest
```

--------------------------------

### Manual Environment Variables for Shopify Hydrogen Storefront

Source: https://docs.packdigital.com/developer-resources/blueprint-setup

Provides a template for manually creating a `.env` file with all necessary variables, including Shopify API tokens and Pack-specific tokens. These values are crucial for connecting the local development environment to a specific Shopify Hydrogen storefront.

```plaintext
SESSION_SECRET="XXX"
PUBLIC_STOREFRONT_API_TOKEN="XXX"
PUBLIC_STORE_DOMAIN="XXX"
PACK_PUBLIC_TOKEN="XXX"
PACK_SECRET_TOKEN="XXX"
PACK_STOREFRONT_ID="XXX"
```

--------------------------------

### Example JavaScript Request for Section References

Source: https://docs.packdigital.com/content-management-api/queries/sectionReferences

Demonstrates how to query `sectionReferences` using the `@pack/client` library in JavaScript. This snippet shows the setup of the PackClient, the GraphQL query definition, variable passing, and fetching the response.

```JavaScript
import { PackClient } from '@pack/client'
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
query SectionReferences($id: ID!) {
  sectionReferences(id: $id) {
    id
    title
    handle
    description
  }
}
`
const variables = {
  id: 'section-id',
}
const response = await packClient.fetch(query, { variables: variables });
console.log(response.data);
```

--------------------------------

### TypeScript: Prepare Product Data for Shopify Analytics

Source: https://docs.packdigital.com/developer-resources/blueprint-setup

This `loader` function, typically found in a product route, demonstrates how to prepare `ShopifyAnalyticsProduct` data. It extracts relevant product and variant information, constructs an `analytics` object for `pageView` events, and defers the data for rendering, ensuring proper integration with Shopify Analytics via Hydrogen.

```TypeScript
export async function loader({params, context, request}: LoaderFunctionArgs) {
  ...

   if (!data.productPage) {
    throw new Response(null, {status: 404});
  }
  // Optionally set a default variant for a consistently "orderable" product
  const selectedVariant =
    product.selectedVariant ?? product?.variants?.nodes[0];

  const productAnalytics: ShopifyAnalyticsProduct = {
    productGid: product.id,
    variantGid: selectedVariant.id,
    name: product.title,
    variantName: selectedVariant.title,
    brand: product.vendor,
    price: selectedVariant.price.amount,
  };
  const analytics = {
    pageType: AnalyticsPageType.product,
    resourceId: product.id,
    products: [productAnalytics],
    totalValue: parseFloat(selectedVariant.price.amount),
  };

  return defer({
    product,
    productPage: data.productPage,
    selectedVariant,
    storeDomain,
    analytics,
  });
}
```

--------------------------------

### Example JSON Response for Site Settings Publish

Source: https://docs.packdigital.com/content-management-api/mutations/siteSettingsPublish

This JSON object illustrates the structure of a successful API response for publishing site settings. It contains details such as the site's unique identifier, title, description, URLs for the logo and favicon, and a comprehensive theme configuration including primary, secondary, background, and text colors.

```JSON
{
  "data": {
    "siteSettingsPublish": {
      "id": "YOUR-SITESETTINGS-ID",
      "title": "Site Title",
      "description": "Site Description",
      "logo": {
        "url": "https://example.com/logo.png"
      },
      "favicon": {
        "url": "https://example.com/favicon.png"
      },
      "theme": {
        "primaryColor": "#000000",
        "secondaryColor": "#FFFFFF",
        "backgroundColor": "#FFFFFF",
        "textColor": "#000000"
      }
    }
  }
}
```

--------------------------------

### Unpublish a Page using PackClient (JavaScript)

Source: https://docs.packdigital.com/content-management-api/mutations/pageUnpublish

Example JavaScript code demonstrating how to invoke the `pageUnpublish` GraphQL mutation using the `@pack/client` library. It shows the setup of the PackClient, the GraphQL mutation query, and how to execute the fetch operation with variables.

```JavaScript
import { PackClient } from '@pack/client'
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
mutation PageUnpublish($id: ID!) {
  pageUnpublish(id: $id) {
    id
  }
}
`
const response = await packClient.fetch(query, { variables: { id: 'your-page-id' } });
console.log(response.data);
```

--------------------------------

### Example HTML Product Information Blurb

Source: https://docs.packdigital.com/developer-resources/section-schema-api

This snippet demonstrates a multi-paragraph HTML structure for displaying product information. It includes common HTML elements such as paragraphs, strong tags, links, images, and unordered lists, showcasing how rich text content can be rendered.

```HTML
  <p>This is a product info blurb</p>
  <p>It can be multiple paragraphs</p>
  <p>And can include <strong>HTML</strong></p>
  <p>Like <a href="/pages/about-us">links</a></p>
  <p>Or images</p>
  <img src="https://via.placeholder.com/150" alt="Placeholder" />
  <p>Or lists</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

```

--------------------------------

### Example JavaScript Request for articleDeleteBulk

Source: https://docs.packdigital.com/content-management-api/mutations/articleDeleteBulk

Demonstrates how to use the `@pack/client` library to execute the `articleDeleteBulk` GraphQL mutation. It shows the setup of `PackClient` with an authentication token, the GraphQL query definition with variables for article IDs, and the execution of the fetch operation.

```JavaScript
import { PackClient } from '@pack/client'
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
  mutation ArticleDeleteBulk($ids: [ID!]!) {
    articleDeleteBulk(ids: $ids) {
      id
    }
  }
`;

const variables = {
  "ids": ["60f4b3b3b3b3b3b3b3b3b3b", "60f4b3b3b3b3b3b3b3b3b3c"]
};
const response = await packClient.fetch(query, { variables: variables });
console.log(response.data);
```

--------------------------------

### Authenticate and Query Pack GraphQL API with JavaScript Client

Source: https://docs.packdigital.com/content-management-api

This snippet demonstrates how to initialize the `@pack/client` package with an API URL, token, and content environment. It then shows an example GraphQL query to fetch site settings and how to execute it using the client's `fetch` method, logging the response data.

```JavaScript
import { PackClient } from '@pack/client';

const packClient = new PackClient({
  apiUrl: 'https://app.packdigital.com/graphql',
  token: '{YOUR_SECRET_TOKEN}',
  contentEnvironment: 'content_environment_handle',
});

const query = `
query {
  siteSettings {
    settings
    seo {
      title
      description
      keywords
    }
  }
}
`;

async function fetchSiteSettings() {
    const response = await packClient.fetch(query);
    console.log(response.data.siteSettings);
}

fetchSiteSettings();
```

--------------------------------

### Example Request: Bulk Publish Blogs with PackClient

Source: https://docs.packdigital.com/content-management-api/mutations/blogPublishBulk

Demonstrates how to use the `@pack/client` library in JavaScript to send a GraphQL mutation for bulk publishing blogs. This snippet includes importing the client, defining the GraphQL query, setting variables, and executing the fetch operation.

```JavaScript
import { PackClient } from '@pack/client'
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
  mutation BlogPublishBulk($ids: [ID!]!) {
    blogPublishBulk(ids: $ids) {
      id
    }
  }
`;

const variables = {
  ids: ['1', '2']
};

const response = await packClient.fetch(query, { variables: variables });
console.log(response.data);
```

--------------------------------

### Get A/B Test Handle with useAbTestHandle Hook in React

Source: https://docs.packdigital.com/ab-testing-api

This snippet illustrates the usage of the `useAbTestHandle` hook from `@pack/hydrogen` to obtain the handle of the A/B test the user is currently bucketed into. The example shows how to display this handle within a React component.

```JavaScript
import {useAbTestHandle} from '@pack/hydrogen';
...

export function Hero() {
    const testHandle = useAbTestHandle();
    return (
      <div>
        My test handle is: {testHandle}
      </div>
    );
}
```

--------------------------------

### JavaScript Example: Deleting a Section with PackClient

Source: https://docs.packdigital.com/content-management-api/mutations/sectionDelete

This JavaScript code snippet demonstrates how to use the `@pack/client` library to execute the `sectionDelete` GraphQL mutation. It shows the setup of the PackClient, the definition of the GraphQL query with variables, and the asynchronous fetch operation to delete a section by its ID.

```JavaScript
import { PackClient } from '@pack/client'
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
  mutation sectionDelete($id: ID!) {
    sectionDelete(id: $id) {
      id
    }
  }
`;
const variables = {
  id: 'YOUR-SECTION-ID'
};

const response = await packClient.fetch(query, { variables: variables });
console.log(response.data);
```

--------------------------------

### Get A/B Test Variant Handle with useAbTestVariantHandle Hook in React

Source: https://docs.packdigital.com/ab-testing-api

This snippet illustrates the usage of the `useAbTestVariantHandle` hook from `@pack/hydrogen` to obtain the handle of the A/B test variant the user is currently bucketed into. The example shows how to display this handle within a React component.

```JavaScript
import {useAbTestVariantHandle} from '@pack/hydrogen';
...

export function Hero() {
    const testVariantHandle = useAbTestVariantHandle();
    return (
      <div>
        My curent variant handle is: {testVariantHandle}
      </div>
    );
}
```

--------------------------------

### Fetch Site Settings using PackClient in JavaScript

Source: https://docs.packdigital.com/content-management-api/queries/siteSettings

This JavaScript example demonstrates how to use the `@pack/client` library to fetch site settings. It initializes the client with an API token and then executes a GraphQL query to retrieve specific fields like `id` and `seo` from the `siteSettings` object, allowing for version specification.

```JavaScript
import { PackClient } from '@pack/client'
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
query GetSiteSettings($version: Version) {
  siteSettings(version: $version) {
    id
    seo
  }
}
`
const response = await packClient.fetch(query);
console.log(response.data);
```

--------------------------------

### JavaScript Example: Calling articleAddSectionsBulk Mutation

Source: https://docs.packdigital.com/content-management-api/mutations/articleAddSectionsBulk

This JavaScript code snippet demonstrates how to execute the `articleAddSectionsBulk` GraphQL mutation using the `@pack/client` library. It illustrates the setup of the PackClient, the GraphQL query definition, the structure of variables for article and section IDs, and how to fetch and log the mutation's response.

```JavaScript
import { PackClient } from '@pack/client'
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
  mutation ArticleAddSectionsBulk($ids: [ID!]!, $input: [ArticleAddSectionsInput!]!) {
    articleAddSectionsBulk(ids: $ids, input: $input) {
      id
    }
  }
`;

const variables = {
  "ids": ["article-id-1", "article-id-2"],
  "input": [
    {
      "sectionIds": ["section-id-1", "section-id-2"],
      "strategy": "clone"
    }
  ]
};

const response = await packClient.fetch(query, { variables: variables });
console.log(response.data);
```

--------------------------------

### TypeScript: Create Pack Client with Caching Strategy

Source: https://docs.packdigital.com/developer-resources/blueprint-setup

The `createPackClient` function initializes a Pack client, managing API calls with configurable caching and preview mode. It uses a `CacheLong()` strategy by default and allows overriding the content environment based on preview settings, bypassing cache when preview is enabled.

```TypeScript
export function createPackClient(options: CreatePackClientOptions): Pack {
  const {apiUrl, cache, waitUntil, preview, contentEnvironment} = options;
  const previewEnabled = !!preview?.session.get('enabled');
  const previewEnvironment = preview?.session.get('environment');

  return {
    preview,
    isPreviewModeEnabled: () => previewEnabled,
    async query<T = any>(
      query: string,
      {variables, cache: strategy = CacheLong()}: QueryOptions = {},
    ) {
      const queryHash = await hashQuery(query, variables);
      const withCache = createWithCache<QueryResponse<T>>({
        cache,
        waitUntil,
      });

      // Preview environment overrides the content environment set during client creation
      const environment =
        previewEnvironment || contentEnvironment || PRODUCTION_ENVIRONMENT;
      const fetchOptions = {
        apiUrl,
        query,
        variables,
        token: options.token,
        previewEnabled,
        contentEnvironment: environment,
      };

      // Cache is bypassed in preview mode
      if (previewEnabled) return packFetch<T>(fetchOptions);

      return withCache(queryHash, strategy, () => packFetch<T>(fetchOptions));
    },
  };
}
```

--------------------------------

### Initialize Pack Preview Session in server.ts

Source: https://docs.packdigital.com/developer-resources/add-to-hydrogen

Initializes the Pack preview session (`PackSession`) concurrently with the application's cache and main session in `server.ts`. This setup creates a dedicated session storage that Pack utilizes to manage and track the storefront's preview mode status.

```TypeScript
const [cache, session, packSession] = await Promise.all([
  caches.open('hydrogen'),
  AppSession.init(request, [env.SESSION_SECRET]),
  PackSession.init(request, [env.SESSION_SECRET]),
])
```

--------------------------------

### Accessing URL Search Parameters in Remix Loader

Source: https://docs.packdigital.com/implementation-guides/route-implementation

Illustrates how to retrieve and process URL search parameters (query strings) within a Remix loader function. This example demonstrates using `new URL(request.url).searchParams` to iterate and collect key-value pairs from the URL.

```typescript
export async function loader({ request }: LoaderFunctionArgs) {
  const searchParams = new URL(request.url).searchParams;
  const selectedOptions: Array<{ name: string; value: string }> = [];
  searchParams.forEach((value, name) => {
    selectedOptions.push({ name, value });
  });
  console.log(selectedOptions);
}
```

--------------------------------

### Define TypeScript Types and Schema for CMS Sections

Source: https://docs.packdigital.com/implementation-guides/route-implementation

Provides an example of defining a TypeScript interface (`HeroSectionData`) to strongly type data for a CMS-driven section component. It also illustrates how to attach a `Schema` property to the component, which typically defines the editable fields for a content management system.

```typescript
import type { Section } from '@pack/types';

interface HeroSectionData {
  heading: string;
  subheading?: string;
  buttonText?: string;
  buttonUrl?: string;
  image?: { src: string; altText: string };
}

export const HeroSection = ({ cms }: { cms: HeroSectionData }) => (
  <div className="hero-section">
    <h1>{cms.heading}</h1>
    {cms.subheading && <p>{cms.subheading}</p>}
    {cms.buttonText && <a href={cms.buttonUrl}>{cms.buttonUrl}</a>}
    {cms.image && <img src={cms.image.src} alt={cms.image.altText} />}
  </div>
);

HeroSection.Schema = {
  label: 'Hero Section',
  key: 'heroSection',
  fields: [
    { component: 'text', name: 'heading', label: 'Heading', validate: { required: true } },
    { component: 'text', name: 'subheading', label: 'Subheading' },
    { component: 'text', name: 'buttonText', label: 'Button Text' },
    { component: 'text', name: 'buttonUrl', label: 'Button URL' },
    { component: 'image', name: 'image', label: 'Hero Image' },
  ],
};
```

--------------------------------

### Bulk Publish Product Pages using PackClient (JavaScript)

Source: https://docs.packdigital.com/content-management-api/mutations/productPagePublishBulk

Example JavaScript code demonstrating how to use the @pack/client library to execute the productPagePublishBulk mutation. It shows client initialization, GraphQL query definition, variable assignment, and fetching the response.

```JavaScript
import { PackClient } from '@pack/client'
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
  mutation ProductPagePublishBulk($ids: [ID!]!) {
    productPagePublishBulk(ids: $ids) {
      id
    }
  }
`;

const variables = {
  ids: ['1', '2']
};

const response = await packClient.fetch(query, { variables: variables });
console.log(response.data);
```

--------------------------------

### Implement Error Handling in Remix/Hydrogen Loader and Component

Source: https://docs.packdigital.com/implementation-guides/route-implementation

This snippet group shows how to handle errors in a Remix/Hydrogen loader function using a `try...catch` block to return appropriate HTTP responses (e.g., 404 for not found, 500 for server error). It also includes an example of how a React component can check for loaded data and display a fallback message if data is missing.

```typescript
export async function loader({ params, context }: LoaderFunctionArgs) {
  try {
    const { data } = await context.pack.query(PAGE_QUERY, {
      variables: { handle: params.handle },
      cache: context.storefront.CacheLong(),
    });
    if (!data.page) throw new Response(null, { status: 404 });
    return json({ page: data.page });
  } catch (err) {
    console.error(err);
    throw new Response(null, { status: 500, statusText: 'Server Error' });
  }
}
```

```typescript
export default function ProductRoute() {
  const { product } = useLoaderData<typeof loader>();
  if (!product) return <div>Product could not be loaded</div>;
  return <Product product={product} />;
}
```

--------------------------------

### Fetch Blog by Handle using PackClient (JavaScript)

Source: https://docs.packdigital.com/content-management-api/queries/blogByHandle

Demonstrates how to use the `@pack/client` SDK in JavaScript to query the `blogByHandle` GraphQL endpoint. This example shows how to initialize the client with an API token, define a GraphQL query with variables, and execute the fetch operation to retrieve specific blog data such as title, handle, and description.

```JavaScript
import { PackClient } from '@pack/client'
const packClient = new PackClient({
  token: 'YOUR-PACK-TOKEN'
});

const query = `
query BlogByHandle($handle: String!, $version: Version) {
  blogByHandle(handle: $handle, version: $version) {
    title
    handle
    description
  }
}
`
const variables = {
  handle: "blog-handle",
  version: "CURRENT"
}
const response = await packClient.fetch(query, { variables: variables });
console.log(response.data);
```
Tokens:
Raw