Design for Add/Edit Product CPT

[InstinctBrett]

Sketchbook: http://imgur.com/a/bUN9F

Problem: Metabox overload

There are just too many metaboxes on this page. In the most common scenarios, most of them are ignored. Finding the right metabox needed for your desired task is a challenge.

Solution: Reduce to tabbed metaboxes We can break metaboxes into three distinct types: Product Details, Product Delivery, Other.

Product Details

• Additional / Short Description
• Metadata
• Images

  Product Delivery

• Shipping
• Downloads
• Personalisation
• External Link

  Other

• Pricing
• Stock
• Taxes
• Discussion / Reviews

Hopefully these are obvious in the photos of my sketchbook.

Opportunity: WP 3.6 Post Formats -> WPEC Product Types

Two are really obvious: Physical and Digital. Group could be another product type. Group/Package functionality -> #386

Variations

Variations doesn't really fit wholly as a product type.

What is really important about Variations is handled in the normal columns: SKU, Price, Sale Price, Stock, Taxable Amount.

Currently, you can also edit shipping settings for variations. I imagine the primary use case this would be prepackaged volume bundles (I think various sizes of Coca-Cola bottles you can buy: can, 600ml bottle, 6x Cans, 1.5L, 2.5L, etc.) -- all have different shipping sizes and weights.

If you want to charge extra for personalisation, you can't at the moment. If you want to charge extra for more bonus digital downloads, you can't.

Variations specifically should change something about the product's delivery. In this case, we have a Product Delivery metabox. If we tick the variations checkbox on this, the tabs all disappear and we get the Variations metabox contents instead. Inside each variation, instead of only shipping, we get the Product Delivery tabs, enabling a variation on shipping, downloads, personalisation, and other things (such as granting a new site permission).

That's a first stab. Hope you understand it all.

[JustinSainton]

Such a great initial summary! Excited to see where this goes, I think you're definitely on the right track.

[instinct]

Another post format we support might be Donations?

d

Sent from my iPhone

On 3/05/2013, at 5:06 PM, Brett Taylor notifications@github.com wrote:

Sketchbook: http://imgur.com/a/bUN9F

Problem: Metabox overload

There are just too many metaboxes on this page. In the most common scenarios, most of them are ignored. Finding the right metabox needed for your desired task is a challenge.

Solution: Reduce to tabbed metaboxes We can break metaboxes into three distinct types: Product Details, Product Delivery, Other.

Product Details

Additional / Short Description Metadata Images Product Delivery

Shipping Downloads Personalisation External Link Other

Pricing Stock Taxes Discussion / Reviews Hopefully these are obvious in the photos of my sketchbook.

Opportunity: WP 3.6 Post Formats -> WPEC Product Types

Two are really obvious: Physical and Digital. Group could be another product type. Group/Package functionality -> #386

Variations

Variations doesn't really fit wholly as a product type.

What is really important about Variations is handled in the normal columns: SKU, Price, Sale Price, Stock, Taxable Amount.

Currently, you can also edit shipping settings for variations. I imagine the primary use case this would be prepackaged volume bundles (I think various sizes of Coca-Cola bottles you can buy: can, 600ml bottle, 6x Cans, 1.5L, 2.5L, etc.) -- all have different shipping sizes and weights.

If you want to charge extra for personalisation, you can't at the moment. If you want to charge extra for more bonus digital downloads, you can't.

Variations specifically should change something about the product's delivery. In this case, we have a Product Delivery metabox. If we tick the variations checkbox on this, the tabs all disappear and we get the Variations metabox contents instead. Inside each variation, instead of only shipping, we get the Product Delivery tabs, enabling a variation on shipping, downloads, personalisation, and other things (such as granting a new site permission).

That's a first stab. Hope you understand it all.

— Reply to this email directly or view it on GitHub.

[instinct]

Totally agree Justin. Next week we need to wireframe up the new image management window too.

Then the add products page is nearing wireframe completion.

Looking forward to community feedback :))

Sent from my iPhone

