@cromology/shared-components NPM

How to install

npm install @cromology/shared-components

Add this to your Vue entrypoint :

import Vue from 'vue'
import CromologySharedComponents from '@cromology/shared-components'

Vue.use(CromologySharedComponents)

This will allow you to use the following components anywhere you want :

CromologyStoreLocator
CromologyColorPicker

Cromology Store Locator

You can use the component by adding the component in your .vue files

This component is a right panel showing a list of 6 stores by default. You can click on "Geolocate me" to have a list of the closest stores around you. You can also search a store by postal code, city or name. Each card can be oppened (collapse) to see more details about a store (description, contact, website and schedule). By clicking on the "Choose this store" button, you will select a store to be your favorite store for the next 6 months. Choosing another store will override your current favorite store.

<cromology-store-locator :open="openLocator"... />

Props

Prop name	Type	required	Default value	Comment
open	Boolean	yes	-
company	String	yes	-	Must be value "T" for Tollens or "Z" for Zolpan
subtitleText	String	no	"La sélection d'un autre magasin peut influencer la disponibilité des produits sélectionnés."
provider	ApolloProvider Instance	yes	-	Must be an instance of ApolloProvider
initSearchTerm	String	no	-	Initial term for the search
distance	Number	no	-	Distance in kilometers
storeCode	String	no	-
article	Object	no	-	Article with the following requirement : `{articleCode: String, priceUnit: String, quantity: Number }`
product_deliverable_in_shop	String	no	`'0'`	If set to `'0'`, won't check for disponibility in shops. Set to `'1'` to enable

Emits

Event Name	Event Value	Comment
Cromology::StoreLocator::Close	-	Triggered when overlay or cross button are clicked
Cromology::StoreLocator::StoreSelected	{ storeCode, titleLabel, primaryPhone, websiteUrl, description, fax, specialHours, clientCodePart, schedules { monday tuesday wednesday thursday friday saturday }, address { addressLines postalCode locality } latlng { lat lon } mediaItems { photo_url others }		triggered when a store is chosen. Contains the store's informations inside an object

Cromology Color Picker

You can use the component by adding the component in your .vue files

This component is a right panel showing a color picker module. You can search a specific color or select it from the below picker.

<ColorPicker :open="openPicker"... />

Props

Prop name	Type	required	Default value	Comment
open	Boolean	yes	-
company	String	yes	-	Mst be "T" for Tollens or "Z" for Zolpan
provider	ApolloProvider Instance	yes	-	Must be an instance of ApolloProvider
profile	String	yes	-	Must be PAR or PRO
articleIds	Array of String	yes	-	Ids of product's articles

Emits

Event Name	Event Value	Comment
Cromology::ColorPicker::Close	-	triggered when overlay or cross button are clicked
Cromology::ColorPicker::ColorSelected	{ lib_teinte, collectionName, code_article, unite_tarif_teinte, id_teinte, rgb, code_marque, lib_marque, id_nuancier, code_nuancier, lib_nuancier, ACHAT_TESTEUR }, ...		triggered when a color is chosen. Contains an array of color's informations inside an object