# Динамический контент в варианте персонализации
# Динамический контент
Внутри каждого варианта персонализации вы можете добавлять как статический, так и динамический контент. Если вы хотите реагировать на данные пользователя и изменять контент по каким-то правилам, вы можете использовать JS код внутри шаблона персонализации.
# Использование
Внутри поля Контент
можно задать JavaScript код с помощью двойных фигурных скобок:
# Пример 1
Сумма 2 + 2 = {{return 2+2}}
Ожидаемый результат:
Сумма 2 + 2 = 4
# Пример 2
Для простых вычислений, где не труебуются какие-либо условие, можно опустить вызов команды return
Сумма 2 + 2 = {{2+2}}
Ожидаемый результат:
Сумма 2 + 2 = 4
# Пример 3
Поддерживаются условные операторы JavaScript, к примеру if/else
10 больше двух? - {{
if(10>2){
return "Да";
} else {
return "Нет";
}
}}
Ожидаемый результат:
10 больше двух? - Да
# Пример 4
Для более сложных вычислений и правил поддерживаются внутренние функции, например:
Сумма 99 и 1 равна {{
function sum(arg1, arg2) {
return arg1 + arg2;
}
return sum(99,1);
}}
Если вы используете вложенные функции не забывайте явно вернуть результат с помощью
return
Ожидаемый результат:
Сумма 99 и 1 равна - 100
# Пример 5
Внутри контента может быть сколько угодно разных JS скриптов
{{5 + 5}} больше {{4 - 2}}? - {{return "Да";}}
Ожидаемый результат:
10 больше 2? - Да
Однако, будьте аккуратны, чрезмерная нагрузка скриптами может повлиять на скорость вычисления контента
# Конетекст
внутри JS кода, вам доступна возможность обратиться к текущему контексту через переменную data
# Пример 1
Вы находитесь в г.{{data.geo.city.nativeName}}
Ожидаемый результат:
Вы находитесь в г.Москва
# Пример 2
Также можно использовать условные операторы, чтобы лучше реагировать на контент
{{
let cityName = data.geo.city.nativeName;
let population = data.geo.city.population;
let cityInfo = "Вы находитесь в городе " + cityName + ", который населяют " + population + " человек.";
if (data.geo.city.isRegionCapital) {
cityInfo += " Этот город является столицей региона.";
}
if (data.geo.city.isCountryCapital) {
cityInfo += " Этот город является столицей страны.";
}
return cityInfo;
}}
Ожидаемый результат:
Вы находитесь в городе Москва, который населяют 12 615 078 человек. Этот город является столицей страны.
# Пример 3: Приветствие на основе времени суток
{{
let hour = new Date().getHours();
let greeting;
if (hour < 12) {
greeting = "Доброе утро";
} else if (hour < 18) {
greeting = "Добрый день";
} else {
greeting = "Добрый вечер";
}
return greeting;
}}
Ожидаемый результат:
Доброе утро
# Пример 4: Отображение погоды с эмодзи
{{
let temperature = data.weather.temp;
let weatherEmoji;
if (temperature < 10) {
weatherEmoji = "❄️";
} else if (temperature >= 10 && temperature < 25) {
weatherEmoji = "☀️";
} else {
weatherEmoji = "🌞";
}
return "Сегодня " + weatherEmoji + " температура " + temperature + "°C";
}}
Ожидаемый результат:
Сегодня ☀️ температура 28°C
# Список доступных полей в data переменной
Внутри JS кода с помощью переменной data
у вас есть доступ к следующим данным контекста:
geo.city.nativeName
: Название города на родном языке.geo.city.englishName
: Название города на английском языке.geo.city.russianName
: Название города на русском языке.geo.city.isRegionCapital
: Является ли город столицей региона.geo.city.isCountryCapital
: Является ли город столицей страны.geo.city.population
: Население города.geo.region.nativeName
: Название региона на родном языке.geo.region.englishName
: Название региона на английском языке.geo.region.russianName
: Название региона на русском языке.geo.region.population
: Население региона.geo.country.nativeName
: Название страны на родном языке.geo.country.englishName
: Название страны на английском языке.geo.country.russianName
: Название страны на русском языке.geo.country.population
: Население страны.page.schemaOrg.brandName
: Название бренда в формате Schema.org.page.schemaOrg.offer.price
: Цена предложения в формате Schema.org.page.schemaOrg.offer.availability
: Доступность предложения в формате Schema.org.page.schemaOrg.aggregateRating.ratingValue
: Значение рейтинга в формате Schema.org.page.schemaOrg.aggregateRating.reviewCount
: Количество отзывов в формате Schema.org.weather.temp
: Текущая температура.weather.tempFeelsLike
: Ощущаемая температура.weather.humidity
: Влажность.
Теперь, когда вы ознакомлены с возможностями динамического контента и использования JS кода в вариантах персонализации, вы можете легко изменять контент в соответствии с правилами и данными пользователя.