Distributor Locator Website Code Implementation

Distributor Locator Website Code Implementation

Step 1: Include script within website

The example below demonstrates what's needed to integrate the Distributor Locator widget with your site. Simply update desired parameters then copy the snippet into your website.
All snippet parameters are appended to the script source and must conform to the standards of uniform resource identifiers.

company required
This is your Omacro supplied company identifier. This ID was assigned when your company account was originally created which will never change. The snippet example above already includes your company identifier.
country
This is a two digit ISO country code ISO 3166-1 alpha-2 code or auto. If not supplied a map will be presented to allow the user to select their country. When provided and not set to auto the user is immediately presented results for the specified country. When set to auto the country will be automatically determined by the users IP Address.
validate
When true the snippet will verify that that each product identifiers available on the page is valid and returns a product. Once validation is complete the snippet will add the respective CSS class to the trigger element: obn-validate-pass or obn-validate-fail. While validation is pending the trigger element will have the CSS class obn-validate-pending.
debug
When true the snippet will assist with debugging by logging all activity and notifications to your browser console. It's recommended to disable this feature once debugging is complete.

Step 2: Choose way you wish to implement the Distributor Locator.

Option 1: Triggered via button click to open a model popup window.

Step 1: To trigger the popup window, we'll first need to modify our script path in Step 1 and add an additional parameter called "mode" with a value of "distributor". See example below:
  1. <script id="omacro-widget-buynow" src="https://buynow.omacro.com/embedded/bn.loader.js?company=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX&country=auto&validate=false&debug=false&mode=distributor" async></script>
Step 1: Assign trigger to buttons.
The example below demonstrates a simple anchor tag (link) being used as a button trigger. You can easily use existing, or new elements, on your website by simply adding the required parameter.

  1. <a href="#obn" data-product="*">Find A Distributor</a>

Trigger parameters take priority over snippet parameters, this allows for parameters to be set globally with exceptions if needed. All trigger parameters are HTML data attributes which require they start with 'data-'.

product required
This is the product identifier and should be set to "*". 

Option 2: Embedded within website page.

You can embed the locator directly on to a page. Assuming you have gone through the steps of adding omacro's buy now code snippets to your page, use the following example to render the locator within the page itself.
Step 1: Add CSS Class to the Page.
Ensure you have an element on the page with the class name of "oma-omacro".
  1. <div class="oma-omacro"></div>

Step 2: Add JavaScript to the Page
Add the following script to the page anywhere below the HTML element mentioned in Step 1. The script is designed to trigger the render function within the Distributor Locator script. This script loads the widget once page loads rather than via a button click.
  1. <script>
  2.         document.body.addEventListener("loaded.omacro.buynow", function (e) {
  3.             e.preventDefault();
  4.             omacro.buynow.widget.showDistributors();
  5.         }, false)
  6. </script>

Step 3 : Add Cascading Style Sheet to the Page
Add the following CSS (modify as needed) to adjust the style of the Distributor Locator content so that it properly renders within the page document.
 
  1. <style type="text/css">
  2.   body.oma-modal-in {
  3.     overflow: auto !important;
  4.   }
  5.   .oma-omacro .oma-buynow {
  6.     opacity: 1 !important;
  7.     display: block !important;
  8.     position: relative !important;
  9.     top: auto !important;
  10.     right: auto !important;
  11.     bottom: auto !important;
  12.     left: auto !important;
  13.   }
  14.   .oma-omacro .oma-buynow .oma-dialog {
  15.     transform: none !important;
  16.     transition: none !important;
  17.     left: auto !important;
  18.     margin-right: auto !important;
  19.     margin-left: auto !important;
  20.   }
  21.   .oma-omacro .oma-buynow .oma-dialog .oma-content {
  22.     box-shadow: none !important;
  23.     background-color: transparent;
  24.   }
  25.   .oma-omacro .oma-buynow .oma-dialog .oma-header .oma-title {
  26.     display: none;
  27.   }
  28.   .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-close {
  29.     display: none;
  30.   }
  31.   .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs {
  32.     border-bottom-color: #ddd;
  33.     background-color: transparent;
  34.   }
  35.   .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li>a {
  36.     color: #337ab7;
  37.     background-color: transparent;
  38.   }
  39.   .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li>a:focus,
  40.   .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li>a:hover {
  41.     text-decoration: none;
  42.     background-color: #eee;
  43.     border-color: #eee #eee #ddd;
  44.   }
  45.   .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li.oma-active>a,
  46.   .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li.oma-active>a:focus,
  47.   .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li.oma-active>a:hover {
  48.     color: #555;
  49.     cursor: default;
  50.     background-color: #fff;
  51.     border: 1px solid #ddd;
  52.     border-bottom-color: transparent;
  53.   }
  54.   .oma-omacro .oma-buynow .oma-footer {
  55.     border-top-color: transparent;
  56.     background-color: transparent;
  57.   }
  58.   .oma-omacro .oma-backdrop {
  59.     display: none !important;
  60.   }
  61. </style>

    • Related Articles

    • General Dealer Locator Website Code Implementation

      omacro has two main types of locator options, this section will refer to setting up the code on your website front-end for the General Locator. This locator produces general dealer results that are not connected to a product. For example online ...

    • Product Based Dealer Locator Website Code Implementation

      Step 1: Include script within website The example below demonstrates what's needed to integrate the Buy Now widget with your site. Simply update desired parameters then copy the snippet into your website. <script id="omacro-widget-buynow" ...

    • Embedding Dealer Locator Within Website Page

      You can embed the locator directly on to a page. Assuming you have gone through the steps of adding omacro's buy now code snippets to your page, use the following example to render the locator within the page itself. To see a live demonstration, ...

    • Managing International Distributors For Distributor Locator

      Manage Your International Distributors Website Code For a website implementation guide for the Distributor Locator, please click here. Distributor Management There are a couple ways to setup the Distributor Locator depending on your needs. Display ...

    • Supplier Buy Now Implementation Guide

      The following article discusses various ways to implement Buy Now as a popup or embed within a page as a Product Based Dealer Locator or General Dealer Locator. Buy Now can be configured to open to a specific market (Online or Local) to show one or ...