Creating products category

Apicart provides a Vue component for simple category integration into your e-commerce without almost any programing and coding.

Open your index.html file and replace the existing script tag by the following code (you can also remove the buy button we have previously added).

<script>
  Apicart
  .setDevEnv()
  .configure({
    // Replace token with your PUBLIC tokens from the administration
    store: new Apicart.Store({ token: "9mCu3DlBCa4REI?Q7kKly!Rw6!_FvD8K_dgPXe1b20?r6!sPTQMyCpq_ADt!jXOD" }),
    vueComponents: {
      category: {
        products: {
          description {
            length: 250 // 250 is default. Change the length as you want
          },
          list: [
            // Replace product urls with your product urls
            "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"
          ]
        }
      }
    }
  })
  .initVueBundle();
</script>

This code creates a category according to the products you configure in the products list. The result should looks like the following example.

Because there can be more products on the website, you might want to split your products into categories. In order to do that, you have to change the list of products from array to an object that contains a paths and the last key is an array containing your products.

Translations to those categories can be added via vueComponentsTranslator section.

vueComponentsTranslator: {
  localization: {
    en: {
      categories: {
        ...
      }
    }
  }
}

Key paths structure and nesting inside the localization categories section must be the same as is in the products list.
Each translation have 3 options:

  • title - the top category title
  • description - category description at the bottom of the category
  • menu - label in the left menu

Again replace the script tag by the following code.

<script>
  Apicart
  .setDevEnv()
  .configure({
    store: new Apicart.Store({ token: '9mCu3DlBCa4REI?Q7kKly!Rw6!_FvD8K_dgPXe1b20?r6!sPTQMyCpq_ADt!jXOD' }),
    vueComponentsTranslator: {
      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',
              ]
            }
          }
        }
      }
    }
  })
  .initVueBundle();
</script>

If everything went well, the result should looks like this.

Every product should also have product detail page. Apicart have a product detail component prepared. So let's try to add a product detail page.

Create E-commerce in 5 minutes

Try it. It is for free.