# Product Details

For a product details display the set up is similar to a general product search. We need to configure the `<InstantSearch />` in the same way. The main difference is that we set the product we are looking for in the `<Configure />`.

```jsx
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

const ResultItem = ({hit}) => {(
  <>
    <b>Name:</b>
    <br />
    <div>{hit.name}</div>
    <br />
    <b>Brand:</b>
    <br />
    <div>{hit.brand}</div>
  </>
)}


const ProductDisplay = () => {
  // product_id can be fetched from the url param for example
  const product_id = getProductId();
  return (
      <InstantSearch
        searchClient={searchClient}
        indexName={"menu-products-demo"}
      >
        <Configure
          hitsPerPage={1}
          filters={`product_id:${product_id}`}
        />
        <Hits hitComponent={ResultItem} />
      </InstantSearch>
  );
}
```

#### **Product Dosages and Weights**

The following information can be used to determine the weights and dosages to show on the menu. This will vary by product category.

**Flower:** There are `price_ids` for each possible weight. For non-standard weights (defined as anything other than 1g, ⅛ oz, ¼ oz, ½ oz, and 1 oz), the `price_id` will be the closest one to the actual weight, which will show up in the `amount` field.

**Vapes:** This will show up with a *half gram* or *gram* `price_id`. If the `amount` field is set, that will indicate the actual (non-standard) weight.

**Pre-Rolls:** This will show up as an *each* `price_id`. Use the `amount` field to determine the actual weight. `quantity_value` will show the total weight for pre-roll packs.

**Edibles:** This will show up as an *each* `price_id`. `dosage` contains the total amount of THC or other Cannabinoids (I believe that if it just has one number that is THC), and `amount` shows the quantity “e.g. 20pk.” `quantity_value` and `quantity_units` may also be set.

**Extracts:** There are price ids for each possible weight (typically *half gram* or *gram*). There can also be custom weights, which will show up in the `amount` field.

**Topicals:** These will show up as an *each* `price_id`. `dosage` will indicate the total amount of THC or other cannabinoids, and `amount` shows the total weight of product (typically oz). There may also be `quantity_value` and `quantity_units` set, for example *1.8* and *fl oz*.

**Tinctures:** These will show up as an *each* `price_id`. `dosage` will indicate the total amount of THC or other cannabinoids, and `amount` (if set) shows the total volume of the product (typically ml). There may also be `quantity_value` and `quantity_units` set, for example “15” and “ml.”

#### **Stock Product Images**

Some products will not have images. We provide stock images for the following categories:

