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 | - | | | 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 |