fdk-compare-action

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.

Compare Action Component

Tag

fdk-compare-action

Description

This action component is used to add a particular product to compare on the compare page, product is added into the compare using its slug.

Props

Key	Type	Description
addCompare	function	This function is used to add the product into compare.
addCompare(slug)	function	Here, (slug) is the product's slug that is needed to be added in compare.
removeCompare	function	This function is used to remove products from the compare and update the router while removing the product from it.
removeCompare(slug)	function	Here, (slug) is the product's slug that is needed to be removed from compare.
addMultipleCompare	function	This function is used to add multiple products into the compare at the same time.
addMultipleCompare([slug1, slug2, slug3, ...])	function	Here array of multiple slug is passed as a parameter.
navigateToCompare	function	This function is used to update the router, while pushing the slugs of available products in compare.
resetCompare	function	This function resets the compare by removing all the products from compare and updating the router while removing all the product slugs from it.

Example

<fdk-compare-action>
    <template slot-scope="compare">
        <div
            @click="compare.addCompare(product.slug)"
          >
            <div className="compare-icon">
              <img src="./../../../assets/images/compare-icon.png" alt />
            </div>
            <p>Add to Compare</p>
        </div>
    </template>
</fdk-compare-action>