How to create a custom product scroller in cart page

​

Description​

​ This is a tutorial on how to create a custom product scroller in cart page. This can be useful for recommending products to customers based on their cart items. ​

Steps

1. In your cart page blocks, add a new block with the following code: ​

{
  "name": 'your-custom-theme/cart-recommendation',
  "attributes": {
    "title": "You may also like",
  }
}

​ 2. register this block in blocks/index.js ​

import CartRecommendation from "../components/cartRecommendation";
​
const blocks = [
  // other blocks
  {
    name: "your-custom-theme/cart-recommendation",
    View: CartRecommendation,
  },
];

​ 3. create a new file cartRecommendation.js and add the follwing code ​

import React, { useState, useEffect } from "react";
import { Image, StyleSheet, Text, View } from "react-native";
​
export const ShopifyProductScroller = ({
  attributes,
  BlocksView,
  onAction,
  innerBlocks,
  ...props
}) => {
  const [ids, setIds] = useState([]);
  // get ids using api
  useEffect(() => {
    // get ids using api
    const idsArray = getIds(); // api call response
    setIds(idsArray);
  }, []);
  const pagesData = {
    blocks: [
      {
        dependencies: {
          pageState: ["metaData"],
        },
        attributes: {
          customDataSource: {
            source: "shopify",
            attributes: {
              mapping: {
                items: "data.data.products.edges",
              },
              methodName: "products",
              params: {
                ids: ids,
                productsLimit: 10,
              },
            },
            repeatable: "Yes",
            repeatItem: "DataSource",
          },
          cartActionParams: {
            fromCart: true,
          },
          isInsideCartPage: true,
          hasPages: false,
          horizontal: true,
          gridViewListing: false,
          loadingLayout: "product-scroller",
        },
        name: "appmaker/shopify-product-list",
        innerBlocks: [],
      },
    ],
  };
  if (!ids.length) {
    return null;
  }
  return (
    <View style={styles.container}>
      <Text>Cart recommendations</Text>
      <BlocksView
        inAppPage={pagesData}
        onAction={onAction}
        {...props}
        blockData={props.data}
      />
    </View>
  );
};
​
const styles = StyleSheet.create({
  container: {
    // backgroundColor: color.white,
  },
});