Clothing Article Browsing

Requirements

Goal of the function

The goal of the function is to provide the possibility to the user the explore the available clothing articles of the webshop.

Screens

The clothing article browsing feature set contains the following screens:

1. Featured Clothing Article Screen

   • The screen is accessible from the top level navigation component.
   • On this screen the user can see its recommended clothing articles.
   • The recommendation pages are loaded into the infinite scrolling list.
   • If the article loading fails, the user is notified with a non-dismissive snackbar. The snackbar contains retry action.
   • From here the user can navigate to "Search Clothing Article Screen" using the trailing icon on the top app bar.
   • From here the user can navigate to "Clothing Article Details Screen" by choosing any clothing article.

2. Search Clothing Article Screen

   • The screen is accessible from the "Featured Clothing Article Screen".
   • On this screen, the user can specify what kind of clothing articles it is searching.
   • The user can choose from the options below:
     • The user can specify the name or its part of the article it is looking for.
     • The user can specify the name or its part of the brand of the article it is looking for.
     • The user can specify the minimum and maximum amount of price of the search clothing articles.
     • The user can select what kind of categorical attributes (color, shade, graphical appearance, index name, garment group name) must have the searched clothing articles.
   • The user can navigate back to "Featured Clothing Article Screen" using the back button on the top app bar.
   • The user can navigate to the "Clothing Article Search Results Screen" after clicking the search button
     • The button is inactive by default, and becomes active after the user enters valid filter options.
     • If the user enters invalid filtering options, it must be shown on the screen on the input field or using snackbars, and the button becomes inactive.
   • If the user navigates back from the "Clothing Article Search Results Screen", the previous filtering options must be displayed

3. Clothing Article Search Results Screen

   • The user can find on this screen the results of its previously initiated clothing article search operation.
   • If the query has many results, the result pages are loaded into the infinite scrolling list.
   • If the article loading fails, the user is notified with a non-dismissive snackbar. The snackbar contains retry action.
   • The user can navigate back from here to "Search Clothing Article Screen" by using the back button on the top app bar.
   • From here the user can navigate to "Clothing Article Details Screen" by choosing any clothing article.

4. Clothing Article Details Screen

   • In this screen the user can see every detail of a clothing article.
   • Using the back button on the top app bar, the user can navigate back to the previous screen.
   • If the article loading fails, the user is notified with a non-dismissive snackbar. The snackbar contains retry action.
   • Using the FAB on the screen, it can add the clothing article to its shopping basket. After the clothing article is added to the basket, the user is navigated to the "Shopping Basket Screen". If the user navigates back from the "Shopping Basket Screen", it is navigated to the "Featured Clothing Article Screen".
   • If the "Add to basket operation fails" (that can be initiated with the FAB), the user is notified with a dismissive snackbar, and no navigation happens.

Data attributes

erDiagram
    CLOTHING_ARTICLE {
        string name PK "Must be at least 1 character, maximum 64 characters long. Can contain the letters of Hungarian ABC (it includes English ABC), numbers, whitespace and the following characters: comma,;,.,?,!, single and double quote,#,&,@,(,),-,+,%,=,/.."
        int price "The price of the article in HUF. Minimum value is 500, maximum value is 250.000."
        string brand PK "Must be at least 1 character, maximum 64 characters long. Can contain the letters of Hungarian ABC (it includes English ABC), numbers and whitespace."
        string color "Categorical variable."
        string shade "Categorical variable."
        string graphicalAppearance "Categorical variable."
        string indexName "Categorical variable."
        string garmentGroupName "Categorical variable."
        string description "It can be maximum 4096 characters. Can contain the letters of Hungarian ABC (it includes English ABC), numbers, whitespace, and the following characters: new line, comma,;,.,?,!, single and double quote,#,&,@,(,),-,+,%,=,/. Can't start and end with newline, and two new line characters cannot be adjacent."
        string imageUrl "Contains the article's image's URL. Its origin and the beginning of its path always the same for every entity."
    }

    CLOTHING_ARTICLE_SEARCH_PARAMETER {
        string namePart "Can contain only such characters, that clothing article name can contain, and its maximum possible length is the same as the clothing article name attribute's maximum length."
        string brandPart "Can contain only such characters, that clothing article brand can contain, and its maximum possible length is the same as the clothing article brand attribute's maximum length."
        nullableInt minimumPrice "Its minimum and maximum value is the same as the price attribute of clothing article. If maximumPrice is specified, it must be lower or same."
        nullableInt minimumPrice "Its minimum and maximum value is the same as the price attribute of clothing article. If minimumPrice is specified, it must be higher or same."
        string[] colors "Must contain valid color values of the color attribute of clothing article."
        string[] shades "Must contain valid color values of the shade attribute of clothing article."
        string[] graphicalApperances "Must contain valid color values of the graphicalApperance attribute of clothing article."
        string[] indexNames "Must contain valid color values of the indexName attribute of clothing article."
        string[] garmentGroupNames "Must contain valid color values of the garmentGroupName attribute of clothing article."
    }

