Favorites¶

The favorite vehicles feature allows users to save the vehicles they are most interested in. After saving vehicles, users will have the ability to compare any vehicle to another, pick up where they left off, and potentially get notifications for the vehicles on status changes.

Installation¶

Installing the favorite vehicles feature requires the Orbee TMS to be installed on your website. Install before continuing. There are two main components to enabling favoriting on your website, the Favorites Toggle and the Favorites Counter.

Favorite Icon¶

This is the toggle to favorite or unfavorite a vehicle. By default this will be a red heart icon. Place the favorite element in an area next to the vehicle you would like to enable favoriting for.

ORB Element

<orb data-plugin-id="{{PLUGIN_ID}}"
data-type="favorites-toggle"
      data-vin="{{VEHICLE_VIN}}"></orb>

Span

<span data-orb
      data-plugin-id="{{PLUGIN_ID}}"
      data-type="favorites-toggle"
      data-vin="{{VEHICLE_VIN}}"></span>

The data-vin attribute needs to be filled out with the desired vehicle's VIN. Without all of the above attributes, the favorites feature will not render or save the vehicle properly. For example, to enable the favorites feature for a vehicle with the VIN: 3VWCA01H2WM220547, you would install the favorite ORB element as:

ORB Element

<orb data-plugin-id="{{PLUGIN_ID}}"
data-type="favorites-toggle"
      data-vin="3VWCA01H2WM220547"></orb>

Span

<span data-orb
      data-plugin-id="{{PLUGIN_ID}}"
      data-type="favorites-toggle"
      data-vin="3VWCA01H2WM220547"></span>

Info

Curious about the orb elements? Want to use DIV's or SPAN's instead? Check out the reference here.

Styling¶

The favorite icon default is a red heart that fills the width of the element that it is binding to. The default dimensions of the heart icon is 18px x 18px. This can be overridden by setting the attribute data-size to the pixel size you would like the heart to be. The height will be automatically adjusted to match the width. The below example will override the dimensions of the favorite icon to 24px x 24px. Choose only one of the two installation elements:

ORB Element

<orb data-plugin-id="{{PLUGIN_ID}}"
data-type="favorites-toggle"
      data-vin="3VWCA01H2WM220547"
data-size="24"></orb>

Span

<span data-orb
      data-plugin-id="{{PLUGIN_ID}}"
      data-type="favorites-toggle"
      data-vin="3VWCA01H2WM220547"
      data-size="24"></span>

Favorites History List¶

Shoppers can view their favorited vehicles with the favorite history list. Ideally, this a separate page that is solely dedicated to displaying a shoppers' saved vehicles. Within the main content of this page, an ORB element is installed to render the list of vehicles.

ORB Element

<orb data-plugin-id="{{PLUGIN_ID}}"
data-type="favorites-counter"
data-default="0"></orb>

Span

<span data-orb
      data-plugin-id="{{PLUGIN_ID}}"
      data-type="favorites-counter"
      data-default="0"></span>

The recommended way for Shoppers to navigate to this page is through the Favorites Counter.

Favorites Counter¶

This is the counter that will display how many vehicles a shopper has favorited. The counter is composed of the heart icon and the number of favorites the shopper has saved.

ORB Element

<orb data-plugin-id="{{PLUGIN_ID}}"
data-type="favorites-counter"
data-default="0"></orb>

Span

<span data-orb
      data-plugin-id="{{PLUGIN_ID}}"
      data-type="favorites-counter"
      data-default="0"></span>

If there are no favorites, the default counter will display 0. You can adjust the default counter state by changing the data-default attribute to either: data-default='0', data-default='--', or data-default=''. If you want to hide the counter on empty favorites, set data-default='hidden'.

Styling¶

Similar to the favorites toggle, the counter's size can be adjusted by setting the data-size attribute.

ORB Element

<orb data-plugin-id="{{PLUGIN_ID}}"
data-type="favorites-counter"
data-default="0"
data-size="32"></orb>

Span

<span data-orb
      data-plugin-id="{{PLUGIN_ID}}"
      data-type="favorites-counter"
      data-default="0"
      data-size="32"></span>

The size of the heart and counter text will be defaulted to 18px.

Linking to the Favorite History Page¶

Once the Favorites History page is created, we recommend linking the Favorites counter to the Favorites History with an anchor tag.

ORB Element

<a href="{{LINK_TO_FAVORITES_HISTORY}}">
<orb data-plugin-id="{{PLUGIN_ID}}"
      data-type="favorites-history"
      data-default="0"></orb>
</a>

Span

<a href="{{LINK_TO_FAVORITES_HISTORY}}">
<span data-orb
      data-plugin-id="{{PLUGIN_ID}}"
      data-type="favorites-history"
      data-default="0"></span>
</a>

Saving Favorites Across Devices and Browsers¶

Shoppers can view their saved favorites across all devices and browsers with an Orbee Shopper Account. They can create a login by signing up with their email or Facebook account. However, using Facebook OAuth requires a custom privacy policy attached to it.

Configuration¶

This plugin provides the following configuration variables:

Variable	Type	Required	Description
favoriteIcon	object	no	the display icon for the favorites feature. Choose from: heart
styles	object	no	the styling config for the colors and size. { iconColor: "#e55d5d", counterTextColor: "#333", counterSize: "18" }

The size styling will first check to see if the data-size is set on the ORB element. If the data-size attribute isn't present it will fallback to the server side config that is set. If there is no custom configuration set, then the default Favorite Counter size will be set to 18px.

Info

For more information about computed state and properties, view the documentation here.

Methods¶

The plugin provides the following public methods:

registerFavoriteNode¶

registerFavoriteNode ( element: [HTMLElement](https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.htmlelement.html), config?: object ): void

Creates a new favorite icon on the element that is given. Optional parameters can be provided.

Parameter	Type	Required	Description
element	string	yes	HTML Element to register
config?	object	no	Optional parameters to the Favorite node

Events¶

Generated¶

This plugin generates the following events:

Action

Spec

Trigger

change

{
    label: 'favorite_vehicle',
    object: 'vehicle',
    product: 'Favorites',
    vendor: 'Orbee',
    vehicle_info: { /* Vehicle info */ } 
}

on favorite

change

{
    label: 'unfavorite_vehicle',
    object: 'vehicle',
    product: 'Favorites',
    vendor: 'Orbee',
    vehicle_info: { /* Vehicle info */ } 
}

on unfavorite

Listening¶

This plugin is listening to the following events and actions

Action	Trigger	Result
datalayer.push	on datalayer favorites update	Re-renders all favorite elements on the page. All the favorite elements VINs that match with the VINs in the `favorites` datastore will be visually favorited.

Dependencies¶

This plugin has the following plugin dependencies

Required

Shopper Login
Notifications

Example Usage¶

The favorites component can be used anywhere your vehicles are listed. This includes:

Search Results Pages (SRPs)
Vehicle Details Pages (VDPs)
Widgets

Orbee's Personalized Navigation Bar

To enable full functionality and features of the favorites plugin install the Navigation Bar. This is also the easiest way to have the favorites plugin installed since it comes built-in to the widget.

View Later Email (Coming Soon)

If users would like to view these vehicles later or need to save them when they are on the go, they will be able to send the list of vehicles directly to their email.

Favorite Notifications / Alerts (Coming Soon)

Requirements: Dealer Management System (DMS)

When users favorite a vehicle, they can be notified of any updates to its price, availability, specials, etc. if they input their email.