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
Updated about 1 year ago