How to get the product details from a VTEX PDP page?

Integrations & API
1

Hi,

I am completely new to VTEX and have been assigned a work to get the product details from PDP page using any object present in the webapp itself.

Like we have cart._items() to provide the items on a cart page, how do we do the same for item page?

Thanks,
Amit

2

You can use the useProduct hook from Product Context.
Product Context-Github

Regards,
Tanishq

3

Hi @TanishqxSharma ,

Everything needs to be done using javascript. It will be injected to the page and the code should be able to extract the product proporties.

Below image is an exmple of a cart page where we have a cart object containing the product data. Similarly I want to know which object is having the product data on PDP page and I need to test that on DevTools → consle similar to the below page -

image
image793×220 14.2 KB

Thanks,
Amit

4

dataLayer return

productDetail

brand
category
id
name
price
variant
5

Hi @bruno.araujo ,

Is dataLayer something provided by VTEX or by Google Tag Manager. Becuase if it is part of Google Tag Manager, then my organization is not willing put any dependency on 3rd party. What if client decided to remove GTM from their VTEX page?

If dataLayer is part of VTEX product then, I believe I can use that.

Cheers,
Amit

6

Hello @amit.sahoo!

I assume you are using VTEX IO, if so…
What product information do you need to display?

I think that @TanishqSharma answer could help you, you need to use that package that has VTEX to be able to make queries with javascript and be able to extract the data of the product of interest in the pdp.

7

Hi @marmarquez

So the plan is to use vannila javascript injection into VTEX and it should be extract the product label details from the product. That is the reason why I was showing the console window of chrome browser. What I can get using the console window, I can put that in my javascipt code.

But I am unable to find any object to this data.

Cheers,
Amit

8

Have you already tried this? GitHub - vtex-apps/product-context

9

I am not sure how can I use this. This code looks like some typescript code and I think we need to install VTEX too.

@marmarquez, we are a third party who is just trying to get the data from PDP page using javacript injections, we dont use node. I am not sure how I can use https://github.com/vtex-apps/product-context

Please provide something which I can run from the developer console of any browser to get the product object.

image
image690×538 21.6 KB

10

I think I understand your point now.

Yes, this example is with typescript, but you could use it with React as well (which is basically JS).

The other way you have to obtain product information is by querying the VTEX API, for that you need a token. And you would do it with code something like this…

const options = {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
    'X-VTEX-API-AppKey': 'vtexappkey-delucca-LLNOKW',
    'X-VTEX-API-AppToken': 'PUPAYAMKZWUYADVELCBODGFIIBBGVENIADPBRXDJWBPFXBPMOIXFTAAIPGSXZFOUJLYXOTMOYRRCRZLGLOSMHHPACGMLEFKRNUWLDRYUWIGBIYRPULLKNBNBWXUHHAJT'
  }
};

fetch('https://delucca.vtexcommercestable.com.br/api/catalog_system/pvt/products/GetProductAndSkuIds?categoryId=1&_from=1&_to=10', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

Puedes mirar esto…
https://developers.vtex.com/vtex-rest-api/reference/catalog-api-get-products-skus

Tell me if it helped you, I’m at your service.

1 Like