woocommerce / woocommerce-blocks Goto Github PK

Sometimes when adding or removing products, the list of products that were selected refreshes, and for a split second, the pages jumps while the content is loading again.

The fade is obscuring the text slightly.

Add an option to the Edit Mode of the products block for searching and selecting products by tag. This is similar to the product category search and select feature we already have built out for the Products block, but for tags. We may want to make some sort of reusable component that we can use for all of these features.

This feature isn't in the current design for the block, but I'm leaving this open in case it gets added later or that was an oversight.

We need the following possibilities added as options to the Products block (along with potentially other similar types of options):

• On Sale
• Featured
• Best Sellers
• Top Rated

I'm not sure the best way to implement these. They can be implemented as stand-alone options in the Edit Mode with no further customization or they can be implemented as a checkbox or something in the sidebar block options so they can be combined with options from the Edit Mode (e.g. Show products that are a specific attribute and on sale)

Store owners should be able to choose the order products are listed in a block. Like the shortcode, that could by popularity, newness etc.

A use case could be the I want a unique landing page for a category, rather than the default archive you get with core. On that page, I only want to show my 3 best selling products.

It should also be more clear how you could limit the amount of products which should be displayed.

Current prototype: todo

Sketch: https://www.dropbox.com/s/dvp2x1poq1yukes/Add%20Products%20Block.sketch?dl=0

When displaying individual products we know the total number of products the user wants to display. So we only need to present a columns selector - rows should be automatically calculated.

The code that adds a class to the shortcode if the list layout is selected needs to be updated to prevent adding the 'undefined' class. Currently, all generated shortcodes are of the form [products limit="3" class="undefined" columns="3"].

With lots of products the results list could become awkward to use;

Let's apply a sensible max-height with overflow: auto;.

Just need a little spacing between product rows; https://cloudup.com/cWqORu3eRqT

Current prototype: todo

Sketch: todo

In this case the user might just want to funnel folks in to their product pages. The add to cart button would probably be replaced with a "Learn more" button / link. They may also like to display the short description.

Prototype: Todo
Sketch: Todo

categories vs category

Running master of WC core:

This shortcode is generated by Gutenberg, and doesn't output any products:

[products limit="3" columns="3" category="30,29,28,27"]

This shortcode works:
[products limit="3" columns="3" categories="30,29,28,27"]

Haven't really dug in much, but it's pretty strange since WC core is expecting category as far as I can tell.

The products block needs graceful error handling if columns gets set to 0 or the user inputs a crazy value for fields.

The attribute and category select options will need testing and possible tweaking to make sure that they work OK on sites with hundreds or thousands of attributes or categories. Currently they pre-populate the list of attributes/categories with all of the attributes/categories when loaded, and this may not be scalable.

Scope switcher: https://cloudup.com/cGBCQLlRaFN

Let's make it clear which scope is currently active when switching, and disable it as a selection.

In this state it doesn't do anything so it probably makes most sense to hide it.

• List width doesn't match the search input; https://cloudup.com/cOACJ-sSwjX
• Let's align the chevrons; https://cloudup.com/cCoqqy7BDVu
• The scrollbar is in a strange place; https://cloudup.com/cna-oucsCOZ
• The entire row presents the pointer cursor on hover, but nothing happens unless you specifically click the checkbox. Let's make the entire row toggle the checkbox.

Just adding list-layout to the block output will require all themes to introduce new layout styles based just on that class.

Until a theme adds extra CSS to support this new class the frontend will not properly reflect what they are previewing in the block.

Storefront set to list view: https://cloudup.com/cCCN2gTKJDR

Current prototype: https://automattic.invisionapp.com/share/P4FL7W6VDT8#/screens/276308942_01e
Select All products in scope selector.

Sketch: https://www.dropbox.com/s/dvp2x1poq1yukes/Add%20Products%20Block.sketch?dl=0

Add an option to the Edit Mode of the products block for searching and selecting products by attribute. This is similar to the product category search and select feature we already have built out for the Products block, but for attributes. We may want to make some sort of reusable component that we can use for all of these features.

Sorry this was my bad from the Sketch design. But it looks weird when there's only one category with children in a long list.

Before

After

We need a public-facing final (or close-enough) design for the Products block. We can build the functionality without this, but it's necessary for polish and getting public feedback.

Current prototype: https://automattic.invisionapp.com/share/P4FL7W6VDT8#/screens/276308942_01e
Select Filter products > Attribute in scope selector.

Sketch: https://www.dropbox.com/s/dvp2x1poq1yukes/Add%20Products%20Block.sketch?dl=0

When I go to add a product block there are times that I have to scroll up to see all the options on my screen.

I would expect that once I select to add a product block, the inserter options would be fully visible without me having to scroll up/down.

