Web サイト ページ内にディーラー ロケータを埋め込む

Web サイト ページ内にディーラー ロケータを埋め込む

ロケータをページに直接埋め込むことができます。 omacro の今すぐ購入コード スニペットをページに追加する手順を完了したと仮定して、次の例を使用して、ページ自体内にロケーターをレンダリングします。

ライブデモを見るには、 ライブデモサイトにアクセスしてください

カスタム スタイルを備えた専用のディーラー ロケーターの例。

ステップ 1: CSS クラスをページに追加する
「oma-omacro」というクラス名を持つ要素がページにあることを確認してください。
  1. <div class="oma-omacro"></div>

ステップ 2: JavaScript をページに追加する

ステップ 1で説明した HTML 要素の下の任意の場所に、次のスクリプトをページに追加します。このスクリプトは、Buy Now スクリプト内でレンダリング機能をトリガーするように設計されています。このスクリプトは、ボタンのクリックではなく、ページの読み込み時にウィジェットを読み込みます。

魔法はomacro.buynow.widget.show()関数内で発生します。この関数は、いくつかのパラメーターを受け入れます。
  1. 製品 IDが必要- "*" (一般的なディーラー ロケーターの場合) または 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('*', 'ローカル', '私たち');
  5. }、 間違い）
  6. </script>

製品ベースのディーラー検索の例

  1. <スクリプト>
  2. document.body.addEventListener("loaded.omacro.buynow", function (e) {
  3. e.preventDefault();
  4. omacro.buynow.widget.show('LA12345', 'オンライン', 'ca');
  5. }、 間違い）
  6. </script>

ステップ 3 : カスケード スタイル シートをページに追加する

次の CSS を追加 (必要に応じて変更) して、[今すぐ購入] コンテンツのスタイルを調整し、ページ ドキュメント内で適切にレンダリングされるようにします。

  1. <style type="text/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. 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. 背景色: 透明;
  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-omacro .oma-backdrop {
  59. 表示: なし!重要;
  60. }
  61. </style>

    • Related Articles

    • ディーラーの結果にカスタム ルールを追加する

      場合によっては、特定の結果をカスタマイズしたい場合があります。たとえば、レンタル プロバイダーやサービス センターのみを表示したり、小売店の場所 (またはその組み合わせ) のみを表示したりする場合です。そのために、このオプションのパラメーターをいくつかの異なる方法で実装できます。 オプション 1: 今すぐ購入スクリプト パスからルールをグローバルに追加する サイト全体 ([今すぐ購入] が使用されている場所) 全体にルールをグローバルに追加する場合は、[今すぐ購入] スクリプト ...

    • 一般ディーラー検索用のカスタムブランド販売者ランディングページの追加

      omacro のGeneral Dealer Locatorは、非製品固有のディーラー リストの結果を生成します。この機能を使用すると、出品者を表示し、商品のみを含む出品者のカスタム ブランドのランディングページに顧客を送ることができます。販売者のカスタム Web サイト URL を追加するには、次の手順に従ってください。 1) ログイン後、 セラーを管理しているエリアにアクセスします。 2) 販売者名を検索またはフィルタリングし、編集鉛筆を選択します。 3) 販売者のカスタム リンク URL ...

    • ディストリビューター ロケーター Web サイト コードの実装

      ステップ 1: Web サイト内にスクリプトを含める 以下の例は、Distributor Locator ウィジェットをサイトに統合するために必要なものを示しています。必要なパラメータを更新して、スニペットを Web サイトにコピーするだけです。 <script id="omacro-widget-buynow" src=" ...

    • 製品ベースのディーラー検索ウェブサイト コードの実装

      ステップ 1: Web サイト内にスクリプトを含める 以下の例は、今すぐ購入ウィジェットをサイトに統合するために必要なものを示しています。必要なパラメーターを更新してから、スニペットを Web サイトにコピーするだけです。 <script id="omacro-widget-buynow" ...

    • General Dealer Locator Web サイト コードの実装

      omacro には主に 2 種類のロケーター オプションがあります。このセクションでは、一般的なロケーター用に Web サイトのフロントエンドにコードを設定する方法について説明します。このロケータは、製品に関連付けられていない一般的なディーラーの結果を生成します。たとえば、オンラインの検索結果から、ユーザーは販売者のメインのウェブサイト ドメインまたは設定した販売者のカスタム URLをクリックして移動できます。特定の製品に関連付けられている結果については、 Product Based ...