@fiteo/product-pdp-carousel-vue2
v2.0.6
Published
Product PDP Carousel - Desktop and Mobile Web - Vue2 from https://fiteo.store/
Downloads
1
Readme
@fiteo/product-pdp-carousel-vue2
Product PDP Carousel - Desktop and Mobile Web - Vue2 from https://fiteo.store/
Scripts
npm i @fiteo/product-pdp-carousel-vue2
PropTypes
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>