@rocketsofawesome/mirage
Version:
[Live Demo of the Pattern Library](https://rocketsofawesome.github.io/mirage/)
590 lines (587 loc) • 13.1 kB
JavaScript
const exampleClickHandler = (sku) => () => { alert(`${sku} clicked`) }
const productOnSale = {
product: {
"_index": "colorways_development_20190706143737041",
"_type": "colorway",
"_id": "4312",
"_score": null,
"sort": [
5860003
],
"color_family": "blue",
"color": "Blue",
"nav_taxons": [
"shop/boys-new-arrivals",
"shop/boys-new-arrivals/swim",
"featured-products/summer-2019",
"shop/boys",
"shop/boys/swimwear",
"shop/vacation"
],
"nav_categories": [
"Boys New Arrivals",
"Swim",
"Boys",
"Swimwear"
],
"skus": [
{
"size": [
"OS"
],
"in_stock": true
}
],
"code": "A222-C01",
"category": [
"Swim",
"Swim Accessories"
],
"description": "AHHHHHHH! The coolest goggles on the planet are here.",
"details": "*90% silicone, 10% pc\r\n*UV protected & anti-fog lenses\r\n*Adjustable head strap",
"id": "1665-A222-C01",
"product_id": 1665,
"product_slug": "monster-goggle",
"colorway_id": 4312,
"name": "Monster Goggle",
"sort_order": [
{
"shop": 230023
},
{
"shop-boys": 230023
},
{
"shop-boys-swimwear": 230023
},
{
"shop": 2350008
},
{
"shop-boys-new-arrivals": 2350008
},
{
"shop-boys-new-arrivals-swim": 2350008
},
{
"featured-products": 5860003
},
{
"featured-products-summer-2019": 5860003
},
{
"shop": 2780049
},
{
"shop-vacation": 2780049
}
],
"style_number": "A222",
"colorways": [
{
"id": 4312,
"slug": "blue",
"color": "Blue",
"code": "A222-C01",
"shots": [
{
"id": 2707248,
"shot_type": "front",
"cloudinary_key": "production/catalog/uduxsics6nhvmvilwh16",
"badge": {
"public_id": "web/badges/secret_stash"
}
}
],
"skus": [
{
"id": 18009,
"sku": "A222-C01-A",
"size": "OS",
"price": 19.88,
"original_price": 26.50,
"discount_percent": 25,
"cost_price": null,
"in_stock": true
}
]
},
{
"id": 4311,
"slug": "moss",
"color": "Moss",
"code": "A222-D07",
"shots": [
{
"id": 2707247,
"shot_type": "front",
"cloudinary_key": "production/catalog/dyv8xevmgetyztwk3ald"
}
],
"skus": [
{
"id": 18008,
"sku": "A222-D07-A",
"size": "OS",
"price": 24.5,
"cost_price": null,
"in_stock": true
}
]
}
]
},
quickAdd: exampleClickHandler
}
const productWithVariants = {
product: {
"_index": "colorways_production_20190708213725142",
"_type": "colorway",
"_id": "4484",
"_score": null,
"sort": [
2090010
],
"color_family": "green",
"color": "Pepper Green",
"nav_taxons": [
"shop/girls",
"shop/girls/just-in",
"shop/camp-shop",
"shop/girls-new-arrivals",
"shop/girls-new-arrivals/shorts",
"shop/girls",
"shop/girls/bottoms",
"shop/girls/bottoms/shorts",
"shop/girls-new-arrivals",
"shop/girls-new-arrivals/wow-styles-girls"
],
"nav_categories": [
"Girls",
"Just In",
"Girls New Arrivals",
"Shorts",
"Girls",
"Bottoms",
"Shorts",
"Girls New Arrivals",
"Just In"
],
"skus": [
{
"size": [
"4"
],
"in_stock": true
},
{
"size": [
"6"
],
"in_stock": true
},
{
"size": [
"7"
],
"in_stock": true
},
{
"size": [
"10"
],
"in_stock": true
},
{
"size": [
"12"
],
"in_stock": true
},
{
"size": [
"5"
],
"in_stock": true
},
{
"size": [
"8"
],
"in_stock": true
},
{
"size": [
"3"
],
"in_stock": true
}
],
"code": "7254-300",
"category": [
"Bottoms",
"Shorts"
],
"description": "If these don't scream \"summer camp, 1982\" we don't know what does. Made from supersoft and quick-drying terrycloth, with convenient side pockets and a cute embroidered pineapple, these shorts for sure have a place in her weekly rotation.",
"details": "* 65% Polyester, 35% Rayon\r* Machine wash cold gentle cycle\r* Only non-chlorine bleach\r* Tumble dry low\r* Cool iron if needed",
"id": "1809-7254-300",
"product_id": 1809,
"product_slug": "towel-terry-track-short",
"colorway_id": 4484,
"name": "Towel Terry Track Short",
"sort_order": [
{
"shop": 600012
},
{
"shop-girls": 600012
},
{
"shop-girls-bottoms": 600012
},
{
"shop-girls-bottoms-shorts": 600012
},
{
"shop": 3580007
},
{
"shop-camp-shop": 3580007
},
{
"shop": 450004
},
{
"shop-girls": 450004
},
{
"shop-girls-just-in": 450004
},
{
"shop": 2090010
},
{
"shop-girls-new-arrivals": 2090010
},
{
"shop-girls-new-arrivals-wow-styles-girls": 2090010
},
{
"shop": 2190002
},
{
"shop-girls-new-arrivals": 2190002
},
{
"shop-girls-new-arrivals-shorts": 2190002
}
],
"style_number": "7254",
"colorways": [
{
"id": 4484,
"slug": "peppergreen",
"color": "Pepper Green",
"code": "7254-300",
"shots": [
{
"id": 2736986,
"shot_type": "back",
"cloudinary_key": "production/catalog/mu8h3v2gdaw8bf9sp3ui"
},
{
"id": 2736987,
"shot_type": "front",
"cloudinary_key": "production/catalog/la6b2vceu6ivonfp3j8r"
},
{
"id": 2736988,
"shot_type": "on_model",
"cloudinary_key": "production/catalog/wpnzyaxvwis3wfrb3xpb"
}
],
"skus": [
{
"id": 19579,
"sku": "7254-300-I",
"size": "4",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 19580,
"sku": "7254-300-L",
"size": "6",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 19581,
"sku": "7254-300-M",
"size": "7",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 19582,
"sku": "7254-300-N",
"size": "10",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 19583,
"sku": "7254-300-O",
"size": "12",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 19584,
"sku": "7254-300-K",
"size": "5",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 19585,
"sku": "7254-300-E",
"size": "8",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 19586,
"sku": "7254-300-H",
"size": "3",
"price": 22.5,
"cost_price": null,
"in_stock": true
}
]
},
{
"id": 4485,
"slug": "clearskyblue",
"color": "Clear Sky Blue",
"code": "7254-2B5",
"shots": [
{
"id": 2736998,
"shot_type": "back",
"cloudinary_key": "production/catalog/ysjye2byyklzm2qade0r"
},
{
"id": 2736999,
"shot_type": "front",
"cloudinary_key": "production/catalog/lyvrgfbajuuwq2w6jfxu"
}
],
"skus": [
{
"id": 19587,
"sku": "7254-2B5-I",
"size": "4",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 19588,
"sku": "7254-2B5-O",
"size": "12",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 19589,
"sku": "7254-2B5-L",
"size": "6",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 19590,
"sku": "7254-2B5-N",
"size": "10",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 19591,
"sku": "7254-2B5-K",
"size": "5",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 19592,
"sku": "7254-2B5-M",
"size": "7",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 19593,
"sku": "7254-2B5-E",
"size": "8",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 19594,
"sku": "7254-2B5-H",
"size": "3",
"price": 22.5,
"cost_price": null,
"in_stock": false
}
]
}
]
},
quickAdd: exampleClickHandler
}
const productWithOneSize = {
product: {
"_index": "colorways_development_20190706143737041",
"_type": "colorway",
"_id": "4312",
"_score": null,
"sort": [
5860003
],
"color_family": "blue",
"color": "Blue",
"nav_taxons": [
"shop/boys-new-arrivals",
"shop/boys-new-arrivals/swim",
"featured-products/summer-2019",
"shop/boys",
"shop/boys/swimwear",
"shop/vacation"
],
"nav_categories": [
"Boys New Arrivals",
"Swim",
"Boys",
"Swimwear"
],
"skus": [
{
"size": [
"OS"
],
"in_stock": true
}
],
"code": "A222-C01",
"category": [
"Swim",
"Swim Accessories"
],
"description": "AHHHHHHH! The coolest goggles on the planet are here.",
"details": "*90% silicone, 10% pc\r\n*UV protected & anti-fog lenses\r\n*Adjustable head strap",
"id": "1665-A222-C01",
"product_id": 1665,
"product_slug": "monster-goggle",
"colorway_id": 4312,
"name": "Monster Goggle",
"sort_order": [
{
"shop": 230023
},
{
"shop-boys": 230023
},
{
"shop-boys-swimwear": 230023
},
{
"shop": 2350008
},
{
"shop-boys-new-arrivals": 2350008
},
{
"shop-boys-new-arrivals-swim": 2350008
},
{
"featured-products": 5860003
},
{
"featured-products-summer-2019": 5860003
},
{
"shop": 2780049
},
{
"shop-vacation": 2780049
}
],
"style_number": "A222",
"colorways": [
{
"id": 4312,
"slug": "blue",
"color": "Blue",
"code": "A222-C01",
"shots": [
{
"id": 2707248,
"shot_type": "front",
"cloudinary_key": "production/catalog/uduxsics6nhvmvilwh16"
}
],
"skus": [
{
"id": 18009,
"sku": "A222-C01-A",
"size": "OS",
"price": 24.5,
"cost_price": null,
"in_stock": true
}
]
},
{
"id": 4311,
"slug": "moss",
"color": "Moss",
"code": "A222-D07",
"shots": [
{
"id": 2707247,
"shot_type": "front",
"cloudinary_key": "production/catalog/dyv8xevmgetyztwk3ald"
}
],
"skus": [
{
"id": 18008,
"sku": "A222-D07-A",
"size": "OS",
"price": 24.5,
"cost_price": null,
"in_stock": true
}
]
}
]
},
quickAdd: exampleClickHandler
}
export { productWithVariants, productWithOneSize, productOnSale }