AppmakerDeveloper

Overriding the Order List Page

The Order List page displays the customer's order history.

There are two ways to customize this:

  1. Override the Order Card (Recommended): Keeps the platform's list logic but changes individual order items.
  2. Build a Fully Custom List: Complete control over the entire list behavior and layout using the useOrders hook.

Method 1: Override the Order Card (Common)

This is the most efficient way to customize the page. You reuse the standard shopify/order-list block (which handles infinite scrolling) and only provide a custom view for each order entry.

1. Map the Custom Block (blocks.schema.js)

Map the standard block name to your custom component.

import CustomOrderCard from './components/CustomOrderCard';

const OrderBlocks = [
  {
    name: 'shopify/order-card',
    View: CustomOrderCard,
  },
];
export default OrderBlocks;

2. Create the Order Card (CustomOrderCard.js)

Use useOrderItem to access processed order data.

import { useOrderItem } from '@appmaker-xyz/shopify';
import { Layout, ThemeText } from '@appmaker-xyz/ui';

const CustomOrderCard = (props) => {
  const { order, orderId, status } = useOrderItem(props);
  return (
    <Layout>
      <ThemeText>Order ID: {orderId}</ThemeText>
      <ThemeText>Status: {status}</ThemeText>
    </Layout>
  );
};

Method 2: Creating a Fully Custom List (Advanced)

Use this approach if you need custom filtering, unique list layouts, or want to manage infinite scrolling manually using the useOrders hook.

1. Define a Custom Page Schema (page.schema.js)

Instead of shopify/order-list, use a custom name for your list block.

const OrderListPageSchema = {
  blocks: [
    {
      name: 'custom/manual-order-list',
      attributes: {},
    },
  ],
  title: 'My Custom Orders',
};
export default OrderListPageSchema;

2. Implement the Custom List Component (ManualOrderList.js)

Use the useOrders hook to fetch data and handle pagination.

import React from 'react';
import { FlatList, ActivityIndicator } from 'react-native';
import { useOrders } from '@appmaker-xyz/shopify';
import { Layout, ThemeText } from '@appmaker-xyz/ui';

const ManualOrderList = () => {
  const { 
    orderList, 
    isLoading, 
    isFetching, 
    hasNextPage, 
    fetchNextPage 
  } = useOrders({ limit: 10 });

  if (isLoading) return <ActivityIndicator />;

  return (
    <FlatList
      data={orderList}
      keyExtractor={(item) => item.node.id}
      renderItem={({ item }) => (
        <Layout style={{ padding: 16, borderBottomWidth: 1 }}>
          <ThemeText>Order: {item.node.name}</ThemeText>
          <ThemeText>Total: {item.node.totalPrice.amount}</ThemeText>
        </Layout>
      )}
      onEndReached={() => {
        if (hasNextPage) fetchNextPage();
      }}
      onEndReachedThreshold={0.5}
      ListFooterComponent={() => 
        isFetching ? <ActivityIndicator style={{ padding: 20 }} /> : null
      }
    />
  );
};

export default ManualOrderList;

3. Register the Custom Block (blocks.schema.js)

import ManualOrderList from './components/ManualOrderList';

const OrderBlocks = [
  {
    name: 'custom/manual-order-list',
    View: ManualOrderList,
  },
];
export default OrderBlocks;

Theme Integration

As per the modular pattern, register your collected pages and blocks in the main theme entry point.

1. Register Page (src/pages/index.js)

export const pages = {
  OrderList: OrderListPageSchema,
};

2. Register Blocks (src/blocks.js)

export const blocks = [
  ...OrderBlocks, 
];

3. Register Theme (src/index.js)

import { registerTheme } from '@appmaker-xyz/core';
import { pages } from './pages';
import { blocks } from './blocks';

registerTheme({ id: 'my-theme', pages, blocks });

On this page

Method 1: Override the Order Card (Common)1. Map the Custom Block (blocks.schema.js)2. Create the Order Card (CustomOrderCard.js)Method 2: Creating a Fully Custom List (Advanced)1. Define a Custom Page Schema (page.schema.js)2. Implement the Custom List Component (ManualOrderList.js)3. Register the Custom Block (blocks.schema.js)Theme Integration1. Register Page (src/pages/index.js)2. Register Blocks (src/blocks.js)3. Register Theme (src/index.js)