<table><thead><tr><th width="143">Category</th><th width="133">Subcategory</th><th>Image URL</th></tr></thead><tbody><tr><td>Flower</td><td>Hybrid</td><td><a href="https://product-assets.iheartjane.com/default-photos/flower/hybrid.png">https://product-assets.iheartjane.com/default-photos/flower/hybrid.png</a></td></tr><tr><td>Flower</td><td>Indica</td><td><a href="https://product-assets.iheartjane.com/default-photos/flower/indica.png">https://product-assets.iheartjane.com/default-photos/flower/indica.png</a></td></tr><tr><td>Flower</td><td>Sativa</td><td><a href="https://product-assets.iheartjane.com/default-photos/flower/sativa.png">https://product-assets.iheartjane.com/default-photos/flower/sativa.png</a></td></tr><tr><td>Edible</td><td>Candies</td><td><a href="https://product-assets.iheartjane.com/default-photos/edible/candies.png">https://product-assets.iheartjane.com/default-photos/edible/candies.png</a></td></tr><tr><td>Edible</td><td>Capsules</td><td><a href="https://product-assets.iheartjane.com/default-photos/edible/capsules.png">https://product-assets.iheartjane.com/default-photos/edible/capsules.png</a></td></tr><tr><td>Edible</td><td>Drinks</td><td><a href="https://product-assets.iheartjane.com/default-photos/edible/drinks.png">https://product-assets.iheartjane.com/default-photos/edible/drinks.png</a></td></tr><tr><td>Edible</td><td>Chocolates</td><td><a href="https://product-assets.iheartjane.com/default-photos/edible/chocolates.png">https://product-assets.iheartjane.com/default-photos/edible/chocolates.png</a></td></tr><tr><td>Edible</td><td>Mints</td><td><a href="https://product-assets.iheartjane.com/default-photos/edible/mints.png">https://product-assets.iheartjane.com/default-photos/edible/mints.png</a></td></tr><tr><td>Edible</td><td>Other</td><td><a href="https://product-assets.iheartjane.com/default-photos/edible/other.png">https://product-assets.iheartjane.com/default-photos/edible/other.png</a></td></tr><tr><td>Edible</td><td>Drink Mixes</td><td><a href="https://product-assets.iheartjane.com/default-photos/edible/drinkmixes.png">https://product-assets.iheartjane.com/default-photos/edible/drinkmixes.png</a></td></tr><tr><td>Edible</td><td>Baked Goods</td><td><a href="https://product-assets.iheartjane.com/default-photos/edible/bakedgoods.png">https://product-assets.iheartjane.com/default-photos/edible/bakedgoods.png</a></td></tr><tr><td>Extract</td><td>Wax</td><td><a href="https://product-assets.iheartjane.com/default-photos/extract/waxes.png">https://product-assets.iheartjane.com/default-photos/extract/waxes.png</a></td></tr><tr><td>Extract</td><td>Hash</td><td><a href="https://product-assets.iheartjane.com/default-photos/extract/hash.png">https://product-assets.iheartjane.com/default-photos/extract/hash.png</a></td></tr><tr><td>Extract</td><td>Rosin</td><td><a href="https://product-assets.iheartjane.com/default-photos/extract/rosins.png">https://product-assets.iheartjane.com/default-photos/extract/rosins.png</a></td></tr><tr><td>Extract</td><td>Live Resin</td><td><a href="https://product-assets.iheartjane.com/default-photos/extract/waxes.png">https://product-assets.iheartjane.com/default-photos/extract/waxes.png</a></td></tr><tr><td>Extract</td><td>Diamonds</td><td><a href="https://product-assets.iheartjane.com/default-photos/extract/waxes.png">https://product-assets.iheartjane.com/default-photos/extract/waxes.png</a></td></tr><tr><td>Extract</td><td>Rick Simpson Oil</td><td><a href="https://product-assets.iheartjane.com/default-photos/extract/ricksimpsonoilrso.png">https://product-assets.iheartjane.com/default-photos/extract/ricksimpsonoilrso.png</a></td></tr><tr><td>Gear</td><td>Vaporizer</td><td><a href="https://product-assets.iheartjane.com/default-photos/gear/vaporizers.png">https://product-assets.iheartjane.com/default-photos/gear/vaporizers.png</a></td></tr><tr><td>Gear</td><td>Paraphernalia</td><td><a href="https://product-assets.iheartjane.com/default-photos/gear/paraphernalia.png">https://product-assets.iheartjane.com/default-photos/gear/paraphernalia.png</a></td></tr><tr><td>Gear</td><td>Papers</td><td><a href="https://product-assets.iheartjane.com/default-photos/gear/papers.png">https://product-assets.iheartjane.com/default-photos/gear/papers.png</a></td></tr><tr><td>Preroll</td><td>Prerolls</td><td><a href="https://product-assets.iheartjane.com/default-photos/preroll/prerolls.png">https://product-assets.iheartjane.com/default-photos/preroll/prerolls.png</a></td></tr><tr><td>Preroll</td><td>Preroll Packs</td><td><a href="https://product-assets.iheartjane.com/default-photos/preroll/prerollpacks.png">https://product-assets.iheartjane.com/default-photos/preroll/prerollpacks.png</a></td></tr><tr><td>Preroll</td><td>Infused Packs</td><td><a href="https://product-assets.iheartjane.com/default-photos/preroll/infusedpacks.png">https://product-assets.iheartjane.com/default-photos/preroll/infusedpacks.png</a></td></tr><tr><td>Preroll</td><td>Infused</td><td><a href="https://product-assets.iheartjane.com/default-photos/preroll/infused.png">https://product-assets.iheartjane.com/default-photos/preroll/infused.png</a></td></tr><tr><td>Tincture</td><td>Sublinguals</td><td><a href="https://product-assets.iheartjane.com/default-photos/tincture/sublinguals.png">https://product-assets.iheartjane.com/default-photos/tincture/sublinguals.png</a></td></tr><tr><td>Tincture</td><td>Pets</td><td><a href="https://product-assets.iheartjane.com/default-photos/tincture/pets.png">https://product-assets.iheartjane.com/default-photos/tincture/pets.png</a></td></tr><tr><td>Tincture</td><td>Sprays</td><td><a href="https://product-assets.iheartjane.com/default-photos/tincture/sprays.png">https://product-assets.iheartjane.com/default-photos/tincture/sprays.png</a></td></tr><tr><td>Topical</td><td>Bath</td><td><a href="https://product-assets.iheartjane.com/default-photos/topical/bath.png">https://product-assets.iheartjane.com/default-photos/topical/bath.png</a></td></tr><tr><td>Topical</td><td>Lotions</td><td><a href="https://product-assets.iheartjane.com/default-photos/topical/lotions.png">https://product-assets.iheartjane.com/default-photos/topical/lotions.png</a></td></tr><tr><td>Topical</td><td>Patches</td><td><a href="https://product-assets.iheartjane.com/default-photos/topical/patches.png">https://product-assets.iheartjane.com/default-photos/topical/patches.png</a></td></tr><tr><td>Topical</td><td>Balms</td><td><a href="https://product-assets.iheartjane.com/default-photos/topical/balms.png">https://product-assets.iheartjane.com/default-photos/topical/balms.png</a></td></tr><tr><td>Topical</td><td>Intimates</td><td><a href="https://product-assets.iheartjane.com/default-photos/topical/intimates.png">https://product-assets.iheartjane.com/default-photos/topical/intimates.png</a></td></tr><tr><td>Topical</td><td>Roll-Ons</td><td><a href="https://product-assets.iheartjane.com/default-photos/topical/rollons.png">https://product-assets.iheartjane.com/default-photos/topical/rollons.png</a></td></tr><tr><td>Topical</td><td>Oils</td><td><a href="https://product-assets.iheartjane.com/default-photos/topical/oils.png">https://product-assets.iheartjane.com/default-photos/topical/oils.png</a></td></tr><tr><td>Topical</td><td>Gels</td><td><a href="https://product-assets.iheartjane.com/default-photos/topical/gels.png">https://product-assets.iheartjane.com/default-photos/topical/gels.png</a></td></tr><tr><td>Vape</td><td>Cartridges</td><td><a href="https://product-assets.iheartjane.com/default-photos/vape/cartridges.png">https://product-assets.iheartjane.com/default-photos/vape/cartridges.png</a></td></tr><tr><td>Vape</td><td>Specialty Pods</td><td><a href="https://product-assets.iheartjane.com/default-photos/vape/specialtypods.png">https://product-assets.iheartjane.com/default-photos/vape/specialtypods.png</a></td></tr><tr><td>Vape</td><td>Disposables</td><td><a href="https://product-assets.iheartjane.com/default-photos/vape/disposables.png">https://product-assets.iheartjane.com/default-photos/vape/disposables.png</a></td></tr></tbody></table>

