Skip to main content

Установка калькулятора на внешний сайт

  • Самый банальный пример итогового скрипта для интеграции:
<div id="container"></div>
<script src="http://demo.pixlpark.ru/api/calc/externalCalc"></script>
<script>
    var container = document.getElementById("container");
    var params = { materialType: "photos" };
    var integrated = new PxpCalcManager(container, params);
</script>
  • Калькулятор можно интегрировать на внешний сайт. Для этого необходимо сделать следующее:

1. Создание контейнера​

  • Cоздать на странице контейнер, в котором позже будет находиться калькулятор.
<div id="integratedCalculator"></div>
  • В данном случае это простой контейнер div с Id integratedCalculator. В будущем в нем будет разметка калькулятора.

2. Загрузка скрипта​

  • Дальше через тег <script> получим необходимый скрипт для инициализации калькулятора. Для этого нужно от сайта на платформе Pixlpark сделать следующий вид запроса через API:
<script src="http://demo.pixlpark.ru/api/calc/externalCalc"></script>

В src скрипта мы имеем:

  1. Домен на платформе Pixlpark, однако у вас должен быть один из тех, что вы указали в разделе настройки доменов.
  2. Путь /api/calc/externalCalc, который посылает запрос на сервер для получения скрипта для инициализации калькулятора.
  • У данного API-запроса также могут быть параметры:
cssLink
cssLink
ОписаниеЗагружает на страницу css файл по указанной ссылке
По умолчаниюcommon.css
НеобходимостьНеобязательный параметр
Пример использования<script src="http://demo.pixlpark.ru/api/calc/externalCalc?cssLink=/content/css/cssCalc"></script>
photolabId
photolabId
ОписаниеЗагружает калькулятор от конкретного сайта по указанному Id
По умолчаниюБерется от указанного домена
НеобходимостьНеобязательный параметр
Пример использования<script src="http://demo.pixlpark.ru/api/calc/externalCalc?photolabId=3264"></script>

3. Инициализация калькулятора​

  • После того как скрипт загружен, необходимо инициализировать калькулятор. Чтобы это сделать, необходимо вызвать функцию PxpCalcManager. Рассмотрим параметры, которые входят в эту функцию:

  • PxpCalcManager

  • Модель, содержащая в себе методы для инициализации калькулятора на странице.

  • Параметры конструктора

element
HTMLElement
ОписаниеКонтейнер, в который будет заружен калькулятор
params
ParamsModel
ОписаниеНабор параметров для настройки инициализации калькулятора
  • ParamsModel
  • Набор параметров для настройки инициализации калькулятора.
  • Поля
materialType
Тип переменнойstring или number
ОписаниеId или UrlName категории (можно найти в настройках категории)
НеобходимостьОбязательный параметр
origin
Тип переменнойstring
ОписаниеОригинальный домен, на который будет переходить пользователь для оформления заказа
По умолчаниюДомен от которого загружается скрипт для инициализации (если брать пример выше - то http://demo.pixlpark.ru)
НеобходимостьНеобязательный параметр
apiUrl
Тип переменнойstring
ОписаниеДомен для API запросов (загрузка данных по категориям, товарам, расчет цен и т.п.)
По умолчаниюПараметр origin
НеобходимостьНеобязательный параметр
material
Тип переменнойstring или number
ОписаниеId или UrlName товара (можно найти в настройках товара)
По умолчаниюnull
НеобходимостьНеобязательный параметр
config
Тип переменнойstring
ОписаниеИмя конфигурации, задается в настройках калькулятора
По умолчаниюdefault
НеобходимостьНеобязательный параметр
languageId
Тип переменнойnumber
ОписаниеId языка сайта
По умолчаниюId главного языка сайта из параметра origin
НеобходимостьНеобязательный параметр
isMobile
Тип переменнойboolean
ОписаниеВозвращает мобильная версия калькулятора или нет
По умолчаниюfalse
НеобходимостьНеобязательный параметр
additionalQueryParams
Тип переменнойСловарь { string: string }
ОписаниеСобственные параметры, которые уйдут в строку запроса при переходе из калькулятора
По умолчаниюnull
НеобходимостьНеобязательный параметр
ПримечаниеДанный параметр нужен для того, чтобы если вы нажимаете на кнопку заказать на внешнем калькуляторе, ссылка, ведущая на следующую страницу, содержала эти параметры как часть запроса
  • Пример инициализации калькулятора, у которого:
    1. materialType имеет UrlName 'photos';
    2. выбран товар с Id 123456;
    3. выбран язык с Id 789456;
    4. additionalQueryParams содержит два параметра.
<script>
   // контейнер для калькулятора
   var container = document.getElementById("integratedCalculator"); 
 
   // параметры для иницилизации
   var params = { 
       materialType: 'photos',
       material: 123456,
       languageId: 789456,
       additionalQueryParams: {
          'id_calc_tmp': '45',
          'isExternal': 'true'
       }
   };
 
   // иницилизация
   var integratedCalc = new PxpCalcManager(container, params);                                    
</script>

4. Интеграция с 1С​

  • Код интеграции отдельно для 1С:
<div id="integratedCalculator"></div>
<script src="http://demo.pixlpark.ru/api/poly1c/calculator/external"></script>
<script>
    var integrated = {
	    materialTypeId: 982756, 
    };
    Poly1CCalcManager("integratedCalculator", integrated);
</script>

5. Калькулятор для мерча​

<div id="merchCalculator"></div>
<script src="https://demo.pixlpark.ru/api/categories/variant/external"></script>
<script>
    var settings = {
        merchId: 975, 
        merchVariantId: 62880,
        hidePreview: true,
    };
    MerchPageManager("merchCalculator", settings);
</script>
merchId
HTMLElement
Тип переменнойNumber
ОписаниеId категории мерча
НеобходимостьОбязательный параметр
merchVariantId
HTMLElement
Тип переменнойNumber
ОписаниеId дизайна мерча
НеобходимостьОбязательный параметр
hidePreview
HTMLElement
Тип переменнойBoolean
ОписаниеПараметр, отвечающий за отображение изображения продукта
По умолчаниюfalse
НеобходимостьНеобязательный параметр