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!