Clerkio NPM | npm.io

CLERKIO RENDERING

This package helps us to quickly render a product shelf using the data received from the ClerkIO API.

Installation

To install this project run

  npm install clerkio

  yarn add clerkio

Environment Variables

To run this package, you will need to add the following environment variables

API_KEY

Customer email

Configuration

The component is quite custom, here are all the existing references for its modification

These would be all the props we can pass to the component

Props

Name	Type	Default	Description	Required	Example
attributes	array	✖️	We can enter the product attributes referred here atributes	✔️	attributes={ "image", "name", "price"}
email	string	✖️	Email from the client to make recommendations	✔️	email="test@email.com"
limit	number	✖️	Number of results to be returned	✔️	limit={5}
productsType	string	✖️	Type of product recommendation that can only be these values:popular, trending, new, recently_bought, currently_watched, complementary and substituting	✔️	productsType="popular"
currency	string	USD	We can pass the official acronyms of the coins to get their symbols	✖️	currency="EUR"
defaultStyles	boolean	✖️	If this prop is passed as true, the default classes are activated and will paint a default productShelf	✖️	defaultStyles
formatPrice	boolean	,	If we pass this prop as true, the comma is changed to a dot	✖️	formatPrice
imageHeight	number	192px	Height of the image	✖️	imageHeight={200}
imageWidth	number	220px	Width of the image	✖️	imageWidth={200}
title	string	✖️	Title of the block	✖️	title="Trending products"
productSubtext	string	✖️	Card subtext	✖️	productSubtext="from"

In the attributes, the only one required is the ID, so that it is used as a key for the rendering of the ProductShelf.

These are the attributes that we can send in the array:

Those listed as required, are the ones necessary for the correct rendering of the default style of the ProductShelf which are the minimum values and information of the product.

Attribute	Importance	Content
id	Required	The product ID
name	Required	The product name
description	Optional	The product description
price	Required	The product current selling price
list_price	Optional	The product original list price
image	Required	The full URL for the product image. This will be used for thumbnails when displaying products.We recommend a maximum image size of 200x200px
url	Required	The full URL for the product page
categories	Optional	A list of the category IDs for the product categories
brand	Optional	The product brand as a string
sku	Optional	The product SKU (Stock Keeping Unit)
stock	Optional	Stock count of this product
age	Optional	The number of days since the product was created
on_sale	Optional	true if this product is on sale, else false
gender	Optional	Is the product for a specific gender? Add that information
color/colors	Optional	Color information about the product
keywords	Optional	Keywords or synonyms that should be searchable for the product
created_at	Optional	Unix timestamp for when the product was created
index	Optional	If false, the product will not be indexed and thus not shown in any results.It will still be kept in the database as historic data so results like alternatives and personal recommendations can be based on it.If true, the product will be indexed as normal.Defaults to true if not sent.

How to use?

Example of use with the default styles

You will need to import the component from the node modules

import Clerkio from "clerkio/dist/Clerkio";

Once imported, you will be able to use the component like the example

<Clerkio
  productsType="popular"
  email="test@email.com"
  limit={5}
  attributes={["id", "image", "list_price", "name", "on_sale", "price", "url"]}
  title="Complementary Products"
  productSubtext="A partire da"
  defaultStyles
/>

Example