Product detail page

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

<template>
  <div class="product">

    <!-- Your HTML codes -->

  </div>
</template>

<script>
export default {

  created() {

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

}
</script>

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

Property / Method name	type	Description
isLoadingProduct	property	Boolean value, true if is loading product data, false if loaded
isCreatingCartItem	property	Boolean value, true if is adding to cart
productDocument	property	A JSON:API document object of product data
productErrors	property	An array of error messages
productQuantity	property	Quantity of items to add to cart, default is 1
productOption1	property	Selected product option 1 value. Change this value to update selected variant.
productOption2	property	Selected product option 2 value. Change this value to update selected variant.
productOption3	property	Selected product option 3 value. Change this value to update selected variant.
selectedVariant	property	A JSON:API resource object of selected variant
addToCart	method	Add item to cart

Example of usage

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

<template>
  <div class="product">

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

    <!-- Product is loading -->
    <div v-if="isLoadingProduct">
      ...Loading...
    </div>

    <!-- Product is loaded -->
    <div v-if="productDocument">

      <!-- Product images -->
      <div v-for="image in (productDocument.getData().getRelationshipData('images') || [])">
        <img :src="$image.url(image)" />
      </div>

      <!-- Product title -->
      <h1>{{ productDocument.getData().getAttribute('title') }}</h1>

      <!-- Price -->
      <p>{{ $currency.priceFormat((selectedVariant ? selectedVariant.getAttribute('price') : product.getAttribute('price')) * productQuantity) }}</p>

      <!-- Compare price -->
      <p style="text-decoration: line-through;">{{ $currency.priceFormat((selectedVariant ? selectedVariant.getAttribute('compare_at_price') : product.getAttribute('price')) * productQuantity) }}</p>

      <!-- Product options -->
      <div v-for="option, index in productDocument.getData().getAttribute('options')">
        <p>{{ option.name }}:</p>
        <select :value="getOptionValue(index + 1)" @change="setOptionValue(index + 1, $event)">
          <option v-for="value in option.values" :value="value">{{ value }}</option>
        </select>
      </div>

      <!-- Add to cart -->
      <button @click="addToCart" :disabled="isCreatingCartItem || !selectedVariant">
        Add to cart
      </button>

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

    </div>

  </div>
</template>

<script>
export default {

  created() {

    // Activate the sdk
    this.useProductMixin(true)
  },

  methods: {

    /**
    * Set product option value
    */
    setOptionValue(index, $event) {
      this['productOption' + index] = $event.target.value;
    },

    /**
    * Get product option value
    */
    getOptionValue(index) {
      return this['productOption' + index];
    }

  }

}
</script>