Loading

Possible values of color attribute:

1. Beige
2. Black
3. Blue
4. Bluish Green
5. Brown
6. Green
7. Grey
8. Khaki Green
9. Lilac Purple
10. Metal
11. Mole
12. Orange
13. Pink
14. Red
15. Turquoise
16. White
17. Yellow
18. Yellowish Green
19. Other

Possible values of shade attribute:

1. Bright
2. Dark
3. Dusty Light
4. Light
5. Medium
6. Medium Dusty
7. Other

Possible values of graphicalAppearance attribute:

1. All over pattern
2. Application/3D
3. Argyle
4. Chambray
5. Check
6. Colour blocking
7. Contrast
8. Denim
9. Dot
10. Embroidery
11. Front print
12. Glittering/Metallic
13. Hologram
14. Jacquard
15. Lace
16. Melange
17. Mesh
18. Metallic
19. Mixed solid/pattern
20. Neps
21. Other pattern
22. Other structure
23. Placement print
24. Sequin
25. Slub
26. Solid
27. Stripe
28. Transparent
29. Treatment

Possible values of indexName attribute:

1. Baby Sizes 50-98
2. Children Accessories
3. Swimwear
4. Children Sizes 134-170
5. Children Sizes 92-140
6. Divided
7. Ladies Accessories
8. Ladieswear
9. Lingeries/Tights
10. Menswear
11. Sport
12. Other

Possible values of garmentGroupName attribute:

1. Accessories
2. Blouses
3. Dressed
4. Dresses Ladies
5. Dresses/Skirts girls
6. Jersey Basic
7. Jersey Fancy
8. Knitwear
9. Outdoor
10. Shirts
11. Shoes
12. Shorts
13. Skirts
14. Socks and Tights
15. Special Offers
16. Swimwear
17. Trousers
18. Trousers Denim
19. Under
20. Nightwear
21. Woven/Jersey/Knitted mix Baby
22. Other

Localization

1. Featured Clothing Article Screen

Identifier	English value	Hungarian value
featured_clothing_article_screen_top_app_bar_title	Featured articles	Kiemelt árucikkek
featured_clothing_article_screen_clothing_article_list_loading_failure_snackbar_text	Failed to load articles	Sikertelen árucikk betöltés

2. Search Clothing Article Screen

Identifier	English value	Hungarian value
search_clothing_article_screen_top_app_bar_title	Search	Keresés
search_clothing_article_screen_name_text_field_label	Name	Név
search_clothing_article_screen_brand_text_field_label	Brand	Márka
search_clothing_article_screen_minimum_price_text_field_label	Minimum price	Minimális ár
search_clothing_article_screen_maximum_price_text_field_label	Maximum price	Maximális ár
search_clothing_article_screen_search_button_text	Search	Keresés

3. Clothing Article Search Results Screen

Identifier	English value	Hungarian value
clothing_article_search_results_screen_top_app_bar_title	Results	Találatok
clothing_article_search_results_screen_no_results_text	No appropriate clothing article was found.	Nem találtunk a keresési feltételeknek megfelelő ruházati árucikket.
clothing_article_search_results_screen_results_list_loading_failure_snackbar_text	Failed to load results	Nem sikerült betölteni a találatokat
clothing_article_search_results_screen_no_results_description	No appropriate clothing article was found.	Nem találtunk megfelelő ruházati árucikket.
clothing_article_search_results_screen_no_results_back_button_text	Change filter	Szűrés megváltoztatása

4. Clothing Article Details Screen

Identifier	English value	Hungarian value
clothing_article_details_screen_top_app_bar_title	Details	Részletek
clothing_article_details_screen_brand_name_text	by	által
clothing_article_details_screen_price_text	HUF	Ft
clothing_article_details_screen_description_label	Description	Részletek

