Tag/category tiles (user)

prinzdezibel commented 6 years ago

Landing page should feature an area with image tiles for each product category.

Story As an user – when entering the shop – I want to get a quick overview what product categories are available. This allows me to quickly find the product I'm interested in.

Acceptance criteria

Given that there's a navigation tag called MEN there will be a corresponding category tile that displays an image that represents the category MEN.
The image tile is clickable. When clicking it, the user navigates away from current page to a new page "Cat Grid" (https://github.com/reactioncommerce/reaction-swag-shop/issues/6)
When navigating into a image tile, the resulting "Cat Grid" view shows only products that have the pertinent top-level tag assigned (e.g.: MEN).
The behaviour of clicking an image tile is indifferent of clicking the corresponding tag link in the navigation bar.

Questions & Remarks

The categories could correlate to product hashtags
Categories (hashtags) needs to be linked to images somehow. The easiest (, but most inflexible) way would be to hardcode this in page template.
For small screens, not all categories would be displayed. Are the hidden categories invariant?

prinzdezibel commented 6 years ago

Mobile design

home_-_website_-_zeplin

Desktop design

home_desk_-_website_-_zeplin

rymorgan commented 6 years ago

@prinzdezibel Can't we also use the product grid admin to allow a user to select a header image for that category and choose to show that image on the homepage? I know @kieckhafer has implemented a category header image editor for Foray. Perhaps we can leverage that for this. Essentially, it would then be a category image header that could be then be applied to the homepage.

prinzdezibel commented 6 years ago

@zenweasel My understanding is, that we still need this functionality for phase1, but not dynamically available in admin backend. I'm asking, because it's labeled phase2 right now.

brent-hoover commented 6 years ago

Yes, but should we rewrite the ticket to reflect the actual functionality?

prinzdezibel commented 6 years ago

We decided to postpone the full fledged functionality that would allow the admin to specify a header image in the backend and possibly also set some display options how to show it on the landing page.

For version 1, a simple, hard-coded solution should suffice.

prinzdezibel commented 6 years ago

@rymorgan I'm starting on this ticket and would need to get hands on the category images. I've seen that Zeplin can deal with image exports from Sketch in this blog: https://blog.zeplin.io/exporting-assets-in-zeplin-50b8b4a56b05 Exported images should then appear in the right hand properties bar as seen in the following screenshot: exporting_assets_in_zeplin_ _zeplin_gazette

But that seems not the case for our swag shop design, because I can't find them in Zeplin. Could you help me with this? Thanks!

rymorgan commented 6 years ago

@prinzdezibel The sketch file that's plugged into Zeplin wasn't configured right. It is now, so you should access to the category assets in Zeplin. Let me know if there are other images you need.

https://zpl.io/b6Jj5jq

prinzdezibel commented 6 years ago

@rymorgan Thank you! That works and helps me a lot already. But one thing that could be better (although I don't know if Sketch/Zeplin supports that): The images contain button elements and font types which is not suitable for direct consumption.

Is there anything you can do about that?

home_desk_-_website_-_zeplin_and_reactioncommerce_reaction_-_gitter

rymorgan commented 6 years ago

@prinzdezibel Not that I can figure out, sort of lame. The agency that designed this made the file a little weird. Here's a zip. category-image-assets.zip

reactioncommerce / reaction-swag-shop