@shopify/hydrogen@2024.7.1

Patch Changes

• Breaking change by @michenly

  customerAccount no longer commit session automatically.

• Breaking change by @blittle

  Previously the VariantSelector component would filter out options that only had one value. This is undesireable for some apps. We've removed that filter, if you'd like to retain the existing functionality, simply filter the options prop before it is passed to the VariantSelector component:

   <VariantSelector
     handle={product.handle}
  +  options={product.options.filter((option) => option.values.length > 1)}
  -  options={product.options}
     variants={variants}>
   </VariantSelector>

  Fixes #1198

• Fix the types for optimistic cart (#2132) by @blittle

• Improve the types for useOptimisticCart() (#2269) by @blittle

• Fix a small rounding issue when checking stale-while-revalidate timing. (#2220) by @frandiox

• Update virtual route to use Layout component in the root file. (#2292) by @michenly

• Add sellingPlanId support to BuyNowButton. (#2254) by @dvisockas

• Fix customData from Analytics.Provider not being passed to page view events (#2224) by @wizardlyhel

• Auto cookie domain detection for customer privacy api and better error message for missing analytics fields (#2256) by @wizardlyhel

• New Features by @blittle

  Add a useOptimisticVariant hook for optimistically rendering product variant changes. This makes switching product variants instantaneous. Example usage:

  function Product() {
    const {product, variants} = useLoaderData<typeof loader>();
  
    // The selectedVariant optimistically changes during page
    // transitions with one of the preloaded product variants
    const selectedVariant = useOptimisticVariant(
      product.selectedVariant,
      variants,
    );
  
    return <ProductMain selectedVariant={selectedVariant} />;
  }

  This also introduces a small breaking change to the VariantSelector component, which now immediately updates which variant is active. If you'd like to retain the current functionality, and have the VariantSelector wait for the page navigation to complete before updating, use the waitForNavigation prop:

  <VariantSelector
    handle={product.handle}
    options={product.options}
    waitForNavigation
  >
    ...
  </VariantSelector>

• Return null instead of empty object from cart.get() when the cart id is invalid. (#2258) by @frandiox

• Updated dependencies [54c2f7ad]:

  • @shopify/hydrogen-react@2024.7.1