Approach by using reference components

The reference implementation provides a few out-of-the-box widgets that can be further customized to suit the host site needs. Most of these widgets are controlled using custom attributes that should be defined at the option level.

Simple Button

Displays a simple button with a title controlled by the respective option name.

Attribute	Comments
widget-type	Should be set to `button` value.

Color Button Widget

Displays a colored swatch button, optionally with an image based swatch.

Attribute	Comments
widget-type	Should be set to `color-swatch` value.
hex	HTML style color definition, i.e. six hexadecimal characters.
pattern-image	Optional, swatch image URL.

Personalization Text

Displays the input text box. See Personalization section for the description of personalization custom attributes and how they control the input text appearance and functionality.

Attribute	Comments
widget-type	Should be set to `personalization` value.

Dynamic Image

Displays the image upload widget. See Image Upload section for the description of image related custom attributes and how they control the widget appearance and functionality.

Attribute	Comments
widget-type	Should be set to `dynamic-image` value.

Customizing the look & feel

The reference app provides a minimalistic yet functional user experience. Further customization that is necessary to better integrate with the host website could happen in a couple of ways:

Adjust the CSS: the reference app provide a well-marked HTML with some CSS classes that could be targeted to alter the app appearance
Update the code: covered in the next section.

Customizing the code

Simple CSS customization might be not enough in some cases. To implement more in-depth layout customizations, or introduce some new widget functionality, the reference application code could be modified by a developer to suit the requirements.

Drive Commerce CDN network could host the customer-specific widget code. However, we highly encourage customers to take the full ownership of the widget code, giving the full flexibility of how and when new changes would be rolled out to the site and providing the full control of the experience.

The reference application is build using a number of modern web technologies:

https://vuejs.org front-end framework to create fast, highly-interactive front-end experiences.
https://webpack.js.org/ application bundler to create a single deployable JavaScript file.

Building the widget code

Step 1

BASH

git clone <https://bitbucket.org/drivecommerce/customizer-reference-implementation.git>

Clone the app code.

Step 2

Install dependencies

BASH

npm install

Or

BASH

yarn install

Ensure that nodejs and npm are installed, and install app dependencies. Either npm or yarn could be used.

Step 3

Run development version

BASH

yarn serve

Run the widget in the test mode...

Step 4

Build the distribution package

BASH

yarn lib

... or build the distribution package.

Step 5

Upload generated customize-widget.js file to your e-commerce or CMS system.