Skip to main content

Show sub-collection on collection page

info

You can show the sub collection on the collection page by using the metafields.

Refer the doc here to know how to configure the metafields.

Step 1: Add metafields to the collection​

Add the metafields to the collection. You can use the fieldsHelper to add the metafields to the collection.

Create a file metafield.js in the helper folder.

import { fieldsHelper } from '@appmaker-xyz/shopify';

const addMetafields = () => {
  fieldsHelper.addFieldsToCollection({
    fields: {
      appmaker_collection_sub: {
        __aliasFor: 'metafield',
        __args: {
          key: 'sub_collection',
          namespace: 'custom',
        },
        value: true,
        references: {
          __args: {
            first: 250,
          },
          edges: {
            node: {
              __on: {
                __typeName: 'Collection',
                id: true,
                handle: true,
                title: true,
                image: {
                  height: true,
                  width: true,
                  url: true,
                },
              },
            },
          },
        },
      },
      appmaker_collection_template: {
        __aliasFor: 'metafield',
        __args: {
          key: 'appmaker_template',
          namespace: 'custom',
        },
        value: true,
      },
    },
  });
};

export { addMetafields };

In the 'helper/index.js' file, add the addMetafields function.

import { addMetafields } from './metafield';
const runHelpers = (settings) => {
  addMetafields();
};

export { runHelpers };

Call the runHelpers function in the theme's index.js file inside the 'activate' function.

runHelpers();

Step 2: Replace the collection page​

Create a page with the name productList.js in the pages folder.

you can add pageTypes to show different layout for different collections. 

pageTypes: [
    {
      type: 'empty',
      pageSource: 'pageId',
      pageId: 'CustomTemplate',
      condition: '{{ blockData.collection.appmaker_collection_template.value === "template2" }}',
    },
  ],

Here appmaker_collection_template is the metafield key and template2 is the value.

CustomTemplate is the page id of the page you want to show for this collection.

Complete code for pages/productList.js : 

import { ToolBarIcons as ICONS } from '@appmaker-xyz/shopify';
const pagesData = {
  title: 'Product list',
  attributes: {
    insideSafeAreaView: true,
    rootContainerStyle: {
      flex: 1,
    },
    contentContainerStyle: {
      flex: 1,
      backgroundColor: 'white',
    },
  },
  blocks: [
    {
      name: 'appmaker/banner',
      attributes: {
        __display:
          '{{checkIfTrueFalse(plugins.shopify.settings.show_collection_banner)}}',
        image: '{{ {url:blockItem.collection.image.url} }}',
        uri: '{{blockItem.collection.image.url}}',
        thumbnail_meta: '{{blockItem.collection.image}}',
        viewSingle: true,
      },
    },
    {
      name: 'appmaker/page-head',
      attributes: {
        title: '{{blockItem.collection.title}}',
        layoutSelector: false, //TODO: Layout selector should be fixed
        viewSingle: true,
      },
    },
    {
      attributes: {},
      name: 'appmaker/shopify-product-list',
      innerBlocks: [],
      clientId: 'product-list',
      isValid: true,
    },
  ],
  pageTypes: [
    {
      type: 'empty',
      pageSource: 'pageId',
      pageId: 'CustomTemplate',
      condition: '{{ blockData.collection.appmaker_collection_template.value === "template2" }}',
    },
  ],
  stickyFooter: {
    blocks: [
      {
        name: 'shopify/collection-sort-filter',
        attributes: {
          isSearch: '{{checkIfTrueFalse(currentAction.params.showSearch)}}',
        },
      },
      {
        name: 'appmaker/floating-button',
        attributes: {
          __display:
            '{{checkIfTrueFalse(plugins.shopify.settings.enable_wishlist_floating_button)}}',
          iconName: 'heart',
          type: 'iconButton',
          visibilityStatus: true,
          appmakerAction: { action: 'OPEN_WISHLIST' },
        },
      },
    ],
  },
  _id: 'productList',
  uid: 'odRhv94hf4S52SysvvNoxPyRx682',
  // dataSource: ,
  toolBarItems: [ICONS.SEARCH, ICONS.WISHLIST, ICONS.CART],
};
export default pagesData;

