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