Шаблоны JS-таргетинга для использования расширенной интеграции с Popmechanic

Мы можем показывать формы по свойствам посетителя, корзине или текущей страницы:
- свойства корзины: наличие товаров в корзине, сумма товаров в корзине, наличие товара конкретной категории
- свойства пользователя: авторизован ли на сайте, подписан ли, дополнительные свойства клиента
- свойства страницы: тип страницы, категория продукта, цена продукта на странице

Это нужно, чтобы показать форму тем, у кого в корзине товаров на определенную сумму или тем, кто не авторизован на сайте, показывать блоки только на карточках товаров определенной стоимости.

ДЛЯ ИСПОЛЬЗОВАНИЯ ДАННОГО ФУНКЦИОНАЛА НЕОБХОДИМА РАСШИРЕННАЯ ИНТЕГРАЦИЯ С POPMECHANIC

Только после её настройки можно приступать к инструкции ниже.

1) Как использовать любое условие по свойствам корзины, пользователя или страницы
2) Шаблоны кода для проверки свойств корзины на сайте
3) Шаблоны кода для проверки свойств посетителя сайта
4) Шаблоны кода для проверки свойств текущей страницы сайта
5) Комбинация нескольких условий JS-сужений для одной формы

1) Как использовать любое условие по свойствам корзины,
пользователя или страницы:


Для того, чтобы показать или не показать форму по таким условиям необходимо использовать для выбранной формы
Таргетинг – Режим расширенных настроек – Добавить условие – JS-сужение:
Куда вставлять код для JS-сужения, чтобы фильтровать показ формы по условиям
2) Шаблоны кода для проверки свойств корзины на сайте

Добавьте в JS-сужении нужной формы код из примеров ниже

2. 1. Шаблон кода для JS-сужения для проверки суммарной стоимости товаров в корзине:
// параметры
var sum = 100500; //100500 заменяем на сумму, меньше или больше которой смотрим
var sign = '='; //  = заменяем на знак, который нам нужен, если =, то форма покажется только когда сумма в корзине будет = указанной сумме выше, то есть =100500
var checkDiscount = false; //учитывать ли скидку при сумме корзины, указываем  false или true
var includeDelivery = false;//учитывать ли стоимость доставки при сумме корзины, указываем  false или true

// код, который просто копируем, ничего не меняя
var total = (checkDiscount && window.PopMechanicCartData.totalWithDiscount ? window.PopMechanicCartData.totalWithDiscount : window.PopMechanicCartData.total) + (includeDelivery ? window.PopMechanicCartData.delivery || 0 : 0);

switch (sign) {
  case '=': return total === sum;
  case '>=': return total >= sum;
  case '>': return total > sum;
  case '<=': return total <= sum;
  case '<': return total < sum;
  default: return false;
}
Пример кода для JS-таргетинга, который содержит устанавливает показ формы только если сумма товаров в корзине больше 10000:
var sum = 10000; 
var sign = '>'; 
var checkDiscount = true; 
var includeDelivery = true;

var total = (checkDiscount && window.PopMechanicCartData.totalWithDiscount ? window.PopMechanicCartData.totalWithDiscount : window.PopMechanicCartData.total) + (includeDelivery ? window.PopMechanicCartData.delivery || 0 : 0);

switch (sign) {
  case '=': return total === sum;
  case '>=': return total >= sum;
  case '>': return total > sum;
  case '<=': return total <= sum;
  case '<': return total < sum;
  default: return false;
}
2.2. Шаблон кода для JS-сужения для проверки наличия товара с определенным id в корзине:
// параметры
var idToCheck = 100;  // id товара, при наличии которого в корзине нужно показать форму

// код
return window.PopMechanicCartData.products.some(function(product) { return product.id === idToCheck; });
2.3. Шаблон кода для JS-сужения для проверки наличия товара с определенной категорией в корзине:
// параметры
var idToCheck = 100;  // id товара, при наличии которого в корзине нужно показать форму

// код
return window.PopMechanicCartData.products.some(function(product) { return product.categoryId === idToCheck; });
2.4. Шаблон кода для JS-сужения для проверки количества товаров в корзине:
// параметры
var onlyUnique = false;

