Category

Apicart Vue.js Category component renders all products you configure inside products list. If you add nested sections, it will render categories and asynchronously load products after selection.

Minimum configuration

With sections

Usage in Node.js

<template>
    <apicart-category />
</template>

<script>
import { ApicartSkeletonBundleSdk, ApicartCategory } from '@apicart/vue-components/lib';

ApicartSkeletonBundleSdk.configure({
  vueComponentsTranslator: {
    actualLocale: 'en',
    localization: {
      en: {
        categories: {
          clothes: {
            title: 'The most beautiful clothes',
            description: "The most beautiful t-shirts.",
            menu: 'T-shirts',
            new: {
              title: 'New collection',
              description: "T-shirts from our new collection.",
              menu: 'New collection'
            },
            discount: {
              title: 'Discounted t-shirts',
              description: "The most popular T-shirts for half price",
              menu: 'Discount'
            }
          }
        }
      }
    }
  },
  vueComponents: {
    category: {
      products: {
        list: {
          clothes: {
            new: [
              'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json',
              'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/02/2.json',
              'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/03/3.json',
              'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/04/4.json',

            ],
            discount: [
              'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/04/4.json',
              'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/03/3.json',
              'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/02/2.json',
              'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json',
            ]
          }
        }
      }
    }
  }
});

export default {
  components: {
    ApicartCategory
  }
}
</script>

 

Create E-commerce in 5 minutes

Try it. It is for free.