Embedding Dealer Locator Within Website Page

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, please visit our Live Demo Site

An example of a dedicated Dealer Locator with custom styles.

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 Buy Now script. This script loads the widget once page loads rather than via a button click.

The magic occurs within the omacro.buynow.widget.show() function. This function accepts several parameters:
  1. Product Identifier required - "*" (for generic dealer locator) or SKU or Omacro Product ID (SKU preferred)
  2. Market Tab - Value can be either "online" or "local" and specifies the tab to market to show immediately.
  3. 2-Character ISO Country Code - "us", "ca", "au", etc.

General Dealer Locator Example

  1. <script>
  2. document.body.addEventListener("loaded.omacro.buynow", function (e) {
  3.   e.preventDefault();
  4.   omacro.buynow.widget.show('*', 'local', 'us');
  5. }, false)
  6. </script>

Product Based Dealer Locator Example

  1. <script>
  2. document.body.addEventListener("loaded.omacro.buynow", function (e) {
  3.   e.preventDefault();
  4.   omacro.buynow.widget.show('LA12345', 'online', 'ca');
  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 Buy Now 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" ...

    • 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. <script id="omacro-widget-buynow" ...

    • Initial Onboarding of Sellers

      To aid and expedite your initial implementation, please provide a list of sellers have attached the above mentioned Excel template. We will use to do the import of all of your sellers. Please note, in the event you are on-boarding multiple omacro ...

    • Adding Custom Branded Seller Landing Pages For General Dealer Locator

      omacro's General Dealer Locator will produce non-product specific dealer listing results. This function allows you to show Sellers and send customers to the Seller's custom branded landing page that contains just your products and or your brand's ...