@rocketsofawesome/mirage
Version:
[Live Demo of the Pattern Library](https://rocketsofawesome.github.io/mirage/)
347 lines (344 loc) • 6.95 kB
Markdown
#### Default state
```js
<PersistentCartProduct
item={{
id: 2943132,
price: "34.5",
amount: "34.5",
total: "34.5",
variant_id: 19915,
sku: "7084-025-N",
quantity: 1,
name: "Varsity Sequin Skirt",
color: "Silver",
size: "10",
category: [
"Bottoms",
"Skirts"
],
cost_price: null,
product_id: 894,
slug: "sequin-skirt-7084",
colorway_slug: "silver",
colorway_code: "7084-025",
order_id: 772492,
on_sale: false,
original_price: "34.5",
colorway_variants: [
{
id: 11566,
sku: "7084-025-C",
size: "4/5",
in_stock: false
},
{
id: 11562,
sku: "7084-025-H",
size: "3",
in_stock: false
},
{
id: 16484,
sku: "7084-025-I",
size: "4",
in_stock: false
},
{
id: 16486,
sku: "7084-025-K",
size: "5",
in_stock: false
},
{
id: 11567,
sku: "7084-025-D",
size: "6/7",
in_stock: false
},
{
id: 16485,
sku: "7084-025-L",
size: "6",
in_stock: false
},
{
id: 16483,
sku: "7084-025-M",
size: "7",
in_stock: false
},
{
id: 11563,
sku: "7084-025-E",
size: "8",
in_stock: false
},
{
id: 11565,
sku: "7084-025-F",
size: "10/12",
in_stock: false
},
{
id: 19915,
sku: "7084-025-N",
size: "10",
in_stock: true
},
{
id: 19914,
sku: "7084-025-O",
size: "12",
in_stock: true
},
{
id: 11564,
sku: "7084-025-P",
size: "14",
in_stock: false
}
],
shot: {
id: 4503793,
shot_type: "front",
cloudinary_key: "production/catalog/kirtmym9iy3c5wirjihg"
},
adjustments: []
}}
onUpdateQuantity={(item, quantity) => console.log('Update Quantity', item, quantity)}
onUpdateSize={(item, size) => console.log('Update Size', item, size)}
onRemoveItem={(itemId) => console.log('Remove item', itemId)}
segmentProductRemoved={() => null}
hideCartSidebar={() => {}}
/>
```
#### Removing this line item state
```js
<PersistentCartProduct
item={{
id: 2943132,
price: "34.5",
amount: "34.5",
total: "34.5",
variant_id: 19915,
sku: "7084-025-N",
quantity: 1,
name: "Varsity Sequin Skirt",
color: "Silver",
size: "10",
category: [
"Bottoms",
"Skirts"
],
cost_price: null,
product_id: 894,
slug: "sequin-skirt-7084",
colorway_slug: "silver",
colorway_code: "7084-025",
order_id: 772492,
on_sale: false,
original_price: "34.5",
colorway_variants: [
{
id: 11566,
sku: "7084-025-C",
size: "4/5",
in_stock: false
},
{
id: 11562,
sku: "7084-025-H",
size: "3",
in_stock: false
},
{
id: 16484,
sku: "7084-025-I",
size: "4",
in_stock: false
},
{
id: 16486,
sku: "7084-025-K",
size: "5",
in_stock: false
},
{
id: 11567,
sku: "7084-025-D",
size: "6/7",
in_stock: false
},
{
id: 16485,
sku: "7084-025-L",
size: "6",
in_stock: false
},
{
id: 16483,
sku: "7084-025-M",
size: "7",
in_stock: false
},
{
id: 11563,
sku: "7084-025-E",
size: "8",
in_stock: false
},
{
id: 11565,
sku: "7084-025-F",
size: "10/12",
in_stock: false
},
{
id: 19915,
sku: "7084-025-N",
size: "10",
in_stock: true
},
{
id: 19914,
sku: "7084-025-O",
size: "12",
in_stock: true
},
{
id: 11564,
sku: "7084-025-P",
size: "14",
in_stock: false
}
],
shot: {
id: 4503793,
shot_type: "front",
cloudinary_key: "production/catalog/kirtmym9iy3c5wirjihg"
},
adjustments: []
}}
onUpdateQuantity={(item, quantity) => console.log('Update Quantity', item, quantity)}
onUpdateSize={(item, size) => console.log('Update Size', item, size)}
onRemoveItem={(itemId) => console.log('Remove item', itemId)}
removingItemId={2943132}
segmentProductRemoved={() => null}
hideCartSidebar={() => {}}
/>
```
#### Removing another line item state
```js
<PersistentCartProduct
item={{
id: 2943132,
price: "34.5",
amount: "34.5",
total: "34.5",
variant_id: 19915,
sku: "7084-025-N",
quantity: 1,
name: "Varsity Sequin Skirt",
color: "Silver",
size: "10",
category: [
"Bottoms",
"Skirts"
],
cost_price: null,
product_id: 894,
slug: "sequin-skirt-7084",
colorway_slug: "silver",
colorway_code: "7084-025",
order_id: 772492,
on_sale: false,
original_price: "34.5",
colorway_variants: [
{
id: 11566,
sku: "7084-025-C",
size: "4/5",
in_stock: false
},
{
id: 11562,
sku: "7084-025-H",
size: "3",
in_stock: false
},
{
id: 16484,
sku: "7084-025-I",
size: "4",
in_stock: false
},
{
id: 16486,
sku: "7084-025-K",
size: "5",
in_stock: false
},
{
id: 11567,
sku: "7084-025-D",
size: "6/7",
in_stock: false
},
{
id: 16485,
sku: "7084-025-L",
size: "6",
in_stock: false
},
{
id: 16483,
sku: "7084-025-M",
size: "7",
in_stock: false
},
{
id: 11563,
sku: "7084-025-E",
size: "8",
in_stock: false
},
{
id: 11565,
sku: "7084-025-F",
size: "10/12",
in_stock: false
},
{
id: 19915,
sku: "7084-025-N",
size: "10",
in_stock: true
},
{
id: 19914,
sku: "7084-025-O",
size: "12",
in_stock: true
},
{
id: 11564,
sku: "7084-025-P",
size: "14",
in_stock: false
}
],
shot: {
id: 4503793,
shot_type: "front",
cloudinary_key: "production/catalog/kirtmym9iy3c5wirjihg"
},
adjustments: []
}}
onUpdateQuantity={(item, quantity) => console.log('Update Quantity', item, quantity)}
onUpdateSize={(item, size) => console.log('Update Size', item, size)}
onRemoveItem={(itemId) => console.log('Remove item', itemId)}
removingItemId={1234}
segmentProductRemoved={() => null}
hideCartSidebar={() => {}}
/>
```