#### **Reviews**

Reviews are a crucial piece of the shopping experience and to query them is very similar to fetching a product. We simply need to hit the reviews index and pass in the `product_id` we want the views for:

```jsx
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

const ResultItem = ({hit}) => {(
  <>
    <b>Name:</b>
    <br />
    <div>{hit.name}</div>
    <br />
    <b>Brand:</b>
    <br />
    <div>{hit.brand}</div>
  </>
)}


const ProductReviews = () => {
  // product_id can be fetched from the url param for example
  const product_id = getProductId();
  return (
      <InstantSearch
        searchClient={searchClient}
        indexName={"product-reviews-demo"}
      >
        <Configure
          filters={`product_id:${product_id}`}
        />
        <Hits hitComponent={ResultItem} />
      </InstantSearch>
  );
}
```

Here is what the review object looks like:

<details>

<summary>Expand</summary>

```javascript
{
    "product_id": 1,
    "comment": "It's a great for doing around the house activities or just relaxing",
    "rating": 5,
    "created_at": "2020-06-24T03:47:53.015Z",
    "updated_at": "2020-06-24T03:47:53.015Z",
    "nickname": "a****2",
    "avatar": 4,
    "feelings": [
        "Blissful",
        "Creative"
    ],
    "activities": [
        "Stimulate my mind",
        "Get Active"
    ],
    "has_comment": true,
    "upvote_count": 2,
    "hidden": false,
    "objectID": "19",
    "_highlightResult": {
        "product_id": {
            "value": "1",
            "matchLevel": "none",
            "matchedWords": []
        },
        "comment": {
            "value": "It's a great for doing around the house activities or just relaxing",
            "matchLevel": "none",
            "matchedWords": []
        },
        "rating": {
            "value": "5",
            "matchLevel": "none",
            "matchedWords": []
        },
        "created_at": {
            "value": "2020-06-24T03:47:53.015Z",
            "matchLevel": "none",
            "matchedWords": []
        },
        "updated_at": {
            "value": "2020-06-24T03:47:53.015Z",
            "matchLevel": "none",
            "matchedWords": []
        },
        "nickname": {
            "value": "a****2",
            "matchLevel": "none",
            "matchedWords": []
        },
        "avatar": {
            "value": "4",
            "matchLevel": "none",
            "matchedWords": []
        },
        "feelings": [
            {
                "value": "Blissful",
                "matchLevel": "none",
                "matchedWords": []
            },
            {
                "value": "Creative",
                "matchLevel": "none",
                "matchedWords": []
            }
        ],
        "activities": [
            {
                "value": "Stimulate my mind",
                "matchLevel": "none",
                "matchedWords": []
            },
            {
                "value": "Get Active",
                "matchLevel": "none",
                "matchedWords": []
            }
        ],
        "upvote_count": {
            "value": "2",
            "matchLevel": "none",
            "matchedWords": []
        }
    }
```

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.iheartjane.com/jane-docs/implementing-roots/building-your-menu/using-react-and-instant-search/product-details.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.