diff --git a/README.md b/README.md index 7782006b..376ac767 100644 --- a/README.md +++ b/README.md @@ -9,8 +9,11 @@ Shop is a sample e-commerce [Progressive Web App](https://developers.google.com/ - a sample e-commerce shopping site - pattern for a real-life shopping cart and store checkout flow - pattern for using custom announcers for accessibility +- Search Engine Optimized +- 100% Accessibility ## Setup + ```bash $ git clone https://github.com/Polymer/shop.git $ cd shop @@ -19,16 +22,21 @@ $ npm start ``` ## Build + ```bash $ npm run build ``` ## Test the build + To test prpl-server build: + ```bash $ npm run serve:prpl-server ``` + To test static build: + ```bash $ npm run serve:static ``` diff --git a/src/shop-cart.js b/src/shop-cart.js index cdbd8990..44b6431e 100644 --- a/src/shop-cart.js +++ b/src/shop-cart.js @@ -1,85 +1,85 @@ -import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'; -import './shop-button.js'; -import './shop-common-styles.js'; -import './shop-form-styles.js'; +import { PolymerElement, html } from "@polymer/polymer/polymer-element.js"; +import "./shop-button.js"; +import "./shop-common-styles.js"; +import "./shop-form-styles.js"; class ShopCart extends PolymerElement { static get template() { return html` - + @media (max-width: 767px) { + .subtotal { + margin: 0 0 0 24px; + } + } + -
-
-

Your is empty.

-
-
-
-

Your Cart

- ([[_getPluralizedQuantity(cart.length)]]) -
-
- - - +
+
+

+ Your is empty. +

-
- Total: [[_formatTotal(total)]] - - Checkout - +
+
+

Your Cart

+ ([[_getPluralizedQuantity(cart.length)]]) +
+
+ + + +
+
+ Total: [[_formatTotal(total)]] + + Checkout + +
-
`; } - static get is() { return 'shop-cart'; } - - static get properties() { return { + static get is() { + return "shop-cart"; + } - total: Number, + static get properties() { + return { + total: Number, - cart: Array, + cart: Array, - visible: { - type: Boolean, - observer: '_visibleChanged' - }, + visible: { + type: Boolean, + observer: "_visibleChanged", + }, - _hasItems: { - type: Boolean, - computed: '_computeHasItem(cart.length)' - } - - }} + _hasItems: { + type: Boolean, + computed: "_computeHasItem(cart.length)", + }, + }; + } _formatTotal(total) { - return isNaN(total) ? '' : '$' + total.toFixed(2); + return isNaN(total) ? "" : "$" + total.toFixed(2); } _computeHasItem(cartLength) { @@ -87,17 +87,21 @@ class ShopCart extends PolymerElement { } _getPluralizedQuantity(quantity) { - return quantity + ' ' + (quantity === 1 ? 'item' : 'items'); + return quantity + " " + (quantity === 1 ? "item" : "items"); } _visibleChanged(visible) { if (visible) { // Notify the section's title - this.dispatchEvent(new CustomEvent('change-section', { - bubbles: true, composed: true, detail: { title: 'Your cart' }})); + this.dispatchEvent( + new CustomEvent("change-section", { + bubbles: true, + composed: true, + detail: { title: "Your cart" }, + }) + ); } } - } customElements.define(ShopCart.is, ShopCart);