5. Clothing Article Card Component

Identifier	English value	Hungarian value
clothing_article_card_component_button_text	More details	Részletek

6. Common action names

Identifier	English value	Hungarian value
common_action_name_retry	Retry	Újra

7. Common clothing article attribute names

Identifier	English value	Hungarian value
common_clothing_article_attribute_name_color_label	Color	Szín
common_clothing_article_attribute_name_shade_label	Shade	Árnyalat
common_clothing_article_attribute_name_graphic_apperance_label	Graphic apperance	Megjelenés típus
common_clothing_article_attribute_name_index_name_label	Index name	Részleg
common_clothing_article_attribute_name_garment_group_name_label	Garment group	Ruhacsoport

8. Clothing article color names

Identifier	English value	Hungarian value
clothing_article_colors_beige	Beige	Bézs
clothing_article_colors_black	Black	Fekete
clothing_article_colors_blue	Blue	Kék
clothing_article_colors_bluish_green	Bluish Green	Kékes Zöld
clothing_article_colors_brown	Brown	Barna
clothing_article_colors_green	Green	Zöld
clothing_article_colors_grey	Grey	Szürke
clothing_article_colors_khaki_green	Khaki Green	Khaki Zöld
clothing_article_colors_lilac_purple	Lilac Purple	Lila
clothing_article_colors_metal	Metal	Fém
clothing_article_colors_mole	Mole	Mole
clothing_article_colors_orange	Orange	Narancssárga
clothing_article_colors_pink	Pink	Rózsaszín
clothing_article_colors_red	Red	Piros
clothing_article_colors_turquoise	Turquoise	Tükörkék
clothing_article_colors_white	White	Fehér
clothing_article_colors_yellow	Yellow	Sárga
clothing_article_colors_yellowish_green	Yellowish Green	Sárgás Zöld
clothing_article_colors_other	Other	Egyéb

9. Clothing article shade names

Identifier	English value	Hungarian value
clothing_article_shades_bright	Bright	Világos
clothing_article_shades_dark	Dark	Sötét
clothing_article_shades_dusty_light	Dusty Light	Poros Világos
clothing_article_shades_light	Light	Világos
clothing_article_shades_medium	Medium	Közepes
clothing_article_shades_medium_dusty	Medium Dusty	Közepes Poros
clothing_article_shades_other	Other	Egyéb

10. Clothing article graphical appearance names

Identifier	English value	Hungarian value
clothing_article_graphical_appearance_all_over_pattern	All over pattern	Összes minta
clothing_article_graphical_appearance_application_3d	Application/3D	Alkalmazás/3D
clothing_article_graphical_appearance_argyle	Argyle	Argyle
clothing_article_graphical_appearance_chambray	Chambray	Chambray
clothing_article_graphical_appearance_check	Check	Kockás
clothing_article_graphical_appearance_colour_blocking	Colour blocking	Szín blokkolás
clothing_article_graphical_appearance_contrast	Contrast	Kontraszt
clothing_article_graphical_appearance_denim	Denim	Farmer
clothing_article_graphical_appearance_dot	Dot	Pöttyös
clothing_article_graphical_appearance_embroidery	Embroidery	Hímzés
clothing_article_graphical_appearance_front_print	Front print	Első nyomtatás
clothing_article_graphical_appearance_glittering_metallic	Glittering/Metallic	Csillámló/Fém
clothing_article_graphical_appearance_hologram	Hologram	Hologram
clothing_article_graphical_appearance_jacquard	Jacquard	Jacquard
clothing_article_graphical_appearance_lace	Lace	Csipke
clothing_article_graphical_appearance_melange	Melange	Melange
clothing_article_graphical_appearance_mesh	Mesh	Háló
clothing_article_graphical_appearance_metallic	Metallic	Fémek
clothing_article_graphical_appearance_mixed_solid_pattern	Mixed solid/pattern	Vegyes szilárd/minta
clothing_article_graphical_appearance_neps	Neps	Neps
clothing_article_graphical_appearance_other_pattern	Other pattern	Egyéb minta
clothing_article_graphical_appearance_other_structure	Other structure	Egyéb szerkezet
clothing_article_graphical_appearance_placement_print	Placement print	Helyezési nyomtatás
clothing_article_graphical_appearance_sequin	Sequin	Flitter
clothing_article_graphical_appearance_slub	Slub	Slub
clothing_article_graphical_appearance_solid	Solid	Szilárd
clothing_article_graphical_appearance_stripe	Stripe	Csík
clothing_article_graphical_appearance_transparent	Transparent	Átlátszó
clothing_article_graphical_appearance_treatment	Treatment	Kezelés

