polymer/shop

The Shop app

SHOP

Shop is a sample e-commerce Progressive Web App.

Features/highlights

• a sample e-commerce shopping site
• pattern for a real-life shopping cart and store checkout flow
• pattern for using custom announcers for accessibility

Setup

$ git clone https://github.com/Polymer/shop.git
$ cd shop
$ npm i
$ npm start

Build

$ npm run build

Test the build

To test prpl-server build:

$ npm run serve:prpl-server

To test static build:

$ npm run serve:static

Deploying

Our production deployment of SHOP is hosted on App Engine with Node.js. It can be deployed with the same steps as PWA Starter Kit.

shop's Issues

Routing is broken.

Let's say i'm serving these files with my own webserver at 127.0.0.1:8000, I expect the URI 127.0.0.1:8000/index.html to load the page correctly. It doesn't. Here is the error.

http://127.0.0.1:8000/src/shop-index.html.html Failed to load resource: the server responded with a status of 404 (NOT FOUND)

$ polymer build ... Unable to uglify file

Any idea what could be going on?

---

OS: Windows 10 (64-bit)
Git SCM: 2.7.0 (MINGW64)
Node: 6.3.0
Polymer-CLI: 0.12.0

---

Oneeezy@Oneezy MINGW64 ~/Desktop/www_/_clients/diesel/wwwSFI (default)
$ polymer build

info:    Building application...
info:    Generating build/unbundled...
info:    Generating build/bundled...

warn:    Unable to uglify file C:\Users\Oneeezy\Desktop\www_\_clients\diesel\wwwSFI\bower_components\marked-element\demo\index.html_script_0.js
warn:    Unable to uglify file C:\Users\Oneeezy\Desktop\www_\_clients\diesel\wwwSFI\bower_components\marked-element\test\marked-element.html_script_0.js
warn:    Unable to uglify file C:\Users\Oneeezy\Desktop\www_\_clients\diesel\wwwSFI\bower_components\marked-element\test\marked-element.html_script_1.js
warn:    Unable to uglify file C:\Users\Oneeezy\Desktop\www_\_clients\diesel\wwwSFI\bower_components\marked-element\test\marked-element.html_script_2.js
warn:    Unable to uglify file C:\Users\Oneeezy\Desktop\www_\_clients\diesel\wwwSFI\bower_components\marked-element\test\marked-element.html_script_3.js
warn:    Unable to uglify file C:\Users\Oneeezy\Desktop\www_\_clients\diesel\wwwSFI\bower_components\marked-element\test\marked-element.html_script_4.js
warn:    Unable to uglify file C:\Users\Oneeezy\Desktop\www_\_clients\diesel\wwwSFI\bower_components\web-component-tester\data\index.html_script_0.js
warn:    Unable to uglify file C:\Users\Oneeezy\Desktop\www_\_clients\diesel\wwwSFI\bower_components\web-component-tester\data\index.html_script_2.js

info:    Generating service workers...
info:    Build complete!

Oneeezy@Oneezy MINGW64 ~/Desktop/www_/_clients/diesel/wwwSFI (default)

Issues with Windows 10 mobile emulation

I tried to install the this demo and trying to run with windows 10 mobile emulation mode on IE edge browser. The hamburger menu is not responding.

Anyone has seen this issue? or the demo is not supported on windows 10 mobile?

I am a newbie as far as polymer is concerned. Any pointers will be appreciated.

is it recommend to go with polyfill or shady dom ?

While reading this article https://www.polymer-project.org/1.0/blog/shadydom, got confused the default templates that polymer gives and the reference application (shop app) implementation. In the templates and shop app , what I'm seeing is, its forcing to do use shadow dom by looking at the code in the index.html. So, what is the recommendation we need to follow for any new polymer applications ? do we need to use the below code as its or remove it to use the default shady dom ?

Polymer = {lazyRegister: true, dom: 'shadow'};

(function() {
  if ('registerElement' in document
      && 'import' in document.createElement('link')
      && 'content' in document.createElement('template')) {
    // platform is good!
  } else {
    // polyfill the platform!
    var e = document.createElement('script');
    e.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
    document.body.appendChild(e);
  }
})();

Pages lack meaningful page titles

All page titles are the same, "SHOP". Not beneficial for accessibility (nor usability).

Suggest prepending page name. Examples:
Men's T-Shirts - SHOP
Ladies Outerwear - SHOP
Your Cart - SHOP

