Store: Add UI for product category listing #21227

justinshreve · 2018-01-02T22:20:45Z

This PR adds a new product category listing page. It is behind a feature flag.

It is based off of the current taxonomy manager UI and p90Yrv-9S-p2. Also see #20295.

To Test:

Create a bunch of product categories via wp-admin. Make sure to give some product images and descriptions. Apply a product to a few so that some of the categories have a product count greater than 0. Create sub-categories to test nesting.
Apply this branch, and go to http://calypso.localhost:3000/store/products/categories/:site
Make sure that your categories load in correctly, and display accurate information, and are nested correctly.

Note: Clicking a category will display a 404 since editing hasn't been implemented yet.

Preview:

matticbot · 2018-01-02T22:20:46Z

Test live: https://calypso.live/?branch=add/store-product-cat-list-ui

a8ci18n · 2018-01-02T22:26:16Z

client/extensions/woocommerce/app/product-categories/list.js

+					},
+				} );
+			}
+			return <EmptyContent title={ translate( 'No product categories found.' ) } line={ message } />;


Hi! I've found a possible matching string that has already been translated 92 times:
translate( 'No categories found.' ) ES Score: 8

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

kellychoffman · 2018-01-03T00:32:46Z

Looking good.

Could we just remove the bottom border on the last category so there's not a double border?

The page picker thing on mobile is acting up.

Default:

Opened:

Thinking we can probably just scrap it since the breadcrumbs are right there and do the same thing.

timmyc

handful of quick comments. So looks like a good chunk of <TaxonomyManagerList /> was similar here - just the render/display logic is different right?

The listing is working great in my testing. Filtering via the search bar is snappy even with the API sandboxed.

The only visual thing - and i know this is the same with product listings that lack images - but the grey image placeholders here always make me feel like something is still loading:

^ which is out of scope here, but figured I'd bring it up and see what @kellychoffman thought on the topic :)

timmyc · 2018-01-03T01:17:05Z

client/extensions/woocommerce/app/product-categories/index.js