11. Clothing article index names

Identifier	English value	Hungarian value
clothing_article_index_name_baby_sizes_50_98	Baby Sizes 50-98	Baba Méretek 50-98
clothing_article_index_name_children_accessories	Children Accessories	Gyermek Kiegészítők
clothing_article_index_name_swimwear	Swimwear	Fürdőruha
clothing_article_index_name_children_sizes_134_170	Children Sizes 134-170	Gyermek Méretek 134-170
clothing_article_index_name_children_sizes_92_140	Children Sizes 92-140	Gyermek Méretek 92-140
clothing_article_index_name_divided	Divided	Osztott
clothing_article_index_name_ladies_accessories	Ladies Accessories	Női Kiegészítők
clothing_article_index_name_ladieswear	Ladieswear	Női Ruházat
clothing_article_index_name_lingeries_tights	Lingeries/Tights	Alsónemű/Harisnya
clothing_article_index_name_menswear	Menswear	Férfiruházat
clothing_article_index_name_sport	Sport	Sport
clothing_article_index_name_other	Other	Egyéb

12. Clothing article garment group names

Identifier	English value	Hungarian value
clothing_article_garment_group_name_accessories	Accessories	Kiegészítők
clothing_article_garment_group_name_blouses	Blouses	Blúzok
clothing_article_garment_group_name_dressed	Dressed	Ruha
clothing_article_garment_group_name_dresses_ladies	Dresses Ladies	Női Ruha
clothing_article_garment_group_name_dresses_skirts_girls	Dresses/Skirts girls	Lány Ruha/Szoknya
clothing_article_garment_group_name_jersey_basic	Jersey Basic	Alapvető Jersey
clothing_article_garment_group_name_jersey_fancy	Jersey Fancy	Divatos Jersey
clothing_article_garment_group_name_knitwear	Knitwear	Kötött Ruha
clothing_article_garment_group_name_outdoor	Outdoor	Kültéri
clothing_article_garment_group_name_shirts	Shirts	Ing
clothing_article_garment_group_name_shoes	Shoes	Cipő
clothing_article_garment_group_name_shorts	Shorts	Rövidnadrág
clothing_article_garment_group_name_skirts	Skirts	Szoknya
clothing_article_garment_group_name_socks_and_tights	Socks and Tights	Zokni és Harisnya
clothing_article_garment_group_name_special_offers	Special Offers	Különleges Ajánlatok
clothing_article_garment_group_name_swimwear	Swimwear	Fürdőruha
clothing_article_garment_group_name_trousers	Trousers	Nadrág
clothing_article_garment_group_name_trousers_denim	Trousers Denim	Farmer Nadrág
clothing_article_garment_group_name_under	Under	Alsónemű
clothing_article_garment_group_name_nightwear	Nightwear	Éjjeli Ruha
clothing_article_garment_group_name_woven_jersey_knitted_mix_baby	Woven/Jersey/Knitted mix Baby	Szövött/Jersey/Kötött keverék Baba
clothing_article_garment_group_name_other	Other	Egyéb

* the parts marked between <> characters must be replaced with appropriate dynamic values on the client

Design

Operations of the backend

The backend provides the following operations:

1. Get recommended clothing articles

   • pagination is supported (last item's ID must be sent)
   • the results are sent in descending order of recommendation score.

2. Search articles

   • pagination is supported (last item's ID must be sent)
   • the results are sent in descending order of article creation date.

Network protocol

Every operation of the backend is available using GraphQL.

Pagination page size

The backend must support different page sizes, it is the responsibility of the client to send the page size. For now, the client will use 20 as page size for every operation in the feature set.

Infinite scroll behavior

When the user almost reaches the bottom of the list, and it is possible based on the last response (no response was sent, or the previous response contained a response with the requested page size), a request must be sent to the backend to retrieve the next page.

Error handling on backend

If any of the operation fails on the backend, an appropriate response is sent, so the error field is used, and the message contains the identifier of the error from the localization table.

Improvement ideas for the future

• Support available sizes
• Support sharing clothing articles