Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333)
* render block on front end, add `Shopping cart` heading (baby steps)
* fake data for editing full cart + show line count in header
* add note about core/html using `is-active` class for toggle state
* reinstate work-in-progress full cart component (lost in rebase)
* reinstate full cart from master
* component for full cart title & item count + margin tweaks:
- add margin between main cart & sidebar
- add margin after cart block
* add cart items sample data + factor sample product image to module
* use sample cart data for item count
* basic table of cart line items (no styling)
* prettification
* show images for cart line items + initial table styling
* cart quantity selector component (work in progress)
* use state for cart product quantity, allow incr/decr from UI (WIP)
* replace WIP custom quantity control with number edit (temporary)
* correctly format cart line item total price
* align cart item columns with headings + indent image on desktop
* tweak css for cart line item padding on mobile so it's more explicit
* show cart line item full price if discounted
* add placeholder for cart remove item link
* switch cart table to flex layout (was table)…
This will allow us to move things around for mobile/responsive layout.
* only show cart items table header on desktop
* more cart items styling - row borders, appropriate padding +
+ move image width to variable
+ fix class name plurality for row (item not items)
* use standard $gap instead of 1em for padding/margins
* responsive (mobile) layout for cart line items:
- shift line $ total to bottom right
- stack quantity selector in product info column
* remove extraneous cart table padding on mobile
* comment about unused styles for quantity selector component
* add follow up issue for todo
* remove inappropriate href
* render srcset & sizes for cart line item product image
* remove todo comment
* switch back to table markup for cart items (in progress):
- table is more semantic, associates headers with columns
* cart line items column widths - product column is larger (60%)
* reinstate table row borders
* bottom-align line item price on mobile
* cart contents heading should be H2 + prettify
* remove unused QuantitySelector code/styles, rename main class in line with BEM
* defaults for QuantitySelector props
* variable/property name tidies - match conventions/API
* fix bug: line total price is only bottom-align on small screen
* move QuantitySelector to root of components, intended to be generally useful
* use lineItem directly for cart, specify shape in PropTypes
* rename cart components to align with "line item" rather than "product"
* rejig class names to better align with new component names & BEM style
* show cart item image correct size:
- use single column for product image and info, with flex container
- specify image width (rem instead of px)
* fix safari issue - cart product images displaying vertically stretched
* shift product name left margin from image, to account for no-image case
* experiment: bump bundlewatch size limit for cart temporarily:
- our fake data inline image is heavy
- when we switch to real API we will no longer need it
* fix issue introduced when moving margin from image to details div:
- product details needs margin on left (not right)
* fix react props issues:
- explicitly destructure image props for srcSet (vs srcset)
- use API key field for line item key instead of id, fix duplicate test id
- CartLineItemsTable takes an array of lineItems (incorrect PropTypes)
* remove redundant divs + use conventional `null` (when no full price)
* override editor styles to ensure cart product image is correct size
* move cart items editor style override to editor.css
* add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
|
|
|
/**
|
|
|
|
|
* External dependencies
|
|
|
|
|
*/
|
|
|
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Internal dependencies
|
|
|
|
|
*/
|
|
|
|
|
import productPicture from './product-image';
|
|
|
|
|
|
|
|
|
|
// Sample data for cart block line items.
|
|
|
|
|
// This closely resembles the data returned from the Store API cart/items endpoint.
|
|
|
|
|
// https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/master/src/RestApi/StoreApi#cart-items-api
|
|
|
|
|
export const previewCartItems = [
|
|
|
|
|
{
|
|
|
|
|
key: '1',
|
|
|
|
|
id: 1,
|
|
|
|
|
quantity: 2,
|
|
|
|
|
name: __( 'Beanie', 'woo-gutenberg-products-block' ),
|
2020-01-13 23:07:52 +00:00
|
|
|
description: __( 'Warm hat for winter' ),
|
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333)
* render block on front end, add `Shopping cart` heading (baby steps)
* fake data for editing full cart + show line count in header
* add note about core/html using `is-active` class for toggle state
* reinstate work-in-progress full cart component (lost in rebase)
* reinstate full cart from master
* component for full cart title & item count + margin tweaks:
- add margin between main cart & sidebar
- add margin after cart block
* add cart items sample data + factor sample product image to module
* use sample cart data for item count
* basic table of cart line items (no styling)
* prettification
* show images for cart line items + initial table styling
* cart quantity selector component (work in progress)
* use state for cart product quantity, allow incr/decr from UI (WIP)
* replace WIP custom quantity control with number edit (temporary)
* correctly format cart line item total price
* align cart item columns with headings + indent image on desktop
* tweak css for cart line item padding on mobile so it's more explicit
* show cart line item full price if discounted
* add placeholder for cart remove item link
* switch cart table to flex layout (was table)…
This will allow us to move things around for mobile/responsive layout.
* only show cart items table header on desktop
* more cart items styling - row borders, appropriate padding +
+ move image width to variable
+ fix class name plurality for row (item not items)
* use standard $gap instead of 1em for padding/margins
* responsive (mobile) layout for cart line items:
- shift line $ total to bottom right
- stack quantity selector in product info column
* remove extraneous cart table padding on mobile
* comment about unused styles for quantity selector component
* add follow up issue for todo
* remove inappropriate href
* render srcset & sizes for cart line item product image
* remove todo comment
* switch back to table markup for cart items (in progress):
- table is more semantic, associates headers with columns
* cart line items column widths - product column is larger (60%)
* reinstate table row borders
* bottom-align line item price on mobile
* cart contents heading should be H2 + prettify
* remove unused QuantitySelector code/styles, rename main class in line with BEM
* defaults for QuantitySelector props
* variable/property name tidies - match conventions/API
* fix bug: line total price is only bottom-align on small screen
* move QuantitySelector to root of components, intended to be generally useful
* use lineItem directly for cart, specify shape in PropTypes
* rename cart components to align with "line item" rather than "product"
* rejig class names to better align with new component names & BEM style
* show cart item image correct size:
- use single column for product image and info, with flex container
- specify image width (rem instead of px)
* fix safari issue - cart product images displaying vertically stretched
* shift product name left margin from image, to account for no-image case
* experiment: bump bundlewatch size limit for cart temporarily:
- our fake data inline image is heavy
- when we switch to real API we will no longer need it
* fix issue introduced when moving margin from image to details div:
- product details needs margin on left (not right)
* fix react props issues:
- explicitly destructure image props for srcSet (vs srcset)
- use API key field for line item key instead of id, fix duplicate test id
- CartLineItemsTable takes an array of lineItems (incorrect PropTypes)
* remove redundant divs + use conventional `null` (when no full price)
* override editor styles to ensure cart product image is correct size
* move cart items editor style override to editor.css
* add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
|
|
|
sku: 'woo-beanie',
|
|
|
|
|
permalink: 'https://example.org',
|
2020-01-14 20:50:32 +00:00
|
|
|
low_stock_remaining: 2,
|
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333)
* render block on front end, add `Shopping cart` heading (baby steps)
* fake data for editing full cart + show line count in header
* add note about core/html using `is-active` class for toggle state
* reinstate work-in-progress full cart component (lost in rebase)
* reinstate full cart from master
* component for full cart title & item count + margin tweaks:
- add margin between main cart & sidebar
- add margin after cart block
* add cart items sample data + factor sample product image to module
* use sample cart data for item count
* basic table of cart line items (no styling)
* prettification
* show images for cart line items + initial table styling
* cart quantity selector component (work in progress)
* use state for cart product quantity, allow incr/decr from UI (WIP)
* replace WIP custom quantity control with number edit (temporary)
* correctly format cart line item total price
* align cart item columns with headings + indent image on desktop
* tweak css for cart line item padding on mobile so it's more explicit
* show cart line item full price if discounted
* add placeholder for cart remove item link
* switch cart table to flex layout (was table)…
This will allow us to move things around for mobile/responsive layout.
* only show cart items table header on desktop
* more cart items styling - row borders, appropriate padding +
+ move image width to variable
+ fix class name plurality for row (item not items)
* use standard $gap instead of 1em for padding/margins
* responsive (mobile) layout for cart line items:
- shift line $ total to bottom right
- stack quantity selector in product info column
* remove extraneous cart table padding on mobile
* comment about unused styles for quantity selector component
* add follow up issue for todo
* remove inappropriate href
* render srcset & sizes for cart line item product image
* remove todo comment
* switch back to table markup for cart items (in progress):
- table is more semantic, associates headers with columns
* cart line items column widths - product column is larger (60%)
* reinstate table row borders
* bottom-align line item price on mobile
* cart contents heading should be H2 + prettify
* remove unused QuantitySelector code/styles, rename main class in line with BEM
* defaults for QuantitySelector props
* variable/property name tidies - match conventions/API
* fix bug: line total price is only bottom-align on small screen
* move QuantitySelector to root of components, intended to be generally useful
* use lineItem directly for cart, specify shape in PropTypes
* rename cart components to align with "line item" rather than "product"
* rejig class names to better align with new component names & BEM style
* show cart item image correct size:
- use single column for product image and info, with flex container
- specify image width (rem instead of px)
* fix safari issue - cart product images displaying vertically stretched
* shift product name left margin from image, to account for no-image case
* experiment: bump bundlewatch size limit for cart temporarily:
- our fake data inline image is heavy
- when we switch to real API we will no longer need it
* fix issue introduced when moving margin from image to details div:
- product details needs margin on left (not right)
* fix react props issues:
- explicitly destructure image props for srcSet (vs srcset)
- use API key field for line item key instead of id, fix duplicate test id
- CartLineItemsTable takes an array of lineItems (incorrect PropTypes)
* remove redundant divs + use conventional `null` (when no full price)
* override editor styles to ensure cart product image is correct size
* move cart items editor style override to editor.css
* add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
|
|
|
images: [
|
|
|
|
|
{
|
|
|
|
|
id: 10,
|
|
|
|
|
src: productPicture,
|
|
|
|
|
thumbnail: productPicture,
|
|
|
|
|
srcset: '',
|
|
|
|
|
sizes: '',
|
|
|
|
|
name: '',
|
|
|
|
|
alt: '',
|
|
|
|
|
},
|
|
|
|
|
],
|
2020-01-13 23:07:52 +00:00
|
|
|
variation: [
|
|
|
|
|
{
|
|
|
|
|
attribute: 'Color',
|
|
|
|
|
value: 'Yellow',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
attribute: 'Size',
|
|
|
|
|
value: 'Small',
|
|
|
|
|
},
|
|
|
|
|
],
|
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333)
* render block on front end, add `Shopping cart` heading (baby steps)
* fake data for editing full cart + show line count in header
* add note about core/html using `is-active` class for toggle state
* reinstate work-in-progress full cart component (lost in rebase)
* reinstate full cart from master
* component for full cart title & item count + margin tweaks:
- add margin between main cart & sidebar
- add margin after cart block
* add cart items sample data + factor sample product image to module
* use sample cart data for item count
* basic table of cart line items (no styling)
* prettification
* show images for cart line items + initial table styling
* cart quantity selector component (work in progress)
* use state for cart product quantity, allow incr/decr from UI (WIP)
* replace WIP custom quantity control with number edit (temporary)
* correctly format cart line item total price
* align cart item columns with headings + indent image on desktop
* tweak css for cart line item padding on mobile so it's more explicit
* show cart line item full price if discounted
* add placeholder for cart remove item link
* switch cart table to flex layout (was table)…
This will allow us to move things around for mobile/responsive layout.
* only show cart items table header on desktop
* more cart items styling - row borders, appropriate padding +
+ move image width to variable
+ fix class name plurality for row (item not items)
* use standard $gap instead of 1em for padding/margins
* responsive (mobile) layout for cart line items:
- shift line $ total to bottom right
- stack quantity selector in product info column
* remove extraneous cart table padding on mobile
* comment about unused styles for quantity selector component
* add follow up issue for todo
* remove inappropriate href
* render srcset & sizes for cart line item product image
* remove todo comment
* switch back to table markup for cart items (in progress):
- table is more semantic, associates headers with columns
* cart line items column widths - product column is larger (60%)
* reinstate table row borders
* bottom-align line item price on mobile
* cart contents heading should be H2 + prettify
* remove unused QuantitySelector code/styles, rename main class in line with BEM
* defaults for QuantitySelector props
* variable/property name tidies - match conventions/API
* fix bug: line total price is only bottom-align on small screen
* move QuantitySelector to root of components, intended to be generally useful
* use lineItem directly for cart, specify shape in PropTypes
* rename cart components to align with "line item" rather than "product"
* rejig class names to better align with new component names & BEM style
* show cart item image correct size:
- use single column for product image and info, with flex container
- specify image width (rem instead of px)
* fix safari issue - cart product images displaying vertically stretched
* shift product name left margin from image, to account for no-image case
* experiment: bump bundlewatch size limit for cart temporarily:
- our fake data inline image is heavy
- when we switch to real API we will no longer need it
* fix issue introduced when moving margin from image to details div:
- product details needs margin on left (not right)
* fix react props issues:
- explicitly destructure image props for srcSet (vs srcset)
- use API key field for line item key instead of id, fix duplicate test id
- CartLineItemsTable takes an array of lineItems (incorrect PropTypes)
* remove redundant divs + use conventional `null` (when no full price)
* override editor styles to ensure cart product image is correct size
* move cart items editor style override to editor.css
* add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
|
|
|
totals: {
|
|
|
|
|
currency_code: 'USD',
|
|
|
|
|
currency_symbol: '$',
|
|
|
|
|
currency_minor_unit: 2,
|
|
|
|
|
currency_decimal_separator: '.',
|
|
|
|
|
currency_thousand_separator: ',',
|
|
|
|
|
currency_prefix: '$',
|
|
|
|
|
currency_suffix: '',
|
|
|
|
|
line_subtotal: '1299',
|
|
|
|
|
line_subtotal_tax: '0',
|
|
|
|
|
line_total: '1299',
|
|
|
|
|
line_total_tax: '0',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '2',
|
|
|
|
|
id: 2,
|
|
|
|
|
quantity: 1,
|
|
|
|
|
name: __( 'Cap', 'woo-gutenberg-products-block' ),
|
2020-01-13 23:07:52 +00:00
|
|
|
description: __( 'Lightweight baseball cap' ),
|
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333)
* render block on front end, add `Shopping cart` heading (baby steps)
* fake data for editing full cart + show line count in header
* add note about core/html using `is-active` class for toggle state
* reinstate work-in-progress full cart component (lost in rebase)
* reinstate full cart from master
* component for full cart title & item count + margin tweaks:
- add margin between main cart & sidebar
- add margin after cart block
* add cart items sample data + factor sample product image to module
* use sample cart data for item count
* basic table of cart line items (no styling)
* prettification
* show images for cart line items + initial table styling
* cart quantity selector component (work in progress)
* use state for cart product quantity, allow incr/decr from UI (WIP)
* replace WIP custom quantity control with number edit (temporary)
* correctly format cart line item total price
* align cart item columns with headings + indent image on desktop
* tweak css for cart line item padding on mobile so it's more explicit
* show cart line item full price if discounted
* add placeholder for cart remove item link
* switch cart table to flex layout (was table)…
This will allow us to move things around for mobile/responsive layout.
* only show cart items table header on desktop
* more cart items styling - row borders, appropriate padding +
+ move image width to variable
+ fix class name plurality for row (item not items)
* use standard $gap instead of 1em for padding/margins
* responsive (mobile) layout for cart line items:
- shift line $ total to bottom right
- stack quantity selector in product info column
* remove extraneous cart table padding on mobile
* comment about unused styles for quantity selector component
* add follow up issue for todo
* remove inappropriate href
* render srcset & sizes for cart line item product image
* remove todo comment
* switch back to table markup for cart items (in progress):
- table is more semantic, associates headers with columns
* cart line items column widths - product column is larger (60%)
* reinstate table row borders
* bottom-align line item price on mobile
* cart contents heading should be H2 + prettify
* remove unused QuantitySelector code/styles, rename main class in line with BEM
* defaults for QuantitySelector props
* variable/property name tidies - match conventions/API
* fix bug: line total price is only bottom-align on small screen
* move QuantitySelector to root of components, intended to be generally useful
* use lineItem directly for cart, specify shape in PropTypes
* rename cart components to align with "line item" rather than "product"
* rejig class names to better align with new component names & BEM style
* show cart item image correct size:
- use single column for product image and info, with flex container
- specify image width (rem instead of px)
* fix safari issue - cart product images displaying vertically stretched
* shift product name left margin from image, to account for no-image case
* experiment: bump bundlewatch size limit for cart temporarily:
- our fake data inline image is heavy
- when we switch to real API we will no longer need it
* fix issue introduced when moving margin from image to details div:
- product details needs margin on left (not right)
* fix react props issues:
- explicitly destructure image props for srcSet (vs srcset)
- use API key field for line item key instead of id, fix duplicate test id
- CartLineItemsTable takes an array of lineItems (incorrect PropTypes)
* remove redundant divs + use conventional `null` (when no full price)
* override editor styles to ensure cart product image is correct size
* move cart items editor style override to editor.css
* add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
|
|
|
sku: 'woo-cap',
|
|
|
|
|
permalink: 'https://example.org',
|
|
|
|
|
images: [
|
|
|
|
|
{
|
|
|
|
|
id: 11,
|
|
|
|
|
src: productPicture,
|
|
|
|
|
thumbnail: productPicture,
|
|
|
|
|
srcset: '',
|
|
|
|
|
sizes: '',
|
|
|
|
|
name: '',
|
|
|
|
|
alt: '',
|
|
|
|
|
},
|
|
|
|
|
],
|
2020-01-13 23:07:52 +00:00
|
|
|
variation: [
|
|
|
|
|
{
|
|
|
|
|
attribute: 'Color',
|
|
|
|
|
value: 'Orange',
|
|
|
|
|
},
|
|
|
|
|
],
|
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333)
* render block on front end, add `Shopping cart` heading (baby steps)
* fake data for editing full cart + show line count in header
* add note about core/html using `is-active` class for toggle state
* reinstate work-in-progress full cart component (lost in rebase)
* reinstate full cart from master
* component for full cart title & item count + margin tweaks:
- add margin between main cart & sidebar
- add margin after cart block
* add cart items sample data + factor sample product image to module
* use sample cart data for item count
* basic table of cart line items (no styling)
* prettification
* show images for cart line items + initial table styling
* cart quantity selector component (work in progress)
* use state for cart product quantity, allow incr/decr from UI (WIP)
* replace WIP custom quantity control with number edit (temporary)
* correctly format cart line item total price
* align cart item columns with headings + indent image on desktop
* tweak css for cart line item padding on mobile so it's more explicit
* show cart line item full price if discounted
* add placeholder for cart remove item link
* switch cart table to flex layout (was table)…
This will allow us to move things around for mobile/responsive layout.
* only show cart items table header on desktop
* more cart items styling - row borders, appropriate padding +
+ move image width to variable
+ fix class name plurality for row (item not items)
* use standard $gap instead of 1em for padding/margins
* responsive (mobile) layout for cart line items:
- shift line $ total to bottom right
- stack quantity selector in product info column
* remove extraneous cart table padding on mobile
* comment about unused styles for quantity selector component
* add follow up issue for todo
* remove inappropriate href
* render srcset & sizes for cart line item product image
* remove todo comment
* switch back to table markup for cart items (in progress):
- table is more semantic, associates headers with columns
* cart line items column widths - product column is larger (60%)
* reinstate table row borders
* bottom-align line item price on mobile
* cart contents heading should be H2 + prettify
* remove unused QuantitySelector code/styles, rename main class in line with BEM
* defaults for QuantitySelector props
* variable/property name tidies - match conventions/API
* fix bug: line total price is only bottom-align on small screen
* move QuantitySelector to root of components, intended to be generally useful
* use lineItem directly for cart, specify shape in PropTypes
* rename cart components to align with "line item" rather than "product"
* rejig class names to better align with new component names & BEM style
* show cart item image correct size:
- use single column for product image and info, with flex container
- specify image width (rem instead of px)
* fix safari issue - cart product images displaying vertically stretched
* shift product name left margin from image, to account for no-image case
* experiment: bump bundlewatch size limit for cart temporarily:
- our fake data inline image is heavy
- when we switch to real API we will no longer need it
* fix issue introduced when moving margin from image to details div:
- product details needs margin on left (not right)
* fix react props issues:
- explicitly destructure image props for srcSet (vs srcset)
- use API key field for line item key instead of id, fix duplicate test id
- CartLineItemsTable takes an array of lineItems (incorrect PropTypes)
* remove redundant divs + use conventional `null` (when no full price)
* override editor styles to ensure cart product image is correct size
* move cart items editor style override to editor.css
* add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
|
|
|
totals: {
|
|
|
|
|
currency_code: 'USD',
|
|
|
|
|
currency_symbol: '$',
|
|
|
|
|
currency_minor_unit: 2,
|
|
|
|
|
currency_decimal_separator: '.',
|
|
|
|
|
currency_thousand_separator: ',',
|
|
|
|
|
currency_prefix: '$',
|
|
|
|
|
currency_suffix: '',
|
|
|
|
|
line_subtotal: '1600',
|
|
|
|
|
line_subtotal_tax: '0',
|
|
|
|
|
line_total: '1400',
|
|
|
|
|
line_total_tax: '0',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
];
|