2단계: Distributor Locator를 구현할 방법을 선택하십시오.

옵션 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 =배포자 " async></script>

1단계: 버튼에 트리거를 할당합니다.
아래 예는 버튼 트리거로 사용되는 간단한 앵커 태그(링크)를 보여줍니다. 필수 매개변수를 추가하기만 하면 웹 사이트에서 기존 또는 새 요소를 쉽게 사용할 수 있습니다.

1. <a href="#obn" data-product="*">대리점 찾기</a>

트리거 매개변수는 스니펫 매개변수보다 우선하므로 필요한 경우 예외를 제외하고 매개변수를 전역적으로 설정할 수 있습니다. 모든 트리거 매개변수는 ' data- '로 시작해야 하는 HTML 데이터 속성 입니다.

제품  필수의

제품 식별자이며 "*"로 설정해야 합니다.

옵션 2: 웹사이트 페이지에 삽입.

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(Cascading Style Sheet)를 페이지에 추가

다음 CSS를 추가하여(필요에 따라 수정) Distributor Locator 콘텐츠의 스타일을 조정하여 페이지 문서 내에서 제대로 렌더링되도록 합니다.

1. <스타일 유형="텍스트/css">
2. body.oma-modal-in {
3. 오버플로: 자동 !important;
4. }
5. .oma-omacro .oma-buynow {
6. 불투명도: 1! 중요;
7. 표시: 블록 !important;
8. 위치: 상대적 !중요;
9. 상단: 자동 !중요;
10. 오른쪽: 자동 !중요;
11. 하단: 자동 !중요;
12. 왼쪽: 자동 !중요;
13. }
14. .oma-omacro .oma-buynow .oma-대화 {
15. 변환: 없음 !중요;
16. 전환: 없음 !중요;
17. 왼쪽: 자동 !중요;
18. margin-right: 자동 !important;
19. margin-left: 자동 !important;
20. }
21. .oma-omacro .oma-buynow .oma-dialog .oma-content {
22. box-shadow: 없음 !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. border-bottom-color: 투명;
53. }
54. .oma-omacro .oma-buynow .oma-바닥글 {
55. border-top-color: 투명;
56. 배경색: 투명;
57. }
58. .oma-omacro .oma-배경 {
59. 표시: 없음 !중요;
60. }
61. </스타일>