Custom Stickers

Integration Steps

πŸ“˜

Components

In this example we will create Custom Sticker component for Product Card.
The main idea is that we will create a CustomSticker component that will be shown based on certain logic. The example will showcase the sticker logic if the product has a 'sale' tag:

const CustomSticker = ({item}) => {

  const sale = item.get('tags')?.find(tag => tag.toLowerCase() === 'sale');

  return (
    <div className='findify-custom-sticker' display-if={sale}>sale</div>
  )
};

export default CustomSticker;
{/* Don't forget to import CustomSticker component */}
import CustomSticker from 'CustomSticker';

{/* ... some code ...  */}

  return (
		{/* ... some code ...  */}
    
      <div className={theme.image} onClick={item.onClick}>
    	 {/* Place it wherever you want to. If it is not visible, set z-index to 1 in css */}
         <CustomSticker item={item} />
       {/* If you don't want it in Autocomplete, just set <CustomSticker display-if={!isAutocomplete} />  */}
        
    {/* ... some code ...  */}
       
};


{/* ... some code ...  */}
.findify-custom-sticker {
  z-index: 1;
  position: absolute;
  top: 5px;
  left: 20px;
}

MJS Version

This module has been optimized forΒ MJS version 7.1.25