diff --git a/index3.js b/index3.js index c2d516b0..ae703e8d 100644 --- a/index3.js +++ b/index3.js @@ -27,6 +27,7 @@ const audienceContent = { const orderItemsField = document.getElementById('orderItemsField') const orderSuccess = document.getElementById('orderSuccess') const contactSuccess = document.getElementById('contactSuccess') + const wooCommerceConfig = window.test1WooCommerce || null let cart = [] @@ -132,6 +133,48 @@ const audienceContent = { addToCartButtons.forEach(button => { button.addEventListener('click', () => { + const productId = Number(button.dataset.productId || 0) + + if (wooCommerceConfig && productId && wooCommerceConfig.addToCartUrl && wooCommerceConfig.checkoutUrl) { + button.disabled = true + + fetch(wooCommerceConfig.addToCartUrl, { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' + }, + body: new URLSearchParams({ + product_id: String(productId), + quantity: '1' + }) + }) + .then(async response => { + let payload = null + + try { + payload = await response.json() + } catch (error) { + payload = null + } + + if (!response.ok) { + throw new Error('add_to_cart_failed') + } + + if (payload && payload.error && payload.product_url) { + window.location.href = payload.product_url + return + } + + window.location.href = wooCommerceConfig.checkoutUrl + }) + .catch(() => { + button.disabled = false + }) + + return + } + cart.push({ name: button.dataset.name, volume: button.dataset.volume, @@ -149,6 +192,11 @@ const audienceContent = { }) cartCloseButton.addEventListener('click', closeCart) checkoutButton.addEventListener('click', () => { + if (wooCommerceConfig && wooCommerceConfig.checkoutUrl) { + window.location.href = wooCommerceConfig.checkoutUrl + return + } + closeCart() openModal() }) diff --git a/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css b/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css new file mode 100644 index 00000000..b09e6209 --- /dev/null +++ b/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css @@ -0,0 +1,212 @@ +:root { + --checkout-max-width: 1180px; +} + +body.test1-checkout-page { + min-width: 320px; +} + +.test1-checkout-page .checkout-shell { + display: grid; + gap: 28px; + align-items: start; +} + +.test1-checkout-page .checkout-intro { + max-width: 780px; +} + +.test1-checkout-page .checkout-card { + padding: clamp(22px, 3vw, 36px); +} + +.test1-checkout-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 { + max-width: 100%; +} + +.test1-checkout-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 { + 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 { + min-height: 56px; + padding: 14px 16px; + border-radius: 18px; + border: 1px solid rgba(18, 48, 89, 0.14); + background: rgba(255, 255, 255, 0.9); + 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 { + 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 { + 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 { + padding: 24px; +} + +.test1-checkout-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 { + 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 { + min-height: 56px; + padding: 16px 22px; + border: 0; + border-radius: 999px; + color: #fff; + background: linear-gradient(135deg, var(--primary-strong), var(--primary)); + box-shadow: 0 16px 30px rgba(13, 79, 214, 0.25); + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + background: rgba(219, 246, 255, 0.45); + border-radius: 18px; +} + +.test1-checkout-page .wc-block-components-sidebar-layout { + gap: 24px; +} + +.test1-checkout-page .wc-block-checkout__main, +.test1-checkout-page .wc-block-checkout__sidebar { + padding: 22px; +} + +@media (min-width: 992px) { + .test1-checkout-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 { + flex-wrap: wrap; + } + + .test1-checkout-page .header-actions { + width: 100%; + justify-content: stretch; + } + + .test1-checkout-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 { + padding: 18px; + } +} diff --git a/wp-content/themes/twentytwentyfour/functions.php b/wp-content/themes/twentytwentyfour/functions.php index 6aebfbf7..01d1dd0f 100644 --- a/wp-content/themes/twentytwentyfour/functions.php +++ b/wp-content/themes/twentytwentyfour/functions.php @@ -228,6 +228,29 @@ function twentytwentyfour_test1_template( $template ) { } add_filter( 'template_include', 'twentytwentyfour_test1_template' ); +/** + * Use a standalone PHP template for the WooCommerce checkout page. + * + * @since Twenty Twenty-Four 1.0 + * + * @param string $template Resolved template path. + * @return string + */ +function twentytwentyfour_checkout_template( $template ) { + if ( ! function_exists( 'is_checkout' ) || ! is_checkout() || is_order_received_page() ) { + return $template; + } + + $custom_template = get_theme_file_path( 'page-checkout.php' ); + + if ( file_exists( $custom_template ) ) { + return $custom_template; + } + + return $template; +} +add_filter( 'template_include', 'twentytwentyfour_checkout_template', 20 ); + /** * Enqueue standalone landing assets for the page slug "test1". * @@ -235,17 +258,22 @@ add_filter( 'template_include', 'twentytwentyfour_test1_template' ); * @return void */ function twentytwentyfour_test1_assets() { - if ( ! is_page( 'test1' ) ) { + $use_test1_assets = is_page( 'test1' ) || ( function_exists( 'is_checkout' ) && is_checkout() && ! is_order_received_page() ); + + if ( ! $use_test1_assets ) { return; } $css_file = ABSPATH . 'index3.css'; $js_file = ABSPATH . 'index3.js'; + $checkout_css_file = get_theme_file_path( 'assets/css/test1-checkout.css' ); - wp_dequeue_style( 'global-styles' ); - wp_dequeue_style( 'wp-block-library' ); - wp_dequeue_style( 'wp-block-library-theme' ); - wp_dequeue_style( 'classic-theme-styles' ); + if ( is_page( 'test1' ) ) { + wp_dequeue_style( 'global-styles' ); + wp_dequeue_style( 'wp-block-library' ); + wp_dequeue_style( 'wp-block-library-theme' ); + wp_dequeue_style( 'classic-theme-styles' ); + } wp_enqueue_style( 'twentytwentyfour-test1-fonts', @@ -263,7 +291,7 @@ function twentytwentyfour_test1_assets() { ); } - if ( file_exists( $js_file ) ) { + if ( is_page( 'test1' ) && file_exists( $js_file ) ) { wp_enqueue_script( 'twentytwentyfour-test1-script', home_url( '/index3.js' ), @@ -271,6 +299,26 @@ function twentytwentyfour_test1_assets() { (string) filemtime( $js_file ), true ); + + if ( class_exists( 'WooCommerce' ) ) { + wp_localize_script( + 'twentytwentyfour-test1-script', + 'test1WooCommerce', + array( + 'addToCartUrl' => WC_AJAX::get_endpoint( 'add_to_cart' ), + 'checkoutUrl' => wc_get_checkout_url(), + ) + ); + } + } + + if ( function_exists( 'is_checkout' ) && is_checkout() && ! is_order_received_page() && file_exists( $checkout_css_file ) ) { + wp_enqueue_style( + 'twentytwentyfour-test1-checkout-style', + get_theme_file_uri( 'assets/css/test1-checkout.css' ), + array( 'twentytwentyfour-test1-style' ), + (string) filemtime( $checkout_css_file ) + ); } } add_action( 'wp_enqueue_scripts', 'twentytwentyfour_test1_assets', 100 ); diff --git a/wp-content/themes/twentytwentyfour/page-checkout.php b/wp-content/themes/twentytwentyfour/page-checkout.php new file mode 100644 index 00000000..8a8b487a --- /dev/null +++ b/wp-content/themes/twentytwentyfour/page-checkout.php @@ -0,0 +1,75 @@ + +> + + + + + +> + + + +
+
+
+
+
+ +

+

+
+ + + + +
+
+ +
+ +
+
+
+
+
+ + + diff --git a/wp-content/themes/twentytwentyfour/page-test1.php b/wp-content/themes/twentytwentyfour/page-test1.php index 89e0e763..df38c77e 100644 --- a/wp-content/themes/twentytwentyfour/page-test1.php +++ b/wp-content/themes/twentytwentyfour/page-test1.php @@ -68,6 +68,7 @@ function twentytwentyfour_test1_catalog_markup() {