Product

Search…
shopify-theme
Modules
Ajax Cart
Product
Quantity inputs
Links
Github
Product
Fetch any product as a JSON object.
Usage
1
import {getProduct} from '@elkfox/shopify-theme/scripts/product';
2
​
3
getProduct('red-rain-coat');
Copied!
Event listener
You can listen for when and what the API returns.
1
document.addEventListener('product:get', (event) => {
2
  // console.log(event.detail.json);
3
});
Copied!
Example response
1
{
2
  "id": 329678821,
3
  "title": "Red Rain Coat",
4
  "handle": "red-rain-coat",
5
  "description": "<p>Lorem Ipsum.</p>",
6
  "published_at": "2014-06-12T16:28:11-04:00",
7
  "created_at": "2014-06-12T16:28:13-04:00",
8
  "vendor": "Shopify",
9
  "type": "Coat",
10
  "tags": [
11
    "Spring"
12
  ],
13
  "price": 12900,
14
  "price_min": 12900,
15
  "price_max": 12900,
16
  "available": true,
17
  "price_varies": false,
18
  "compare_at_price": null,
19
  "compare_at_price_min": 0,
20
  "compare_at_price_max": 0,
21
  "compare_at_price_varies": false,
22
  "variants": [
23
    {
24
      "id": 794864229,
25
      "title": "Small",
26
      "options": [
27
        "Small"
28
      ],
29
      "option1": "Small",
30
      "option2": null,
31
      "option3": null,
32
      "price": 12900,
33
      "weight": 0,
34
      "compare_at_price": null,
35
      "inventory_management": "shopify",
36
      "available": true,
37
      "sku": null,
38
      "requires_shipping": true,
39
      "taxable": true,
40
      "barcode": "49738645"
41
    },
42
    {
43
      "id": 794864233,
44
      "title": "Medium",
45
      "options": [
46
        "Medium"
47
      ],
48
      "option1": "Medium",
49
      "option2": null,
50
      "option3": null,
51
      "price": 12900,
52
      "weight": 0,
53
      "compare_at_price": null,
54
      "inventory_management": "shopify",
55
      "available": true,
56
      "sku": null,
57
      "requires_shipping": true,
58
      "taxable": true,
59
      "barcode": "49738657"
60
    },
61
    {
62
      "id": 794864237,
63
      "title": "Large",
64
      "options": [
65
        "Large"
66
      ],
67
      "option1": "Large",
68
      "option2": null,
69
      "option3": null,
70
      "price": 12900,
71
      "weight": 0,
72
      "compare_at_price": null,
73
      "inventory_management": "shopify",
74
      "available": true,
75
      "sku": null,
76
      "requires_shipping": true,
77
      "taxable": true,
78
      "barcode": "49738673"
79
    }
80
  ],
81
  "images": [
82
    "//cdn.shopify.com/s/files/1/0040/7092/products/red-rain-coat.jpeg?v=1402604893"
83
  ],
84
  "featured_image": "//cdn.shopify.com/s/files/1/0040/7092/products/red-rain-coat.jpeg?v=1402604893",
85
  "options": [
86
    {
87
      "name": "Size",
88
      "position": 1
89
    }
90
  ],
91
  "url": "/products/red-rain-coat"
92
}
Copied!
Modules - Previous
Ajax Cart
Next - Modules
Last modified 2yr ago
Copy link
Contents
Usage
Event listener
Example response