Соответствие APPI
<стиль>
#form-appi-edit-account-request,
#form-appi-data-account-request,
#form-appi-personal-data-report-request,
#form-appi-delete-account-request ,
#form-appi-do-not-sell-request {
дисплей: нет;
}
Кнопка #appi_page {
цвет фона: прозрачный;
граница: 0;
нижняя граница: 1 пиксель, сплошной черный;
отступ: 0 пикселей;
}
/* Модальный фон */
#data-verification-background {
дисплей: нет;
положение: фиксированное;
z-индекс: 1;
отступ-верх: Calc(50vh - 83px);
слева: 0;
верх: 0;
ширина: 100%;
высота: 100%;
переполнение: авто;
цвет фона: RGB (0,0,0);
цвет фона: rgba(0,0,0,0.4);
непрозрачность: не установлена;
z-индекс: 9999;
}
/* Модальное содержимое */
#data-verification-modal {
цвет фона: #fefefe;
маржа: авто;
отступ: 16 пикселей;
граница: 1 пиксель, сплошная #888;
ширина: 38%;
}
/* Модальная кнопка закрытия */
.data-verification-close {
цвет: #аааааа;
плавать: вправо;
размер шрифта: 28 пикселей;
начертание шрифта: жирный;
высота строки: 17 пикселей;
}
.data-verification-close:hover,
.data-verification-close:focus {
цвет: #000;
текстовое оформление: нет;
курсор: указатель;
}
/* Текст флажка */
#data-verification-container p{
отображение: встроенный блок;
заполнение: 0;
маржа: 0;
высота строки: 24 пикселей;
отступ слева: 10 пикселей;
вертикальное выравнивание: сверху;
ширина: расчет (100 % – 45 пикселей);
}
#data-verification-container a, #data-verification-container a:hover{
оформление текста: подчеркнуть! важно;
цвет: #4285f4;
}
/* Значок флажка */
#data-verification-icon {
курсор: указатель;
положение: относительное;
маржа: авто;
ширина: 18 пикселей;
высота: 18 пикселей;
-webkit-tap-highlight-color: прозрачный;
трансформировать: Translate3d (0, 0, 0);
поле сверху: 2 пикселя;
}
#data-verification-icon:before {
содержание: "";
позиция: абсолютная;
верх: -7 пикселей;
слева: -7 пикселей;
ширина: 32 пикселей;
высота: 32 пикселей;
радиус границы: 50%;
фон: rgba(34,50,84,0.03);
непрозрачность: 0;
переход: непрозрачность 0,2 с, легкость;
}
#data-verification-icon svg {
положение: относительное;
z-индекс: 1;
заливка: нет;
штрих-линейная крышка: круглая;
соединение штрих-линии: круглый;
штрих: #c8ccd4;
ширина штриха: 1,5;
трансформировать: Translate3d (0, 0, 0);
переход: все 0,2 секунды легкости;
}
#data-verification-icon путь SVG {
удар-дашаррай: 60;
штрих-дашоффсет: 0;
}
#data-verification-icon svg ломаная {
удар-дашаррай: 22;
смещение штриха-тире: 66;
}
#data-verification-icon:hover:before {
непрозрачность: 1;
}
#data-verification-container:hover #data-verification-icon 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 button {
курсор: указатель;
}
.show-isense {
переход: непрозрачность 400 мс !важно;
}
.hide-isense {
непрозрачность: 0 !важно;
переход: замедление 0,4 с;
}
/* Модальные изменения мобильного разрешения*/
Только экран @media и (максимальная ширина: 600 пикселей) {
#data-verification-modal {
ширина: 90%;
}
}
/* Загрузка элемента */
.загрузка {
дисплей: нет;
верх: 50вх;
слева: 50vw;
положение: фиксированное;
}
.loading:not(:required):после {
содержание: '';
дисплей: блок;
размер шрифта: 10 пикселей;
ширина: 1эм;
высота: 1ем;
маржа-верх: -0,5em;
-webkit-animation: спиннер 1500 мс, бесконечный линейный;
-moz-анимация: спиннер 1500 мс, бесконечная линейная;
-ms-анимация: спиннер 1500 мс, бесконечная линейная;
-o-анимация: спиннер 1500 мс, бесконечная линейная;
анимация: спиннер 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;
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 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,1эм-1,1ем 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 градусов);
}
}
@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 градусов);
}
}
<скрипт>
/* СЛАЙД ВВЕРХ */
letlideUp = (цель, длительность=500) => {
target.style.transitionProperty = 'высота, поле, отступ';
target.style.transitionDuration = продолжительность + 'мс';
target.style.boxSizing = 'border-box';
target.style.height = target.offsetHeight + 'px';
цель.offsetHeight;
target.style.overflow = 'скрытый';
цель.стиль.высота = 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('маржа-дно');
target.style.removeProperty('переполнение');
target.style.removeProperty('продолжительность перехода');
target.style.removeProperty('переходное свойство');
}, продолжительность);
}
/* СЛАЙЗ ВНИЗ */
пусть слайдДаун = (цель, продолжительность = 500) => {
setTimeout(функция(){
target.style.removeProperty('display');
пусть display = window.getComputedStyle(target).display;
if (display === 'none') display = 'block';
target.style.display = отображение;
пусть высота = target.offsetHeight;
target.style.overflow = 'скрытый';
цель.стиль.высота = 0;
target.style.paddingTop = 0;
target.style.paddingBottom = 0;
target.style.marginTop = 0;
target.style.marginBottom = 0;
цель.offsetHeight;
target.style.boxSizing = 'border-box';
target.style.transitionProperty = "высота, поле, отступ";
target.style.transitionDuration = продолжительность + 'мс';
target.style.height = высота + 'px';
target.style.removeProperty('padding-top');
target.style.removeProperty('padding-bottom');
target.style.removeProperty('margin-top');
target.style.removeProperty('маржа-дно');
window.setTimeout( () => {
target.style.removeProperty('высота');
target.style.removeProperty('переполнение');
target.style.removeProperty('продолжительность перехода');
target.style.removeProperty('переходное свойство');
}, продолжительность);
}, 100)
}
/* ТУГЛ */
var слайдToggle = (цель, продолжительность = 500) => {
if (window.getComputedStyle(target).display === 'none') {
вернуть слайдDown(цель, продолжительность);
} еще {
вернуть слайдВверх (цель, продолжительность);
}
}
/* ТУСКНЕТЬ */
var toggleFadeiSense = (elem, show) => {
если (показать) {
elem.style.display = "блокировать";
setTimeout(функция(){
elem.classList.add('show-isense');
elem.classList.remove('hide-isense');
},20)
} еще {
elem.classList.remove('show-isense');
elem.classList.add('hide-isense');
setTimeout(() => {
elem.style.display = 'нет';
}, 400)
}
}
вар appiSlideUpAll = функция() {
слайдUp(document.querySelector('#form-appi-edit-account-request'), 100);
слайдUp(document.querySelector('#form-appi-data-account-request'), 100);
слайдUp(document.querySelector('#form-appi-personal-data-report-request'), 100);
слайдUp(document.querySelector('#form-appi-do-not-sell-request'), 100);
слайдUp(document.querySelector('#form-appi-delete-account-request'), 100);
document.querySelector('#appi_page button').setAttribute("aria-expanded", "false");
};
вар электронная почта, тип, согласиегивен = ложь;
varverificationModalContent = '
Приложение, используемое для обеспечения соответствия этого сайта GDPR/CCPA/APPI/PIPEDA, собирает ваш IP-адрес и адрес электронной почты для обработки данных. Дополнительную информацию см. в Политике конфиденциальности и amp; Условия использования
Исправление данных
Вы можете использовать ссылку ниже, чтобы обновить данные своей учетной записи, если они неточны.
<форма>
Переносимость данных
Вы можете использовать ссылки ниже, чтобы загрузить все данные, которые мы храним и используем, для повышения удобства работы в нашем магазине.
<форма>
Доступ к персональным данным
Вы можете использовать ссылку ниже, чтобы запросить отчет, который будет содержать всю личную информацию, которую мы храним для вас.
<форма>
Не продавать мою личную информацию третьим лицам
Вы можете отправить нам запрос и сообщить, что вы не согласны на сбор или продажу вашей личной информации третьей стороне.
<форма>
Право на забвение
Используйте эту опцию, если хотите удалить свои личные и другие данные из нашего магазина. Имейте в виду, что этот процесс приведет к удалению вашей учетной записи, и вы больше не сможете получить к ней доступ или использовать.
<форма>
×< /div>
';
вар appiSendRequest = функция (обратный вызов) {
fetch('https://www.cloudflare.com/cdn-cgi/trace', {
метод: 'GET',
заголовки: {
«Тип контента»: «текст/обычный»,
},
})
.then(соответственно => соотв.текст())
.then(соответственно => {
если (!resp.error) {
пусть ipInfo = соответственно;
пусть formData = новый FormData();
if (type === 'клиент/не продавать') {
isenseGDPR.Cookies.set('cookieconsent_preferences_disabled', 'аналитика,маркетинг,функциональность,', { expires: 365 });
isenseGDPR.Cookies.set('cookieconsent_status', 'accept_selected', { expires: 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('consentGiven', согласиеGiven);
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',
тело: formData
})
.then(соответственно => соотв.json())
.then(соответственно => {
если (!resp.error) {
приложениеSlideUpAll();
если (соответственно.message.length) {
оповещение (соответственно.сообщение);
} еще {
alert('Ваш запрос успешно отправлен. Пожалуйста, проверьте свою электронную почту для получения дополнительной информации.');
}
} еще {
оповещение (соответственно.сообщение);
}
if (обратный вызов typeof == 'function') {
обратный вызов (соответственно);
}
})
.catch(ошибка => {
предупреждение (ошибка.сообщение);
})
}
еще {
оповещение (соответственно.сообщение);
}
})
}
//Добавляем модальное окно к телу, иначе оно не будет оставаться по центру (даже если позиция фиксирована)
document.querySelector("body").insertAdjacentHTML('beforeend', VerificationModalContent);
document.addEventListener("DOMContentLoaded", function() {
пусть searchParams = новый URLSearchParams(window.location.search);
пусть параметр = searchParams.get('id');
если (параметр) {
document.getElementById(param).scrollIntoView();
}
// Когда пользователь нажимает (x), закрываем модальное окно
document.querySelector('.data-verification-close').addEventListener('click', function(e) {
е.preventDefault();
закрытьVerificationModal();
});
document.querySelector('#data-verification-icon, #data-verification-container p').addEventListener('click', function(e) {
е.preventDefault();
// Обнаруживаем щелчок по ссылке, поскольку она перезаписана.
if(e.target.tagName === "A") {
window.open(e.target.href, '_blank');
возвращаться;
}
document.querySelector('#data-verification-icon').classList.add("нажат");
setTimeout(()=>{
toggleFadeiSense(document.querySelector("#data-verification-modal"), false);
document.querySelector('#data-verification-background .loading').style.display = 'inline-block';
согласиегивен = правда;
appiSendRequest(функция(соответственно) {
согласиегивен = ложь;
закрытьVerificationModal();
});
}, 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('#data-verification-icon').classList.remove("нажат");
document.querySelector('#data-verification-background .loading').style.display = 'none';
}
document.querySelector('#btn-appi-edit-account-request').addEventListener('click', function(e) {
е.preventDefault();
приложениеSlideUpAll();
слайдDown(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) {
е.preventDefault();
электронная почта = document.querySelector('#form-appi-edit-account-request-email').value;
тип = 'клиент/редактировать';
openVerificationModal();
});
document.querySelectorAll('#btn-appi-requests-request, #btn-appi-personal-information-request, #btn-appi-orders-request').forEach(element => {
element.addEventListener('click', function(e) {
е.preventDefault();
приложениеSlideUpAll();
тип = '';
// Сброс всплывающего сообщения
document.querySelector('#appi-modal-container-text').innerHTML = 'Я даю свое согласие на сбор моего адреса электронной почты и IP-адреса с целью обработки этого запроса. Дополнительную информацию см. в Политике конфиденциальности и Условиях использования.';
переключатель(this.getAttribute('id')) {
случай «btn-appi-requests-request»:
тип = 'клиент/запросы';
перерыв;
случай 'btn-appi-запрос-личной-информации':
тип = 'клиент/personal_info';
перерыв;
случай «btn-appi-orders-request»:
тип = 'клиент/заказы';
перерыв;
}
document.querySelector('#form-appi-data-account-request-request-type').value = type;
слайдDown(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) {
е.preventDefault();
электронная почта = 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-personal-data-report-request').addEventListener('click', function(e) {
е.preventDefault();
приложениеSlideUpAll();
слайдDown(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) {
е.preventDefault();
электронная почта = document.querySelector('#form-appi-personal-data-report-request-email').value;
тип = 'клиент/отчет';
openVerificationModal();
});
document.querySelector('#btn-appi-do-not-sell-request').addEventListener('click', function(e) {
е.preventDefault();
приложениеSlideUpAll();
слайдDown(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) {
е.preventDefault();
электронная почта = 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) {
е.preventDefault();
приложениеSlideUpAll();
слайдDown(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) {
е.preventDefault();
электронная почта = document.querySelector('#form-appi-delete-account-request-email').value;
тип = 'клиент/удалить';
openVerificationModal();
});
Я даю согласие на сбор моего адреса электронной почты и IP-адреса с целью обработки этого запроса . Дополнительную информацию см. в Политике конфиденциальности и Условиях использования.
- Выбор выделенного элемента приводит к полному обновлению страницы.
- Открывается в новом окне.