fdk-product-card

Deprecation Notice

Vue-based themes will soon be deprecated. Please switch to React-based themes, as all future updates and support will focus exclusively on React.

Product Card Action Component

Tag

fdk-product-card

Description

This action component is used to provide a card structure, inside which, we can create dynamic cards that provide functionalities such as wishlist, and can be used on listing pages or section. It 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.

Figure 1

Props

Key	Type	Description	Payload
updateWishList	function	This function adds or removes the product from the wishlist.
updateWishList(event, item, callback = () => {})	function	event: click event fired. item: selected product. callback: callback after success of wishlist.
getProductVariantsBySlug	function	This function is used to get variant of a particular product.	{"slug":"value"}

Example

<fdk-product-card>
    <template slot-scope="productData">
      <fdk-accounts className="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>