// код
return window.PopMechanicCartData.products.reduce(function(total, product) { return total + (onlyUnique ? 1 : product.quantity || 1); }, 0) >= onlyUnique;
2.5. Шаблон кода для JS-сужения для проверки наличия товаров со скидкой в корзине:
// код
return window.PopMechanicCartData.products.filter(function(product) { return product.hasDiscount; }).length > 0;
2.6. Шаблон кода для JS-сужения для проверки отсутствия товаров со скидкой в корзине:
// код
return window.PopMechanicCartData.products.filter(function(product) { return product.hasDiscount; }).length === 0;
3) Шаблоны кода для проверки свойств посетителя сайта

Добавьте в JS-сужении нужной формы код из примеров ниже

3.1. Проверка того, авторизован ли посетитель
return window.PopMechanicUserData.isAuthorized;
3.2. Проверка наличия флага (одного из или всех)
var targetFlags = ['isLongTerm', 'isMan'];

for (var i = 0; i < targetFlags.length; i++) 

return window.PopMechanicUserData.flags.indexOf(targetFlag) > -1;
3.3. Проверка отсутствия флага у пользователя:
var targetFlag = 'isLongTerm';
return window.PopMechanicUserData.flags.indexOf(targetFlag) === -1;

// вместо isLongTerm нужный вам тип флага, которого НЕ должно быть, чтобы форма была показана
4) Шаблоны кода для проверки свойств текущей страницы сайта

Добавьте в JS-сужении нужной формы код из примеров ниже

4.1. Показ для страниц определенного типа:
return window.PopMechanicPageData.type === "product";
// вместо product нужный вам тип страницы, где нужен показ формы
4.2. Показ для определенных категорий товаров (категория из списка):
var categoriesIds = [1243, 125, 65]; // список идентификаторов валидных категорий

return categoriesIds.some(function (categoryId) { return categoryId === window.PopMechanicPageData.category.id; });

4.3. Показ формы только на страницах определенной категории товаров

Включить показ формы на карточках товаров категории с id "33":
var selectedCategoryId = 33; // вместо 33 - нужное вам id категории

return window.PopMechanicPageData.category.id === selectedCategoryId;
Исключить показ формы на карточках товаров категории с id "33":
var selectedCategoryId = 33; // вместо 33 - нужное вам id категории

return window.PopMechanicPageData.category.id !== selectedCategoryId;


4.4. Показ формы для категории с определенным именем

Включить показ формы на карточках товаров категории с именем "Белье":

var selectedCategoryName = “Белье“;
return window.PopMechanicPageData.category.name.toUpperCase() === selectedCategoyName.toUpperCase()

// без учета регистра (будет показ для "Белье", "белье", "БЕЛЬЕ" и тд)

Исключить показ для категории с именем "Белье":
var pattern = "Белье";
return window.PopMechanicPageData.category.name.toUpperCase() !== pattern.toUpperCase(); 

// без учета регистра (будет исключен показ для "Белье", "белье", "БЕЛЬЕ" и тд)

4.5. Добавить показ по регулярному выражению:
var pattern = /одежда/i; 

return pattern.test(window.PopMechanicPageData.category.name);

// с данным паттерном произойдет показ для категорий с именами "Верхняя одежда", "Одежда для детей" и тд
4.6. Показывать форму на страницах товаров с определенным id:
var productsIds = [123, 225, 25]; // список идентификаторов валидных продуктов

return productsIds.some(function (productId) { return productId === window.PopMechanicPageData.product.id; });
4.7. Показывать форму только на страницах товаров выше определенной цены.
Только для товаров дороже 10 000
:
var minPrice = 10000;

return window.PopMechanicPageData.product.price > minPrice;
5) Комбинация нескольких условий JS-сужений для одной формы

Особых правил комбинирования нет, но можно отметить следующее:
- если логика проверки не предусматривает дальнейших изменений, то надежнее будет скомбинировать ее внутри одного сужения:
Вариант 1.
Показывать форму только на страницах товаров дороже 10 000 и КРОМЕ категории "Белье".
Пример использования одного js-сужения для двух условий:
var pattern = "Белье";
var minPrice = 10000;

return (
  window.PopMechanicPageData.category.name.toUpperCase() !== pattern.toUpperCase() &&
  window.PopMechanicPageData.product.price > minPrice
);
Вариант 2.
Или же можно использовать 2 отдельных условия, как в примере ниже:


Но при изменениях в группах условий аргументов "И" <--> "ИЛИ" в первом случае логика проверки сужения не изменится, что более предсказуемо



Если у вас остались вопросы или необходима помощь в настройке JS-сужения –
напишите в поддержку Popmechanic

Вам была полезна эта статья?