VCDPA 준수

<스크립트> /* 위로 슬라이드 */ let slideUp = (목표, 기간=500) => { 표적. 스타일. transitionProperty = '높이, 여백, 패딩'; 표적. 스타일. transitionDuration = 기간 + 'ms'; 표적. 스타일. 상자 크기 = 'border-box'; 표적. 스타일. 높이 = 대상. offsetHeight + 'px'; 표적. 오프셋높이; 표적. 스타일. 오버플로 = '숨김'; 표적. 스타일. 높이 = 0; 표적. 스타일. paddingTop = 0; 표적. 스타일. paddingBottom = 0; 표적. 스타일. marginTop = 0; 표적. 스타일. marginBottom = 0; 창문. setTimeout( () => { 표적. 스타일. 표시 = '없음'; 표적. 스타일. removeProperty('높이'); 표적. 스타일. removeProperty('패딩탑'); 표적. 스타일. removeProperty('패딩 바닥'); 표적. 스타일. removeProperty('margin-top'); 표적. 스타일. removeProperty('margin-bottom'); 표적. 스타일. removeProperty('오버플로'); 표적. 스타일. removeProperty('전환 기간'); 표적. 스타일. removeProperty('전환 속성'); }, 지속); // 데이터 이식성 섹션을 닫을 때 요청 유형 값을 다시 빈 문자열로 설정합니다. 만약(대상. getAttribute('id') === 'form-vcdpa-data-account-request') { 문서. querySelector('#form-vcdpa-data-account-request-request-type'). 값 = ''; } } /* 아래로 슬라이드 */ let slideDown = (목표, 기간=500) => { setTimeout(함수(){ 표적. 스타일. removeProperty('디스플레이'); 디스플레이=창을 보자. getComputedStyle(대상). 표시하다; if (디스플레이 === '없음') 디스플레이 = '차단'; 표적. 스타일. 디스플레이 = 디스플레이; 높이 = 대상을 보자. 오프셋높이; 표적. 스타일. 오버플로 = '숨김'; 표적. 스타일. 높이 = 0; 표적. 스타일. paddingTop = 0; 표적. 스타일. paddingBottom = 0; 표적. 스타일. marginTop = 0; 표적. 스타일. marginBottom = 0; 표적. 오프셋높이; 표적. 스타일. 상자 크기 = 'border-box'; 표적. 스타일. transitionProperty = "높이, 여백, 패딩"; 표적. 스타일. transitionDuration = 기간 + 'ms'; 표적. 스타일. 높이 = 높이 + 'px'; 표적. 스타일. removeProperty('패딩탑'); 표적. 스타일. removeProperty('패딩 바닥'); 표적. 스타일. removeProperty('margin-top'); 표적. 스타일. removeProperty('margin-bottom'); 창문. setTimeout( () => { 표적. 스타일. removeProperty('높이'); 표적. 스타일. removeProperty('오버플로'); 표적. 스타일. removeProperty('전환 기간'); 표적. 스타일. removeProperty('전환 속성'); }, 지속); }, 100) } /* 투글 */ var slideToggle = (대상, 기간 = 500) => { 만약(윈도우. getComputedStyle(대상). 표시 === '없음') { return slideDown(대상, 기간); } 또 다른 { return slideUp(대상, 기간); } } /* 페이드 */ var toggleFadeiSense = (요소, 표시) => { if (보여주기) { 안건. 스타일. 디스플레이 = "차단"; setTimeout(함수(){ 안건. classList. add('show-isense'); 안건. classList. remove('hide-isense'); },20) } 또 다른 { 안건. classList. remove('show-isense'); 안건. classList. add('hide-isense'); setTimeout(() => { 안건. 스타일. 표시 = '없음'; }, 400) } } var vcdpaSlideUpAll = 함수() { 슬라이드업(문서. querySelector('#form-vcdpa-edit-account-request'), 100); 슬라이드업(문서. querySelector('#form-vcdpa-data-account-request'), 100); 슬라이드업(문서. querySelector('#form-vcdpa-personal-data-report-request'), 100); 슬라이드업(문서. querySelector('#form-vcdpa-do-not-sell-request'), 100); 슬라이드업(문서. querySelector('#form-vcdpa-delete-account-request'), 100); 문서. querySelector('#vcdpa_page 버튼'). setAttribute("aria-expanded", "false"); }; var email, type, consentGiven = false; var validationModalContent = ''; var vcdpaSendRequest = 함수(콜백) { 가져오기('https://www. 클라우드 플레어. com/cdn-cgi/trace', { 방법: 'GET' , 헤더: { '콘텐츠 유형': '텍스트/일반', }, }) . then(resp => resp. 텍스트()) . 다음(resp => { 만약 (!resp. 오류) { let ipInfo = resp; let formData = new FormData(); if (type === 'customer/do-not-sell') { isenseGDPR. 쿠키. set('cookieconsent_preferences_disabled', 'analytics,marketing,functionality,', { 만료: 365 }); isenseGDPR. 쿠키. set('cookieconsent_status', 'accept_selected', { 만료: 365 }); 창문. 쇼피파이. 추적동의. setTrackingConsent(false, function() { console.setTrackingConsent(false, function()) log('setTrackingConsent false')}); 만약(윈도우. 쇼피파이. 고객프라이버시. userDataCanBeSold()) { 창문. 쇼피파이. 고객프라이버시. setCCPAConsent(false, () => {}); } 만약 (문서. querySelector(' cc-창')) { 문서. querySelector(' cc-창') 스타일. 표시 = '없음'; } // 팝업 텍스트 재설정 문서. querySelector('#vcdpa-modal-container-text'). innerHTML = '이 요청을 처리하기 위해 내 이메일과 IP 주소를 수집하는 데 동의합니다. 자세한 내용은 개인정보 보호정책 및 서비스 약관. '; } formData.formData. 추가('쇼핑', Shopify. 가게); formData.formData. 추가('이메일', 이메일); formData.formData. 추가('타입', 타입); formData.formData. 추가('sourceOfRequest', 5); formData.formData. 추가('ip주소', ipInfo); formData.formData. append('consentGiven', consentGiven); formData.formData. 추가('페이지', 'vcdpa'); formData.formData. 추가('언어', Shopify. 현지의 ? 쇼피파이. 현지의 : ''); formData.formData. append('gtranslateLang', isenseGDPR.append('gtranslateLang', isenseGDPR. 쿠키. get('googtrans')? isenseGDPR. 쿠키. get('googtrans'): ''); 가져오기('https://gdpr. 앱. isenselabs. com/gdprRequests/submitRequest', { 방법: 'POST', 본문: formData }) . then(resp => resp. JSON()) . 다음(resp => { 만약 (!resp. 오류) { vcdpaSlideUpAll(); 만약 (답. 메시지. 길이) { 경고(각각 메시지); } 또 다른 { alert('귀하의 요청이 성공적으로 제출되었습니다. 자세한 내용은 이메일을 확인하십시오. '); } } 또 다른 { 경고(각각 메시지); } if (콜백 유형 == '함수') { 콜백(resp); } }) . 잡기(오류 => { 경고(오류. 메시지); }) } 또 다른 { 경고(각각 메시지); } }) } //모달을 본문에 추가합니다. 그렇지 않으면 중앙에 유지되지 않기 때문입니다(위치가 고정된 경우에도). 문서. querySelector("본문"). insertAdjacentHTML('beforeend', verificationModalContent); 문서. addEventListener("DOMContentLoaded", function() { let searchParams = new URLSearchParams(window. 임차권. 찾다); 매개변수 = searchParams.let get('아이디'); if(파라미터) { 문서. getElementById(파라미터). scrollIntoView(); } // 사용자가 (x)을 클릭하면 모달을 닫습니다. 문서. querySelector(' 데이터 검증 닫기'). addEventListener('클릭', function(e) { 이자형. preventDefault(); closeVerificationModal(); }); 문서. querySelector('#data-verification-icon, #data-verification-container p'). addEventListener('클릭', function(e) { 이자형. preventDefault(); // 덮어쓰기 때문에 href의 클릭을 감지합니다. 만약(e. 표적 태그 이름 === "A") { 창문. 열기(e. 표적 href, '_blank'); 반품; } 문서. querySelector('#데이터 검증 아이콘'). classList. add("클릭"); setTimeout(()=>{ toggleFadeiSense(문서. querySelector("#data-verification-modal"), false); 문서. querySelector('#data-verification-background . 로딩'). 스타일. 디스플레이 = '인라인 블록'; consentGiven = 참; vcdpaSendRequest(함수(resp) { 동의제공 = 거짓; closeVerificationModal(); }); }, 400); }); }); 함수 openVerificationModal(){ toggleFadeiSense(문서. querySelector("#data-verification-modal"), true); toggleFadeiSense(문서. querySelector('#data-verification-background'), true); 문서. querySelector('#data-verification-container 입력'). 집중하다(); } 함수 closeVerificationModal(){ toggleFadeiSense(문서. querySelector("#data-verification-background"), false); 문서. querySelector('#데이터 검증 아이콘'). classList. remove("클릭"); 문서. querySelector('#data-verification-background . 로딩'). 스타일. 표시 = '없음'; // 선택한 요청 유형의 버튼에 초점을 맞춥니다. let vcdpaForms = 문서. querySelectorAll('. 양식-vcdpa-요청'); vcdpaForms. forEach(함수(vcdpaForm) { 만약 (vcdpaForm. 스타일. 표시 !== "없음") { let vcdpaFormLinks = vcdpaForm. 이전요소형제자매. querySelectorAll('li'); if(vcdpaFormLinks. 길이 === 1) { vcdpaFormLinks[0]. querySelector('버튼'). 집중하다(); } 그렇지 않으면 (vcdpaFormLinks. 길이 > 1) { vcdpaFormPickedLinkValue = 문서. querySelector('#form-vcdpa-data-account-request-request-type'). 값; 스위치(vcdpaFormPickedLinkValue) { 사례 '고객/요청': vcdpaFormLinks[0]. querySelector('버튼'). 집중하다(); 부서지다; 케이스 'customer/personal_info': vcdpaFormLinks[1]. querySelector('버튼'). 집중하다(); 부서지다; 사례 '고객/주문': vcdpaFormLinks[2]. querySelector('버튼'). 집중하다(); 부서지다; 기본: 부서지다; } } } }); } 문서. querySelector('#btn-vcdpa-edit-account-request'). addEventListener('클릭', function(e) { 이자형. preventDefault(); vcdpaSlideUpAll(); 슬라이드다운(문서. querySelector('#form-vcdpa-edit-account-request'), 200); 이것. setAttribute("aria-expanded", "true"); }); 문서. querySelector('#form-vcdpa-edit-account-request-submit'). addEventListener('클릭', function(e) { 이자형. preventDefault(); 이메일 = 문서. querySelector('#form-vcdpa-edit-account-request-email'). 값; type = '고객/편집'; openVerificationModal(); }); 문서. querySelectorAll('#btn-vcdpa-요청-요청, #btn-vcdpa-개인 정보-요청, #btn-vcdpa-주문-요청'). forEach(요소 => { 요소. addEventListener('클릭', function(e) { 이자형. preventDefault(); vcdpaSlideUpAll(); 유형 = ''; // 팝업 메시지 초기화 문서. querySelector('#vcdpa-modal-container-text'). innerHTML = '이 요청을 처리하기 위해 내 이메일과 IP 주소를 수집하는 데 동의합니다. 자세한 내용은 개인정보 보호정책 및 서비스 약관. '; 스위치(이. getAttribute('id')) { 사례 'btn-vcdpa-요청-요청': 유형 = '고객/요청'; 부서지다; 케이스 'btn-vcdpa-개인 정보 요청': 유형 = '고객/개인_정보'; 부서지다; 케이스 'btn-vcdpa-orders-request': type = '고객/주문'; 부서지다; } 문서. querySelector('#form-vcdpa-data-account-request-request-type'). 값 = 유형; 슬라이드다운(문서. querySelector('#form-vcdpa-data-account-request'), 200); 이것. setAttribute("aria-expanded", "true"); }) }); 문서. querySelector('#form-vcdpa-data-account-request-submit'). addEventListener('클릭', function(e) { 이자형. preventDefault(); 이메일 = 문서. querySelector('#form-vcdpa-data-account-request-email'). 값; 유형=문서. querySelector('#form-vcdpa-data-account-request-request-type'). 값; openVerificationModal(); }); 문서. querySelector('#btn-vcdpa-personal-data-report-request'). addEventListener('클릭', function(e) { 이자형. preventDefault(); vcdpaSlideUpAll(); 슬라이드다운(문서. querySelector('#form-vcdpa-personal-data-report-request'), 200); 이것. setAttribute("aria-expanded", "true"); }); 문서. querySelector('#form-vcdpa-personal-data-report-request-submit'). addEventListener('클릭', function(e) { 이자형. preventDefault(); 이메일 = 문서. querySelector('#form-vcdpa-personal-data-report-request-email'). 값; type = '고객/신고'; openVerificationModal(); }); 문서. querySelector('#btn-vcdpa-do-not-sell-request'). addEventListener('클릭', function(e) { 이자형. preventDefault(); vcdpaSlideUpAll(); 슬라이드다운(문서. querySelector('#form-vcdpa-do-not-sell-request'), 200); 이것. setAttribute("aria-expanded", "true"); }); 문서. querySelector('#form-vcdpa-do-not-sell-request-submit'). addEventListener('클릭', function(e) { 이자형. preventDefault(); 이메일 = 문서. querySelector('#form-vcdpa-do-not-sell-request-email'). 값; 유형 = '고객/판매 금지'; // 고객이 로그인했는지 확인 만약 (__st. cid != 정의되지 않음) { 문서. querySelector('#vcdpa-modal-container-text'). innerHTML = '이 요청을 처리하기 위해 내 이메일과 IP 주소를 수집하는 데 동의합니다. 자세한 내용은 개인정보 보호정책 및 서비스 약관. '; } 또 다른 { 문서. querySelector('#vcdpa-modal-container-text'). innerHTML = '이 요청을 처리하기 위해 내 이메일과 IP 주소를 수집하는 데 동의합니다. 자세한 내용은 개인정보 보호정책 및 서비스 약관.
참고: 게스트 사용자이거나 계정에 로그인하지 않은 경우 선택 해제 선택은 이 브라우저 세션에서만 유효합니다. '; } openVerificationModal(); }); 문서. querySelector('#btn-vcdpa-delete-account-request'). addEventListener('클릭', function(e) { 이자형. preventDefault(); vcdpaSlideUpAll(); 슬라이드다운(문서. querySelector('#form-vcdpa-delete-account-request'), 200); 이것. setAttribute("aria-expanded", "true"); }); 문서. querySelector('#form-vcdpa-delete-account-request-submit'). addEventListener('클릭', function(e) { 이자형. preventDefault(); 이메일 = 문서. querySelector('#form-vcdpa-delete-account-request-email'). 값; type = '고객/삭제'; openVerificationModal(); }); // 규정 준수 페이지 요청에 대한 키보드 탐색 문서. querySelector('#vcdpa_page'). addEventListener('keydown', function(e) { isTabPressed = e로 하자. 키 코드 === 9 || 이자형. 키 === "탭" || 이자형. 코드 === "탭"; // 이 함수는 e를 호출하는 수고를 덜어줍니다. 모든 초점을 맞춘 후 preventDefault() let executeFocus = (focusElement) => {focusElement. 포커스();마. 방지기본값();} 경우 (isTabPressed) { let vcdpaFormPickedLinkValue = 문서. querySelector('#form-vcdpa-data-account-request-request-type'). 값; let vcdpaRequestsButton = 문서. querySelector('#btn-vcdpa-requests-request'); let personalInformationButton = 문서. querySelector('#btn-vcdpa-개인정보요청'); 주문 버튼 = 문서를 보자. querySelector('#btn-vcdpa-orders-request'); let personalDataReportButton = 문서. querySelector('#btn-vcdpa-personal-data-report-request'); let dataAccountFormEmailField = 문서. querySelector('#form-vcdpa-data-account-request-email'); let dataAccountFormSubmitButton = 문서. querySelector('#form-vcdpa-data-account-request-submit'); 만약 (e. 쉬프트 키) { 만약 ((문서. activeElement === personalInformationButton && vcdpaFormPickedLinkValue === '고객/요청') || (문서. activeElement === ordersButton && vcdpaFormPickedLinkValue === '고객/개인 정보')) { executeFocus(dataAccountFormSubmitButton); } 그렇지 않으면 (문서. activeElement === dataAccountFormEmailField) { if (vcdpaFormPickedLinkValue === '고객/요청') { executeFocus(vcdpaRequestsButton); } 그렇지 않으면 (vcdpaFormPickedLinkValue === '고객/개인_정보') { executeFocus(개인정보버튼); } } 그렇지 않으면 (문서. 활성 요소 === 개인 데이터 보고서 버튼) { if (vcdpaFormPickedLinkValue !== '고객/주문') { executeFocus(ordersButton); } } } 또 다른 { 만약 ((문서. activeElement === vcdpaRequestsButton && vcdpaFormPickedLinkValue === '고객/요청') || (문서. 활성 요소 === 개인 정보 버튼 && vcdpaFormPickedLinkValue === '고객/개인_정보')) { executeFocus(dataAccountFormEmailField); } 그렇지 않으면 (문서. activeElement === dataAccountFormSubmitButton) { if (vcdpaFormPickedLinkValue === '고객/요청') { executeFocus(개인정보버튼); } 그렇지 않으면 (vcdpaFormPickedLinkValue === '고객/개인_정보') { executeFocus(ordersButton); } } 그렇지 않으면 (문서. 활성 요소 === 주문 버튼) { if (vcdpaFormPickedLinkValue !== '고객/주문') { executeFocus(personalDataReportButton); } } } } }); // 접근성을 위한 데이터 확인 모드의 키보드 탐색 문서. querySelector('#데이터 검증-모달'). addEventListener('keydown', function(e) { isTabPressed = e로 하자. 키 코드 === 9 || 이자형. 키 === "탭" || 이자형. 코드 === "탭"; isEscapePressed=e로 하자. 키 코드 === 27 || 이자형. 키 === "탈출" || 이자형. 코드 === "탈출"; isSpacePressed = 이벤트. 키 코드 === 32 || 이자형. 키 === " " || 이벤트. 코드 === "공백"; let isEnterPressed = 이벤트. 키 코드 === 13 || 이자형. 키 === "입력" || 이벤트. 코드 === "입력"; let dataVerificationCloseButton = 문서. querySelector(' 데이터 검증 닫기'); let dataVerificationCheckbox = 문서. querySelector('#data-verification-container 입력'); let dataVerificationLink = 문서. querySelector('#data-verification-container a'); // 이 함수는 e를 호출하는 수고를 덜어줍니다. 모든 초점을 맞춘 후 preventDefault() let executeFocus = (focusElement) => {focusElement. 포커스();마. 방지기본값();} if (isEscapePressed) { if (dataVerificationCloseButton) { dataVerificationCloseButton. 딸깍 하는 소리(); } } if (Space Pressed || is Enter Pressed) { of (document. activeElement === dataVerificationCheckbox) { 문서. querySelector('#데이터 검증 컨테이너 #데이터 검증 아이콘'). 딸깍 하는 소리(); } } 경우 (isTabPressed) { 만약 (e. 쉬프트 키) { if (dataVerificationCloseButton && 문서. activeElement === dataVerificationCloseButton) { executeFocus(dataVerificationLink); } } 또 다른 { if (dataVerificationLink && 문서. 활성 요소 === dataVerificationLink) { executeFocus(dataVerificationCloseButton); } } } });