Page Types and Page Variants Guide

Overview

Page types and page variants provide a flexible system for creating conditional pages based on specific requirements. This guide explains how to implement and use them effectively.

Page Types Configuration

Helper Functions

First, define helper functions to check specific conditions. These functions will be used to determine which page type to load.

const checkMyProductHasBeautyProductTag = (blockData) => {
  // Checks if product has BeautyProduct tag
  return blockData?.node?.tags?.includes('BeautyProduct');
};

const checkMyProductHasEssentialProductTag = (blockData) => {
  // Checks if product has EssentialProduct tag
  return blockData?.node?.tags?.includes('EssentialProduct');
};

// Register helper functions
appmaker.addFilter(
  'parse-helper-functions',
  'theme-helper-fn',
  function (value) {
    return {
      ...value,
      checkMyProductHasBeautyProductTag,
      checkMyProductHasEssentialProductTag,
    };
  },
);

Page Configuration Structure

The main configuration object (pagesData) consists of three main sections:

• pageTypes: Defines different page types and their conditions
• pageVariants: Defines the block structure for each page type
• blocks: Contains the actual block definitions
• dataSource: Contains data source configurations

const pagesData = {
  pageTypes: [
    {
      // Reserved empty page type - DO NOT MODIFY
      type: "empty",
      pageSource: "pageVariants",
      condition: "{{ lodash.isEmpty(blockData) || lodash.isEmpty(blockData.node) }}",
    },
    {
      // Custom Beauty Product Page
      type: "myBeautyPageType",
      pageSource: "pageVariants",
      condition: "{{checkMyProductHasBeautyProductTag(blockData)}}",
    },
    {
      // Custom Essential Product Page
      type: "myEssentialPageType",
      pageSource: "pageId",
      pageId: "EssentialProductPage",
      condition: "{{checkMyProductHasEssentialProductTag(blockData)}}",
    }
  ],

  pageVariants: {
    // Reserved empty variant - DO NOT MODIFY
    empty: {
      blocks: [
        {
          name: "appmaker/in-app-page",
          attributes: {
            pageId: "ProductNotFound",
          },
        },
      ],
    },
    // Custom Beauty Product Page Variant
    myBeautyPageType: {
      blocks: [
        {
          name: "appmaker/my-block",
          attributes: {},
        },
      ],
    }
  },

  blocks: [
    // Define your blocks here
  ],

  dataSource: {
    // Define your data source configuration here
  },
};

export default pagesData;

Important Notes

1. Reserved Page Types

   • empty and error are reserved page types
   • Do not override these types when using pageVariants and pageTypes
   • Always include the default empty type configuration

2. Page Sources Two types of page sources are available:

   • pageVariants: Uses the block structure defined in pageVariants
   • pageId: References an externally defined page

3. Conditions

   • Conditions are evaluated using helper functions
   • Use proper error handling in condition functions
   • Conditions have access to blockData object

4. Best Practices

   • Keep helper functions simple and focused
   • Use meaningful names for page types
   • Document conditions and their expected outcomes
   • Test all possible condition scenarios