WCAG Reference:
https://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-title

Solution for breadcrumb microdata

I know this is a pointed question, but does googlebot get through shadow dom? The proof of this would be to enable breadcrumb navigation search results (https://developers.google.com/search/docs/data-types/breadcrumbs#use_cases, see example 2 and 3) and see what happens.

Reusable Components are not being served

Clicking "Add to Cart" triggers checkout button

Hard to replicate this, but maybe 20% of the time I click the [Add to Cart] button from a product listing page it actually registers a 2nd click on the "Added to cart \n [view cart] [checkout]" slide-up that comes in from the bottom of the screen.

The result is that I click [Add to Cart] but the site registers a 2nd click on either [view cart] or [checkout] which then navigates me immediately to one of those 2 pages.

Placement of script tags in index.html

I was using the shop application as a template to alter my web application into a progressive web app. I am using the app-header-layout with a app-header that is using the blend-background facility with an image.

When I place my initialization script where the shop has it, near the bottom of the body, I end up with Polymer throwing type errors
Uncaught TypeError: Cannot read property '_makeReady' of undefined at polymer-micro.html:117

If I move the script up to where its put by the polymer cli tool when I initialize the app with an app-drawer-template, ie in the header before the html import of the my-app element these problems go away.

Enter and space keys actions + scroll on focus

Olá!

I watched to @robdodson talk about accessibility and started to play around with the shop to learn more about the subject. Turns out that I notice two things that I found a little strange.

1. Enter and space keys actions

I checked the WAI-ARIA Authoring Practices about button and link tags. For buttons, both actions - enter and space - triggers a click. And for the link, just enter executes the link.
On the shop, when I'm navigating using just the tab key, everything is ok. But when I tried to access a menu item, the home link or even the shop now button, it just works with the enter key. When I had hit space I got a scroll. The only action that worked with space was the cart button.
I'm not sure what should be the correct behaviour on all cases. But I think that at least on the shop now button and on the menu it should have worked, right?

2. Scroll on focus

Again, I'm navigating around, using the tab key. And when the focus goes to an element that it's off the viewport, the page scrolls to a point that I can see what was focused, awesome!
But them I hit the end of the page and started to go backwards (using shift + tab). At the point where the focus goes to the cart button the scroll do not respond anymore (gif). I also notice that if the focus is on some menu item - in a point where with the next tab press the focus continues on the menu - and the menu is not visible, the scroll doesn't respond neither.
I imagine that it's something that could be improved.

That is it :)

localize it

Could the shop demo then be updated with localisation:

• Web: https://www.polymer-project.org/1.0/toolbox/localize
• Code: https://github.com/PolymerElements/app-localize-behavior

It would be a perfect example because you have everything in this demo:

• string
• pluralizations ( i doubt polymer localisation does that yet)
• datetime, numbers, currency (on the checkout page)

Also its a site driven by JSON, which is perfect for showing off localisation.

The Shop App fails to build

I am using nodejs v4.4.5
The polymer cli is able to serve the app but fails to build, as it is unable to find the module sw-toolbox/sw-toolbox.js
I even installed the GoogleChrome/sw-toolbox but still did not work.

Here is the build dump:

ab$ polymer build info: Building application... info: Generating build/unbundled... info: Generating build/bundled... warn: Unable to uglify file /home/ashish/GitLabs/Megh/shop/bower_components/web-component-tester/data/index.html_script_0.js warn: Unable to uglify file /home/ashish/GitLabs/Megh/shop/bower_components/web-component-tester/data/index.html_script_2.js info: Generating service workers... error: Promise rejection: Error: Cannot find module 'sw-toolbox/sw-toolbox.js' error: Error: Cannot find module 'sw-toolbox/sw-toolbox.js' at Function.Module._resolveFilename (module.js:325:15) at Function.require.resolve (internal/module.js:16:19) at /home/ashish/.nvm/versions/node/v4.4.5/lib/node_modules/polymer-cli/node_modules/sw-precache/lib/sw-precache.js:184:37 at new Promise (/home/ashish/.nvm/versions/node/v4.4.5/lib/node_modules/polymer-cli/node_modules/hydrolysis/node_modules/babel-polyfill/node_modules/core-js/modules/es6.promise.js:193:7) at generate (/home/ashish/.nvm/versions/node/v4.4.5/lib/node_modules/polymer-cli/node_modules/sw-precache/lib/sw-precache.js:78:10) at /home/ashish/.nvm/versions/node/v4.4.5/lib/node_modules/polymer-cli/node_modules/sw-precache/lib/sw-precache.js:295:5 at new Promise (/home/ashish/.nvm/versions/node/v4.4.5/lib/node_modules/polymer-cli/node_modules/hydrolysis/node_modules/babel-polyfill/node_modules/core-js/modules/es6.promise.js:193:7) at Object.write (/home/ashish/.nvm/versions/node/v4.4.5/lib/node_modules/polymer-cli/node_modules/sw-precache/lib/sw-precache.js:275:10) at writeSWPrecache (/home/ashish/.nvm/versions/node/v4.4.5/lib/node_modules/polymer-cli/lib/build/sw-precache.js:20:23) at Object.generateServiceWorker (/home/ashish/.nvm/versions/node/v4.4.5/lib/node_modules/polymer-cli/lib/build/sw-precache.js:47:12) error: Promise rejection: Error: Cannot find module 'sw-toolbox/sw-toolbox.js' error: Error: Cannot find module 'sw-toolbox/sw-toolbox.js' at Function.Module._resolveFilename (module.js:325:15) at Function.require.resolve (internal/module.js:16:19) at /home/ashish/.nvm/versions/node/v4.4.5/lib/node_modules/polymer-cli/node_modules/sw-precache/lib/sw-precache.js:184:37 at new Promise (/home/ashish/.nvm/versions/node/v4.4.5/lib/node_modules/polymer-cli/node_modules/hydrolysis/node_modules/babel-polyfill/node_modules/core-js/modules/es6.promise.js:193:7) at generate (/home/ashish/.nvm/versions/node/v4.4.5/lib/node_modules/polymer-cli/node_modules/sw-precache/lib/sw-precache.js:78:10) at /home/ashish/.nvm/versions/node/v4.4.5/lib/node_modules/polymer-cli/node_modules/sw-precache/lib/sw-precache.js:295:5 at new Promise (/home/ashish/.nvm/versions/node/v4.4.5/lib/node_modules/polymer-cli/node_modules/hydrolysis/node_modules/babel-polyfill/node_modules/core-js/modules/es6.promise.js:193:7) at Object.write (/home/ashish/.nvm/versions/node/v4.4.5/lib/node_modules/polymer-cli/node_modules/sw-precache/lib/sw-precache.js:275:10) at writeSWPrecache (/home/ashish/.nvm/versions/node/v4.4.5/lib/node_modules/polymer-cli/lib/build/sw-precache.js:20:23) at Object.generateServiceWorker (/home/ashish/.nvm/versions/node/v4.4.5/lib/node_modules/polymer-cli/lib/build/sw-precache.js:47:12) ab$

Error in Shop app -- Missing File

I'm getting a strange error

http://localhost:63618/src/shop-index.html.html
Failed to load resource: the server responded with a status of 404 (Not Found)
(Error found in util.html)

a) Notice the 2 html file types
b) the file shop-index does not exist anywhere in the app.

Run vulcanize with SHOP made error

Hi,

I try to run vulcanize for this orginal project, at root project:

vulcanize --inline-scripts --inline-css --strip-comments src/shop-app.html > src/shop-app-combined.html

=> It run ok, shop-app-combined.html generate successfull.

After that edit:

• <link rel="import" href="/src/shop-app.html" async>
  to:
• <link rel="import" href="/src/shop-app-combined.html" async>

