APPI コンプライアンス
<スタイル>
#form-appi-edit-account-request,
#フォームアプリデータアカウントリクエスト、
#form-appi-personal-data-report-request,
#form-appi-delete-account-request 、
#form-appi-do-not-sell-request {
表示: なし。
}
#appi_page ボタン {
背景色: 透明;
境界線: 0;
border-bottom: 1 ピクセルの黒一色。
パディング: 0px;
}
/* モーダル背景 */
#データ検証の背景 {
表示: なし。
位置: 固定;
z インデックス: 1;
パディングトップ: calc(50vh - 83px);
左: 0;
トップ: 0;
幅: 100%;
高さ: 100%;
オーバーフロー: 自動;
背景色: rgb(0,0,0);
背景色: rgba(0,0,0,0.4);
不透明度: 設定解除;
z インデックス: 9999;
}
/* モーダルコンテンツ */
#データ検証モーダル {
背景色: #fefefe;
マージン: 自動;
パディング: 16px;
ボーダー: 1px ソリッド #888;
幅: 38%;
}
/* モーダル閉じるボタン */
.data-verification-close {
色: #aaaaaa;
フロート: 右;
フォントサイズ: 28px;
フォントの太さ: 太字;
行の高さ: 17px;
}
.data-verification-close:hover、
.data-verification-close:focus {
色: #000;
テキスト装飾: なし。
カーソル: ポインタ;
}
/* チェックボックスのテキスト */
#データ検証コンテナp{
表示: インラインブロック;
パディング: 0;
マージン: 0;
行の高さ: 24px;
パディング左: 10px;
垂直配置: 上;
幅: calc(100% - 45px);
}
#data-verification-container a, #data-verification-container a:hover{
テキスト装飾: 下線!重要;
色: #4285f4;
}
/* チェックボックス アイコン */
#データ検証アイコン {
カーソル: ポインタ;
位置: 相対的;
マージン: 自動;
幅: 18px;
高さ: 18px;
-webkit-tap-highlight-color: 透明;
変換:translate3d(0, 0, 0);
マージントップ: 2px;
}
#データ検証アイコン:前 {
コンテンツ: "";
位置: 絶対;
上: -7px;
左: -7px;
幅: 32ピクセル;
高さ: 32ピクセル;
境界半径: 50%;
背景: rgba(34,50,84,0.03);
不透明度: 0;
トランジション: 不透明度 0.2 秒の緩和。
}
#データ検証アイコン svg {
位置: 相対的;
z インデックス: 1;
塗りつぶし: なし。
ストロークラインキャップ: 丸;
ストロークライン結合: 丸;
ストローク: #c8ccd4;
ストローク幅: 1.5;
変換:translate3d(0, 0, 0);
トランジション: すべて 0.2 秒の緩和。
}
#data-verification-icon svg パス {
ストローク-ダシャーレー: 60;
ストロークダッシュオフセット: 0;
}
#data-verification-icon svg ポリライン {
ストローク-ダシャーレー: 22;
ストローク-ダッシュオフセット: 66;
}
#データ検証アイコン:ホバー:前 {
不透明度: 1;
}
#データ検証コンテナ:ホバー #データ検証アイコン svg {
ストローク: #4285f4;
}
#data-verification-icon.clicked svg {
ストローク: #4285f4;
}
#data-verification-icon.clicked SVG パス {
ストローク-ダッシュオフセット: 60;
トランジション: すべて 0.3 秒の直線的。
}
#data-verification-icon.clicked SVG ポリライン {
ストロークダッシュオフセット: 42;
トランジション: すべて 0.2 秒の直線的。
遷移遅延: 0.15 秒;
}
#appi_page .list-unstyled li ボタン {
カーソル: ポインタ;
}
.show-isense {
トランジション: 不透明度 400ms !重要;
}
.hide-isense {
不透明度: 0 !重要;
トランジション: 0.4 秒のイーズアウト。
}
/* モバイル解像度でのモーダル変更*/
@media のみの画面と (最大幅: 600px) {
#データ検証モーダル {
幅: 90%;
}
}
/* 要素の読み込み */
.loading {
表示: なし。
トップ:50vh;
左:50vw;
位置:固定;
}
.loading:not(:required):after {
コンテンツ: '';
表示: ブロック;
フォントサイズ: 10px;
幅: 1em;
高さ: 1em;
マージントップ: -0.5em;
-webkit-animation: スピナー 1500ms 無限リニア;
-moz-animation: スピナー 1500ms 無限リニア;
-ms-animation: スピナー 1500ms 無限リニア;
-o-アニメーション: スピナー 1500ms 無限リニア;
アニメーション: スピナー 1500 ミリ秒の無限リニア。
境界半径: 0.5em;
-webkit-box-shadow: rgba(255,255,255, 1) 1.5em 0 0 0, rgba(255,255,255, 1) 1.1em 1.1em 0 0, rgba(255,255,255, 1) 0 1.5em 0 0, rgba(255,255,255, 1) ) -1.1em 1.1em 0 0、rgba(255,255,255, 1) -1.5em 0 0 0、rgba(255,255,255, 1) -1.1em -1.1em 0 0、rgba(255,255,255, 1) 0 -1.5em 0 0、rgba (255,255,255, 1) 1.1em -1.1em 0 0;
ボックスシャドウ: rgba(255,255,255, 1) 1.5em 0 0 0, rgba(255,255,255, 1) 1.1em 1.1em 0 0, rgba(255,255,255, 1) 0 1.5em 0 0, rgba(255,255,255, 1)えっと1.1em 0 0、rgba(255,255,255, 1) -1.5em 0 0 0、rgba(255,255,255, 1) -1.1em -1.1em 0 0、rgba(255,255,255, 1) 0 -1.5em 0 0、rgba(255,255,255, 1) 1.1em -1.1em 0 0;
}
/* アニメーション */
@-webkit-keyframes スピナー {
0% {
-webkit-transform: 回転(0度);
-moz-transform: 回転(0度);
-ms-transform: 回転(0度);
-o-transform: 回転(0度);
変換: 回転(0度);
}
100% {
-webkit-transform: 回転(360度);
-moz-transform: 回転(360度);
-ms-transform: 回転(360度);
-o-transform: 回転(360度);
変換: 回転(360度);
}
}
@-moz-keyframes スピナー {
0% {
-webkit-transform: 回転(0度);
-moz-transform: 回転(0度);
-ms-transform: 回転(0度);
-o-transform: 回転(0度);
変換: 回転(0度);
}
100% {
-webkit-transform: 回転(360度);
-moz-transform: 回転(360度);
-ms-transform: 回転(360度);
-o-transform: 回転(360度);
変換: 回転(360度);
}
}
@-o-keyframes スピナー {
0% {
-webkit-transform: 回転(0度);
-moz-transform: 回転(0度);
-ms-transform: 回転(0度);
-o-transform: 回転(0度);
変換: 回転(0度);
}
100% {
-webkit-transform: 回転(360度);
-moz-transform: 回転(360度);
-ms-transform: 回転(360度);
-o-transform: 回転(360度);
変換: 回転(360度);
}
}
@キーフレームスピナー{
0% {
-webkit-transform: 回転(0度);
-moz-transform: 回転(0度);
-ms-transform: 回転(0度);
-o-transform: 回転(0度);
変換: 回転(0度);
}
100% {
-webkit-transform: 回転(360度);
-moz-transform: 回転(360度);
-ms-transform: 回転(360度);
-o-transform: 回転(360度);
変換: 回転(360度);
}
}
スタイル>
<スクリプト>
/* スライドアップ */
let slideUp = (ターゲット、期間 = 500) => {
target.style.transitionProperty = '高さ、マージン、パディング';
target.style.transitionDuration = 期間 + 'ms';
target.style.boxSizing = 'ボーダーボックス';
target.style.height = target.offsetHeight + 'px';
ターゲットのオフセット高さ;
target.style.overflow = '非表示';
target.style.height = 0;
target.style.paddingTop = 0;
target.style.paddingBottom = 0;
target.style.marginTop = 0;
target.style.marginBottom = 0;
window.setTimeout( () => {
target.style.display = 'なし';
target.style.removeProperty('高さ');
target.style.removeProperty('padding-top');
target.style.removeProperty('padding-bottom');
target.style.removeProperty('margin-top');
target.style.removeProperty('margin-bottom');
target.style.removeProperty('オーバーフロー');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
}、 間隔);
}
/* スライドダウン */
let slideDown = (ターゲット、期間=500) => {
setTimeout(function(){
target.style.removeProperty('display');
let display = window.getComputedStyle(target).display;
if (display === 'none') display = 'block';
target.style.display = ディスプレイ;
高さを = target.offsetHeight; にします。
target.style.overflow = '非表示';
target.style.height = 0;
target.style.paddingTop = 0;
target.style.paddingBottom = 0;
target.style.marginTop = 0;
target.style.marginBottom = 0;
ターゲットのオフセット高さ;
target.style.boxSizing = 'ボーダーボックス';
target.style.transitionProperty = "高さ、マージン、パディング";
target.style.transitionDuration = 期間 + 'ms';
target.style.height = 高さ + 'px';
target.style.removeProperty('padding-top');
target.style.removeProperty('padding-bottom');
target.style.removeProperty('margin-top');
target.style.removeProperty('margin-bottom');
window.setTimeout( () => {
target.style.removeProperty('高さ');
target.style.removeProperty('オーバーフロー');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
}、 間隔);
}、100)
}
/* トゥーグル */
var slideToggle = (ターゲット、期間 = 500) => {
if (window.getComputedStyle(target).display === 'none') {
戻り slideDown(ターゲット, 期間);
} それ以外 {
return slideUp(ターゲット, 期間);
}
}
/* フェード */
var toggleFadeiSense = (elem, show) => {
if (表示) {
elem.style.display = "ブロック";
setTimeout(function(){
elem.classList.add('show-isense');
elem.classList.remove('hide-isense');
},20)
} それ以外 {
elem.classList.remove('show-isense');
elem.classList.add('隠す-isense');
setTimeout(() => {
elem.style.display = 'なし';
}、400)
}
}
var appiSlideUpAll = function() {
slideUp(document.querySelector('#form-appi-edit-account-request'), 100);
slideUp(document.querySelector('#form-appi-data-account-request'), 100);
slideUp(document.querySelector('#form-appi-personal-data-report-request'), 100);
slideUp(document.querySelector('#form-appi-do-not-sell-request'), 100);
slideUp(document.querySelector('#form-appi-delete-account-request'), 100);
document.querySelector('#appi_page button').setAttribute("aria-expanded", "false");
};
var email、type、consentGiven = false;
var verifyModalContent = '
このサイトの GDPR/CCPA/APPI/PIPEDA 準拠を保証するために使用されるアプリは、データを処理するために IP と電子メール アドレスを収集します。詳細については、 プライバシー ポリシーとプライバシー ポリシーをご覧ください。利用規約
データの修正
アカウント データが正確でない場合は、以下のリンクを使用してアカウント データを更新できます。
<フォーム>
データのポータビリティ
以下のリンクを使用して、ストアでのエクスペリエンスを向上させるために保存および使用されるすべてのデータをダウンロードできます。
<フォーム>
個人データへのアクセス
以下のリンクを使用して、当社が保存するすべての個人情報を含むレポートをリクエストできます。
<フォーム>
私の個人情報を第三者に販売しないでください
お客様は、ご自身の個人情報が収集または第三者に販売されることに同意しないことを当社に知らせるリクエストを送信できます。
<フォーム>
忘れられる権利
個人データやその他のデータをストアから削除したい場合は、このオプションを使用してください。 このプロセスによりアカウントが削除されるため、アクセスしたり使用したりできなくなることに注意してください。
<フォーム>
×< /div>
';
var appiSendRequest = 関数(コールバック) {
fetch('https://www.cloudflare.com/cdn-cgi/trace', {
メソッド: 'GET' 、
ヘッダー: {
'Content-Type': 'text/plain',
}、
})
.then(resp => resp.text())
.then(応答 => {
if (!resp.error) {
ipInfo = resp; とします。
let formData = new FormData();
if (type === '顧客/非販売') {
isenseGDPR.Cookies.set('cookieconsent_preferences_disabled', 'analytics,marketing,functionity,', { 有効期限: 365 });
isenseGDPR.Cookies.set('cookieconsent_status', 'accept_selected', { 有効期限: 365 });
window.Shopify.trackingConsent.setTrackingConsent(false,function() { console.log('setTrackingConsent false')});
if (document.querySelector('.cc-window')) {
document.querySelector('.cc-window').style.display = 'none';
}
// ポップアップテキストをリセット
document.querySelector('#appi-modal-container-text').innerHTML = 'このリクエストを処理する目的で電子メールと IP アドレスを収集することに同意します。詳細については、プライバシー ポリシーと利用規約をご覧ください。';
}
formData.append('ショップ', Shopify.shop);
formData.append('電子メール', 電子メール);
formData.append('タイプ', タイプ);
formData.append('sourceOfRequest', 3);
formData.append('ipAddress', ipInfo);
formData.append('同意が与えられた', 同意が与えられた);
formData.append('ページ', 'アプリ');
formData.append('lang', Shopify.locale ? Shopify.locale : '');
formData.append('gtranslateLang', isenseGDPR.Cookies.get('googtrans') ? isenseGDPR.Cookies.get('googtrans') : '');
fetch('https://gdpr.apps.isenselabs.com/gdprRequests/submitRequest', {
メソッド: 'POST'、
本体: フォームデータ
})
.then(resp => resp.json())
.then(応答 => {
if (!resp.error) {
appiSlideUpAll();
if (resp.message.length) {
アラート(それぞれメッセージ);
} それ以外 {
alert('リクエストは正常に送信されました。詳細については、メールを確認してください。');
}
} それ以外 {
アラート(それぞれメッセージ);
}
if (コールバックの種類 == '関数') {
コールバック(それぞれ);
}
})
.catch(エラー => {
アラート(エラー.メッセージ);
})
}
それ以外 {
アラート(それぞれメッセージ);
}
})
}
//ボディにモーダルを追加します。そうしないと(位置が固定されていても)中央に留まらないからです。
document.querySelector("body").insertAdjacentHTML( 'beforeend', verifyModalContent);
document.addEventListener("DOMContentLoaded", function() {
let searchParams = 新しい URLSearchParams(window.location.search);
let param = searchParams.get('id');
if(パラメータ) {
document.getElementById(param).scrollIntoView();
}
// ユーザーが (x) をクリックすると、モーダルが閉じます
document.querySelector('.data-verification-close').addEventListener('click', function(e) {
e.preventDefault();
closeVerificationModal();
});
document.querySelector('#データ検証アイコン, #データ検証コンテナ p').addEventListener('クリック', function(e) {
e.preventDefault();
// href は上書きされるため、クリックを検出します。
if(e.target.tagName === "A") {
window.open(e.target.href, '_blank');
戻る;
}
document.querySelector('#データ検証アイコン').classList.add("クリックされました");
setTimeout(()=>{
toggleFadeiSense(document.querySelector("#data-verification-modal"), false);
document.querySelector('#data-verification-background .loading').style.display = 'inline-block';
同意が与えられた = true;
appiSendRequest(関数(応答) {
同意が与えられた = false;
closeVerificationModal();
});
}, 400);
});
});
関数 openVerificationModal(){
toggleFadeiSense(document.querySelector("#data-verification-modal"), true);
toggleFadeiSense(document.querySelector('#data-verification-background'), true);
}
関数 closeVerificationModal(){
toggleFadeiSense(document.querySelector("#data-verification-background"), false);
document.querySelector('#データ検証アイコン').classList.remove("クリックされました");
document.querySelector('#data-verification-background .loading').style.display = 'none';
}
document.querySelector('#btn-appi-edit-account-request').addEventListener('click', function(e) {
e.preventDefault();
appiSlideUpAll();
slideDown(document.querySelector('#form-appi-edit-account-request'), 200);
this.setAttribute("aria-expanded", "true");
});
document.querySelector('#form-appi-edit-account-request-submit').addEventListener('click', function(e) {
e.preventDefault();
email = document.querySelector('#form-appi-edit-account-request-email').value;
type = '顧客/編集';
openVerificationModal();
});
document.querySelectorAll('#btn-appi-requests-request, #btn-appi-個人情報-request, #btn-appi-orders-request').forEach(element => {
element.addEventListener('click', function(e) {
e.preventDefault();
appiSlideUpAll();
タイプ = '';
// ポップアップメッセージをリセット
document.querySelector('#appi-modal-container-text').innerHTML = 'このリクエストを処理する目的で電子メールと IP アドレスを収集することに同意します。詳細については、プライバシー ポリシーと利用規約をご覧ください。';
switch(this.getAttribute('id')) {
ケース「btn-appi-requests-request」:
type = '顧客/リクエスト';
壊す;
case 'btn-appi-個人情報リクエスト':
type = '顧客/個人情報';
壊す;
ケース「btn-appi-orders-request」:
type = '顧客/注文';
壊す;
}
document.querySelector('#form-appi-data-account-request-request-type').value = type;
slideDown(document.querySelector('#form-appi-data-account-request'), 200);
this.setAttribute("aria-expanded", "true");
})
});
document.querySelector('#form-appi-data-account-request-submit').addEventListener('click', function(e) {
e.preventDefault();
email = document.querySelector('#form-appi-data-account-request-email').value;
type = document.querySelector('#form-appi-data-account-request-request-type').value;
openVerificationModal();
});
document.querySelector('#btn-appi-個人データレポート要求').addEventListener('click', function(e) {
e.preventDefault();
appiSlideUpAll();
slideDown(document.querySelector('#form-appi-personal-data-report-request'), 200);
this.setAttribute("aria-expanded", "true");
});
document.querySelector('#form-appi-personal-data-report-request-submit').addEventListener('click', function(e) {
e.preventDefault();
email = document.querySelector('#form-appi-personal-data-report-request-email').value;
type = '顧客/レポート';
openVerificationModal();
});
document.querySelector('#btn-appi-do-not-sell-request').addEventListener('click', function(e) {
e.preventDefault();
appiSlideUpAll();
slideDown(document.querySelector('#form-appi-do-not-sell-request'), 200);
this.setAttribute("aria-expanded", "true");
});
document.querySelector('#form-appi-do-not-sell-request-submit').addEventListener('click', function(e) {
e.preventDefault();
email = document.querySelector('#form-appi-do-not-sell-request-email').value;
type = '顧客/非販売';
// 顧客がログインしているかどうかを確認する
if (__st.cid != 未定義) {
document.querySelector('#appi-modal-container-text').innerHTML = 'このリクエストを処理する目的で電子メールと IP アドレスを収集することに同意します。詳細については、プライバシー ポリシーと利用規約をご覧ください。';
} それ以外 {
document.querySelector('#appi-modal-container-text').innerHTML = 'このリクエストを処理する目的で電子メールと IP アドレスを収集することに同意します。詳細については、プライバシー ポリシーと利用規約をご覧ください。 注: あなたがゲスト ユーザーであるか、アカウントにログインしていない場合、オプトアウトの選択はこのブラウザ セッションに対してのみ有効です。';
}
openVerificationModal();
});
document.querySelector('#btn-appi-delete-account-request').addEventListener('click', function(e) {
e.preventDefault();
appiSlideUpAll();
slideDown(document.querySelector('#form-appi-delete-account-request'), 200);
this.setAttribute("aria-expanded", "true");
});
document.querySelector('#form-appi-delete-account-request-submit').addEventListener('click', function(e) {
e.preventDefault();
email = document.querySelector('#form-appi-delete-account-request-email').value;
type = '顧客/削除';
openVerificationModal();
});
このリクエストを処理する目的で電子メールと IP アドレスを収集することに同意します。詳細については、プライバシー ポリシーと利用規約をご覧ください。
- 選択結果を選ぶと、ページが全面的に更新されます。
- 新しいウィンドウで開きます。