exemplis-customizer

Exemplis Configurator

How To Install

npm install exemplis-customizer

Paramaters

platform (required)

Type: string

Default: ""

This is the platform that the customizer will be ran in. The two options are shopify or aem.

apiRootUrl (required)

Type: string

Default: ""

This is the base api url. e.g. "https://devcustom.timbuk2.com"

accountId (required)

Type: string

Default: ""

This is the indentifier that the api uses to differentiate between brands. e.g. "timbuk2"

productId (required)

Type: string

Default: ""

This is the product indentifier. e.g. "classicmessenger-bundle"

containerId

Type: string

Default: "root"

This is the id of the DOM element that the configurator will get injected into. e.g. "root"

threeD

Type: boolean

Default: false

If set to true, this will create a 3D experience within the cylindo viewer.

expandedOptions

Type: boolean

Default: false

If set to true, this will expand all of the product option accordions.

accentColor1

Type: string

Default: ""

This should be set to the main color of the site.

accentColor2

Type: string

Default: ""

This can be a lighter version of the main color of the site.

Example Initialization

import ExemplisCustomizer from 'exemplis-customizer'

const customizer = new ExemplisCustomizer({
  platform: 'shopify',

  apiRootUrl: 'https://devcustom.timbuk2.com',

  accountId: 'timbuk2',

  productId: 'classicmessenger-bundle',

  containerId: 'root',

  threeD: false,

  expandedOptions: false,

  accentColor1: '#2D3142',

  accentColor2: '#4F5D75',
})

customizer.init()

!IMPORTANT!

If your website has a sticky header, please give the sticky header the class of js-customizer-sticky-header. e.g. <header id="header" class="header js-customizer-sticky-header">

Branching Strategy

• Create a new branch from master for each feature. e.g. git checkout -b feature-branch-name
• Make sure to rebase with main before creating a PR.
• Create a PR

Local Development

Depending on what store you are working on, you will need to do the following:

• Go into public/index.html and comment out the css files of the stores you are not working on and uncomment the css for the store you are working on.
• Copy the contents in exemplis-customizer.css in the respected Shopify code repository, from the master branch, and paste it into the corresponding css file inside of public. If you make any changes to the css while working on customizer changes, make sure to port it over to exemplis-customizer.css inside the corresponding Shopify code repo.
• Inside of src/index.js you can change the settings at the bottom of the page to reflect the brand you are working on.
• Start local environment npm run start

If you want to test the changes inside of a Shopify environment, you will need to do the following:

• Open up a terminal inside of the root of the Shopify repository.
• Run yarn link "exemplis-customizer".
• Run the command to watch for changes inside of the Shopify repository.
• Go back to the exemplis-customizer code base and in the terminal, run npm run publish (this will build the project and then the Shopify repository will pick up the changes).
• When you are done testing in the Shopify environment, stop watching for changes and then run yarn unlink "exemplis-customizer"