On 3/05/2013, at 5:07 PM, JustinSainton notifications@github.com wrote:

Such a great initial summary! Excited to see where this goes, I think you're definitely on the right track.

— Reply to this email directly or view it on GitHub.

[lukecarbis]

Love it - especially the simplicity of Physical / Digital / Group. I know it's tempting to add to these but I think that a choice of three makes it seem super easy. Icons are a nice touch, too.

Obviously things like donations could be added with plugins / gold cart, etc.

---

If you select Group, then in the Product Delivery metabox, the downloads, personalization, and external link tabs should disappear, and be replaced by Group Products. This section would be for adding the products that belong in the group.

Shipping should still be set seperately for a grouped product.

[InstinctBrett]

@lukecarbis wrote:

If you select Group, then in the Product Delivery metabox, the downloads, personalization, and external link tabs should disappear, and be replaced by Group Products. This section would be for adding the products that belong in the group.

Yes. I imagine this being a metabox where you can create a list of products. The price on the grouped product becomes the bundle price.

[instinct]

I was just looking at the images again (http://imgur.com/a/bUN9F) and it occurred to me that the image gallery view that you've added will need to open the new WordPress media manager.

Not that that is directly related but we do want to consider that. The fact that the image metabox exists is really just so a store owner can see what images are associated with the product at a glance.

The "management" needs to go down in the new core WP media manager window.

Not sure how to approach the Grid View / Gallery side of things. That will require input from Gary too. But it does need to be discussed....

Best, Dan

On 7/05/2013, at 4:42 PM, Brett Taylor notifications@github.com wrote:

@lukecarbis wrote:

If you select Group, then in the Product Delivery metabox, the downloads, personalization, and external link tabs should disappear, and be replaced by Group Products. This section would be for adding the products that belong in the group.

Yes. I imagine this being a metabox where you can create a list of products. The price on the grouped product becomes the bundle price.

— Reply to this email directly or view it on GitHub.

[instinct]

Idea. Can you please visually add UI for how recurring billing would be added to a product.

d

Sent from my iPhone

On 7/05/2013, at 5:53 PM, Dan Milward dan@instinct.co.nz wrote:

I was just looking at the images again (http://imgur.com/a/bUN9F) and it occurred to me that the image gallery view that you've added will need to open the new WordPress media manager.

Not that that is directly related but we do want to consider that. The fact that the image metabox exists is really just so a store owner can see what images are associated with the product at a glance.

The "management" needs to go down in the new core WP media manager window.

Not sure how to approach the Grid View / Gallery side of things. That will require input from Gary too. But it does need to be discussed....

Best, Dan

On 7/05/2013, at 4:42 PM, Brett Taylor notifications@github.com wrote:

@lukecarbis wrote:

If you select Group, then in the Product Delivery metabox, the downloads, personalization, and external link tabs should disappear, and be replaced by Group Products. This section would be for adding the products that belong in the group.

Yes. I imagine this being a metabox where you can create a list of products. The price on the grouped product becomes the bundle price.

— Reply to this email directly or view it on GitHub.

[InstinctBrett]

More screenshots: http://imgur.com/a/Wtz2Y

https://www.dropbox.com/s/7lyzd8z9zyqaa3a/_new-product-prototype.html

This HTML file won't work unless you put it in a wp-admin folder in an existing wpec setup running WP >= 3.6-beta2, preferably one running in a DEV environment.

The prototype here has just enough CSS to communicate what it should look like, and just enough JS to make (most) everything viewable. No HTML/CSS/JS should be used in development without first giving it TLC; this code is a 'sloppy rush job'.

Missing:

• Fields underneath the Product type buttons, à la WP 3.6 Post types, as its unclear what should really go there, and what they would actually do to any of the page. I think maybe putting Price and Stock there would be best, but the fields there feel like they should be specific to Physical, Digital or Group, but moving/copying the appropriate tab from delivery there seems overkill. Hiding Physical when Digital and vice versa is selected seems... limiting... when a product can actually be shipped and come with digital goods: a Physical CD that grants you an immediate digital download.
• Any popups/modals. Basically, if you see ellipses " … " somewhere, I'm saying a modal should be open when clicked.

[JustinSainton]

Great first pass, Brett! Excited to see how this evolves - especially with home-grown icons, I'm looking forward to seeing how the "Product Format" concept changes what is shown on the screen. Also looking forward to your concepts for inline-documentation tooltips. Great work!

[pippinsplugins]

This is looking phenomenal.

[instinct]

Thanks man!!!!

I'm looking forward to getting this in 3.9 branch.... there's a bit more to do yet but we'll get there :))

Best, Dan

On 10/05/2013, at 4:29 PM, Pippin Williamson notifications@github.com wrote:

This is looking phenomenal.

— Reply to this email directly or view it on GitHub.

[benhuson]

Looking really good! I only have a couple of small comments/questions...

1. I think vertical spacing between the multiple currency options could be tightened up a bit. Feels a bit gappy and would make the Pricing box much taller than it needs to be with multiple currencies. Or is this going to be split out into a separate plugin?
2. Quantity discount - is this going to be a core feature or plugin functionality? If core it almost feels like it needs a title above the discount fields.

Also your visuals reminded me, I'd love a filter to be able to select default units for weight and dimensions. It's a pain having to change pounds to kg and inches to cm every time. I've set up a ticket for that at #423

[InstinctBrett]

Thanks for the positive response everyone.

I am still looking for feedback on my concerns as written in https://github.com/wp-e-commerce/WP-e-Commerce/issues/391#issuecomment-17702220

Thanks :)

[instinct]

@benhuson

1. For now / the next release it is staying. So that being the case I'd agree in that it could be tightened up a little - it does seem a little gappy :P
2. The Quality discount is also in core right now so same thing. And again I think you're right - so @InstinctBrett could add more space or add little headings above each one. Think what would WordPress do?!?!

Any more comments for Brett?

Has everybody had a good look through all of the options: http://imgur.com/a/Wtz2Y

[benhuson]

@instinct Oh yeah, completely forgot the Table Rate Price checkbox was there :)

