Test task vuestorefront for Tameson:

Change search results for type categories on default vsf capybara theme

Prerequisites:

• Solution can be build on top of default Vuestorefront install with Capybara theme, demo of this theme is available on capybara.storefrontcloud.io Last product expectations

See the hierarchy of the category results (what are the parents and child categories)
be able to filter the search product results (like on demo capybara theme by clicking on the category) -> change to using checkbox for filtering within search results
be able to navigate to the actual category page by clicking on the specific category

Desired result:

The category results would include the parent hierarchy so the structure would be something like :

woman
- Tops
  - Bra & Tanks

original state

Desired result:

Set-up

To start up and run the repo on your local machine on top of following the Vue storefront instructions, please watch this video by Mohammad Kathawala

Branches

Test1

on this branch the search menus were re-arrenged to fit the desired. please see issue

production-1

Summary

On this feature the search menu was edited to include the parent hierarchy. this was archived by reusing the code of the main category page hierarchy method and adding extra filter to add the last category.
see the changes here

   parent(){

     return getTopLevelCategories(this.getCategories)
       .map(category => {
       const viewAllMenuItem = {
        ...category,
        name: i18n.t('View all'),
        position: 0
       };
    

        const subCategories = category.children_data
        ? category.children_data
          .map(subCategory => prepareCategoryMenuItem(
            this.getCategories.find(category => category.id === subCategory.id)
          ))
          .filter(Boolean)
        : [];

     const last = subCategories.map(category=>{
      const lastCategory= category.children_data
        ? category.children_data
          .map(subCategory => prepareCategoryMenuItem(
            this.getCategories.find(category => category.id === subCategory.id)
          ))
          .filter(Boolean)
        : [];   
         return lastCategory
      })
    

     const change = last.flat(1)
  
      return {
        ...prepareCategoryMenuItem(category),
        items: [prepareCategoryMenuItem(viewAllMenuItem)]
        .concat(subCategories),
        last: change
          .sort((a, b) => a.position - b.position)
     
          
      };
      
    })
    
    .sort((a, b) => a.position - b.position);

  },`

By using event targets the input check box can only render the selected category children.

Attaching the event handlers on the right elements with v-for iterations

Motivation

the motivation behind this feature is for the reason that the client's web-shop have a high number of products and categories with names that can be quite similar. To be able to select the right product it is important that the customer understands what the category includes, for that knowing the parent category really helps as it gives context to the application.

Unresolved details

it was a bit difficult to render the Last-categories right under the sub-categories. Even though parent_id can be used as a foreign key. it was hard to connect them as the first-category and the sub-categories connect.
capybara theme is not working in github.

Future possibilities

there should be a way to render the last category as the client desire.
fix capybara theme problem

gelilaa / tameson-task Goto Github PK

tameson-task's Introduction

Test task vuestorefront for Tameson:

Prerequisites:

original state

Desired result:

Set-up

Branches

Test1

tameson-task's People

Contributors

Watchers

tameson-task's Issues

Summary

By using event targets the input check box can only render the selected category children.

Attaching the event handlers on the right elements with v-for iterations

Motivation

Unresolved details

Future possibilities

Recommend Projects

Recommend Topics

Recommend Org