# Widgets

# Widgets

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.

TIP

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:

  • VueJS front-end framework to create fast, highly-interactive front-end experiences.
  • Webpack application bundler to create a single deployable JavaScript file.

# Building the Widget Code

# Step 1

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

Clone the app code.

# Step 2

Install dependencies

npm install

Or

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

yarn poi

Run the widget in the test mode...

# Step 4

Build the distribution package

yarn poi build

... or build the distribution package.

# Step 5

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

Last updated: 2/10/2021, 7:42:26 AM