[1bigidea]

Since Dan has asked me to see if I can implement this, any comments on the impact of core dropping post formats and using a plugin instead? Are we going to require our users turn that plugin on (given the large discussion about the UI for posts)

And what about customer not running WP 3.6?

Alternately do we go our own way with "post format" and reconnect back to core when it is finally implemented?

Or we just implement post format for our post type only (i.e. check for the post type plugin)

I am open to suggestions.

[JustinSainton]

Yep, I've given this some thought as well, actually, given the departure from core that the post formats UI will have. We essentially have two options, as you outlined:

1) We can use WPeC as a test bed for the current Post Formats UI in the form of Product Formats. Beta testers of WP will understand and appreciate the nod, and we can iterate with the plugin and, eventually, core.

2) We can toss it and re-work the UI

I lean towards the first option, personally. It's enough of an improvement aside from the fact of being a nod to core UI that I think it may be worth pursuing. Definitely open to other thoughtrs though.

[benhuson]

Am I right in think that WordPress core Post Formats are not extensible any way so we'd have to create our own implementation that 'looked similar'? Are you just talking about using the css that would be used by core rather than creating our own?

I'm with justin - going for option 1. It should end up looking like WordPress Core formats, however that ends up evolving.

So as long as it's built in a way that will allow the front end and CSS to adapt as needed, I'd go with that.

[JustinSainton]

I think a lot of that ends up depending on how core implements post formats and the general intention for portability thereof. WP core has a bit of a history of not having entirely lovely or intuitive JS interfaces and APIs (TinyMCE and quick/bulk edit, anyone?) - so I wouldn't count on easy extensibility. That said, once something does land in core, we should definitely figure out the best way to move in-step with it.

[benhuson]

For reference Post Formats are not Extendable

[instinct]

Hey team. This is very close to being done.

I still think there are too many metaboxes though. So here are some thoughts:

1) we tighting things up as per @benhuson suggestion (not hard) 2) we give featured image meta box the lowest priority and push it to bottom (or remove it) 3) we add "tax" and "stock" to the pricing meta box???

That last one (3) is just a crazy thought. I could wireframe up some options if you think its a good idea?

[benhuson]

As meta boxes can be re-ordered by the user, I'm happy to lower the priority of featured image. I would suggest that Price and Stock should be nearest to the top as I imagine these are likely to be the panels that a user wants to update most frequently after publishing a product.

I quite like having the Tax box separately so It can be hidden if a user doesn't need it, but I'm not averse to including it with price if other people think differently - tax does relate to price after all.

If taxes are disabled it should just display "Taxes are not enabled. See Settings > Taxes". At the moment it looks like it also displays the fields even if Tax is disabled. Is that confusing? If including with the Price box I wouldn't include the fields if tax disable to save space.

Similarly I like having Stock panel separate so it can be hidden if not required. To me, Stock and Pricing are separate things. Also, if we intend to make the stock side of things more pluggable so that it can be integrated into other stock system it would make more sense to keep this separate and include hooks so stock integrations could hook in to add/change the content of the Stock panel as integrations may require further options.

In general, I like that meta boxes are flexible - can be reordered and hidden by the user. We should be careful to only group related functionality into each meta box so the user still has the power to hide boxes they do not require and prioritise their workflow in a way to suit them.

[JeffPyeBrook]

Would it make sense to have the position of the various meta boxes filterable using a documented wpsc_ filter? Doing this would make it a little easier for a plugin to adjust the position of meta box, but more likely easily hide a meta box when necessary.

The example that comes to mind is a plugin for stock management that has it's own interface would likely want to hide the built in meta boxes.Perhaps returning false from the filter would hide the meta box, or overriding the relative priority would place the meta box appropriately.

[benhuson]

That could work.

If allowing the possibility for meta boxes to be hidden/removed (rather than just hidden with JS) we'd just need to test to make sure the correct nonces and checks were in place to make sure no weird issues happen when saving when a meta box with fields isn't present. Would hope this should already be in place.

[JeffPyeBrook]

Could we adopt a convention that every add_meta_box function name like "function my_nifty_meta_box($post) {}" should have a save routine "function my_nifty_meta_box_save($postid){}"?

That way if we don't add the meta box we don't attach the save_post ( or savepost{post_type} in 3.7+) action for the data within the meta box?

[benhuson]

Personal I like doing it that way in my own plugins as it feel much intuitive. The other approach I use is for each meta box to output it's own nonce field, then check the posted nonce before saving the values for that meta box.

[instinct]

@benhuson @JeffPyeBrook I think you guys are probably onto something but I think that the first step is for us to just get the first version out the door. And then open it up for improvements?

@benhuson That said I know in previous comments you've talked about visual tweaks and tightening things up in terms of positioning - once we've got the first version in git would you mind having a play and submitting those tweaks? I could try wireframe it up in photoshop but I get the feeling you could probably just nail it.

[benhuson]

Yep, improvement can come later...

@instinct Just let me know where there's a refactored version for me to check out and fiddle with :)

[instinct]

Aye. Should be the end of this week mate :)

[instinct]

@benhuson what do you think?

This is what we have now, it works and I've used it.

This is how I think it should look based on WP meta boxes uses elsewhere in WordPress. You can see how WordPress handle tabs under Menus.

[instinct]

@garyc40 @JeffPyeBrook @JustinSainton @pippinsplugins @leewillis77 - what do you guys think? :)

[benhuson]

@instinct I would say we should probably go with the same UI as WordPress for tabs in Meta Boxes as show your example in the taxonomy checkbox tabs.

WordPress SEO uses this approach - see attached

[instinct]

Thanks @benhuson - does it look good using MP6?

@iorivn can you look at this please :)

[benhuson]

This is what the current WordPress 3.8.beta with merged MP6 looks like for me:

[instinct]

@benhuson you like?

[benhuson]