ERROR:
polymer-micro.html:346 Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'dom-module'. A type with that name is already registered.(anonymous function) @ polymer-micro.html:346(anonymous function) @ polymer-micro.html:361 polymer-micro.html:67 Uncaught TypeError: Polymer.Base._getExtendedPrototype is not a functiondesugar @ polymer-micro.html:67window.Polymer @ polymer-micro.html:54(anonymous function) @ polymer.html:3597(anonymous function) @ polymer.html:3664 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ app-route.html:88 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ shop-category-data.html:44(anonymous function) @ shop-category-data.html:148 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ shop-image.html:46 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ shop-detail.html:208 shop-app-combined.html:8564 Uncaught TypeError: Cannot set property '_scrollTimer' of undefined(anonymous function) @ shop-app-combined.html:8564 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ app-drawer.html:175 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ iron-meta.html:63(anonymous function) @ iron-meta.html:332 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ iron-icon.html:107 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ paper-ripple.html:438(anonymous function) @ paper-ripple.html:757 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ paper-icon-button.html:127 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ iron-localstorage.html:79 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ shop-cart-data.html:25 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ iron-overlay-backdrop.html:62(anonymous function) @ iron-overlay-backdrop.html:166 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ shop-cart-modal.html:109 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ iron-iconset-svg.html:50 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ shop-snackbar.html:62 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ shop-tabs-overlay.html:30 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ shop-tabs.html:38 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ shop-ripple-container.html:29 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ shop-tab.html:48 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ shop-network-warning.html:66 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ shop-cart-item.html:212 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ iron-request.html:23 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a functionregisterCallback @ polymer-micro.html:175desugar @ polymer-micro.html:70window.Polymer @ polymer-micro.html:54(anonymous function) @ iron-ajax.html:41 polymer-micro.html:67 Uncaught TypeError: Polymer.Base._getExtendedPrototype is not a functiondesugar @ polymer-micro.html:67window.Polymer @ polymer-micro.html:54(anonymous function) @ iron-form.html:66 polymer-micro.html:175 Uncaught TypeError: this._desugarBehaviors is not a function

snackbar should display at any pages

Is this intended to only show snackbar on /list pages?

Step to reproduce:

1. Go to any /detail page.
2. Go offline and see no snackbar to notify the user of the current network status.

checkout flow should indicate that it isn't a real store

We don't want people to enter their credit card numbers here. We should add a prominent note on here somewhere to tell them that it's not a real store.

Shop is only a demo. You will not be charged and you will not receive any merchandise.

Or instead of the second sentence, "No data will be uploaded."

And since we have a success flow, we might want to update the success message to reinforce that. Like, instead of "Your order has been received," which suggests "we stored your cc info somewhere," maybe, "Demo checkout complete. No data was saved."

Or, whatever. But right now, people could get the wrong idea.

Using Roboto font without import it

Using Roboto font in the index.hmlt#L30, without import it.

SEO: unclear on implementing or data-binding to <head> elements... (<title> , <meta>, <etc>...)

It's unclear, or I haven't found the documentation for implementing SEO (in particular, data-binding to elements inside the <head></head> element. What is the proper way or best practice to follow with the new and improved <app-route> element?

Example:

    <!-- Title -->
    <title>[[shopTitle]]</title>

    <!-- Search Engines -->
    <meta name="author" itemprop="name" content="[[shopTitle]]">
    <meta name="description" itemprop="description" content="[[shopDescription]]">
    <link rel="canonical" href="[[shopLink]]">

    <!-- Twitter -->
    <meta name="twitter:card" content="[[shopSummary]]">
    <meta name="twitter:site" content="[[shopAuthor]]">
    <meta name="twitter:creator" content="[[shopAuthor]]">
    <meta name="twitter:title" content="[[shopTitle]]">
    <meta name="twitter:url" content="[[shopLink]]">
    <meta name="twitter:description" content="[[shopDescription]]">
    <meta name="twitter:image:src" content="[[shopImage]]">

    <!-- Open Graph -->
    <meta property="og:site_name" content="[[shopDescription]]">
    <meta property="og:url" content="[[shopLink]]">
    <meta property="og:type" content="shopType">
    <meta property="og:title" content="[[shopTitle]]">
    <meta property="og:description" content="[[shopDescription]]">
    <meta property="og:image" content="[[shopImage]]">
    <meta property="fb:app_id" content="[[shopID]]">
    <meta property="fb:admins" content="[[shopAdmins]]">

    <!-- Schema -->
    <meta itemprop="image" content="[[shopImage]]">

Can not work with paper-elements together?

Shop's styles and paper-elements using two different methods. When add a paper element into a shop-*.html, the paper element missing styles.

How do I fix this?

On iOS, tap on PLACE ORDER animates down from top of page

Slight bug in hitting PLACE ORDER on iPhone. The PLACE ORDER button animates down from top of page.

Windows polymer serve build/bundled ERRORS

When i execute polymer serve build/bundled i have these errors:
index.html_script_0.js:1 Uncaught SyntaxError: Unexpected token <

On mobile, tap doesn't go thru when cart-modal is up

On desktop, when the cart-modal is up (after you click on ADD TO CART), you can click on like the SHOP title to go to the home page. But on mobile (Chrome on Android), tap only dismisses the modal. And you need a 2nd tap to perform the actual action.

Linting shows elements not defined

I just ran polymer lint and get a heap of these

/src/shop-checkout.html:339:19
    <shop-select> is undefined.
/src/shop-checkout.html:354:21
    <shop-md-decorator> is undefined.
/src/shop-checkout.html:355:23
    <shop-underline> is undefined.

which is strange as the elements are defined and the linting seems to pick up only the last use of the element. You can see this by looking at /src/shop-checkout.html:339:19 <shop-select> is undefined.

Any ideas on whats going on?

Do we still need to use vulcanize?

I see that shop app uses the trick called lazy loading :) Is it possible to use lazy loading with vulcanize? I guess no, so do we still need it?

