Kategorie

Vue.js komponenta pro kategorii vykresluje všechny produkty obsažené v konfiguraci. Pokud vytvoříte zanořené sekce, tak vykreslí i kategorie a jejich produkty bude načítat asynchronně po zobrazení kategorie.

Minimální nastavení

Nastavení se sekcemi

Použití v 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>

 

Vytvořte si e-shop do 5 minut

Zkuste to. Je to zdarma.