Adding a custom component in cart

[rishad45]

I'm new to the Shopify, So pardon me if i'm asking a basic question. I want to add a custom component in my products page. Problem is The data for that component will be coming from the backend using the 'id' of the product. Can anyone describe me the process that I should follow in order to achieve this. Also, How can I call this API when that product page shows.

[PMike · Accepted solution]

Here's the process you can follow to add a custom component to your product page in Shopify that pulls data from the backend using the product ID:

1. Create a Custom Component: First, create a custom component in your Shopify theme that will display the data you want to show. This can be done using HTML, CSS, and JavaScript.

2. Get the Product ID: You'll need to get the product ID of the product that the user is viewing on the product page. This can be done using Liquid code by accessing the product ID variable. You can then use this ID to make a request to your backend API to retrieve the data.

3. Call the API: Use JavaScript to call your backend API with the product ID as a parameter. You can use the Fetch API or Axios to make the request.

4. Display the Data: Once you receive the data from the API, you can display it in your custom component using JavaScript.

The picture above is some example code to get you started:

In this example, i'm using the Fetch API to make a request to the backend API, passing in the product ID as a parameter. Once i receive the data, i'm displaying it in a custom component with the class "my-custom-component".

You can modify this code to fit your specific needs and to display the data in your custom component in the way that you want.

I hope this helps! Let me know if you have any further questions.