If you want to show another layout for template 3 you can add another item in the pageTypes array.

pageTypes: [
    {
      type: 'empty',
      pageSource: 'pageId',
      pageId: 'CustomTemplate',
      condition: '{{ blockData.collection.appmaker_collection_template.value === "template2" }}',
    },
    {
        type: 'empty',
        pageSource: 'pageId',
        pageId: 'CustomTemplate2',
        condition: '{{ blockData.collection.appmaker_collection_template.value === "template3" }}',
    },
  ],

Step 3: Add the custom page in the pages folder.​

Add CustomTemplate page in the pages folder.

const pagesData = {
  title: 'Product list',
  attributes: {
    insideSafeAreaView: true,
    renderType: 'normal',
    rootContainerStyle: {
      flex: 1,
    },
    contentContainerStyle: {
      flex: 1,
      backgroundColor: 'white',
      paddingHorizontal: 4,
      paddingTop: 4,
    },
  },
  blocks: [
    {
      attributes: {},
      name: 'theme/custom-product-list',
      innerBlocks: [],
      clientId: 'product-list',
      isValid: true,
    },
  ],
  _id: 'productList',
  uid: 'odRhv94hf4S52SysvvNoxPyRx682',
  dataSource: {},
};
export default pagesData;

Let's say theme/custom-product-list is the block that you want to render on this page.

Step 4: Register the block in the blocks/index.js file.​

Add theme/custom-product-list block in the blocks/index.js folder.


import CustomProductList from '../blocks/components/CustomProductList';
const blocks = [
  {
    name: 'theme/custom-product-list',
    View: CustomProductList,
  },
];
export { blocks };

Step 5: Add the component in the blocks/components folder.​

Add CustomProductList component in the blocks/components folder.

This is the sample component for the theme/custom-product-list block.


import React from 'react';
import { Text, View, Pressable } from 'react-native';
import { ProductList } from '@appmaker-xyz/shopify';

// Sample custom collection page.
const CustomCollection = (props) => {
  const { blockData, BlockItemRender } = props;
  const [collectionId, setCollectionId] = React.useState(
    blockData?.collection?.id || '',
  );
  const Switcher = () => {
    const collections =
      blockData?.collection?.appmaker_collection_sub?.references?.edges;
    return collections?.map((item) => (
      <Pressable
        style={{
          shadow: 20,
          padding: 20,
        }}
        onPress={() => {
          setCollectionId(item?.node?.id);
        }}>
        <Text>{item?.node?.title}</Text>
      </Pressable>
    ));
  };
  return (
    <View style={{ flex: 1 }}>
      <View style={{ flexDirection: 'row', alignSelf: 'center' }}>
        {Switcher()}
      </View>
      <ProductList
        collectionQuery={{
          id: collectionId,
        }}
        BlockItemRender={BlockItemRender}
      />
    </View>
  );
};

export default CustomCollection;

Here ProductList is the component from @appmaker-xyz/shopify package which will render the products of the collection. You have to pass the collection id to the collectionQuery prop of the ProductList component.

You can set the collection id on the state while changing the collection from the switcher and pass it to the collectionQuery prop of the ProductList component.

Step 6: Register the pages​

Register the pages in the pages/index.js file.

import productList from './productList';
import CustomTemplate from './CustomTemplate';

const pages = {
  productList,
  CustomTemplate,
};
export { pages };

Step 7: Add the pages in the theme's index.js file.​

Add the pages in the theme's index.js file.

Sharing the sample code for the theme's index.js file.

import { registerTheme, addFilter } from '@appmaker-xyz/core';
import { pages } from './src/pages';
import { blocks } from './src/blocks/index';
import { runHelpers } from './src/helper/index';
export function activate(params) {
  runHelpers();
}
const Theme = {
  id: 'appmaker-sample-theme', 
  activate,
  blocks,
  pages,
};
registerTheme(Theme);
export default Theme;