Deploy new component library version

# increment the version in ./package.json, run `npm install`
npm run rollup && npm publish
# commit and push code changes with package.json and package-lock.json version update
# In hydgoren repo (./roka-hydrogen ) update 'prismic-slicemachine-to-hydrogen-jrhcn' version in package.json
#   and run `npm install`

Development: Copy to hydrogen repo to run site with updated component library

# Example, your roka-hydrogen repository path may be different.
npm run rollup \
  && rm -rf ../roka-hydrogen/node_modules/prismic-slicemachine-to-hydrogen-jrhcn/dist/ \
  && cp -R ./dist ../roka-hydrogen/node_modules/prismic-slicemachine-to-hydrogen-jrhcn/dist \
  && rm -rf ../roka-hydrogen/node_modules/.vite

# restart development process in ./roka-hydrogen

Integration Fields

Catalogs are defined at https://roka.prismic.io/settings/integrationfields/

Collections use the Product Variant Catalog at https://if-api.prismic.io/if/write/roka--product_variant_catalog.

The catalog is populated with product variant data structured as a collections page expects. The query to fetch data is:

fragment VariantNode on ProductVariant {
  id
  title
  availableForSale
  price {
    amount
    currencyCode
  }
  compareAtPrice {
    amount
    currencyCode
  }
  selectedOptions {
    name
    value
  }
  image {
    altText
    height
    width
    url
    thumbUrl: url(
      transform: {
        maxHeight: 120
        maxWidth: 160
        crop: CENTER
        preferredContentType: JPG
        scale: 1
      }
    )
  }
  hideFromProductPage: metafield(
    namespace: "custom"
    key: "hide_from_product_page"
  ) {
    value
  }
  rokaFilters: metafield(namespace: "roka", key: "collection_filters") {
    value
  }
}

fragment ProductNode on Product {
  id
  handle
  title
  tags
  updatedAt
  featuredImage {
    id
    altText
    url
    width
    height
  }
  options {
    name
    optionValues {
      name
    }
  }
  priceRange {
    minVariantPrice {
      amount
      currencyCode
    }
    maxVariantPrice {
      amount
      currencyCode
    }
  }
  rokaConfig: metafield(namespace: "roka", key: "config") {
    value
  }
  relatedInlineProduct: metafield(
    namespace: "roka"
    key: "related-inline-product-url"
  ) {
    value
  }
  rokaFilters: metafield(namespace: "roka", key: "collection_filters") {
    value
  }
  variants(first: 250) {
    nodes {
      ...VariantNode
    }
  }
}

query Product {
  product(handle: "falcon-fusion-lightweight-sunglasses") {
    ...ProductNode
  }
}

The response can be prepared for the catalog with:

const payload = data.data.product.variants.nodes.map(variant => {
  const product = data.data.product
  const title = `${product.title} - ${variant.title}`
  const options = variant.selectedOptions
    .map(o => `${o.name}: ${o.value}`)
    .join('; ')
  const description = `${title} / ${options}`
  return {
    id: variant.id,
    title,
    description,
    image_url: variant.image.url,
    last_update: +new Date(product.updatedAt),
    blob: { product, variant },
  }
})

And the catalog can be updated with:

curl --location 'https://if-api.prismic.io/if/write/roka--product_variant_catalog' \
--header 'Authorization: Bearer <token from catalog detail page here>' \
--header 'Content-Type: application/json' \
--data '<payload JSON here>'