Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add subtotal to cart and checkout and update the CartLineItem component with new styles (https://github.com/woocommerce/woocommerce-blocks/pull/3734) 

* Create new vars to differentiate between single and multiple item price

This is because we need to display the subtotal of the item AND the total (subtotal * quantity)

* Add subtotal and move quantity picker

As per the new designs, the quantity picker should be moved below the product metadata, and the product subtotals should appear below the product name.

* Move line item total to top of grid on mobile/medium/small

* Remove CSS for trash icon that is no longer used.

* Remove link style colour override from product name and make total bold

* Remove quantity column from CartLineItem

This is because the quantity picker is now displayed below the product metadata and name.

* Fix margins around quantity picker and its width

* Always disable link to product in OrderSummaryItem

* Add single price below product name in OrderSummaryItem

* Add styles for new OrderItemSummary design

* Move total into its own "column"

This is to stop product description text flowing under the total and making it look untidy.

* Add styles to cater for total price being its own column

* Convert precision after multiplication instead of before

* Remove unnecessary div from OrderSummaryItem

* Remove line height from product names on order summary

* Add more margin to the bottom of the product metadata div

* Delete trash icon

* Only remove margin from the bottom of last product-details

* Move quantity input to below product name in cart skeleton

* Add placeholder for individual price to Cart skeleton
This commit is contained in:
Thomas Roberts 2021-01-27 11:34:59 +00:00 committed by GitHub
parent dfac8d7ca7
commit 49a56e27ee
11 changed files with 151 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.js
View File

@ -20,7 +20,6 @@ import ProductMetadata from '../product-metadata';
const OrderSummaryItem = ( { cartItem } ) => {
const {
images,
catalog_visibility: catalogVisibility = '',
low_stock_remaining: lowStockRemaining = null,
show_backorder_badge: showBackorderBadge = false,
name,
@ -34,15 +33,23 @@ const OrderSummaryItem = ( { cartItem } ) => {
} = cartItem;
const currency = getCurrency( prices );
const linePrice = Dinero( {
amount: parseInt( prices.raw_prices.price, 10 ),
const regularPriceSingle = Dinero( {
amount: parseInt( prices.raw_prices.regular_price, 10 ),
precision: parseInt( prices.raw_prices.precision, 10 ),
} )
.convertPrecision( currency.minorUnit )
.getAmount();
const unconvertedLinePrice = Dinero( {
amount: parseInt( prices.raw_prices.price, 10 ),
precision: parseInt( prices.raw_prices.precision, 10 ),
} );
const linePriceSingle = unconvertedLinePrice
.convertPrecision( currency.minorUnit )
.getAmount();
const linePrice = unconvertedLinePrice
.multiply( quantity )
.convertPrecision( currency.minorUnit )
.getAmount();
const isProductHiddenFromCatalog =
catalogVisibility === 'hidden' || catalogVisibility === 'search';
return (
<div className="wc-block-components-order-summary-item">
@ -60,18 +67,19 @@ const OrderSummaryItem = ( { cartItem } ) => {
<ProductImage image={ images.length ? images[ 0 ] : {} } />
</div>
<div className="wc-block-components-order-summary-item__description">
<div className="wc-block-components-order-summary-item__header">
<ProductName
disabled={ isProductHiddenFromCatalog }
name={ name }
permalink={ permalink }
/>
<ProductPrice
currency={ currency }
price={ linePrice }
priceClassName="wc-block-components-order-summary-item__total-price"
/>
</div>
<ProductName
disabled={ true }
name={ name }
permalink={ permalink }
/>
<ProductPrice
currency={ currency }
price={ linePriceSingle }
regularPrice={ regularPriceSingle }
className="wc-block-components-order-summary-item__individual-prices"
priceClassName="wc-block-components-order-summary-item__individual-price"
regularPriceClassName="wc-block-components-order-summary-item__regular-individual-price"
/>
{ showBackorderBadge ? (
<ProductBackorderBadge />
) : (
@ -88,6 +96,9 @@ const OrderSummaryItem = ( { cartItem } ) => {
variation={ variation }
/>
</div>
<div className="wc-block-components-order-summary-item__total-price">
<ProductPrice currency={ currency } price={ linePrice } />
</div>
</div>
);
};

24
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/style.scss
View File

@ -12,8 +12,10 @@
.wc-block-components-order-summary-item {
@include with-translucent-border(0 0 1px);
display: table-row;
@include font-size(small);
display: flex;
padding-bottom: 1px;
padding-top: $gap;
width: 100%;
&:last-child {
@ -25,6 +27,10 @@
display: none;
}
}
.wc-block-components-product-metadata {
@include font-size(regular);
}
}
.wc-block-components-order-summary-item__image,
@ -35,7 +41,6 @@
.wc-block-components-order-summary-item__image {
width: #{$gap-large * 2};
padding-top: $gap;
padding-bottom: $gap;
position: relative;
@ -46,7 +51,6 @@
}
.wc-block-components-order-summary-item__quantity {
@include font-size(smaller);
align-items: center;
background: #fff;
border: 2px solid;
@ -69,9 +73,7 @@
.wc-block-components-order-summary-item__description {
padding-left: $gap-large;
padding-top: $gap;
padding-bottom: $gap;
line-height: 1.375;
p,
.wc-block-components-product-metadata {
@ -80,8 +82,12 @@
}
}
.wc-block-components-order-summary-item__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.wc-block-components-order-summary-item__total-price {
font-weight: bold;
margin-left: auto;
}
.wc-block-components-order-summary-item__individual-prices {
display: block;
}

4
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-details/style.scss
View File

@ -3,6 +3,10 @@
list-style: none;
margin: 0.5em 0;
padding: 0;
&:last-of-type {
margin-bottom: 0;
}
}
.wc-block-components-product-details__name,

2
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-metadata/style.scss
View File

@ -3,6 +3,6 @@
.wc-block-components-product-metadata__description > p,
.wc-block-components-product-metadata__variation-data {
margin: 0.25em 0 0 0;
margin: 0.25em 0;
}
}

3
plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss
View File

@ -12,12 +12,13 @@
.wc-block-components-quantity-selector {
display: flex;
min-width: 100px;
width: 107px;
border: 1px solid $gray-300;
background: #fff;
border-radius: 4px;
// needed so that buttons fill the container.
box-sizing: content-box;
margin: 0 0 0.25em 0;
.has-dark-controls & {
background-color: transparent;

95
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js
View File

@ -8,7 +8,6 @@ import QuantitySelector from '@woocommerce/base-components/quantity-selector';
import ProductPrice from '@woocommerce/base-components/product-price';
import ProductName from '@woocommerce/base-components/product-name';
import { useStoreCartItemQuantity } from '@woocommerce/base-hooks';
import { Icon, trash } from '@woocommerce/icons';
import {
ProductBackorderBadge,
ProductImage,
@ -82,14 +81,19 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
} = useStoreCartItemQuantity( lineItem );
const currency = getCurrency( prices );
const regularAmount = Dinero( {
const regularAmountSingle = Dinero( {
amount: parseInt( prices.raw_prices.regular_price, 10 ),
precision: parseInt( prices.raw_prices.precision, 10 ),
} ).multiply( quantity );
const purchaseAmount = Dinero( {
} );
const purchaseAmountSingle = Dinero( {
amount: parseInt( prices.raw_prices.price, 10 ),
precision: parseInt( prices.raw_prices.precision, 10 ),
} ).multiply( quantity );
} );
const regularAmount = regularAmountSingle.multiply( quantity );
const purchaseAmount = purchaseAmountSingle.multiply( quantity );
const saleAmountSingle = regularAmountSingle.subtract(
purchaseAmountSingle
);
const saleAmount = regularAmount.subtract( purchaseAmount );
const firstImage = images.length ? images[ 0 ] : {};
const isProductHiddenFromCatalog =
@ -130,51 +134,68 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
/>
)
) }
<div className="wc-block-cart-item__prices">
<ProductPrice
currency={ currency }
regularPrice={ getAmountFromRawPrice(
regularAmountSingle,
currency
) }
price={ getAmountFromRawPrice(
purchaseAmountSingle,
currency
) }
/>
</div>
<ProductSaleBadge
currency={ currency }
saleAmount={ getAmountFromRawPrice(
saleAmountSingle,
currency
) }
/>
<ProductMetadata
shortDescription={ shortDescription }
fullDescription={ fullDescription }
itemData={ itemData }
variation={ variation }
/>
</td>
<td className="wc-block-cart-item__quantity">
<QuantitySelector
disabled={ isPendingDelete }
quantity={ quantity }
maximum={ quantityLimit }
onChange={ changeQuantity }
itemName={ name }
/>
<button
className="wc-block-cart-item__remove-link"
onClick={ removeItem }
disabled={ isPendingDelete }
>
{ __( 'Remove item', 'woo-gutenberg-products-block' ) }
</button>
<button
className="wc-block-cart-item__remove-icon"
onClick={ removeItem }
>
<span className="screen-reader-text">
<div className="wc-block-cart-item__quantity">
<QuantitySelector
disabled={ isPendingDelete }
quantity={ quantity }
maximum={ quantityLimit }
onChange={ changeQuantity }
itemName={ name }
/>
<button
className="wc-block-cart-item__remove-link"
onClick={ removeItem }
disabled={ isPendingDelete }
>
{ __( 'Remove item', 'woo-gutenberg-products-block' ) }
</span>
<Icon srcElement={ trash } />
</button>
</button>
</div>
</td>
<td className="wc-block-cart-item__total">
<ProductPrice
currency={ currency }
regularPrice={ getAmountFromRawPrice(
regularAmount,
currency
) }
price={ getAmountFromRawPrice( purchaseAmount, currency ) }
/>
<ProductSaleBadge
currency={ currency }
saleAmount={ getAmountFromRawPrice( saleAmount, currency ) }
/>
{ quantity > 1 && (
<ProductSaleBadge
currency={ currency }
saleAmount={ getAmountFromRawPrice(
saleAmount,
currency
) }
/>
) }
</td>
</tr>
);

5
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-table.js
View File

@ -39,11 +39,6 @@ const CartLineItemsTable = ( { lineItems = [], isLoading = false } ) => {
{ __( 'Details', 'woo-gutenberg-products-block' ) }
</span>
</th>
<th className="wc-block-cart-items__header-quantity">
<span>
{ __( 'Quantity', 'woo-gutenberg-products-block' ) }
</span>
</th>
<th className="wc-block-cart-items__header-total">
<span>
{ __( 'Total', 'woo-gutenberg-products-block' ) }

42
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
View File

@ -3,9 +3,6 @@
white-space: nowrap;
}
.wc-block-components-product-name {
color: inherit;
}
.wc-block-components-address-form {
.wc-block-components-text-input,
.wc-block-components-country-input,
@ -64,15 +61,6 @@ table.wc-block-cart-items {
text-transform: none;
white-space: nowrap;
}
.wc-block-cart-item__remove-icon {
@include link-button;
fill: currentColor;
position: absolute;
top: $gap;
right: 0;
display: none;
}
}
.wc-block-components-product-name {
display: block;
@ -86,8 +74,12 @@ table.wc-block-cart-items {
.wc-block-components-product-price__regular,
.wc-block-components-product-price__value {
display: block;
font-weight: bold;
}
}
.wc-block-components-product-metadata {
margin-bottom: 0.75em;
}
&.is-disabled {
opacity: 0.5;
@ -112,6 +104,7 @@ table.wc-block-cart-items {
.wc-block-cart-items {
.wc-block-cart-items__row {
.wc-block-cart-item__price,
.wc-block-cart-item__individual-price,
.wc-block-cart-item__product-metadata,
.wc-block-cart-item__image > *,
.wc-block-components-quantity-selector {
@ -127,13 +120,18 @@ table.wc-block-cart-items {
margin-top: 0.25em;
min-width: 8em;
}
.wc-block-cart-item__remove-link,
.wc-block-cart-item__remove-icon {
.wc-block-cart-item__remove-link {
visibility: hidden;
}
.wc-block-cart-item__image a {
display: block;
}
.wc-block-cart-item__individual-price {
@include force-content();
max-width: 3em;
display: block;
margin-top: 0.25em;
}
.wc-block-cart-item__total {
> span,
> div {
@ -192,10 +190,9 @@ table.wc-block-cart-items {
}
.wc-block-cart-item__product {
grid-column-start: 2;
grid-column-end: 4;
grid-column-end: 3;
grid-row-start: 1;
justify-self: stretch;
margin-right: 24px;
padding-bottom: $gap;
}
.wc-block-cart-item__quantity {
@ -205,20 +202,9 @@ table.wc-block-cart-items {
padding-right: $gap;
align-self: end;
padding-top: $gap;
.wc-block-cart-item__remove-link {
display: none;
}
.wc-block-cart-item__remove-icon {
display: block;
}
}
.wc-block-cart-item__total {
grid-column: 2 / span 2;
grid-row-start: 2;
align-self: end;
justify-self: end;
padding-bottom: 0.375em;
grid-row-start: 1;
.wc-block-components-formatted-money-amount {
display: inline-block;

1
plugins/woocommerce-blocks/assets/js/icons/index.js
View File

@ -42,7 +42,6 @@ export { default as tag } from './library/tag';
export { default as tags } from './library/tags';
export { default as thumbUp } from './library/thumb-up';
export { default as toggle } from './library/toggle';
export { default as trash } from './library/trash';
export { default as truck } from './library/truck';
export { default as widgets } from './library/widgets';
export { default as woo } from './library/woo';

16
plugins/woocommerce-blocks/assets/js/icons/library/trash.js
View File

@ -1,16 +0,0 @@
/**
* External dependencies
*/
import { SVG } from 'wordpress-components';
// This uses `delete_outline` icon from Material.
// https://material.io/resources/icons/?icon=delete_outline&style=baseline
// We are using it as `trash` or `trashcan` or `remove-item`.
const trash = (
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4z" />
<path fill="none" d="M0 0h24v24H0V0z" />
</SVG>
);
export default trash;

62
plugins/woocommerce-blocks/src/BlockTypes/Cart.php
View File

@ -148,7 +148,6 @@ class Cart extends AbstractBlock {
<tr class="wc-block-cart-items__header">
<th class="wc-block-cart-items__header-image"><span /></th>
<th class="wc-block-cart-items__header-product"><span /></th>
<th class="wc-block-cart-items__header-quantity"><span /></th>
<th class="wc-block-cart-items__header-total"><span /></th>
</tr>
</thead>
@ -159,33 +158,13 @@ class Cart extends AbstractBlock {
</td>
<td class="wc-block-cart-item__product">
<div class="wc-block-cart-item__product-name"></div>
<div class="wc-block-cart-item__individual-price"></div>
<div class="wc-block-cart-item__product-metadata"></div>
</td>
<td class="wc-block-cart-item__quantity">
<div class="wc-block-components-quantity-selector">
<input class="wc-block-components-quantity-selector__input" type="number" step="1" min="0" value="1" />
<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">－</button>
<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus">＋</button>
</div>
</td>
<td class="wc-block-cart-item__total">
<div class="wc-block-cart-item__price"></div>
</td>
</tr>
<tr class="wc-block-cart-items__row">
<td class="wc-block-cart-item__image">
<div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" width="1" height="1" /></div>
</td>
<td class="wc-block-cart-item__product">
<div class="wc-block-cart-item__product-name">&nbsp;</div>
<div class="wc-block-cart-item__product-metadata">&nbsp;</div>
</td>
<td class="wc-block-cart-item__quantity">
<div class="wc-block-components-quantity-selector">
<input class="wc-block-components-quantity-selector__input" type="number" step="1" min="0" value="1" />
<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">－</button>
<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus">＋</button>
</div>
<div class="wc-block-components-quantity-selector">
<input class="wc-block-components-quantity-selector__input" type="number" step="1" min="0" value="1" />
<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">－</button>
<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus">＋</button>
</div>
</td>
<td class="wc-block-cart-item__total">
<div class="wc-block-cart-item__price"></div>
@ -197,14 +176,31 @@ class Cart extends AbstractBlock {
</td>
<td class="wc-block-cart-item__product">
<div class="wc-block-cart-item__product-name"></div>
<div class="wc-block-cart-item__individual-price"></div>
<div class="wc-block-cart-item__product-metadata"></div>
<div class="wc-block-components-quantity-selector">
<input class="wc-block-components-quantity-selector__input" type="number" step="1" min="0" value="1" />
<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">－</button>
<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus">＋</button>
</div>
</td>
<td class="wc-block-cart-item__quantity">
<div class="wc-block-components-quantity-selector">
<input class="wc-block-components-quantity-selector__input" type="number" step="1" min="0" value="1" />
<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">－</button>
<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus">＋</button>
</div>
<td class="wc-block-cart-item__total">
<div class="wc-block-cart-item__price"></div>
</td>
</tr>
<tr class="wc-block-cart-items__row">
<td class="wc-block-cart-item__image">
<div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" width="1" height="1" /></div>
</td>
<td class="wc-block-cart-item__product">
<div class="wc-block-cart-item__product-name"></div>
<div class="wc-block-cart-item__individual-price"></div>
<div class="wc-block-cart-item__product-metadata"></div>
<div class="wc-block-components-quantity-selector">
<input class="wc-block-components-quantity-selector__input" type="number" step="1" min="0" value="1" />
<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">－</button>
<button class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus">＋</button>
</div>
</td>
<td class="wc-block-cart-item__total">
<div class="wc-block-cart-item__price"></div>