Whats about SEO?

http://webcache.googleusercontent.com/search?sourceid=chrome-psyapi2&ion=1&espv=2&ie=UTF-8&q=cache%3Ahttps%3A%2F%2Fshop.polymer-project.org&oq=cache%3Ahttps%3A%2F%2Fshop.polymer-project.org&rlz=1C1RAEH_deDE626DE648&aqs=chrome..69i57j69i58.1255j0j4

I Think it is bad for a Web-Shop.

iron-overlay-behavior.html:286 Uncaught TypeError: this.fit is not a function

I encounter an error after adding a product to my cart, the modal notification doesn't show up but in DOM there is created an which is 100% transparent and stretched on window so i can't click on other buttons after adding an item to cart (such as the logo or cart).
The error given in console is this : iron-overlay-behavior.html:286 Uncaught TypeError: this.fit is not a function.
And inside iron-overlay-behavior.html is pointing to this :

_prepareRenderOpened: function() {
this._manager.addOverlay(this);
if (this.withBackdrop) {
this.backdropElement.prepare();
this._manager.trackBackdrop(this);
}
this._preparePositioning();
this.fit(); [ HERE ]
this._finishPositioning();
},

Add OpenGraph tags for each URL

Would be interesting to look into injecting OG tags for each page (including each product page). Having a pattern for this will make this a more realistic ecommerce site.

Goal would be to make the "Link Preview" look as complete as possible:

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fshop.polymer-project.org%2Fdetail%2Fladies_outerwear%2FLadies%2BColorblock%2BWind%2BJacket

How do I get the shop documentation to work?

Doing a polymer serve and going to http://localhost:8080/components/SHOP/ shows no docs or demos. None of the element files have docs in them which I'm happy to do but I cant figure out how to get any docs page to show.
So what I'd love to see is the demo and docs pages setup showing how to configure it to show docs for at least 2 elements. Then I'll do the rest.

Build fails in Windows 10

Hello!

While trying to build the app the builder fails due to incorrect paths.

I am in D:\GitHub\shop\ and run polymer build

info:    Building application...
info:    Generating build/unbundled...
info:    Generating build/bundled...
warn:    Unable to uglify file D:\GitHub\shop\bower_components\web-component-tester\data/index.html_script_0.js
warn:    Unable to uglify file D:\GitHub\shop\bower_components\web-component-tester\data/index.html_script_2.js
info:    No file found for D:\GitHub\shop\GitHub\shop\src\shop-app.html
info:    No file found for D:\GitHub\shop\GitHub\shop\src\shop-list.html
info:    No file found for D:\GitHub\shop\GitHub\shop\src\shop-detail.html
info:    No file found for D:\GitHub\shop\GitHub\shop\src\shop-cart.html
info:    No file found for D:\GitHub\shop\GitHub\shop\src\shop-checkout.html
info:    No file found for D:\GitHub\shop\GitHub\shop\src\lazy-resources.html

Cheers.

A11y support

I use Chrome (51.0.2704.84) and ChromeVox (50.0.2661.83). Most of the usual a11y features of Polymer and its webcomponents seem to be missing in the shop app. Is this the consequence of implementing pages as webcomponents? Since this is a case study: can this be fixed? How?

Correct punctuation for Ladies.

The Shop site correctly uses «Men's». It should use the matching «Ladies'».

Display an icon when shop-image fails to load the img src

We should display some UI when shop-image fails to load the src. This happens a lot when you are offline and go to a product detail page which you haven't visited before.

Potentially we can do something like this:

:host(.error)::after {
  ...
  background-image: url("data:image/svg+xml;...");
}

<img id="img" alt$="[[alt]]" on-load="_onLoadImg" on-error="_onErrorImg">

