diff --git a/index3.css b/index3.css
index 8c50c473..33944ed9 100644
--- a/index3.css
+++ b/index3.css
@@ -1316,6 +1316,18 @@
color: var(--primary-strong);
}
+ .cart-actions {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 12px;
+ }
+
+ .cart-actions .ghost-button,
+ .cart-actions .button {
+ justify-content: center;
+ text-align: center;
+ }
+
.empty-state {
padding: 20px;
border-radius: 22px;
@@ -1449,4 +1461,8 @@
flex-direction: column;
align-items: start;
}
+
+ .cart-actions {
+ grid-template-columns: 1fr;
+ }
}
diff --git a/index3.html b/index3.html
index d5101213..832d3696 100644
--- a/index3.html
+++ b/index3.html
@@ -717,7 +717,10 @@
Корзина пока пуста. Добавьте воду 19 литров, компактные форматы или минеральную воду из каталога.
-
+
+
+
+
diff --git a/index3.js b/index3.js
index ae703e8d..2d1c9cc2 100644
--- a/index3.js
+++ b/index3.js
@@ -13,6 +13,7 @@ const audienceContent = {
const cartCloseButton = document.getElementById('cartCloseButton')
const modalBackdrop = document.getElementById('orderModal')
const modalCloseButton = document.getElementById('modalCloseButton')
+ const viewCartButton = document.getElementById('viewCartButton')
const checkoutButton = document.getElementById('checkoutButton')
const orderButtons = document.querySelectorAll('[data-open-order]')
const addToCartButtons = document.querySelectorAll('.add-to-cart')
@@ -166,7 +167,14 @@ const audienceContent = {
return
}
- window.location.href = wooCommerceConfig.checkoutUrl
+ cart.push({
+ name: button.dataset.name,
+ volume: button.dataset.volume,
+ price: Number(button.dataset.price)
+ })
+ renderCart()
+ openCart()
+ button.disabled = false
})
.catch(() => {
button.disabled = false
@@ -191,6 +199,11 @@ const audienceContent = {
openCart()
})
cartCloseButton.addEventListener('click', closeCart)
+ viewCartButton.addEventListener('click', () => {
+ if (wooCommerceConfig && wooCommerceConfig.cartUrl) {
+ window.location.href = wooCommerceConfig.cartUrl
+ }
+ })
checkoutButton.addEventListener('click', () => {
if (wooCommerceConfig && wooCommerceConfig.checkoutUrl) {
window.location.href = wooCommerceConfig.checkoutUrl
diff --git a/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css b/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css
index b09e6209..b7bd6c7f 100644
--- a/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css
+++ b/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css
@@ -2,58 +2,59 @@
--checkout-max-width: 1180px;
}
-body.test1-checkout-page {
+body:is(.test1-checkout-page, .test1-cart-page) {
min-width: 320px;
}
-.test1-checkout-page .checkout-shell {
+:is(.test1-checkout-page, .test1-cart-page) .checkout-shell {
display: grid;
gap: 28px;
align-items: start;
}
-.test1-checkout-page .checkout-intro {
+:is(.test1-checkout-page, .test1-cart-page) .checkout-intro {
max-width: 780px;
}
-.test1-checkout-page .checkout-card {
+:is(.test1-checkout-page, .test1-cart-page) .checkout-card {
padding: clamp(22px, 3vw, 36px);
}
-.test1-checkout-page .checkout-back-link {
+:is(.test1-checkout-page, .test1-cart-page) .checkout-back-link {
white-space: nowrap;
}
-.test1-checkout-page .entry-content,
-.test1-checkout-page .woocommerce,
-.test1-checkout-page .wc-block-checkout,
-.test1-checkout-page .wc-block-cart,
-.test1-checkout-page .is-large {
+:is(.test1-checkout-page, .test1-cart-page) .entry-content,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-cart,
+:is(.test1-checkout-page, .test1-cart-page) .is-large {
max-width: 100%;
}
-.test1-checkout-page .woocommerce {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce {
color: var(--text);
}
-.test1-checkout-page .woocommerce a,
-.test1-checkout-page .wc-block-components-text-input input,
-.test1-checkout-page .wc-block-components-combobox .components-combobox-control__input,
-.test1-checkout-page .wc-block-components-textarea,
-.test1-checkout-page .wc-block-components-text-input label,
-.test1-checkout-page .wc-block-components-checkbox label {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce a,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input input,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-combobox .components-combobox-control__input,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-textarea,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input label,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkbox label {
color: var(--text);
}
-.test1-checkout-page .woocommerce form .form-row input.input-text,
-.test1-checkout-page .woocommerce form .form-row textarea,
-.test1-checkout-page .woocommerce form .form-row select,
-.test1-checkout-page .wc-block-components-text-input input,
-.test1-checkout-page .wc-block-components-text-input select,
-.test1-checkout-page .wc-block-components-textarea textarea,
-.test1-checkout-page .components-text-control__input,
-.test1-checkout-page .components-form-token-field__input,
-.test1-checkout-page .components-combobox-control__input {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row input.input-text,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row textarea,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row select,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input input,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input select,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-textarea textarea,
+:is(.test1-checkout-page, .test1-cart-page) .components-text-control__input,
+:is(.test1-checkout-page, .test1-cart-page) .components-form-token-field__input,
+:is(.test1-checkout-page, .test1-cart-page) .components-combobox-control__input,
+:is(.test1-checkout-page, .test1-cart-page) .coupon #coupon_code {
min-height: 56px;
padding: 14px 16px;
border-radius: 18px;
@@ -62,54 +63,63 @@ body.test1-checkout-page {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
-.test1-checkout-page .woocommerce form .form-row textarea,
-.test1-checkout-page .wc-block-components-textarea textarea {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row textarea,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-textarea textarea {
min-height: 120px;
}
-.test1-checkout-page .woocommerce-checkout #payment,
-.test1-checkout-page .woocommerce-billing-fields,
-.test1-checkout-page .woocommerce-additional-fields,
-.test1-checkout-page #order_review,
-.test1-checkout-page .wc-block-components-sidebar,
-.test1-checkout-page .wc-block-components-totals-wrapper,
-.test1-checkout-page .wc-block-checkout__main,
-.test1-checkout-page .wc-block-checkout__sidebar,
-.test1-checkout-page .wc-block-components-checkout-step,
-.test1-checkout-page .wc-block-components-order-summary,
-.test1-checkout-page .wc-block-components-totals-coupon,
-.test1-checkout-page .wc-block-components-shipping-rates-control,
-.test1-checkout-page .wc-block-components-address-form {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-billing-fields,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-additional-fields,
+:is(.test1-checkout-page, .test1-cart-page) #order_review,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-sidebar,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-totals-wrapper,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__main,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__sidebar,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkout-step,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-order-summary,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-totals-coupon,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-shipping-rates-control,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-address-form,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart-form,
+:is(.test1-checkout-page, .test1-cart-page) .cart_totals,
+:is(.test1-checkout-page, .test1-cart-page) .cart-collaterals {
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.72);
background: rgba(255, 255, 255, 0.76);
box-shadow: 0 30px 80px rgba(10, 43, 109, 0.12);
}
-.test1-checkout-page .woocommerce-checkout #payment,
-.test1-checkout-page .woocommerce-billing-fields,
-.test1-checkout-page .woocommerce-additional-fields,
-.test1-checkout-page #order_review {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-billing-fields,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-additional-fields,
+:is(.test1-checkout-page, .test1-cart-page) #order_review,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart-form,
+:is(.test1-checkout-page, .test1-cart-page) .cart_totals,
+:is(.test1-checkout-page, .test1-cart-page) .cart-collaterals {
padding: 24px;
}
-.test1-checkout-page .woocommerce form .form-row {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row {
margin-bottom: 16px;
}
-.test1-checkout-page .woocommerce form .form-row label,
-.test1-checkout-page .wc-block-components-text-input label,
-.test1-checkout-page .wc-block-components-checkbox label,
-.test1-checkout-page .wc-block-components-radio-control__option-label {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row label,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input label,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkbox label,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-radio-control__option-label {
font-weight: 700;
color: var(--text);
}
-.test1-checkout-page .woocommerce button.button,
-.test1-checkout-page .woocommerce #payment #place_order,
-.test1-checkout-page .wc-block-components-button,
-.test1-checkout-page .wc-block-cart__submit-button,
-.test1-checkout-page .wc-block-components-checkout-place-order-button {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce button.button,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce #payment #place_order,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-button,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-cart__submit-button,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkout-place-order-button,
+:is(.test1-checkout-page, .test1-cart-page) .checkout-button,
+:is(.test1-checkout-page, .test1-cart-page) .actions .button,
+:is(.test1-checkout-page, .test1-cart-page) .coupon .button {
min-height: 56px;
padding: 16px 22px;
border: 0;
@@ -120,93 +130,148 @@ body.test1-checkout-page {
font-weight: 800;
}
-.test1-checkout-page .woocommerce button.button:hover,
-.test1-checkout-page .woocommerce #payment #place_order:hover,
-.test1-checkout-page .wc-block-components-button:hover,
-.test1-checkout-page .wc-block-cart__submit-button:hover,
-.test1-checkout-page .wc-block-components-checkout-place-order-button:hover {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce button.button:hover,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce #payment #place_order:hover,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-button:hover,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-cart__submit-button:hover,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkout-place-order-button:hover,
+:is(.test1-checkout-page, .test1-cart-page) .checkout-button:hover,
+:is(.test1-checkout-page, .test1-cart-page) .actions .button:hover,
+:is(.test1-checkout-page, .test1-cart-page) .coupon .button:hover {
transform: translateY(-1px);
filter: brightness(1.03);
}
-.test1-checkout-page table.shop_table,
-.test1-checkout-page .wc-block-components-order-summary-item,
-.test1-checkout-page .wc-block-components-product-name {
+:is(.test1-checkout-page, .test1-cart-page) table.shop_table,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-order-summary-item,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-product-name {
color: var(--text);
}
-.test1-checkout-page table.shop_table td,
-.test1-checkout-page table.shop_table th,
-.test1-checkout-page .woocommerce-checkout-review-order-table th,
-.test1-checkout-page .woocommerce-checkout-review-order-table td {
+:is(.test1-checkout-page, .test1-cart-page) table.shop_table {
+ overflow: hidden;
+ border-radius: 18px;
+ border-collapse: separate;
+ border-spacing: 0;
+}
+
+:is(.test1-checkout-page, .test1-cart-page) table.shop_table td,
+:is(.test1-checkout-page, .test1-cart-page) table.shop_table th,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout-review-order-table th,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout-review-order-table td {
border-color: rgba(18, 48, 89, 0.1);
}
-.test1-checkout-page .woocommerce-info,
-.test1-checkout-page .woocommerce-message,
-.test1-checkout-page .woocommerce-error,
-.test1-checkout-page .wc-block-components-notice-banner {
+:is(.test1-checkout-page, .test1-cart-page) .shop_table thead th {
+ font-weight: 800;
+}
+
+:is(.test1-checkout-page, .test1-cart-page) .cart_item img {
+ border-radius: 16px;
+}
+
+:is(.test1-checkout-page, .test1-cart-page) .product-remove a.remove {
+ display: grid;
+ place-items: center;
+ width: 36px;
+ height: 36px;
+ border-radius: 12px;
+ background: rgba(213, 59, 92, 0.08);
+ color: #d53b5c !important;
+}
+
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-info,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-message,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-error,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-notice-banner {
border-radius: 18px;
border: 1px solid rgba(18, 48, 89, 0.1);
background: rgba(255, 255, 255, 0.84);
color: var(--text);
}
-.test1-checkout-page .select2-container--default .select2-selection--single,
-.test1-checkout-page .select2-container--default .select2-selection--multiple {
+:is(.test1-checkout-page, .test1-cart-page) .select2-container--default .select2-selection--single,
+:is(.test1-checkout-page, .test1-cart-page) .select2-container--default .select2-selection--multiple {
min-height: 56px;
border-radius: 18px;
border: 1px solid rgba(18, 48, 89, 0.14);
background: rgba(255, 255, 255, 0.9);
}
-.test1-checkout-page .woocommerce-checkout-review-order-table,
-.test1-checkout-page #add_payment_method #payment div.payment_box,
-.test1-checkout-page .woocommerce-cart #payment div.payment_box,
-.test1-checkout-page .woocommerce-checkout #payment div.payment_box {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout-review-order-table,
+:is(.test1-checkout-page, .test1-cart-page) #add_payment_method #payment div.payment_box,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart #payment div.payment_box,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment div.payment_box {
background: rgba(219, 246, 255, 0.45);
border-radius: 18px;
}
-.test1-checkout-page .wc-block-components-sidebar-layout {
+:is(.test1-checkout-page, .test1-cart-page) .coupon {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+}
+
+:is(.test1-checkout-page, .test1-cart-page) .cart-collaterals {
+ margin-top: 24px;
+}
+
+:is(.test1-checkout-page, .test1-cart-page) .cart_totals {
+ float: none;
+ width: 100%;
+}
+
+:is(.test1-checkout-page, .test1-cart-page) .wc-proceed-to-checkout {
+ margin-bottom: 0;
+ padding-bottom: 0;
+}
+
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-sidebar-layout {
gap: 24px;
}
-.test1-checkout-page .wc-block-checkout__main,
-.test1-checkout-page .wc-block-checkout__sidebar {
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__main,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__sidebar {
padding: 22px;
}
@media (min-width: 992px) {
- .test1-checkout-page .checkout-shell {
+ :is(.test1-checkout-page, .test1-cart-page) .checkout-shell {
grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
}
}
@media (max-width: 781px) {
- .test1-checkout-page .header-row,
- .test1-checkout-page .header-actions {
+ :is(.test1-checkout-page, .test1-cart-page) .header-row,
+ :is(.test1-checkout-page, .test1-cart-page) .header-actions {
flex-wrap: wrap;
}
- .test1-checkout-page .header-actions {
+ :is(.test1-checkout-page, .test1-cart-page) .header-actions {
width: 100%;
justify-content: stretch;
}
- .test1-checkout-page .header-actions > * {
+ :is(.test1-checkout-page, .test1-cart-page) .header-actions > * {
flex: 1 1 100%;
justify-content: center;
text-align: center;
}
- .test1-checkout-page .checkout-card,
- .test1-checkout-page .woocommerce-checkout #payment,
- .test1-checkout-page .woocommerce-billing-fields,
- .test1-checkout-page .woocommerce-additional-fields,
- .test1-checkout-page #order_review,
- .test1-checkout-page .wc-block-checkout__main,
- .test1-checkout-page .wc-block-checkout__sidebar {
+ :is(.test1-checkout-page, .test1-cart-page) .checkout-card,
+ :is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment,
+ :is(.test1-checkout-page, .test1-cart-page) .woocommerce-billing-fields,
+ :is(.test1-checkout-page, .test1-cart-page) .woocommerce-additional-fields,
+ :is(.test1-checkout-page, .test1-cart-page) #order_review,
+ :is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__main,
+ :is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__sidebar,
+ :is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart-form,
+ :is(.test1-checkout-page, .test1-cart-page) .cart_totals,
+ :is(.test1-checkout-page, .test1-cart-page) .cart-collaterals {
padding: 18px;
}
+
+ :is(.test1-checkout-page, .test1-cart-page) .coupon {
+ display: grid;
+ }
}
diff --git a/wp-content/themes/twentytwentyfour/functions.php b/wp-content/themes/twentytwentyfour/functions.php
index 01d1dd0f..d338b2c1 100644
--- a/wp-content/themes/twentytwentyfour/functions.php
+++ b/wp-content/themes/twentytwentyfour/functions.php
@@ -251,6 +251,29 @@ function twentytwentyfour_checkout_template( $template ) {
}
add_filter( 'template_include', 'twentytwentyfour_checkout_template', 20 );
+/**
+ * Use a standalone PHP template for the WooCommerce cart page.
+ *
+ * @since Twenty Twenty-Four 1.0
+ *
+ * @param string $template Resolved template path.
+ * @return string
+ */
+function twentytwentyfour_cart_template( $template ) {
+ if ( ! function_exists( 'is_cart' ) || ! is_cart() ) {
+ return $template;
+ }
+
+ $custom_template = get_theme_file_path( 'page-cart.php' );
+
+ if ( file_exists( $custom_template ) ) {
+ return $custom_template;
+ }
+
+ return $template;
+}
+add_filter( 'template_include', 'twentytwentyfour_cart_template', 20 );
+
/**
* Enqueue standalone landing assets for the page slug "test1".
*
@@ -258,7 +281,9 @@ add_filter( 'template_include', 'twentytwentyfour_checkout_template', 20 );
* @return void
*/
function twentytwentyfour_test1_assets() {
- $use_test1_assets = is_page( 'test1' ) || ( function_exists( 'is_checkout' ) && is_checkout() && ! is_order_received_page() );
+ $use_test1_assets = is_page( 'test1' )
+ || ( function_exists( 'is_checkout' ) && is_checkout() && ! is_order_received_page() )
+ || ( function_exists( 'is_cart' ) && is_cart() );
if ( ! $use_test1_assets ) {
return;
@@ -306,13 +331,14 @@ function twentytwentyfour_test1_assets() {
'test1WooCommerce',
array(
'addToCartUrl' => WC_AJAX::get_endpoint( 'add_to_cart' ),
+ 'cartUrl' => wc_get_cart_url(),
'checkoutUrl' => wc_get_checkout_url(),
)
);
}
}
- if ( function_exists( 'is_checkout' ) && is_checkout() && ! is_order_received_page() && file_exists( $checkout_css_file ) ) {
+ if ( ( ( function_exists( 'is_checkout' ) && is_checkout() && ! is_order_received_page() ) || ( function_exists( 'is_cart' ) && is_cart() ) ) && file_exists( $checkout_css_file ) ) {
wp_enqueue_style(
'twentytwentyfour-test1-checkout-style',
get_theme_file_uri( 'assets/css/test1-checkout.css' ),
diff --git a/wp-content/themes/twentytwentyfour/page-cart.php b/wp-content/themes/twentytwentyfour/page-cart.php
new file mode 100644
index 00000000..2b4c0821
--- /dev/null
+++ b/wp-content/themes/twentytwentyfour/page-cart.php
@@ -0,0 +1,75 @@
+
+>
+
+
+
+
+
+>
+
+
+
+
+
+
+
+
+