Skip to main content

fdk-product-card

You are reading an outdated document

Get the latest developer guides on Fynd Partners Help

This action component is used to provide a card structure, inside which, we can create dynamic cards that provides functionalities such as wishlist on it and can be used on listing pages or section. This action component provides various methods to do the same and we can write our own code to customize how the card will look. Below is the example of a card created using this action component.

QG2

Figure 1

Props

KeyTypeDescription
updateWishListfunctionthis function add or remove the product from the wishlist.

Function

  • updateWishList(event, item, callback = () => {})
    • event → click event fired
    • item → selected product
    • callback → callback after success of wishlist

Example

<fdk-product-card>
<template slot-scope="productData">
<fdk-accounts class="wishlist-btn">
<template slot-scope="accountsData">
<div
v-if="accountsData.is_logged_in && isMounted"
@click="productData.updateWishList($event, item)"
>
<img v-if="!item.follow" src="../../assets/images/heart-default.svg" alt="" />
<img v-else-if="item.follow" src="../../assets/images/heart-selected.svg" alt="" />
</div>
</template>
</fdk-accounts>
</template>
</fdk-product-card>