在网站页面中嵌入经销商定位器

在网站页面中嵌入经销商定位器

您可以将定位器直接嵌入到页面上。假设您已完成将 omacro 的立即购买代码片段添加到您的页面的步骤，请使用以下示例在页面本身内呈现定位器。

要观看现场演示，请访问我们的现场演示网站

具有自定义样式的专用经销商定位器示例。

第 1 步：将 CSS 类添加到页面
确保页面上有一个类名为“oma-omacro”的元素。
  1. <div class="oma-omacro"></div>

第 2 步：将 JavaScript 添加到页面

将以下脚本添加到页面中第 1 步中提到的 HTML 元素下方的任意位置。该脚本旨在触发“立即购买”脚本中的呈现功能。该脚本在页面加载后加载小部件，而不是通过单击按钮。

魔术发生在omacro.buynow.widget.show()函数中。这个函数接受几个参数：
  1. 需要产品标识符- “*”（用于通用经销商定位器）或 SKU 或 Omacro 产品 ID（首选 SKU）
  2. 市场选项卡- 值可以是“在线”或“本地”，并指定要立即显示的市场选项卡。
  3. 2 字符 ISO 国家/地区代码- “us”、“ca”、“au”等。

一般经销商定位器示例

  1. <脚本>
  2. document.body.addEventListener("loaded.omacro.buynow", function (e) {
  3. e.preventDefault();
  4. omacro.buynow.widget.show('*', 'local', 'us');
  5. }， 错误的）
  6. </脚本>

基于产品的经销商定位器示例

  1. <脚本>
  2. document.body.addEventListener("loaded.omacro.buynow", function (e) {
  3. e.preventDefault();
  4. omacro.buynow.widget.show('LA12345', '在线', 'ca');
  5. }， 错误的）
  6. </脚本>

第 3 步：将层叠样式表添加到页面

添加以下 CSS（根据需要修改）以调整“立即购买”内容的样式，使其在页面文档中正确呈现。

  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-footer {
  55. 边框顶部颜色：透明；
  56. 背景颜色：透明；
  57. }
  58. .oma-宏 .oma-背景{
  59. 显示：无！重要；
  60. }
  61. </样式>

    • Related Articles

    • 管理国际经销商的经销商定位器

      管理您的国际经销商 网站代码 有关经销商定位器的网站实施指南，请单击此处。 经销商管理 根据您的需要，有多种方法可以设置经销商定位器。 按国家/地区显示经销商结果（用户可以选择国家/地区） 显示所有经销商，无论国家/地区如何 1. 按国家显示经销商结果（用户可以选择国家） 您可以在 omamacro 中指定哪些卖家是经销商，这将通知经销商定位器根据位置显示哪些公司。为此，您需要导航至“管理卖家”页面。 进入“管理卖家”页面后，选择网络中列出的一家公司指定为经销商。 ...

    • 通过电子邮件或外部链接直接触发立即购买经销商定位器

      omacro 的“立即购买”小部件允许您在网站页面加载时触发它自动加载/打开。这将很有帮助，例如，如果您想开展电子邮件活动并包含一个按钮/链接供客户“立即购买”。向电子邮件中的链接添加参数将直接从电子邮件触发您的“立即购买”结果。另一个例子是在 YouTube 视频或您希望将客户直接从另一个目的地发送到您的产品或一般经销商定位器的任何其他位置中放置链接。 简单地使用： 决定应在页面加载时触发哪个“立即购买”按钮。 使用所需按钮的相同产品标识符替换步骤 3 中的 {PRODUCT}。 添加 ...

    • 为一般经销商定位器添加自定义品牌卖家登陆页面

      omacro 的General Dealer Locator将生成非特定产品的经销商列表结果。此功能允许您向卖家展示并将客户发送到卖家的自定义品牌着陆页，该页面仅包含您的产品和/或您在卖家中的品牌页面，即www.sellersite.com/your-brand-here 。要添加卖家的自定义网站 URL，请按照以下说明操作： 1) 登录后，访问您管理卖家的区域。 2) 搜索或筛选卖家名称，然后选择编辑铅笔。 3) 复制并粘贴卖家自定义链接URL，然后保存。 ...

    • 将自定义规则添加到经销商结果

      有时，您可能想要自定义某些结果。例如，如果您只想显示租赁供应商和/或服务中心或只显示零售地点（或组合）。为此，您可以通过几种不同的方式实现此可选参数。 选项 1：从“立即购买”脚本路径全局添加规则 如果您希望在整个站点（使用“立即购买”的任何地方）全局添加规则，您可以使用以下附加参数到“立即购买”脚本路径来执行此操作。 <script id="omacro-widget-buynow" src=" ...

    • 一般经销商定位器网站代码实现

      omacro 有两种主要类型的定位器选项，本节将介绍在您的网站前端为通用定位器设置代码。此定位器生成与产品无关的一般经销商结果。例如，在线结果将允许用户点击进入卖家的主网站域或您设置的卖家自定义 URL 。有关与特定产品相关的结果，请参阅基于产品的定位器实施说明。 第 1 步：在网站中包含脚本 下面的示例演示了将“立即购买”小部件与您的站点集成所需的条件。只需更新所需的参数，然后将代码段复制到您的网站中。 <script id="omacro-widget-buynow" src=" ...