I like, but I think Personalization doesn't feel like it belongs in the Delivery panel. It would make more sense to me for it to be in Product Details or seperarte.

[benhuson]

Just download the PR to have a proper test. Looking good! Here's my feedback/thoughts (some of this is low priority of for separate issues):

• [x] Personalization should be in Product Details, not Product Delivery.
• [x] Might be nicer where specifying dimensions to use × rather than letter 'x'.
• [ ] "Add Existing Files..." popup needs some styling and TLC
• [ ] Would be nice if Downloads table refreshed after adding a file
• [x] Would be nice if Images refreshed after adding/ordering
• [x] Styling of table in Download tab - should this more WordPress-y like the one in Variations? Currently checking in - WordPress 3.7.1 - is this already hardcoded to look like MP6? Are there some default WordPress style classes that should be used.
• [x] Same table styling for table in Metadata Tab.
• [x] Some weird styling in the Price panel - see attached

[iorivn]

@benhuson Thanks for the comments. I will fix them in the next commit.

PS: I forgot to mention, I am testing on 3.8-beta-1-26375, so things seems to be better on my test store compared to your screenshot.

[benhuson]

All looking really good. Couple of bits of feedback.

Images refreshing after adding works great. Don't think I can re-order them though?

Download table looks good, although I wonder if we should do it without the footer row as these tables are never going to get really long. I don;t know if there is a precedent or existing style for that. Just removing the tfoot leaves a double thickness line at the bottom of the table that would need styling.

Can we fix the select menu styles in the pricing box for 3.7 at least? Think we need to at least make it look OK in previous/current version. Think it's just the .newCurrency style which removed borders, appearance etc

Seems to be a rogue A tag in the personalisation meta box making it all a link

Loving the way it's going. The edit page is now much less cluttered and I think the groupings of tabs meta boxes seems logical.

[instinct]

Can you contribute those small changes in?

[instinct]

@JustinSainton @JeffPyeBrook I'd love to know what you guys think re this!!! Its feeling great :)

[JustinSainton]

Yeah, aside from some padding issues and what I imagine to be pending UI testing in the 3.8 branch of WP, it's looking pretty good.

[benhuson]

@instinct yep, i can take a look at those small styling tweaks and tag fix

[instinct]

Appreciate it Ben :)

Sent from my iPhone

On 5/12/2013, at 10:40 PM, Ben Huson notifications@github.com wrote:

@instinct yep, i can take a look at those small styling tweaks and tag fix

— Reply to this email directly or view it on GitHub.

[JustinSainton]

Need to merge #717 and #713. Also, as part of this overhaul - I'd like to see the Variations metabox eliminate the horizontal scroll, as that's super annoying.

[instinct]

I believe the Variations metabox is pretty sweet in the latest update - the scroll has been taken care of and the setup tab is now the default active tab if there are no existing variations.

d

On Mon, Dec 16, 2013 at 9:23 AM, JustinSainton notifications@github.comwrote:

Need to merge #717https://github.com/wp-e-commerce/WP-e-Commerce/pull/717and

713 https://github.com/wp-e-commerce/WP-e-Commerce/pull/713. Also, as

part of this overhaul - I'd like to see the Variations metabox eliminate the horizontal scroll, as that's super annoying.

— Reply to this email directly or view it on GitHubhttps://github.com/wp-e-commerce/WP-e-Commerce/issues/391#issuecomment-30619293 .

Dan Milward

M +64 21 449 901

178 Willis Street – Wellington CBD – Wellington 6011 – New Zealand www.getshopped.org - www.gamefroot.com

[JustinSainton]

The horizontal scroll still exists in the latest commit.

[benhuson]

@JustinSainton I forked #713 to create #717 I'm not sure anything has changed in #713 since?

[JustinSainton]

Ahh, gotcha. No, I don't believe anything has changed. Will close #713 then.

[JustinSainton]

Great work so far @benhuson and @iorivn! Looking forward to seeing this in 3.8.14...or 3.9.0...or whenever it merges :)