Add json-ld schema metadata

Shop should be a shinning example of using json-ld for product pages:

https://developers.google.com/schemas/formats/json-ld

Add Users, Login and Session Management

Would love to see Polymer in 360 role. It would be very useful if we can see the User and Session management in this sample. Ideally using Firebase 😄 . Polymerfire

A11y: Improve checkout form labelling

from @robdodson:

The fields in the checkout form could have a bit more contextual info. For example, tabbing to Account Information > Email just reads out "Email" but I'm not sure what kind of email you want.

If we use aria-labelledby we could associate the headings with the input fields.

ex:

<h2 id="acct-info">Account Information</h2>
<input type="email" id="acct-email" aria-labelledby="acct-info acct-label"></input>
<label id="acct-label">Email</label>

This will announce "Account Information, Email, edit text"

Ladies?

I thought there was a discussion of killing the obtuse "Ladies outerwear" in favor of, say, "Women's Jackets." Want to take final screenshots, and I want to make sure I have the final version first.

Confusion about shop-data-categories properties

This concerns the properties of the shop-data-categories component.

What is the "items" property on category (the computed value of item is called with category.items as argument to _computeItem)? Wouldn't this fail (category.items should return undefined if it hasn't been declared yet)? (I tried checking this by creating a ready life-cycle function and logging "items" in category, but then the app failed)

Thank you for any help on these matters

<link rel="prefetch">

Could you please share how are you generating index.html with all those <link rel="prefetch">?

Clicking add to cart multiple times yields unexpected result

The cart item count increments but the cart does not reflect the number of items added. Instead we should only allow the user to add to cart once from the detail page.

My custom element is not working in shop app, but working in polymer starter kit?

I've created a custom "properties" grid system to use universally on any element. In every project thus far, I've had no problem using it...But when I try to use it in the shop-app, it doesn't work. Here's my custom property system that I'm importing in: https://github.com/oneezy/steel-properties

In Chrome dev tools network tab, it says that it's loading normally, however when I inspect an element it doesn't show up in the css and has no effect! It's got me scratching my head because it works completely fine w/ Polymer Starter Kit and in other projects...

I've included a short video showing my problem:
https://www.youtube.com/watch?v=tpyYxXTMdkU

Is there something I'm missing or doing wrong???

Typo at CSS

Typo at line 34 and line 35?

https://github.com/Polymer/shop/blob/master/src/shop-cart-modal.html#L34

-webkit-transform: translate3d(calc(100% - 16px), 0, 0);
transform: translate3d(calc(100% + 16px), 0, 0);

Which one is the right one? With plus or minus sign?

Click error in the paper-icon-button

I record a GIF to show the problem:

If I click in the border icon zone, it doesn't work. If I click in the icon, it works.

Save scroll position on product list

Repro:

1. Load shop
2. Go to Mens Outerwear
3. Scroll to the bottom
4. Select the Jacquard-Knit Full-Zip Fleece
5. Go back

Notice that this places you back at the top of the list. Ideally scroll position would be saved, and you'd be back at the bottom of the list.

Add DEMO badge

IE10 issue

In browser IE10 is showing blank page... Console is empty :-(

app-route and selected tab – reload the whole app?

Hi guys, just looking into your shop-app to discover more about Polymer and , thank you for sharing, it's a really very good point to start.

So, I've have a question: is that okay, when you hit again on already selected tab (desktop view), and it's reload (re-init) the whole application from scratch? Is that issue inside <app-route>? Or I should handle this case by myself and disable, for example, current active tab, to avoid reload the application.

Actually, i'm assuming that application shouldn't be reloaded when the same url (path) is already present, when you click on link with equal url.

Many thanks,

If you uncheck "Use different billing address", the ripple stays

On the checkout page (https://shop.polymer-project.org/checkout), if you check the "Use different billing address" under the billing section and then uncheck it later, the dark circle for the ripple effect remains until you click it again.

sign-in and auth

shouldn't auth components be part of core scaffold as well?

app-toolbar and #tabContainer overlap in desktop mode.

It should be(official shop demo):

git clone from github.com then bower:

app-toolbar should not contain transform translate3d style.

polymer serve got errors

usr/lib/node_modules/polymer-cli/bin/polymer.js:19
let lib = path ? require(path) : require('..');
^^^
SyntaxError: Unexpected strict mode reserved word
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:935:3