分销商定位器网站代码实施

分销商定位器网站代码实施

第 1 步：在网站中包含脚本

下面的示例演示了将 Distributor Locator 小部件与您的站点集成所需的条件。只需更新所需的参数，然后将代码段复制到您的网站中。
所有的snippet参数都附加在脚本源中，必须符合统一资源标识符的标准。

公司要求
这是您的 Omacro 提供的公司标识符。此 ID 是在您的公司帐户最初创建时分配的，永远不会更改。上面的代码段示例已经包含您的公司标识符。
国家
这是一个两位数的ISO 国家代码 ISO 3166-1 alpha-2代码或汽车。如果未提供，将显示地图以允许用户选择他们的国家/地区。当提供且未设置为自动时，用户会立即显示指定国家/地区的结果。当设置为自动时，国家/地区将由用户的 IP 地址自动确定。
证实
如果为真，该代码段将验证页面上可用的每个产品标识符是否有效并返回一个产品。验证完成后，代码片段会将相应的 CSS 类添加到触发元素： obn-validate-pass或obn-validate-fail 。当验证挂起时，触发器元素将具有 CSS 类 obn-validate-pending。
调试
当 true 时，该代码段将通过将所有活动和通知记录到浏览器控制台来协助调试。建议在调试完成后禁用此功能。

第 2 步：选择您希望实施分销商定位器的方式。

选项 1：通过单击按钮触发以打开模型弹出窗口。

第 1 步：要触发弹出窗口，我们首先需要修改第 1 步中的脚本路径，并添加一个名为“mode”的附加参数，值为“distributor”。请参见下面的示例：
  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 =分发服务器“异步”></script>
第 1 步：将触发器分配给按钮。
下面的示例演示了一个用作按钮触发器的简单锚标记（链接）。只需添加所需的参数，您就可以轻松地在您的网站上使用现有或新元素。

  1. <a href="#obn" data-product="*">查找经销商</a>

触发器参数优先于片段参数，这允许在需要时全局设置参数，但有例外。所有触发器参数都是HTML 数据属性，要求它们以“ data- ”开头。

产品 必需的
这是产品标识符，应设置为“*”。

选项 2：嵌入网站页面。

您可以将定位器直接嵌入到页面上。假设您已完成将 omacro 的立即购买代码片段添加到您的页面的步骤，请使用以下示例在页面本身内呈现定位器。
第 1 步：将 CSS 类添加到页面。
确保页面上有一个类名为“oma-omacro”的元素。
  1. <div class="oma-omacro"></div>

第 2 步：将 JavaScript 添加到页面
将以下脚本添加到页面中第 1 步中提到的 HTML 元素下方的任意位置。该脚本旨在触发 Distributor Locator 脚本中的渲染功能。该脚本在页面加载后加载小部件，而不是通过单击按钮。
  1. <脚本>
  2. document.body.addEventListener("loaded.omacro.buynow", function (e) {
  3. e.preventDefault();
  4. omacro.buynow.widget.showDistributors();
  5. }， 错误的）
  6. </脚本>

第 3 步：将层叠样式表添加到页面
添加以下 CSS（根据需要修改）以调整 Distributor Locator 内容的样式，使其在页面文档中正确呈现。

  1. <样式类型="文本/CSS">
  2. body.oma-modal-in {
  3. 溢出：自动！重要；
  4. }
  5. .oma-omacro .oma-buynow {
  6. 不透明度：1！重要；
  7. 显示：阻止！重要；
  8. 位置：相对！重要；
  9. 顶部：自动！重要；
  10. 右：自动！重要；
  11. 底部：自动！重要；
  12. 左：自动！重要；
  13. }
  14. .oma-omacro .oma-buynow .oma-dialog {
  15. 变换：无！重要；
  16. 过渡：无！重要；
  17. 左：自动！重要；
  18. 右边距：自动！重要；
  19. 左边距：自动！重要；
  20. }
  21. .oma-omacro .oma-buynow .oma-dialog .oma-content {
  22. 框阴影：无！重要；
  23. 背景颜色：透明；
  24. }
  25. .oma-omacro .oma-buynow .oma-dialog .oma-header .oma-title {
  26. 显示：无；
  27. }
  28. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-close {
  29. 显示：无；
  30. }
  31. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs {
  32. 边框底部颜色：#ddd；
  33. 背景颜色：透明；
  34. }
  35. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li>a {
  36. 颜色：#337ab7；
  37. 背景颜色：透明；
  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. 文字修饰：无；
  42. 背景色：#eee；
  43. 边框颜色：#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. 颜色：#555；
  49. 游标：默认；
  50. 背景色：#fff；
  51. 边框：1px 实心#ddd；
  52. 边框底色：透明；
  53. }
  54. .oma-omacro .oma-buynow .oma-页脚{
  55. 边框顶部颜色：透明；
  56. 背景颜色：透明；
  57. }
  58. .oma-宏 .oma-背景{
  59. 显示：无！重要；
  60. }
  61. </样式>