웹사이트 페이지 내에 딜러 로케이터 내장

웹사이트 페이지 내에 딜러 로케이터 내장

로케이터를 페이지에 직접 포함할 수 있습니다. 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(Cascading Style Sheet)를 페이지에 추가

다음 CSS를 추가하여(필요에 따라 수정) 지금 구매 콘텐츠의 스타일을 조정하여 페이지 문서 내에서 적절하게 렌더링되도록 합니다.

  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. </스타일>

    • Related Articles

    • 일반 딜러 로케이터에 대한 사용자 지정 브랜드 판매자 랜딩 페이지 추가

      omacro의 General Dealer Locator 는 비제품 특정 딜러 목록 결과를 생성합니다. 이 기능을 사용하면 판매자를 표시하고 고객을 제품만 포함하는 판매자의 사용자 지정 브랜드 랜딩 페이지 또는 판매자 내의 브랜드 페이지(예: www. sellingsite.com/your-brand-here )로 보낼 수 있습니다. 판매자의 맞춤 웹사이트 URL을 추가하려면 아래 지침을 따르세요. 1) 로그인 후 판매자 관리 영역으로 이동합니다. ...

    • 딜러 결과에 사용자 지정 규칙 추가

      경우에 따라 특정 결과를 사용자 지정해야 할 수 있습니다. 예를 들어, 임대 제공업체 및/또는 서비스 센터만 표시하거나 소매점 위치(또는 조합)만 표시하려는 경우입니다. 이를 위해 몇 가지 다른 방법으로 이 선택적 매개변수를 구현할 수 있습니다. 옵션 1: 지금 구매 스크립트 경로에서 전체적으로 규칙 추가 사이트 전체(지금 구입이 사용되는 모든 위치)에 전역적으로 규칙을 추가하려는 경우 지금 구입 스크립트 경로에 다음 추가 매개변수를 사용하여 ...

    • 일반 대리점 찾기 웹사이트 코드 구현

      omacro에는 두 가지 주요 유형의 로케이터 옵션이 있습니다. 이 섹션에서는 일반 로케이터에 대한 웹사이트 프런트 엔드의 코드 설정을 참조합니다. 이 로케이터는 제품에 연결되지 않은 일반 딜러 결과를 생성합니다. 예를 들어 온라인 결과를 통해 사용자는 판매자의 기본 웹사이트 도메인 또는 귀하가 설정한 판매자의 맞춤 URL을 클릭할 수 있습니다. 특정 제품에 연결된 결과에 대한 제품 기반 로케이터 구현 지침 을 참조하십시오. 1단계: 웹사이트 ...

    • 제품 기반 딜러 찾기 웹사이트 코드 구현

      1단계: 웹사이트 내에 스크립트 포함 아래 예는 지금 구매 위젯을 사이트와 통합하는 데 필요한 사항을 보여줍니다. 원하는 매개변수를 업데이트한 다음 스니펫을 웹사이트에 복사하기만 하면 됩니다. <script id="omacro-widget-buynow" ...

    • 유통업체 찾기 웹사이트 코드 구현

      1단계: 웹사이트 내에 스크립트 포함 아래 예는 Distributor Locator 위젯을 사이트와 통합하는 데 필요한 사항을 보여줍니다. 원하는 매개변수를 업데이트한 다음 스니펫을 웹사이트에 복사하기만 하면 됩니다. <script id="omacro-widget-buynow" src=" ...