parseMetafield

Examples

• Example code

  Description

  I am the default example

  JavaScript

  import {parseMetafield} from '@shopify/hydrogen';
  
  export function DateMetafield({metafield}) {
    const parsedMetafield = parseMetafield(metafield);
  
    return <div>Date: {parsedMetafield.parsedValue?.toDateString()}</div>;
  }
  
  export function VariantReferenceMetafield({metafield}) {
    const parsedMetafield = parseMetafield(metafield);
  
    return <div>Variant title: {parsedMetafield.parsedValue?.title}</div>;
  }
  
  export function ListCollectionReferenceMetafield({metafield}) {
    const parsedMetafield = parseMetafield(metafield);
  
    return (
      <div>
        The first collection title: {parsedMetafield.parsedValue?.[0].title}
      </div>
    );
  }
  

  TypeScript

  import {parseMetafield, type ParsedMetafields} from '@shopify/hydrogen';
  import type {Metafield} from '@shopify/hydrogen/storefront-api-types';
  
  export function DateMetafield({metafield}: {metafield: Metafield}) {
    const parsedMetafield = parseMetafield<ParsedMetafields['date']>(metafield);
  
    return <div>Date: {parsedMetafield.parsedValue?.toDateString()}</div>;
  }
  
  export function VariantReferenceMetafield({metafield}: {metafield: Metafield}) {
    const parsedMetafield =
      parseMetafield<ParsedMetafields['variant_reference']>(metafield);
  
    return <div>Variant title: {parsedMetafield.parsedValue?.title}</div>;
  }
  
  export function ListCollectionReferenceMetafield({
    metafield,
  }: {
    metafield: Metafield;
  }) {
    const parsedMetafield =
      parseMetafield<ParsedMetafields['list.collection_reference']>(metafield);
  
    return (
      <div>
        The first collection title: {parsedMetafield.parsedValue?.[0].title}
      </div>
    );
  }