Product collection page

To use the SDK, open your Collection.vue component and add just one simple line to component's created event.

<template>
  <div class="page">

    <!-- Your HTML codes -->

  </div>
</template>

<script>
export default {

  created() {

    // Activate the sdk
    this.useCollectionMixin(true)
  }

}
</script>

Now you'll be able to access these following data and methods:

Property / Method name	type	Description
isLoadingCollection	property	Boolean value, true if is loading collection data, false if loaded
collectionDocument	property	A JSON:API document object of collection data
collectionErrors	property	An array of error messages
isLoadingCollectionProducts	property	true if is loading collection products
collectionProductsDocument	property	A JSON:API document object of collection products
collectionProductsErrors	property	An array of error messages
collectionProductsFilter	property	Collection product filter
collectionProductsSort	property	Default -created_at

Example of usage

Below is a full example of a Page.vue component:

<template>
  <div class="page">

    <!-- Errors -->
    <div v-if="pageErrors.length">
      <h1>Errors:</h1>
      <div v-for="error in pageErrors">{{ error }}</div>
    </div>

    <!-- Page is loading -->
    <div v-if="isLoadingPage">
      ...Loading...
    </div>

    <!-- Page is loaded -->
    <div v-if="pageDocument">

      <!-- Page title -->
      <h1>{{ pageDocument.getData().getAttribute('title') }}</h1>

      <!-- Page content -->
      <article v-html="pageDocument.getData().getAttribute('content')"></article>

      <!-- If page layout is contact -->
      <div v-if="pageDocument.getData().getAttribute('layout') === 'contact'">
        
        <!-- Contact form -->

      </div>

    </div>

  </div>
</template>

<script>
export default {

  created() {

    // Activate the sdk
    this.usePageMixin(true)
  }

}
</script>