ステップ 2: ディストリビューター ロケーターを実装する方法を選択します。

オプション 1: ボタンのクリックによってトリガーされ、モデルのポップアップ ウィンドウが開きます。

ステップ 1:ポップアップ ウィンドウをトリガーするには、まずステップ 1 でスクリプト パスを変更し、値が「distributor」である「mode」という追加パラメータを追加する必要があります。以下の例を参照してください。

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:トリガーをボタンに割り当てます。
以下の例は、ボタン トリガーとして使用される単純なアンカー タグ (リンク) を示しています。必要なパラメータを追加するだけで、Web サイト上で既存の要素または新しい要素を簡単に使用できます。

1. <a href="#obn" data-product="*">販売代理店を探す</a>

トリガー パラメータはスニペット パラメータよりも優先されるため、必要に応じて例外を除いてパラメータをグローバルに設定できます。すべてのトリガー パラメーターはHTML データ属性であり、「 data- 」で始まる必要があります。

製品 必要

これは製品識別子であり、「*」に設定する必要があります。

オプション 2: Web サイトのページ内に埋め込みます。

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

1. <div class="oma-omaro"></div>

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

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

1. <スクリプト>
2. document.body.addEventListener("loaded.omacro.buynow", function (e) {
3. e.preventDefault();
4. omaro.buynow.widget.showDistributors();
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: 自動 !重要;
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-omaro .oma-backdrop {
59. 表示: なし!重要;
60. }
61. </スタイル>