# Динамический контент в варианте персонализации

# Динамический контент

Внутри каждого варианта персонализации вы можете добавлять как статический, так и динамический контент. Если вы хотите реагировать на данные пользователя и изменять контент по каким-то правилам, вы можете использовать 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 кода в вариантах персонализации, вы можете легко изменять контент в соответствии с правилами и данными пользователя.