Skip to content

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 data-plugin-id="{{PLUGIN_ID}}"
data-type="favorites-toggle"
      data-vin="{{VEHICLE_VIN}}"></orb>
<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 data-plugin-id="{{PLUGIN_ID}}"
data-type="favorites-toggle"
      data-vin="3VWCA01H2WM220547"></orb>
<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 data-plugin-id="{{PLUGIN_ID}}"
data-type="favorites-toggle"
      data-vin="3VWCA01H2WM220547"
data-size="24"></orb>
<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 data-plugin-id="{{PLUGIN_ID}}"
data-type="favorites-counter"
data-default="0"></orb>
<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 data-plugin-id="{{PLUGIN_ID}}"
data-type="favorites-counter"
data-default="0"></orb>
<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 data-plugin-id="{{PLUGIN_ID}}"
data-type="favorites-counter"
data-default="0"
data-size="32"></orb>
<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.

<a href="{{LINK_TO_FAVORITES_HISTORY}}">
<orb data-plugin-id="{{PLUGIN_ID}}"
      data-type="favorites-history"
      data-default="0"></orb>
</a>
<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.


Last update: 2023-04-13