+
+	componentWillMount() {
+		const { site } = this.props;
+		this.props.fetchProductCategories( site.ID, {


Is there any chance site could be null/undefined here?

timmyc · 2018-01-03T01:18:25Z

client/extensions/woocommerce/app/product-categories/index.js

+
+	componentWillReceiveProps( newProps ) {
+		const { site } = this.props;
+		const newSiteId = ( newProps.site && newProps.site.ID ) || null;


Should we just pass in a siteId prop to make some of this logic easier here?

timmyc · 2018-01-03T01:22:03Z

client/extensions/woocommerce/app/product-categories/index.js

+		const { site } = this.props;
+		this.props.fetchProductCategories( site.ID, {
+			page: 1,
+			per_page: DEFAULT_PRODUCT_CATEGORIES_PER_PAGE,


Should we use DEFAULT_PRODUCT_CATEGORIES_PER_PAGE in the default query in here so we don't have to pass in the per_page here? Guessing that could result in a performance hit on the edit products pages requesting 100 vs 10 there too.

timmyc · 2018-01-03T01:25:57Z

client/extensions/woocommerce/app/product-categories/index.js

+
+		if ( searchQuery && searchQuery.length ) {
+			pages.forEach( page => {
+				if ( ! includes( this.state.requestedSearchPages, page ) ) {


Since there is a bit of duplicated logic in both parts of this if/else block, should we just create a query object at the top level, and add a search: searchQuery attribute to it if there is a searchQuery? Then the looping of pages and setState call could just be combined.

jameskoster

Can we use the same cropping technique for the thumbs as we did for variations?

Currently - as we're forcing square thumbs - if a user selects a portrait or landscape image it gets smushed; https://cloudup.com/cobDsBoghLz

kellychoffman · 2018-01-03T19:31:38Z

The only visual thing - and i know this is the same with product listings that lack images - but the grey image placeholders here always make me feel like something is still loading:

Good point. The image that actually gets added to the front end is the WC generic placeholder image, which is about to updated in the next version of WC. I'm thinking we should just use that?

justinshreve · 2018-01-03T20:03:05Z

@kellychoffman @jameskoster @timmyc

I've made some updates here per your feedback. Thanks!

Good point. The image that actually gets added to the front end is the WC generic placeholder image, which is about to updated in the next version of WC. I'm thinking we should just use that?

Can we log an issue and handle this in a future PR? This one's already large, and we can update it in other places at the same time (product images, variations, ...)

kellychoffman · 2018-01-03T22:46:15Z

Can we log an issue and handle this in a future PR? This one's already large, and we can update it in other places at the same time (product images, variations, ...)

Yes, agree.

timmyc

Updates look good, and test well for me 🌟

timmyc · 2018-01-03T23:55:42Z

client/extensions/woocommerce/app/product-categories/index.js

-				requestedPages: union( this.state.requestedPages, pages ),
-			} );
-		}
+		const requestedPages = searchQuery && searchQuery.length && this.state.requestedSearchPages || this.state.requestedPages;


kellychoffman · 2018-01-04T02:53:58Z

Last request would be to have the left and right padding the same:

justinshreve · 2018-01-04T17:10:55Z

@kellychoffman @jameskoster Fixed that padding, and logged the replacement image update at #21268. Everything look good to merge from the design side?

edit: noticed I previously left the review labels off of this. Sorry about that!

kellychoffman

Adds UI for product category listing

ed67843

justinshreve added the Store label Jan 2, 2018

justinshreve self-assigned this Jan 2, 2018

justinshreve requested a review from jameskoster January 2, 2018 22:20

justinshreve requested review from kellychoffman and a team January 2, 2018 22:20

a8ci18n reviewed Jan 2, 2018

View reviewed changes

timmyc reviewed Jan 3, 2018

View reviewed changes

jameskoster requested changes Jan 3, 2018

View reviewed changes

Handle PR feedback

39d69d9

Fix product category test

3ed840f

timmyc approved these changes Jan 4, 2018

View reviewed changes

Fix right padding

32502bc

justinshreve added the [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR label Jan 4, 2018

justinshreve mentioned this pull request Jan 4, 2018

Store: Replace thumb placeholder with WC generic placeholder #21268

Closed

justinshreve mentioned this pull request Jan 4, 2018

Store: Product Category Management #20295

Closed

8 tasks

kellychoffman approved these changes Jan 4, 2018

View reviewed changes

timmyc added [Status] Ready to Merge and removed [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR labels Jan 4, 2018

justinshreve merged commit 8f1aac9 into master Jan 4, 2018

justinshreve deleted the add/store-product-cat-list-ui branch January 4, 2018 22:28

matticbot removed the [Status] Ready to Merge label Jan 4, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Store: Add UI for product category listing #21227

Store: Add UI for product category listing #21227

justinshreve commented Jan 2, 2018

matticbot commented Jan 2, 2018

a8ci18n Jan 2, 2018

kellychoffman commented Jan 3, 2018

timmyc left a comment

timmyc Jan 3, 2018

timmyc Jan 3, 2018

timmyc Jan 3, 2018

timmyc Jan 3, 2018

jameskoster left a comment

kellychoffman commented Jan 3, 2018

justinshreve commented Jan 3, 2018

kellychoffman commented Jan 3, 2018

timmyc left a comment

timmyc Jan 3, 2018

kellychoffman commented Jan 4, 2018

justinshreve commented Jan 4, 2018 •

edited

Loading

kellychoffman left a comment

Store: Add UI for product category listing #21227

Store: Add UI for product category listing #21227

Conversation

justinshreve commented Jan 2, 2018

matticbot commented Jan 2, 2018

a8ci18n Jan 2, 2018

Choose a reason for hiding this comment

kellychoffman commented Jan 3, 2018

timmyc left a comment

Choose a reason for hiding this comment

timmyc Jan 3, 2018

Choose a reason for hiding this comment

timmyc Jan 3, 2018

Choose a reason for hiding this comment

timmyc Jan 3, 2018

Choose a reason for hiding this comment

timmyc Jan 3, 2018

Choose a reason for hiding this comment

jameskoster left a comment

Choose a reason for hiding this comment

kellychoffman commented Jan 3, 2018

justinshreve commented Jan 3, 2018

kellychoffman commented Jan 3, 2018

timmyc left a comment

Choose a reason for hiding this comment

timmyc Jan 3, 2018

Choose a reason for hiding this comment

kellychoffman commented Jan 4, 2018

justinshreve commented Jan 4, 2018 • edited Loading

kellychoffman left a comment

Choose a reason for hiding this comment

justinshreve commented Jan 4, 2018 •

edited

Loading