woocommerce/plugins/woocommerce-blocks/docs/designers/theming/cart-and-checkout.md

90 lines
3.7 KiB
Markdown
Raw Normal View History

# Cart and Checkout Blocks Theming <!-- omit in toc -->
## Table of Contents <!-- omit in toc -->
Add Cart/Checkout/Order-Received Templates (https://github.com/woocommerce/woocommerce-blocks/pull/9301) * WIP: dirty attempt to dry run Cart & Checkout templates * Added Cart and Checkout to the template hierarchies * Merge branch 'trunk' into poc/cart_and_checkout_fse_templates * Updated cart & Checkout templates * Order Received FSE template (https://github.com/woocommerce/woocommerce-blocks/pull/8937) * Order Received template bootstrap * typo * WIP: new block * add logic here * Order received classic template * reverted constants.ts * Added the post title (buggy) * Corrected page title * Updated constants.ts * Fixed template typo * removed placeholder for order received block * add order-received template description * updated placeholder description * Formatting fixes * Template description. * replaced hardcoded string with OrderReceivedTemplate::SLUG --------- Co-authored-by: Luigi <gigitux@gmail.com> * Code formatting (https://github.com/woocommerce/woocommerce-blocks/pull/8350) * Code formatting * page_template_hierarchy priority to 1 (https://github.com/woocommerce/woocommerce-blocks/pull/9323) Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Migrate Cart and Checkout Pages to the Template Editor when using a FSE theme (https://github.com/woocommerce/woocommerce-blocks/pull/9339) * Introduce woocommerce_blocks_template_content hook * Migrate cart and checkout page content to the template editor * Add redirection from edit page to edit template --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Removed header and footer from checkout template. (https://github.com/woocommerce/woocommerce-blocks/pull/9378) * Removed header and footer from checkout template. * Removed header and footer from checkout template migration * Permalink solution for the checkout endpoint/template (https://github.com/woocommerce/woocommerce-blocks/pull/9406) * Checkout endpoint work * Move setting field to util * Include link to edit the template * Remove todo * Refactor checkout templates to share logic (https://github.com/woocommerce/woocommerce-blocks/pull/9411) * Sync endpoints with pages (https://github.com/woocommerce/woocommerce-blocks/pull/9426) * Switch to page syncing * Update settings descriptions --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Migrate pages to templates once (https://github.com/woocommerce/woocommerce-blocks/pull/9488) * Migrate content on init, once * Skip migration if page does not exist * Put back HTML for header and footer parts * Fix page redirect due to wrong ID * fix loading template part * Removed unnecessary var * update cart and checkout html templates --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Include a notice to redirect user to template editor (https://github.com/woocommerce/woocommerce-blocks/pull/9508) * Template Placeholder Design for the Order Received Template (https://github.com/woocommerce/woocommerce-blocks/pull/9602) * Load frontend styles in editor iframe * Update placeholder to include skeleton and updated icons * Update classic template configs * 1px border for .wp-block-woocommerce-classic-template__placeholder-copy * Show copy on focus * Sample data --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Add simplified header on checkout template (https://github.com/woocommerce/woocommerce-blocks/pull/9607) * Added simplified header on checkout template * Moved simplified header to template part * updated constants.ts * added template part to checkout.html * Add missing translation * frontpage_template_hierarchy no longer needed * Allow plugin based template parts (https://github.com/woocommerce/woocommerce-blocks/pull/9667) * Merge branch 'trunk' into add/9288_cart-checkout-order-received_fse_templates * Synced templates on blockified folder * Add blockified order-received.html * removed WooCommerce prefix * Refactor/rebrand order received template to order confirmation (https://github.com/woocommerce/woocommerce-blocks/pull/9734) * rebrand order received to order confirmation * updated descriptions for templates * updated descriptions for order confirmation placeholder * Resolve merge conflict * Resolve merge conflicts * Resolve more merge conflicts after rebase * Fix formatting * Use patterns for localisation (https://github.com/woocommerce/woocommerce-blocks/pull/9883) * e2e tests for cart and checkout templates (https://github.com/woocommerce/woocommerce-blocks/pull/9939) * Merge branch 'trunk' into poc/cart_and_checkout_fse_templates * Merge branch 'trunk' into add/9288_cart-checkout-order-received_fse_templates * Resolve merge conflicts * Add e2e for permalink settings * Test that templates exist * Add test to check that templates can be edited * Add tests to confirm templates can be edited * Ensure cart has contents before running tests on frontend views * Commend out problem test * Make sure search has multiple results * Remove useThrottle - bad rebase * Revert changes to docs after rebase * Revert function call for noReviewsPlaceholder * Bad rebase * Reverts * Remove revertTemplate * Spacing * Wait for networkidle after navigation * Always wait for network * Use button roles in site editor * More specific button locator * Update option comparison * Fix template content * Disable failing tests * Disable failing classic template tests * Use enterEditMode * More enterEditMode usage * enterEditMode * Use test.skip * More robust selectors * Alt iframe selector --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Skip flakey test --------- Co-authored-by: Luigi <gigitux@gmail.com> Co-authored-by: Mike Jolley <mike.jolley@me.com>
2023-06-29 13:41:22 +00:00
- [Buttons](#buttons)
- [Mobile submit container](#mobile-submit-container)
- [Item quantity badge](#item-quantity-badge)
## Buttons
WC Blocks introduces the button component, it differs from a generic `button` in that it has some default styles to make it correctly fit in the Blocks design.
![Button screenshot](https://user-images.githubusercontent.com/3616980/86381945-e6fd6c00-bc8d-11ea-8811-7e546bea69b9.png)
Themes can still style them to match theme colors or styles as follows:
```css
.wc-block-components-button {
background-color: #d5502f;
color: #fff;
/* More rules can be added to modify the border, shadow, etc. */
}
/* It might be needed to modify the hover, focus, active and disabled states too */
```
![Button screenshot with custom styles](https://user-images.githubusercontent.com/3616980/86381505-b6b5cd80-bc8d-11ea-8ceb-cfbe84b411d4.png)
Notice the button component doesn't have the `.button` class name. So themes that wrote some styles for buttons might want to apply some (or all) of those styles to the button component as well.
## Mobile submit container
In small viewports, the Cart block displays the _Proceed to Checkout_ button inside a container fixed at the bottom of the screen.
![Submit container screenshot](https://user-images.githubusercontent.com/3616980/86382876-393e8d00-bc8e-11ea-8d0b-e4e347ea4773.png)
By default, the container has a white background so it plays well with the button component default colors. Themes that want to apply the same background color as the rest of the page can do it with the following code snippet:
```css
.wc-block-cart__submit-container {
background-color: #f9f4ee;
}
```
Take into consideration the container has a top box shadow that might not play well with some dark background colors. If needed, it can be modified directly setting the `color` property (internally, shadow color uses `currentColor`, so it honors the `color` property):
```css
.wc-block-cart__submit-container::before {
color: rgba( 214, 209, 203, 0.5 );
}
```
Alternatively, themes can override the `box-shadow` property completely:
```css
.wc-block-cart__submit-container::before {
box-shadow: 0 -10px 20px 10px rgba( 214, 209, 203, 0.5 );
}
```
![Submit container screenshot with custom styles](https://user-images.githubusercontent.com/3616980/86382693-27f58080-bc8e-11ea-894e-de378af3e2bb.png)
## Item quantity badge
The item quantity badge is the number that appears next to the image in the _Order summary_ section of the _Checkout_ block sidebar.
![Order summary screenshot](https://user-images.githubusercontent.com/3616980/83862844-c8559500-a722-11ea-9653-2fc8bcd544d2.png)
By default, it uses a combination of black and white borders and shadows so it has enough contrast with themes with light and dark backgrounds. Themes can modify the colors with their own palette with a single CSS selector and four properties. For example:
```css
.wc-block-components-order-summary-item__quantity {
background-color: #f9f4ee;
border-color: #4b3918;
box-shadow: 0 0 0 2px #f9f4ee;
color: #4b3918;
}
```
![Order summary screenshot with custom styles for the item quantity badge](https://user-images.githubusercontent.com/3616980/83863109-2e421c80-a723-11ea-9bf7-2033a96cf5b2.png)
<!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/designers/theming/cart-and-checkout.md)
<!-- /FEEDBACK -->