production-1

[gelilaa]

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