Tag/category tiles (user)

[prinzdezibel]

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" (Epic: Cat Grid #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]

Mobile design

Desktop design

[rymorgan]

@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]

@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]

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

[prinzdezibel]

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]

@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:

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]

@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]

@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?

[rymorgan]

@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