Here are two examples:

http://cld.wthms.co/GmZBH4

http://cld.wthms.co/UOZ1hI

"Center" might not be the right word. Maybe it's more "anchor at the top to make all options visible".

In this flow we'll need to enable the user to change the add to cart button behaviour and label. They will likely want the button to read something like "Buy now" and redirect to the cart when clicked.

Prototype: Todo
Sketch: Todo

Current prototype: https://automattic.invisionapp.com/share/P4FL7W6VDT8#/screens/276308935
Note the three different entry points;

• Pencil icon
• "Change" link in sidebar
• "Display different products" action button (inside ellipsis menu)

Sketch: https://www.dropbox.com/s/dvp2x1poq1yukes/Add%20Products%20Block.sketch?dl=0

Current prototype: todo

Sketch: todo

Current prototype: todo

Sketch: https://www.dropbox.com/s/dvp2x1poq1yukes/Add%20Products%20Block.sketch?dl=0

Current prototype: todo

Sketch: todo

If you have a Grid View set to show 1 row with 4 columns and you switch to List View the number of rows is set to 1 which hides products. I think when switching the rows should be set to $rows * columns.

4 Columns x 2 Rows = 8 Rows
3 Columns x 3 Rows = 9 Rows

etc...

It's confusing switching to List View and having products disappear. Originally noted in #59

For now let's swap the text to "added" on click then fade-out the row and slide-up any rows beneath it. Keen to see how this tests cause it's feeling a little clunky now it's live.

Current prototype: todo

Sketch: https://www.dropbox.com/s/dvp2x1poq1yukes/Add%20Products%20Block.sketch?dl=0

If a page has the products shortcode already on it (from posts created using the classic editor) convert the shortcode into a pre-populated Products block. More investigating will need to be done to see if this is possible, but I believe Gutenberg 2.1 has some shortcode handling features so it should be possible.

Possible use case for transformations API: WordPress/gutenberg#4578

Products do not display in 6-column format.

1-column, 2-column, 3-column, 4-column, and 5-column all work well.

• 6-column setting works on the front end.
• 6-column setting does NOT work on the back end - instead it works just like 1-column.

To stop fun stuff like this happening https://cloudup.com/cizdFS2n6h4

I think you mentioned this in the call yesterday but noting it here anyway.

If I create a new product block using the "Individual Products" block the same products are auto-selected if I choose to create another product block with "Individual Products".

I'm not sure if this is intentional or not. If it is, wouldn't the better option for the user be to Duplicate the block or convert it to a re-usable block?

Current prototype: todo

Sketch: https://www.dropbox.com/s/dvp2x1poq1yukes/Add%20Products%20Block.sketch?dl=0

The user should be able to specify how many columns / rows products should be arranged in to.

Current prototype: todo

Sketch: todo

Currently, when you elect to display;

• Featured products
• On sale products
• All products

You're taken to a screen which confirms what you're displaying with the done button. The experience would be smoother if we just skipped that altogether and went directly to the preview.

For example if you elect to display individual products but do not select any, then click done you see this;

I appreciate that's what you'd see on the frontend but nobody would ever want to use the product block this way.

The "Done" button should be disabled (with cursor: not-allowed;) in this case with a tooltip which states "Please search for and select products to display first".

I'm not sure at what point in the development process we should do this, but we need to modularize components where possible and export them so that third-party developers can extend and reuse WC components. See the Gutenberg blocks library for examples of how this should be done.

Current prototype: https://automattic.invisionapp.com/share/P4FL7W6VDT8#/screens/276308942_01e
Select Product category in scope selector.

Sketch: https://www.dropbox.com/s/dvp2x1poq1yukes/Add%20Products%20Block.sketch?dl=0

The CSS styles need to be polished and finalized. This does not need to be completed until a final design is approved. Rough styles work until then.

Current prototype: https://automattic.invisionapp.com/share/P4FL7W6VDT8#/screens/276308942_01e
Select Individual products in scope selector.

Sketch: https://www.dropbox.com/s/dvp2x1poq1yukes/Add%20Products%20Block.sketch?dl=0

I'm curious why there are two different "screens"/user experiences for the same type of change:

1) Selecting the display mode the first time:

2) Changing the display mode after a product block has been configured:

I was thinking it could just go back to the first screen after clicking Display different products. That way the user is already familiar with the option choices and experience.

On current master after you insert a product block neither grid or list view are selected. Let's make grid the default.

This seems to be something probably caused by the latest version of Gutenberg. If you create a block with individual select products and save, when you come back to the page you get errors on the block:

I don't know why the validation expects an empty string for include, but that is not correct. Weirdly this only happens for the product select and not the category one.