Как я создал механизм покупки для SEXELIZE ES6 CheceSheet Использование CheckoutPage.co и брызгает ванильного JavaScript.
Это строго не PayWall, это все на стороне клиента и много не проверяет.
В принципе вы можете отобразить все вещи, используя немного магии CSS. Вы также можете прочитать источник и реверсив-инженер, какие параметры запросов работают на эту страницу.
Вы также можете подняться как Google Bot (или другой сканер) и пропустить платежную оверлей. Если кто-то поделится ссылкой, содержащей «платный» запрос, тот, кем бы они ни разделяли, увидит его без оплаты.
Я не думаю, что вполне вероятно, что люди пройдут усилия о том, чтобы делать вышеуказанные обратные машины, поэтому я собираюсь ходить любому, кто будет слушать, как я его реализовал.
Если вам нравится получить чтетную линию бесплатно, но и хотите поддержать мою работу, вы можете Купи мне кофе или просто Подписаться на мой список рассылки Отказ
Оглавление:
Настройте скрытие контента
Я использую следующие CSS:
.site-wrapper.js-site-wrapper--no-scroll {
top: 0;
left: 0;
width: 100%;
z-index: 1;
position: fixed;
}
.js-site-wrapper--no-scroll .post-full__table-of-contents {
height: 100%;
overflow: hidden;
}
Это не будет работать, если ваш контент уже внутри относительный , Абсолют или Исправлено Контейнер для позиций Но это работает для меня 🤷 ♀️.
Соответствующий код JS довольно прост:
Все обернуто в IIFE (сразу вызвало выражение функции), чтобы быть хорошей и старой школой (и не загрязнять глобальное пространство имен). Мы передаем документ в IIFE ( }) (документ); ) и определите его как параметр ( Функция (документ) ).
Мне нравится устанавливать селекторы и классы как константы и элементы префикса с $ например. $ siteWrapper , опять немного возврата к дни jQuery.
Просто отобразите все, когда гусеничный или старый браузер
Это вдохновлено Swizec’s ES6 Cheatsheet Source Отказ
Мы хотим показать все (нет без прокрутки класс) к сканерам.
Начнем с добавления шаблона Regex Regex из SwitchableHQ.com/@hugodf/crawler-Regex какие избытки из github.com/monperrus/crawler-user-Agents под капотом и объединяет отдельные узоры.
Мы превращаем это в полноценный объект Regeex, который не заботится о случаях (отсюда, как 'i' флаг).
Новый код в Didbuy , все еще не самый сложный: если у нас нет Навигатор Объект, просто залог (т. Е. Притворись, как человек купил его), поскольку он, вероятно, старый браузер. Если мы получим это далеко, проверьте пользовательский агент против Rebravler Regular Expression, отобразите все, если это Google Bot или другой гусеничный.
Страница проверки установки
checkoutpage.co : «Оформить заказ страницы и формы для продажи ваших продуктов и услуг. Устанавливается в минутах без кодирования ». Это простой и отличный способ добавить страницу оплаты на ваш сайт. Он просто интегрируется с вашей учетной записью на полоску и дает вам URL-адреса.
Давайте настроим его, создайте учетную запись, свяжите ее на полоску, создайте новую страницу. Заполните любые поля, которые вы хотите/требуются. Для checkoutpage.co Для работы с нашей клиентской стороной Paywall Code нам придется сделать пару вещей.
«Return URL» (страница → Настройки → возвратный URL) должны иметь параметр запроса, который позволит нам знать, что кто-то заплатил, так просто, как добавление ? ключ = заплатил к URL.
Ваш полный URL должен быть в форме: https://your-domain.tld/path/to/cheatsheet/Page? Key = заплатил Отказ
Мы должны добавить поле сбора электронной почты, чтобы мы могли отправить письмо-подтверждение. Давайте сделаем это на странице → Поля → Добавить поле со следующими данными:
- Метка: Email.
- DataType: электронная почта клиента
- обязательный: истинный
Если мы хотим собрать адреса электронной почты, чтобы добавить в список рассылки, и мы хотим быть GDPR-совместимым, нам нужна входное поле.
Для этого перейдите на страницу → Поля → Добавить поле и создайте новое поле со следующими параметрами: – Ярлык: «Я хотел бы получить код с Hugo Newsletter» – DataType: НЕБЫВАЕТСЯ (Free Text Text) – Зажигатель: «Нет», это важно и делает это обязательным: ложный
Настройте пользовательское «сообщение подтверждения», чтобы пользователи могли заплатить один раз и продолжать доступ к чит-таблицу (например, от разных устройств). Это на странице → Настройки → Сообщение подтверждения.
Вы можете использовать одни и те же параметры запроса ? ключ = заплатил или используйте другой. Вот мое подтверждение по электронной почте:
Hey there 👋, Thanks for buying the Sequelize ES6 cheat sheet. This email confirms your payment. You can access the Sequelize ES6 cheat sheet using this link: https://codewithhugo.com/guides/sequelize-cheatsheet?key=list. Payment details Paid for: Sequelize ES6 Cheatsheet Paid to: Hugo Amount: $1.99 If you've opted in, you'll be added to the Code with Hugo newsletter. You can easily unsubscribe from the mailing list by clicking the unsubscribe link at the bottom of each email.
CheckoutPage добавит дополнительный текст после нашего сообщения при отправке электронной почты подтверждения.
Добавьте кнопку, которая указывает на checkoutpage.co
Я оставляю это как деталь внедрения, поскольку Сандер сделал потрясающую работу со своим Купить кнопки Отказ
TL; DR Вы буквально просто нужно указать ссылку на страницу CheckoutPage 🙂
Проверьте запрос на наборы значений ключей, которые допускаются
Теперь мы хотим установить некоторые значения, которые будут действительными «платными» параметрами и парамерами текущей страницы против этого.
Это означает создание getqueryobject Функция, которая берет window.location.search , удаляет ? берет каждого & ключ = значение преобразовать их в предмет, как {ключ: «значение»} Отказ
Затем мы берем это QueryObject и сопоставьте его против нашего Pay_Query_Params. . Если для Pay_Query_Params Объект, все ключевые ключи запроса соответствуют значениям, то пользователь заплатил. Это фрагмент, который делает работу:
const bought = PAID_QUERY_PARAMS.some(function (queryParams) {
return Object.entries(queryParams).every(function(keyValue) {
const key = keyValue[0];
const value = keyValue[1];
return query[key] === value;
});
});
Чтобы быть полуобъявленным с немного более старыми браузерами, я не использовал функции стрелки/разрушимости, хотя это сделает код более читабельным, в ES6 + Я бы сделал:
const bought = PAID_QUERY_PARAMS.some((queryParams) =>
Object.entries(queryParams).every(
([key, value]) => query[key] === value
);
);
Который читает как: «Если есть запись Pay_Query_Params Где для каждого ключа/значение пары запроса значение для каждой пары ключа/значения соответствует Meets Pay_Query_Params
Сохраняться локальному
Мы захочем вытереть параметр запроса и хранить, что пользователь заплатил, чтобы пройти мимо Paywall в LocalStorage. Почему? Ну так, чтобы использование можно перейти к странице из любого места (может быть, через сайт навигации или что-то) и все еще видите содержимое.
Для этого нам понадобится два дополнительных бита не-бизнеса логика – Y материалов: некоторые новые константы, которые мы можем проверить против:
const PAID_LOCALSTORAGE_KEY = 'MY_KEY'; const PAID_LOCALSTORAGE_VALUE = 'MY_SUPER_SECRET_VALUE';
и крошечная обертка вокруг окна.localStorage, потому что почему не:
const persist = {
set: function(key, value) {
return window.localStorage.setItem(key, value);
},
get: function(key) {
return window.localStorage.getItem(key);
}
}
Тогда бизнес-логика выглядит следующим образом, мы захочем проверить, если Has_paid был сохранен в DidBuy , если он не был установлен, отступайте к проверке объекта запроса. Если объект запроса проверяет как уплаченное, сохранить это. т.е. в Didbuy :
function didBuy() {
// navigator and user agent (crawler) checks
// 1. New PAID in persistence check
if (persist.get(PAID_LOCALSTORAGE_KEY) === PAID_LOCALSTORAGE_VALUE) {
return true;
}
// 2. Existing "PAID" check
const query = getQueryObject(window);
const bought = PAID_QUERY_PARAMS.some(function (queryParams) {
return Object.entries(queryParams).every(function(keyValue) {
const key = keyValue[0];
const value = keyValue[1];
return query[key] === value;
});
});
// 3. New persist PAID
if (bought) {
persist.set(PAID_LOCALSTORAGE_KEY, PAID_LOCALSTORAGE_VALUE);
}
return bought;
}
В полном объеме это:
Очистить запрос без обновления страницы
Снаппин JS для удаления параметров запроса без обновления, используя .replacestate является:
window.history.replaceState({}, document.title, window.location.pathname);
Итак, мы просто вещи, которые в init :
function init() {
if(!didBuy()) {
$siteWrapper.classList.add(SITE_WRAPPER_NO_SCROLL_CLASS);
} else {
window.history.replaceState({}, document.title, window.location.pathname);
}
}
Поэтому полный скрипт:
Скрипт в полном объеме как на моем сайте
Я использую Polyfill.io на полифилл .some С .entries и .каждый . Я также имею «купить наложение», которое я переключаюсь с помощью класса CSS. Остальные объясняются в статье.
Увидеть это в действии в SEXELIZE ES6 CheceSheet Отказ
Если вам нравится получить чтетную линию бесплатно, но и хотите поддержать мою работу, вы можете Купи мне кофе или просто Подписаться на мой список рассылки Отказ
unsplash-logo Самуил Зеллер
Оригинал: “https://dev.to/hugo__df/add-a-vanilla-javascript-paywall-to-a-hugo-site-using-checkoutpage-co-2jcn”