2.0.6 • Published 2 years ago
@fiteo/product-pdp-carousel-vue2 v2.0.6
@fiteo/product-pdp-carousel-vue2
Product PDP Carousel - Desktop and Mobile Web - Vue2 from https://fiteo.store/
Scripts
npm i @fiteo/product-pdp-carousel-vue2PropTypes
| Properties | Type | Default | Description |
|---|---|---|---|
| productId: (required) | String | "123456" | Get the outfit list by product id. |
| privateKey: (required) | String | "123456ABCDEF" | The key to use this component. |
| title: (optional) | String | "outfits our community love" | Set the title component . |
| maxNumOfSlots: (optional) | String | "2" | Set the max of slot for the products |
| sizes: (optional) | Object | { bottoms: '25', tops: 'XS' ... } | filter the products by size |
| onClickProduct: (optional) | Function | callbackFunction(productId, storyId, isHero) | Callback Function trigger when click on the product with parameter is: productId. |
| onLikeProduct: (optional) | Function | callbackFunction(productId) | Callback Function trigger when like the product with parameter is: productId. |
| onDetailOutfit: (optional) | Function | callbackFunction(productId) | Callback Function trigger when click on View Outfit link with parameter is: storyId. |
Usage
<template>
<product-pdp-carousel
productId="123456"
privateKey="123456ABCDEF"
title= "outfits our community love"
maxNumOfSlots="2"
:sizes="{
bottoms: ['25']
}"
:onClickProduct="handleClickProduct"
:onLikeProduct="handleLikeProduct"
:onDetailOutfit="handleDetailOutfit"
/>
</template>
<script>
import ProductPdpCarousel from "@fiteo/product-pdp-carousel-vue2"
export default {
components: { ProductPdpCarousel }
methods: {
handleClickProduct(productId, storyId, isHero) {
console.log("...productId handleClickProduct", productId)
console.log("...storyId handleClickProduct", storyId)
console.log("...isHero", isHero)
},
handleLikeProduct(productId) {
console.log("...productId handleLikeProduct", productId)
},
handleDetailOutfit(storyId) {
console.log("...storyId handleDetailOutfit", storyId)
},
},
}
</script>