PageVariants​

This is used to render pages under certain states like empty or error cases. If this is added the given blocks will be rendered on the empty or error case. ​

How to add page variant blocks

You can add a page variant block in your page like this

const pageData = {
  title: 'Custom Page',
  pageVariants: {
    error: {
      blocks: [
        {
          name: 'namespace/custom-block',
          attributes: {
            title: 'Error page',
          },
        },
      ],
    },
    empty: {
      blocks: [
        {
          name: 'namespace/custom-block',
          attributes: {
            title: 'Empty page',
          },
        },
      ],
    },
};

​

Example page

​

const page = {
  blocks: [
    {
      clientId: 'cart-line-items',
      name: 'shopify/cart-line-items',
    }
  ],
  stickyFooter: {
    blocks: [ 
      {
        name: 'appmaker/cart-total',
        attributes: {
          total: '100Rs'
        },
      }
    ],
  },
  pageVariants: {
    error: {
      blocks: [
        {
          name: 'appmaker/your-custom-block1-for-empty-cart',
          attributes: {
            title: 'Something went wrong',
          },
        },
      ],
    },
    empty: {
      blocks: [
        {
          name: 'appmaker/your-custom-block1-for-empty-cart',
          attributes: {
            __display: '{{blockData.lineItems.edges == 0}}', // This can be given as an additional confirmation in cart
            title: 'This is an empty cart title',
          },
        },
        {
          name: 'appmaker/your-custom-block2-for-empty-cart',
          attributes: {
            __display: '{{blockData.lineItems.edges == 0}}', // This can be given as an additional confirmation in cart
            title: 'This is image representation for empty cart',
            url: 'https://someimage.png'
          },
        },
      ],
    },
  },
  attributes: {},
  title: 'Cart',
};
export default page;