Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Commit

Permalink
Add subtotal to cart and checkout and update the CartLineItem compone…
Browse files Browse the repository at this point in the history 
…nt with new styles (#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
  • Loading branch information
@opr
opr committed Jan 27, 2021
1 parent fabf8ac commit e25e76f
Show file tree
Hide file tree
Showing 11 changed files with 142 additions and 139 deletions.
45 changes: 28 additions & 17 deletions assets/js/base/components/cart-checkout/order-summary/order-summary-item.js
View file
Expand Up @@ -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,
Expand All @@ -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">
Expand All @@ -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 />
) : (
Expand All @@ -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>
);
};
Expand Down
24 changes: 15 additions & 9 deletions assets/js/base/components/cart-checkout/order-summary/style.scss
View file
Expand Up @@ -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 {
Expand All @@ -25,6 +27,10 @@
display: none;
}
}

.wc-block-components-product-metadata {
@include font-size(regular);
}
}

.wc-block-components-order-summary-item__image,
Expand All @@ -35,7 +41,6 @@

.wc-block-components-order-summary-item__image {
width: #{$gap-large * 2};
padding-top: $gap;
padding-bottom: $gap;
position: relative;

Expand All @@ -46,7 +51,6 @@
}

.wc-block-components-order-summary-item__quantity {
@include font-size(smaller);
align-items: center;
background: #fff;
border: 2px solid;
Expand All @@ -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 {
Expand All @@ -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 changes: 4 additions & 0 deletions assets/js/base/components/cart-checkout/product-details/style.scss
View file
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion assets/js/base/components/cart-checkout/product-metadata/style.scss
View file
Expand Up @@ -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 changes: 2 additions & 1 deletion assets/js/base/components/quantity-selector/style.scss
View file
Expand Up @@ -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;
Expand Down
95 changes: 58 additions & 37 deletions assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js
View file
Expand Up @@ -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,
Expand Down Expand Up @@ -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 =
Expand Down Expand Up @@ -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>
);
Expand Down
5 changes: 0 additions & 5 deletions assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-table.js
View file
Expand Up @@ -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' ) }
Expand Down

0 comments on commit e25e76f

Please sign in to comment.