During the testing we found that people struggled with the product listing, there seem to be various causes to this. But primarily scanning is hard, this largely has to do with alignment and gradient zebra stripe. In addition to that people really wanted to have more advanced filtering options.

I have done a full redesign of this page, given that I have made many changes I have tried to break up my argumentation - I can imagine as we have implemented this, we might need to do small additional tweaks.

Filters
I have added the filters on top, the action and search should be placed with a <hr> below it. Each filter works through AJAX updating the table once an option is selected (I have never understood why VBO doesn't do this by default).

  • Search works in conjunction with the filters above, and by default searches SKU and title.
  • The last option is categories, I suggest to use an interaction called Multiple Select with Groups that can be seen in the Chosen library (http://harvesthq.github.com/chosen/) - this to make a category select interaction that scales and is highly usable, instead of many select lists. I understand that much of this isn't common in Drupal, but I think its a worthwhile optimization for store administrators

Table
The table has a few alterations, I added a table header primarily because it felt inconsistent with the other tables. Other than that I have done a few alterations:

  • I have added some styling to the quick edit button.
  • The titles are now aligned with the checkboxes allowing them to be a visual landmark.
  • The description is dark gray.

Bulk operations & pager
Bulk operations are shown below the table - this pattern seems more consistent with other applications. The arrow is used to visually indicate what you are applying the bulk operations to. I have also given a spin at the pager, I am not sure if it was styled or not - but decided it could look better.

productlisting.jpg

CommentFileSizeAuthor
productlisting.psd10.04 MBBojhan
productlisting.jpg318.97 KBBojhan
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

GuGuss’s picture

GuGuss CreditAttribution: GuGuss commented
Assigned: Unassigned » vasike

@vasike: Can you implement that new product listing and give it back to dudenhofer for theming.

vasike’s picture

vasike
Location Ramnicu Valcea
CreditAttribution: vasike commented

Research and solution thoughts/proposals (before theming).

Bulk operations position:
- an extra option for the "Bulk operations" field winthin the VBO module:
Below/Above(/Both) results position
bojanz proposed and said it will do it.

Product type filter, is actually a Product Display type filter
- New filter for the Product reference which provides the list (views in operator) of the node types which are product display/ have product reference.

All categories filter:
imho i think we should keep all taxonomies filters (Gender, Category, Collection, Brand) maybe in a better shape (maybe grouped in a fieldset)
as i couldn't see how this one form element (selection) could provide an working matrix of options.
ex. how can i search for : "unisex" && "to wear" && "Courtsides" && "Shoes"

Search box:
Filter by multiple fields.
It seems that the dev version of Views module includes a new filter for this: "Global: Combine fields filter"
This fields requires that the fields should be present in Fields of the view.

"Chosen library" suggested by Bojhan
imho
it´s usefull when we have a lot of option in the select form elements.
But in this case we don´t have a lot of options.
however the module which implements this library, provide an option to be active only for a minimum number of options (ex. 20)
But to have this approach we have to assure we have the same theming for both cases, with & without chosen
question : Should we use chosen always ?

any feedback/thoughts are more than welcomed.

Bojhan’s picture

Bojhan CreditAttribution: Bojhan commented

@vasike Chosen should be able to select a matrix of options. I don't think that showing all taxonomy filters is a very scalable pattern, because even medium sized shops might have more than 20 terms in a given category (I'd say its pretty common).

I don't really understand why you think Chosen, isn't fit for fewer options. In essence its just a very fancy autocomplete + select list.

vasike’s picture

vasike
Location Ramnicu Valcea
CreditAttribution: vasike commented

@Bojhan, i really appreciate and it will help a lot if you could provide an example (image) for this matrix.
thanks a lot

vasike’s picture

vasike
Location Ramnicu Valcea
CreditAttribution: vasike commented

Patch built for Product Displays Content type filter
http://drupal.org/node/1031494#comment-6302102

vasike’s picture

vasike
Location Ramnicu Valcea
CreditAttribution: vasike commented

There's something about All categories filter
Let's suppose we have a multiple selection of terms from Gender, Category, Collection, Brand grouped by vocabulary (optgroup).

How the filter should work?
i think there could be 2 ways:
1. Looking for nodes that have any of the selected terms no vocabulary related (IN operator for all terms IDs).
2. Looking for nodes that have any of the selected terms for every vocabulary (IN operator for vocabulary terms IDs) having an 'AND' between them.
this is how it works now, with multiple/independent filter

GuGuss’s picture

GuGuss CreditAttribution: GuGuss commented

I think 2 is the best option since it works as we already have with the independant filters ! If a user searchs for 2 diffrerent terms (men & hat), he's looking for a product which has both terms.

vasike’s picture

vasike
Location Ramnicu Valcea
CreditAttribution: vasike commented
Status: Active » Needs review

first work https://code.drupalcommerce.org/#/c/255/
Implemented:

  1. Product Displays Content type filter,
    with #1031494-7: Product Display views filters: Is Product Display? & Product Displays Content types patch
  2. All categories filter: custom filter built within Commerce Backoffice module to support terms from multiple vocabularies
    (could be moved to views in future, requires some later cleaning)
  3. Search box, Filter by multiple fields:
    new filter nuilt within Views module (use the dev version of views)
  4. "Chosen library" - add chosen module settings and dependency in Commerce Kickstart Product UI feature/module
vasike’s picture

vasike
Location Ramnicu Valcea
CreditAttribution: vasike commented
Assigned: vasike » dudenhofer

Theming needed. also some positioning for the exposed filters.

bojanz’s picture

bojanz CreditAttribution: bojanz commented
Title: Tweak visual styling product listing & add styling to filters » Rebuild and retheme the product listing view
Issue tags: +beta blocker

Retitling. Tagging.

vasike’s picture

vasike
Location Ramnicu Valcea
CreditAttribution: vasike commented
  1. Re-labelling the Product Displays Content type filter: from "type" by "All product types"
  2. Added the label : "Filter by", i used the Product Displays Content type filter label from views settings.
    Requires a CSS for inline display.

commit rebase done https://code.drupalcommerce.org/#/c/255/

bojanz’s picture

bojanz CreditAttribution: bojanz commented

Merged. Now waiting on Aaron's theming.

vasike’s picture

vasike
Location Ramnicu Valcea
CreditAttribution: vasike commented

#1716826-1: Content: Has taxonomy terms from Multiple Vocabularies Filter
Views patch for the Filter used for the All categories filter, maybe we can move it there instead of having in Commerce Backoffice.

dudenhofer’s picture

dudenhofer CreditAttribution: dudenhofer commented

Theming has been pushed and merged, it looks like the only setting left is to set the Chosen module to "Always Apply" and getting the bulk operations below the table. Then it should be looking a lot better.

GuGuss’s picture

GuGuss CreditAttribution: GuGuss commented
Assigned: dudenhofer » vasike

Reassign to vasike to move the bulk selector below the table (bojanz's patch) and configure the chosen settings.

bojanz’s picture

bojanz CreditAttribution: bojanz commented
Status: Needs review » Fixed

Done, just in time for beta1.

Bojhan’s picture

Bojhan CreditAttribution: Bojhan commented
Status: Fixed » Active

Still not completely finished:

  • "Add product" needs to be close to the table - as designed
  • Help should be right aligned, it now has some spacing from the right?
  • All statuses has a different shade of gray
  • Apply is not vertically aligned with the bulk select list
  • There is no header check box to select all the items in the list
vasike’s picture

vasike
Location Ramnicu Valcea
CreditAttribution: vasike commented
Assigned: vasike » dudenhofer
Status: Active » Needs review

There is no header check box to select all the items in the list
it seems that the Bulk operation Label is needed for the Bulk operations Select All checkbox to be displayed.
Add an html comment as the label.
commit : https://code.drupalcommerce.org/#/c/333/

the other aspects from the previous comment are CSS related.
so i assign to dudenhofer.

bojanz’s picture

bojanz CreditAttribution: bojanz commented
Status: Needs review » Needs work

The header checkbox is there again (VBO regression that got fixed).
Already merged a commit by dudenhofer that addressed the visual problems mentioned above.

I've just merged a commit that moves the "Add product" button below the exposed filters, now we need to tweak the CSS for that, and we're done.

dudenhofer’s picture

dudenhofer CreditAttribution: dudenhofer commented
Status: Needs work » Needs review

Here's the commit to fix the CSS margin on the Add Product/Order buttons https://code.drupalcommerce.org/350

bojanz’s picture

bojanz CreditAttribution: bojanz commented
Status: Needs review » Fixed

Merged.

Automatically closed -- issue fixed for 2 weeks with no activity.