Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve the cart template #607

Merged
merged 8 commits into from
Nov 16, 2020
Merged

Improve the cart template #607

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9c103bc
Improve the cart template
EvanHerman Nov 10, 2020
ed1bf64
PHPCS fixes
EvanHerman Nov 11, 2020
0fc1acc
Tweaks for mobile cart
EvanHerman Nov 11, 2020
602ce7f
Fix unit tests
EvanHerman Nov 11, 2020
33fd2a1
Fix spacing in comments
EvanHerman Nov 11, 2020
6de3e6c
Merge branch 'master' into update/woocommerce-cart
EvanHerman Nov 11, 2020
0e7a41d
Merge branch 'master' into update/woocommerce-cart
AnthonyLedesma Nov 16, 2020
e791ba9
Tweaks, update to cart template, show title and remove button on mobile
EvanHerman Nov 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
185 changes: 176 additions & 9 deletions .dev/assets/shared/css/woocommerce/cart.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,26 @@ body {

&.woocommerce-cart {

.content-area .woocommerce {
max-width: 100% !important;
width: 100% !important;

.shop_table {

thead {
border-bottom: 1px solid;

th:not(:first-child) {
text-align: center;
}
}

tbody tr:last-child {
border-top: 1px solid !important;
}
}
}

.coupon {
display: flex;

Expand All @@ -21,13 +41,26 @@ body {
}
}

table.cart th,
table.cart td {
text-align: center;
}
.product-thumbnail {
padding-left: 0 !important;

.product-thumbnail img {
width: 150px;
a:first-child {
display: inline-block;
}

img {
margin-right: 10px;
width: 150px;
}

table.cart th,
table.cart td {
text-align: center;
}

.product-thumbnail img {
width: 150px;
}
}

.cart-empty-icon {
Expand All @@ -42,6 +75,60 @@ body {
text-align: center;
}

.woocommerce-cart-form__cart-item {

td:not(:first-child) {
text-align: center;
}
}

.product-thumbnail {

.actions {
display: inline-block;
margin-left: 5px;
}

a {
text-decoration: none;

&:hover {
text-decoration: underline;
}

&.remove {
display: inline-block;
font-size: inherit;
height: auto;
width: auto;
text-align: unset;
line-height: 1;
border-radius: unset;
color: inherit !important;
text-decoration: underline;
font-weight: inherit;

&:hover {
background: unset;
}
}
}
}

td.actions {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 2rem;
}

.cart-collaterals .cart_totals {
float: none;
width: 50%;

th {
padding-left: 0;
}
}
}

&.woocommerce,
Expand All @@ -54,9 +141,89 @@ body {
}

.woocommerce table.shop_table {
border-radius: 0 !important;
border: none;
border-collapse: collapse;

td {
border-top: 0 !important;
}

td,
th {
border: none !important;
}

.quantity .qty {
margin-bottom: unset;
}
}

.woocommerce table.shop_table td {
border-top: 0 !important;
/* Mobile */
@media (max-width:768px) {
body.woocommerce-cart {

.coupon {
display: inline-block;
width: 100%;

#coupon_code {
float: none;
width: 100% !important;
}

button[type="submit"] {
width: 100% !important;
margin: 0.5rem 0;
}
}

.cart_totals {
width: 100% !important;

.checkout-button {
width: 100%;
}
}
}

.woocommerce-page table.shop_table_responsive .product-thumbnail {

&::before {
display: none;
}

.actions {
align-items: center;
align-content: space-between;
display: flex;
flex-wrap: wrap;
padding-left: 9px;
width: 100%;

br {
display: none;
}

a {
font-weight: 600;
text-decoration: underline;

&.remove {
font-weight: 400;
margin-left: auto;
}
}
}
}

.woocommerce #content table.cart .product-thumbnail,
.woocommerce table.cart .product-thumbnail,
.woocommerce-page #content table.cart .product-thumbnail,
.woocommerce-page table.cart .product-thumbnail {
display: block;

img {
display: none;
}
}
}
2 changes: 1 addition & 1 deletion languages/go.pot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ msgstr ""
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"POT-Creation-Date: 2020-11-16T21:36:01+00:00\n"
"POT-Creation-Date: 2020-11-12T19:47:59+00:00\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"X-Generator: WP-CLI 2.4.0\n"
"X-Domain: go\n"
Expand Down
175 changes: 175 additions & 0 deletions woocommerce/cart/cart.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
<?php
/**
* Cart Page
*
* This template can be overridden by copying it to yourtheme/woocommerce/cart/cart.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce\Templates
* @version 3.8.0
*/

defined( 'ABSPATH' ) || exit;

do_action( 'woocommerce_before_cart' ); ?>

<form class="woocommerce-cart-form" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post">
<?php do_action( 'woocommerce_before_cart_table' ); ?>

<table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents" cellspacing="0">
<thead>
<tr>
<th class="product-thumbnail">
<?php
printf(
/* translators: 1. Single integer value. (eg: Items (1), Items (2) etc.). */
esc_html__( 'Items (%s)', 'go' ),
esc_html( WC()->cart->cart_contents_count )
);
?>
</th>
<th class="product-price"><?php esc_html_e( 'Price', 'woocommerce' ); ?></th>
<th class="product-quantity"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></th>
<th class="product-subtotal"><?php esc_html_e( 'Subtotal', 'woocommerce' ); ?></th>
</tr>
</thead>
<tbody>
<?php do_action( 'woocommerce_before_cart_contents' ); ?>

<?php
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
$_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
$product_id = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key );

if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_cart_item_visible', true, $cart_item, $cart_item_key ) ) {
$product_permalink = apply_filters( 'woocommerce_cart_item_permalink', $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '', $cart_item, $cart_item_key );
?>
<tr class="woocommerce-cart-form__cart-item <?php echo esc_attr( apply_filters( 'woocommerce_cart_item_class', 'cart_item', $cart_item, $cart_item_key ) ); ?>">

<td class="product-thumbnail">
<?php
$thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );

if ( ! $product_permalink ) {
echo $thumbnail; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
} else {
printf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $thumbnail ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}

print( '<div class="actions">' );

if ( ! $product_permalink ) {
echo wp_kses_post( apply_filters( 'woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key ) . '&nbsp;' );
} else {
echo wp_kses_post( apply_filters( 'woocommerce_cart_item_name', sprintf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $_product->get_name() ), $cart_item, $cart_item_key ) );
}

do_action( 'woocommerce_after_cart_item_name', $cart_item, $cart_item_key );

// Meta data.
echo wc_get_formatted_cart_item_data( $cart_item ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

// Backorder notification.
if ( $_product->backorders_require_notification() && $_product->is_on_backorder( $cart_item['quantity'] ) ) {
echo wp_kses_post( apply_filters( 'woocommerce_cart_item_backorder_notification', '<p class="backorder_notification">' . esc_html__( 'Available on backorder', 'woocommerce' ) . '</p>', $product_id ) );
}

printf(
'<br /><a href="%1$s" class="remove" aria-label="%2$s" data-product_id="%3$s" data-product_sku="%4$s">%5$s</a>',
esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
esc_html__( 'Remove this item', 'woocommerce' ),
esc_attr( $product_id ),
esc_attr( $_product->get_sku() ),
esc_html__( 'Remove', 'go' )
);

print( '</div>' );
?>
</td>

<td class="product-price" data-title="<?php esc_attr_e( 'Price', 'woocommerce' ); ?>">
<?php
echo apply_filters( 'woocommerce_cart_item_price', WC()->cart->get_product_price( $_product ), $cart_item, $cart_item_key ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?>
</td>

<td class="product-quantity" data-title="<?php esc_attr_e( 'Quantity', 'woocommerce' ); ?>">
<?php
if ( $_product->is_sold_individually() ) {
$product_quantity = sprintf( '1 <input type="hidden" name="cart[%s][qty]" value="1" />', $cart_item_key );
} else {
$product_quantity = woocommerce_quantity_input(
array(
'input_name' => "cart[{$cart_item_key}][qty]",
'input_value' => $cart_item['quantity'],
'max_value' => $_product->get_max_purchase_quantity(),
'min_value' => '0',
'product_name' => $_product->get_name(),
),
$_product,
false
);
}

echo apply_filters( 'woocommerce_cart_item_quantity', $product_quantity, $cart_item_key, $cart_item ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?>
</td>

<td class="product-subtotal" data-title="<?php esc_attr_e( 'Subtotal', 'woocommerce' ); ?>">
<?php
echo apply_filters( 'woocommerce_cart_item_subtotal', WC()->cart->get_product_subtotal( $_product, $cart_item['quantity'] ), $cart_item, $cart_item_key ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?>
</td>
</tr>
<?php
}
}
?>

<?php do_action( 'woocommerce_cart_contents' ); ?>

<tr>
<td colspan="6" class="actions">

<?php if ( wc_coupons_enabled() ) { ?>
<div class="coupon">
<label for="coupon_code"><?php esc_html_e( 'Coupon:', 'woocommerce' ); ?></label> <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" /> <button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>"><?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?></button>
<?php do_action( 'woocommerce_cart_coupon' ); ?>
</div>
<?php } ?>

<button type="submit" class="button" name="update_cart" value="<?php esc_attr_e( 'Update cart', 'woocommerce' ); ?>"><?php esc_html_e( 'Update cart', 'woocommerce' ); ?></button>

<?php do_action( 'woocommerce_cart_actions' ); ?>

<?php wp_nonce_field( 'woocommerce-cart', 'woocommerce-cart-nonce' ); ?>
</td>
</tr>

<?php do_action( 'woocommerce_after_cart_contents' ); ?>
</tbody>
</table>
<?php do_action( 'woocommerce_after_cart_table' ); ?>
</form>

<?php do_action( 'woocommerce_before_cart_collaterals' ); ?>

<div class="cart-collaterals">
<?php
/**
* Cart collaterals hook.
*
* @hooked woocommerce_cross_sell_display
* @hooked woocommerce_cart_totals - 10
*/
do_action( 'woocommerce_cart_collaterals' );
?>
</div>

<?php do_action( 'woocommerce_after_cart' ); ?>