Omacro
Book a Demo
Help Center

omacro.com

Dealer Locator

Embedding dealer locator within a website page

Render Omacro dealer locator results inline on a page instead of opening a modal popup.

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

Embedding Dealer Locator Within Website Page illustration 1 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>