Shopify REST API - filtering products by collection, with node.js(Express) and React

Viewed 24

I have a Shopify website in which I have my products and collections all set up. I am trying to recreate this website, but this time using React for Front-End and Shopify as backend to manage my products. I have set up and connected successfully my Shopify with backend part (Node.js-Express) from where i made some requests to fetch products,pagination etc. Then I was able to call those on FrontEnd - React via Axios. This is all Ok. Now, I am trying to make a SHOP page, where I have filters of products ( based on Collection ).

I dont know how to do it dynamically, i have tried to follow the docs (https://shopify.dev/api/admin-rest) but not found what I was looking for. I want to filter either by product-tag or collection/collection_id/products . None of them was possible to do dynamically.

What I have tried so far :

Getting the products of a custom collection : /admin/api/2022-07/collections/{collection_id}.products.json

I have made this request with Express.js , and tried to make it dynamic like this :

const getCollections = (req, res, callback) => {
  var coll = "154903543831"; /*---this is a collection ID from my shopify website.--- */
  axios
    .get(
      `https://mysite.myshopify.com/admin/api/2022-07/collections/${coll}/products.json`,
      {
        headers: {
          "X-Shopify-Access-Token": process.env.SHOPIFY_ACCESS_TOKEN,
        },
      }
    )
    .then(function (response) {
      res.json({
        data: response.data,
      });
    })
    .catch(function (error) {
      console.log(error);
      res.json({ error: error });
    });
};

I think if I was able to control that "coll" variable, i could manipulate with the request from react frontent . Here is how i handle the request in React frontend:

First i try to set ShopProvider:

export class ShopProvider extends Component {
  state = {
    product: {},
    products: [],
    checkout: {},
    fav: [],
    isCartOpen: false,
    isMenuOpen: false,
    isSearchOpen: false,
    isShopOpen: false,
    allProd: [],
    isNavOpen: false,
    isFavOpen: false,
    variants: [],
    collections: [],
    page_info: "",
    prev_page_info: "",
    next_page_info: "",
    isFirstPage: false,
    isLastPage: false,
    coll: "154903543831",
  };

Then i make request:

axios
      .get(`${SHOP_URL}/products/collections`, {
        params: {
          page_info: this.state.page_info,
          coll: this.coll,
        },
      })
      .then((response) => {
        console.log(response.data);
        console.log(response.data.coll);

        this.setState({
          ...this.state,
          collections: response.data.data.collections,
          page_info: response.data.page_info,
          isFirstPage: response.data.isFirstPage,
          isLastPage: response.data.isLastPage,
          coll: response.data.coll,
        });
      })
      .catch(function (error) {
        console.log(error);
      });

Then, in Product.js page in front-end -Here i can console.log(products), but I dont know how to fetch /filter.

const Products = () => {
  const {
    fetchAllProducts,
    products,
    addItemFav,
    fav,
    col,
    fetchAllCollections,
    collections,
    productsNextPage,
    productsPrevPage,
    isFirstPage,
    isLastPage,
  } = useContext(ShopContext);

Can anyone help me with this? I am still a Junior Developer and cant correctly figure out this task alone! Thank you!

0 Answers
Related