VCDPA への準拠

<スクリプト> /* 上にスライドします */ let slideUp = (ターゲット、期間=500) => { 目標。スタイルtransitionProperty = '高さ、マージン、パディング'; 目標。スタイルtransitionDuration = 期間 + 'ms'; 目標。スタイルボックス サイズ = 'border-box';目標。スタイル高さ＝目標。オフセット高さ + 'ピクセル'; 目標。オフセット高さ; 目標。スタイルオーバーフロー = '非表示'; 目標。スタイル高さ = 0; 目標。スタイルパディングトップ = 0; 目標。スタイルパディングボトム = 0; 目標。スタイルマージントップ = 0; 目標。スタイルマージン底 = 0; 窓。setTimeout( () => { 目標。スタイル表示 = 'なし'; 目標。スタイル削除プロパティ('高さ'); 目標。スタイルRemoveProperty('padding-top'); 目標。スタイルRemoveProperty('padding-bottom'); 目標。スタイルRemoveProperty('マージントップ'); 目標。スタイルRemoveProperty('margin-bottom'); 目標。スタイル削除プロパティ('オーバーフロー'); 目標。スタイルRemoveProperty('transition-duration'); 目標。スタイルRemoveProperty('遷移プロパティ'); }、 間隔）; // データ ポータビリティ セクションを閉じるときに、リクエスト タイプの値を空の文字列に戻します。 if (ターゲット。getAttribute('id') === 'form-vcdpa-data-account-request') { 書類。querySelector('#form-vcdpa-data-account-request-request-type')。値 = ''; } } /* スライドダウン */ let slideDown = (ターゲット、期間=500) => { setTimeout(function(){ 目標。スタイルRemoveProperty('表示'); 表示 = ウィンドウにします。getComputedStyle(ターゲット)。画面; if (display === 'none') display = 'block'; 目標。スタイル表示 = 表示; 高さをターゲットとします。オフセット高さ; 目標。スタイルオーバーフロー = '非表示'; 目標。スタイル高さ = 0; 目標。スタイルパディングトップ = 0; 目標。スタイルパディングボトム = 0; 目標。スタイルマージントップ = 0; 目標。スタイルマージン底 = 0; 目標。オフセット高さ; 目標。スタイルボックス サイズ = 'border-box';目標。スタイルtransitionProperty = "高さ、マージン、パディング"; 目標。スタイルtransitionDuration = 期間 + 'ms'; 目標。スタイル高さ = 高さ + 'ピクセル'; 目標。スタイルRemoveProperty('padding-top'); 目標。スタイルRemoveProperty('padding-bottom'); 目標。スタイルRemoveProperty('マージントップ'); 目標。スタイルRemoveProperty('margin-bottom'); 窓。setTimeout( () => { 目標。スタイル削除プロパティ('高さ'); 目標。スタイル削除プロパティ('オーバーフロー'); 目標。スタイルRemoveProperty('transition-duration'); 目標。スタイルRemoveProperty('遷移プロパティ'); }、 間隔）; }、100) } /* トゥーグル */ var slideToggle = (ターゲット、期間 = 500) => { if (ウィンドウ。getComputedStyle(ターゲット)。表示 === 'なし') { 戻り slideDown(ターゲット, 期間); } それ以外 { 戻り slideUp(ターゲット, 期間); } } /* フェード */ var toggleFadeiSense = (elem, show) => { if (表示) { エレム。スタイル表示 = "ブロック"; setTimeout(function(){ エレム。クラスリスト。add('show-isense'); エレム。クラスリスト。削除('非表示センス'); },20) } それ以外 { エレム。クラスリスト。削除('show-isense'); エレム。クラスリスト。add('隠す-isense'); setTimeout(() => { エレム。スタイル表示 = 'なし'; }、400) } } var vcdpaSlideUpAll = function() { slideUp(ドキュメント.querySelector('#form-vcdpa-edit-account-request'), 100); slideUp(ドキュメント.querySelector('#form-vcdpa-data-account-request'), 100); slideUp(ドキュメント.querySelector('#form-vcdpa-personal-data-report-request'), 100); slideUp(ドキュメント.querySelector('#form-vcdpa-do-not-sell-request'), 100); slideUp(ドキュメント.querySelector('#form-vcdpa-delete-account-request'), 100); 書類。querySelector('#vcdpa_page ボタン')。setAttribute("aria-expanded", "false"); }; var email、type、consentGiven = false; var verifyModalContent = ''; var vcdpaSendRequest = 関数(コールバック) { fetch('https://www.クラウドフレア。com/cdn-cgi/trace', { メソッド: 'GET' 、 ヘッダー: { 'Content-Type': 'text/plain', }、 }) 。then(応答 => 応答文章（）） 。then(resp => { if (!それぞれエラー） { ipInfo = resp; とします。 let formData = new FormData(); if (type === '顧客/非販売') { センスGDPR。クッキー。set('cookieconsent_preferences_disabled', '分析、マーケティング、機能、'、{ expires: 365 }); センスGDPR。クッキー。set('cookieconsent_status', 'accept_selected', { expires: 365 }); 窓。ショッピファイ。追跡同意。setTrackingConsent(false,function() { console.log('setTrackingConsent false')}); if (ウィンドウ。ショッピファイ。顧客のプライバシー。userDataCanBeSold()) { 窓。ショッピファイ。顧客のプライバシー。setCCPAConsent(false, () => {}); } if (文書。querySelector('cc-ウィンドウ')) { 書類。querySelector('cc-ウィンドウ')スタイル表示 = 'なし'; } // ポップアップテキストをリセット 書類。querySelector('#vcdpa-modal-container-text')。innerHTML = 'このリクエストを処理する目的で電子メールと IP アドレスを収集することに同意します。 詳細については、プライバシー ポリシーと利用規約をご覧ください。'; } フォームデータ。append('ショップ', Shopify.店）; フォームデータ。append('電子メール', 電子メール); フォームデータ。append('タイプ', タイプ); フォームデータ。append('sourceOfRequest', 5); フォームデータ。append('ipアドレス', ip情報); フォームデータ。append('同意が与えられた', 同意が与えられた); フォームデータ。append('ページ', 'vcdpa'); フォームデータ。append('lang', Shopify.ロケール?ショッピファイ。ロケール: ''); フォームデータ。append('gtranslateLang', isenseGDPR.クッキー。get('googtrans') ?センスGDPR。クッキー。get('googtrans') : ''); fetch('https://gdpr.アプリ。イセンスラボ。com/gdprRequests/submitRequest', { メソッド: 'POST'、 本体: フォームデータ }) 。then(応答 => 応答json()) 。then(resp => { if (!それぞれエラー） { vcdpaSlideUpAll(); if (それぞれメッセージ。長さ） { アラート(それぞれメッセージ）; } それ以外 { alert('リクエストは正常に送信されました。 詳細については、メールをご確認ください。'); } } それ以外 { アラート(それぞれメッセージ）; } if (コールバックの種類 == '関数') { コールバック(それぞれ); } }) 。catch(エラー => { アラート(エラー。メッセージ）; }) } それ以外 { アラート(それぞれメッセージ）; } }) } //ボディにモーダルを追加します。そうしないと（位置が固定されていても）中央に留まらないからです。 書類。querySelector("本体")。insertAdjacentHTML( 'beforeend', verifyModalContent); 書類。addEventListener("DOMContentLoaded", function() { let searchParams = new URLSearchParams(window.位置。検索）; param = searchParams にします。get('id'); if(パラメータ) { 書類。getElementById(パラメータ)。スクロールイントビュー(); } // ユーザーが (x) をクリックすると、モーダルが閉じます 書類。querySelector('データ検証クローズ')。addEventListener('click', function(e) { e.防止デフォルト(); closeVerificationModal(); }); 書類。querySelector('#データ検証アイコン、#データ検証コンテナ p')。addEventListener('click', function(e) { e.防止デフォルト(); // href は上書きされるため、クリックを検出します。if(e.目標タグ名 === "A") { 窓。オープン(e.目標href, '_blank'); 戻る; } 書類。querySelector('#データ検証アイコン')。クラスリスト。add(「クリックされました」); setTimeout(()=>{ toggleFadeiSense(ドキュメント.querySelector("#データ検証モーダル")、false); 書類。querySelector('#データ検証の背景 .読み込み中')。スタイル表示 = 'インラインブロック'; 同意が与えられた = true; vcdpaSendRequest(関数(応答) { 同意が与えられた = false; closeVerificationModal(); }); }, 400); }); }); 関数 openVerificationModal(){ toggleFadeiSense(ドキュメント.querySelector("#data-verification-modal"), true); toggleFadeiSense(ドキュメント.querySelector('#data-verification-background'), true); 書類。querySelector('#データ検証コンテナ入力')。集中（）; } 関数 closeVerificationModal(){ toggleFadeiSense(ドキュメント.querySelector("#データ検証の背景"), false); 書類。querySelector('#データ検証アイコン')。クラスリスト。削除(「クリック」); 書類。querySelector('#データ検証の背景 .読み込み中')。スタイル表示 = 'なし'; // 選択されたリクエスト タイプのボタンにフォーカスします vcdpaForms = ドキュメントにします。querySelectorAll('.フォーム-vcdpa-リクエスト'); vcdpaフォーム。forEach(関数(vcdpaForm) { if (vcdpaForm.スタイル表示 !== "なし") { vcdpaFormLinks = vcdpaForm にします。前の要素兄弟。querySelectorAll('li'); if (vcdpaFormLinks.長さ === 1) { vcdpaFormLinks[0]。querySelector('ボタン')。集中（）; else if (vcdpaFormLinks.長さ > 1) { vcdpaFormPickedLinkValue = ドキュメント。querySelector('#form-vcdpa-data-account-request-request-type')。価値; スイッチ (vcdpaFormPickedLinkValue) { ケース「顧客/リクエスト」: vcdpaFormLinks[0]。querySelector('ボタン')。集中（）; 壊す; ケース「顧客/個人情報」: vcdpaFormLinks[1]。querySelector('ボタン')。集中（）; 壊す; ケース「顧客/注文」: vcdpaFormLinks[2]。querySelector('ボタン')。集中（）; 壊す; デフォルト： 壊す; } } } }); } 書類。querySelector('#btn-vcdpa-edit-account-request')。addEventListener('click', function(e) { e.防止デフォルト(); vcdpaSlideUpAll(); slideDown(ドキュメント.querySelector('#form-vcdpa-edit-account-request'), 200); これ。setAttribute("aria-expanded", "true"); }); 書類。querySelector('#form-vcdpa-edit-account-request-submit')。addEventListener('click', function(e) { e.防止デフォルト(); 電子メール = 文書。querySelector('#form-vcdpa-edit-account-request-email')。価値; type = '顧客/編集'; openVerificationModal(); }); 書類。querySelectorAll('#btn-vcdpa-requests-request, #btn-vcdpa-個人情報-request, #btn-vcdpa-orders-request')。forEach(要素 => { 要素。addEventListener('click', function(e) { e.防止デフォルト(); vcdpaSlideUpAll(); タイプ = ''; // ポップアップメッセージをリセット 書類。querySelector('#vcdpa-modal-container-text')。innerHTML = 'このリクエストを処理する目的で電子メールと IP アドレスを収集することに同意します。 詳細については、プライバシー ポリシーと利用規約をご覧ください。'; スイッチ(これ。getAttribute('id')) { ケース「btn-vcdpa-requests-request」: type = '顧客/リクエスト'; 壊す; ケース「btn-vcdpa-個人情報リクエスト」: type = '顧客/個人情報'; 壊す; ケース「btn-vcdpa-orders-request」: type = '顧客/注文'; 壊す; } 書類。querySelector('#form-vcdpa-data-account-request-request-type')。値 = タイプ; slideDown(ドキュメント.querySelector('#form-vcdpa-data-account-request'), 200); これ。setAttribute("aria-expanded", "true"); }) }); 書類。querySelector('#form-vcdpa-data-account-request-submit')。addEventListener('click', function(e) { e.防止デフォルト(); 電子メール = 文書。querySelector('#form-vcdpa-data-account-request-email')。価値; タイプ = ドキュメント。querySelector('#form-vcdpa-data-account-request-request-type')。価値; openVerificationModal(); }); 書類。querySelector('#btn-vcdpa-個人データレポート要求')。addEventListener('click', function(e) { e.防止デフォルト(); vcdpaSlideUpAll(); slideDown(ドキュメント.querySelector('#form-vcdpa-personal-data-report-request'), 200); これ。setAttribute("aria-expanded", "true"); }); 書類。querySelector('#form-vcdpa-personal-data-report-request-submit')。addEventListener('click', function(e) { e.防止デフォルト(); 電子メール = 文書。querySelector('#form-vcdpa-personal-data-report-request-email')。価値; type = '顧客/レポート'; openVerificationModal(); }); 書類。querySelector('#btn-vcdpa-do-not-sell-request')。addEventListener('click', function(e) { e.防止デフォルト(); vcdpaSlideUpAll(); slideDown(ドキュメント.querySelector('#form-vcdpa-do-not-sell-request'), 200); これ。setAttribute("aria-expanded", "true"); }); 書類。querySelector('#form-vcdpa-do-not-sell-request-submit')。addEventListener('click', function(e) { e.防止デフォルト(); 電子メール = 文書。querySelector('#form-vcdpa-do-not-sell-request-email')。価値; type = '顧客/非販売'; // 顧客がログインしているかどうかを確認する if (__st.cid != 未定義) { 書類。querySelector('#vcdpa-modal-container-text')。innerHTML = 'このリクエストを処理する目的で電子メールと IP アドレスを収集することに同意します。 詳細については、プライバシー ポリシーと利用規約をご覧ください。'; } それ以外 { 書類。querySelector('#vcdpa-modal-container-text')。innerHTML = 'このリクエストを処理する目的で電子メールと IP アドレスを収集することに同意します。 詳細については、プライバシー ポリシーと利用規約をご覧ください。
注: あな​​たがゲスト ユーザーであるか、アカウントにログインしていない場合、オプトアウトの選択はこのブラウザ セッションに対してのみ有効です。'; } openVerificationModal(); }); 書類。querySelector('#btn-vcdpa-削除アカウント要求')。addEventListener('click', function(e) { e.防止デフォルト(); vcdpaSlideUpAll(); slideDown(ドキュメント.querySelector('#form-vcdpa-delete-account-request'), 200); これ。setAttribute("aria-expanded", "true"); }); 書類。querySelector('#form-vcdpa-delete-account-request-submit')。addEventListener('click', function(e) { e.防止デフォルト(); 電子メール = 文書。querySelector('#form-vcdpa-delete-account-request-email')。価値; type = '顧客/削除'; openVerificationModal(); }); // コンプライアンス ページのリクエストのキーボード ナビゲーション 書類。querySelector('#vcdpa_page')。addEventListener('keydown', function(e) { isTabPressed = e にします。キーコード === 9 || e.キー === "タブ" || e.コード === "タブ"; // この関数により、e を呼び出す手間が省けます。フォーカスするたびに、preventDefault() letexecuteFocus = (focusElement) => {focusElement.focus();e.preventDefault();} if (isTabPressed) { vcdpaFormPickedLinkValue = ドキュメントにします。querySelector('#form-vcdpa-data-account-request-request-type')。価値; vcdpaRequestsButton = ドキュメントにします。querySelector('#btn-vcdpa-requests-request'); PersonalInformationButton = document とします。querySelector('#btn-vcdpa-個人情報リクエスト'); 注文ボタン = ドキュメントとします。querySelector('#btn-vcdpa-orders-request'); PersonalDataReportButton = document にします。querySelector('#btn-vcdpa-個人データレポート要求'); dataAccountFormEmailField = document にします。querySelector('#form-vcdpa-data-account-request-email'); dataAccountFormSubmitButton = document にします。querySelector('#form-vcdpa-data-account-request-submit'); もし(e.シフトキー） { if ((ドキュメント。activeElement === PersonalInformationButton && vcdpaFormPickedLinkValue === '顧客/リクエスト') || （書類。activeElement ===ordersButton && vcdpaFormPickedLinkValue === 'customer/personal_info')) { executeFocus(dataAccountFormSubmitButton); } else if (ドキュメント.activeElement === dataAccountFormEmailField) { if (vcdpaFormPickedLinkValue === '顧客/リクエスト') { executeFocus(vcdpaRequestsButton); } else if (vcdpaFormPickedLinkValue === 'customer/personal_info') { executeFocus(個人情報ボタン); } } else if (ドキュメント.activeElement === PersonalDataReportButton) { if (vcdpaFormPickedLinkValue !== '顧客/注文') { executeFocus(ordersButton); } } } それ以外 { if ((ドキュメント。activeElement === vcdpaRequestsButton && vcdpaFormPickedLinkValue === '顧客/リクエスト') || （書類。activeElement === PersonalInformationButton && vcdpaFormPickedLinkValue === 'customer/personal_info')) { executeFocus(dataAccountFormEmailField); } else if (ドキュメント.activeElement === dataAccountFormSubmitButton) { if (vcdpaFormPickedLinkValue === '顧客/リクエスト') { executeFocus(個人情報ボタン); } else if (vcdpaFormPickedLinkValue === 'customer/personal_info') { executeFocus(ordersButton); } } else if (ドキュメント.activeElement === 注文ボタン) { if (vcdpaFormPickedLinkValue !== '顧客/注文') { executeFocus(personalDataReportButton); } } } } }); // アクセシビリティのためのデータ検証モーダルのキーボード ナビゲーション 書類。querySelector('#データ検証モーダル')。addEventListener('keydown', function(e) { isTabPressed = e にします。キーコード === 9 || e.キー === "タブ" || e.コード === "タブ"; EscapePressed = e にしましょう。キーコード === 27 || e.キー === "エスケープ" || e.コード === "エスケープ"; SpacePressed = イベントにしましょう。キーコード === 32 || e.キー === " " ||イベント。コード === "スペース"; EnterPressed = イベントにしましょう。キーコード === 13 || e.キー === "Enter" ||イベント。コード === "入力"; dataVerificationCloseButton = document とします。querySelector('データ検証クローズ'); dataVerificationCheckbox = document とします。querySelector('#データ検証コンテナ入力'); dataVerificationLink = document とします。querySelector('#データ検証コンテナa'); // この関数により、e を呼び出す手間が省けます。フォーカスするたびに、preventDefault() letexecuteFocus = (focusElement) => {focusElement.focus();e.preventDefault();} if (isEscapePressed) { if (dataVerificationCloseButton) { データ検証閉じるボタン。クリック（）; } } if (スペースが押された || は Enter が押された) { of (document.activeElement === dataVerificationCheckbox) { 書類。querySelector('#データ検証コンテナ #データ検証アイコン')。クリック（）; } } if (isTabPressed) { もし(e.シフトキー） { if (dataVerificationCloseButton && document.activeElement === dataVerificationCloseButton) { 実行フォーカス(dataVerificationLink); } } それ以外 { if (dataVerificationLink && document.activeElement === dataVerificationLink) { executeFocus(dataVerificationCloseButton); } } } });