fyndiq-component-productlist

Preview

A Product List component for Fyndiq

Installation

The component can be installed through NPM:

npm i -S fyndiq-component-productlist

Components

The fyndiq-component-productlist exposes 2 components: ProductListItem and a Wrapper. The second one is used to organise several ProductListItem together and manipulate as a list: interactivity, layout...

ProductListItem

Usage

import React from 'react'
import ProductListItem from 'fyndiq-component-productlist'
 
// Normal usage
<ProductListItem
  title="Product Title"
  price="$239"
  oldPrice="$499"
  category="Product Category"
  brand="Product Brand"
  imageUrl="https://i.imgur.com/BCKlYFQ.jpg"
  rating="4.5"
  shopUrl="https://fyndiq.se/product/12345678"
  uploadDate={new Date(2017, 6, 12)}
/>

API

The component ProductListItem has the following customizable props:

Name	Type	Description	Default value
category	String	Category of the product	null
brand	String	Brand of the product	null
dealType	String	Deal type of the product. Can be daily or weekly	null
imageUrl	String	URL of the image	(required)
oldPrice	String	Striked price of the product	null
price	String	Price of the product	(required)
rating	Rating	See fyndiq-component-stars's documentation	null
shopUrl	String	URL of the product on the shop	null
title	String	Title of the product	(required)
uploadDate	Date	Date when the product was uploaded on Fyndiq.	null
interactive	Boolean	If true, the item will react to mouse events	false
open	Boolean	If true, the item will show a more detailed version of the product	false
showOldPrice	Boolean	If false, the oldPrice property will not be shown	true
showYours	Boolean	Show a label Your product next to the title	false
onClick	Function	Handler called when the product has been clicked on	noop => noop
additionnalData	Array	Array of data to show on the information frame, when the ProductListItem is open	[]

Wrapper

Usage

import React from 'react'
import ProductListItem, { Wrapper } from 'fyndiq-component-productlist'
 
// Normal usage
<Wrapper>
  <ProductListItem />
  <ProductListItem />
  <ProductListItem />
</Wrapper>
 
// Allow multiple products to be expanded at the same time
<Wrapper openMultiples>
  <ProductListItem />
  <ProductListItem />
  <ProductListItem />
</Wrapper>

API

The component Wrapper has the following customizable props:

Name	Type	Description	Default value
children	Node	The ProductListItems to display	(required)
openMultiples	Boolean	If true, the number of products that the user can expand will not be limited to 1	false