Инициализация RoboTint
Для инициализации RoboTint, необходимо подключить следующий JavaScript на всех страницах внутри тега <body>:

<script src="https://core.robotint.ru/s.js"></script> https://core.robotint.ru/s.js</a>"> 
<script> 
var aRobotintOptions={ 
	tintSettings:{ 
		CLIENT_ID: 0, //Ваш ID в системе RoboTint, для тестового подключения оставьте 0
		SECRET: "free_test", // Ключ для подключения 
		WITH_PRICE: 1, // осуществлять онлайн расчет цены
		USE_SWITCHER: 0 // не показывать недоступные цвета
	}, 
	siteSettings:{ 
		colorSelect: funcColorSelect, // функция обратного вызова
		processPrice: funcProcessPrice,
		bgZindex: 10000,
		basketURL: "/personal/cart/" // путь для добавления товара в корзину
	} 
}; 

// устанавливаем настройки 
obColorer. setOptions (aRobotintOptions); 

function funcColorSelect(data){
	//функция обработки результатов полученных от RoboTint
}
function funcProcessPrice($button_data, col_data){
	//функция обработки результатов полученных от RoboTint
}
</script> 

tintSettings
массив


CLIENT_ID
Идентификатор клиента — обязательно SECRET Секретный код клиента — обязательно WITH_PRICE Использовать функционал расчёта стоимости колеровки. 0 — без расчёта стоимости колеровки, не отображать цену на кнопке "Выбрать цвет для колеровки"1 — с расчётом стоимости колеровки
Должен иметь значение 1 только для тарифа "Колеровка Про", для других — 0

USE_SWITCHER
Использовать переключатель допустимых цветов в соответствии с базой — обязательно.
0 — не отображать переключатель, выводить только допустимые оттенки
1 — отображать переключатель в положении "все оттенки", позволять пользователю отобразить вернуться к отображению только допустимых оттенков — по умолчанию

lang
Выбор языковой локали. Допустимые значения:
  • ru — русский (по умолчанию)
  • en — английский
Наименование переменной и ее значения должны быть в нижнем регистре

siteSettings
вложенный массив

colorSelect
Callback-функция, в которую возвращаются значения о выбранной пользователем колеровке. Обязательное, если ведётся расчёт стоимости или сохранение данных в заказ

basketURL
Адрес страницы корзины интернет-магазина, на которую осуществляется переход по кнопке "Перейти в корзину" выбора оттенка колеровки. По умолчанию имеет значение "/personal/cart/"

Пример данных, возвращаемых в функцию colorSelect

{
    BASE_TYPE_INT: 1, // тип базы
    BASKET_ID: 0, // id позиции корзины
    COLLECTION_ID: 131, // id коллекции цветов
    COLLECTION_NAME: "(TIK) Tikkurila Symphony", // название коллекции
    COLOR_ID: 65712, // id цвета 
    COLOR_NAME: "TVT F346", // код цвета 
    COLOR_PRICE: 120, // цена 
    PRICE_PER_LITER:40, // цена за единицу измерения
    PRICE_PER_CAN:120, // цена за банку
    HEX: "#e4e1ed", // HEX код цвета 
    VOLUME: 3, // объем колеруемого продукта
    COLLECTION_VENDOR_ID: 2, // id системы колеровки
    action: "add" // тип действия
}
BASE_TYPE_INT
Тип базы товара
1 — база А
2 — база B
3 — база C

BASKET_ID
Данный параметр транслируется из data-атрибута data-basket-id кнопки. Обычно требуется для того, чтобы определить колеруется новый товар или товар, который уже находится в корзине клиента. Может быть использован для реализации логики на стороне сайта

COLLECTION_ID
ID цветовой палитры в базе RoboTint

COLLECTION_VENDOR_ID
Идентификатор системы колеровки
Возможные значения:
2 - Tikkurila (Avatint)
5 - Akzo Nobel (Acomix)
6 - Ceresit
7 - Caparol Unitint
8 - Caparol Amphitint
13 - Meffert
18 - VGT

Этот параметр указывает на то, какая система колеровки была использована для расчётов

COLLECTION_NAME
Наименование цветовой палитры

COLOR_ID
ID цвета в базе RoboTint

COLOR_NAME
Код цвета в терминологии производителя

COLOR_PRICE
Стоимость колеровки за полный объём. Не будет возвращён для тарифов, не предусматривающих расчёт стоимости колеровки

PRICE_PER_LITER
цена за литр/килограмм колеровки

PRICE_PER_CAN
цена за колеровку банки

HEX
RGB-код цвета

VOLUME
Объем фасовки в литрах/килограммах

action
Технический параметр RoboTint. Не используется для интеграций. Наименование переменной всегда в нижнем регистре
Передаваемые данные в RoboTint
Внимание: наименование параметров должно быть указано заглавными буквами. Параметры регистрозависимы.

{
    "BARCODE": "xxxx", // штрихкод колеруемого товара
    "PRODUCT_PRICE": 370, // цена продукта
    "PRODUCT_ID": 123, // id продукта
    "VOLUME": 3, // объем для колеровки 
    "BASE_TYPE_INT": "1" //тип базы (не обязательный)
}

Описание параметров, передаваемых в атрибуте 'data-tint-data':

BARCODE
Штрихкод товара. Обязателен в случае, если не указан EXT_ID. Используется для стандартной интеграции. При передаче одновременно EXT_ID и BARCODE, значение EXT_ID будет проигнорировано

PRODUCT_ID
ID товара в базе данных клиента — опционально Используется для обработки возвращаемого результата и отображения выбранного цвета в корзине. Позволяет определить, для какого товара производилась колеровка

PRODUCT_PRICE
Стоимость товара — опционально

VOLUME
Объем товара в литрах. Опционально при интеграции по штрихкоду.

BASE_TYPE_INT
Тип базы. Допустимы значения 1 | 2 | 3 — опционально при интеграции по штрихкоду
1 — База A, белая, для светлых оттенков
2 — База B, полупрозрачная
3 — База C, прозрачная, для насыщенных оттенков

Внимание: если в массиве переданы значения VOLUME и BASE_TYPE_INT, отличные от данных, содержащихся в базе RoboTint, указанные значения переопределят собой значение объёма фасовки и типа базы для расчёта колеровки
Интеграция кнопки RoboTint в интерфейс интернет-магазина

Кнопка RoboTint автоматически проверяет доступность товара для колеровки. Для того, чтобы кнопка не отображалась для товаров, которые не поддерживаются RoboTint, следует добавить следующее правило в CSS:

<style>
tint-button[disabled]{
display:none !important;
}
</style>

Обратите особое внимание, что значение атрибута data-tint-data должно быть заключено в одинарные кавычки, чтобы данные были корректно интерпретированы.
Вертикальная кнопка:

// шаблон
<tint-button disabled="disabled" data-basket-id='0' data-tint-button="1" data-tint-button-vertical="1" data-tint-data='JSON Array' onclick="obColorer.show(this)">
    <tint-span>выбрать</tint-span>
    <tint-span>цвет</tint-span>
</tint-button>


// пример 
<?php
$array = [
    "BARCODE"=> "0000000000000", // штрихкод колеруемого товара
    "PRODUCT_PRICE"=>370, // цена продукта
    "PRODUCT_ID"=> 123, // id продукта
    "VOLUME"=> 3, // объем для колеровки 
    "BASE_TYPE_INT"=> "1" //тип базы (не обязательный)
];

$json = json_encode($array);
?>
<tint-button disabled="disabled" data-basket-id='0' data-tint-button="1" data-tint-button-vertical="1" data-tint-data='<?= $json?>' onclick="obColorer.show(this)">
    <tint-span>выбрать</tint-span>
    <tint-span>цвет</tint-span>
</tint-button>
Горизонтальная кнопка:

<tint-button disabled="disabled" data-tint-button="1" data-tint-button-horizontal="1" data-tint-data='JSON Array' data-basket-id="0" onclick="obColorer.show(this)">
    <tint-span>выбрать цвет</tint-span>
</tint-button>
Интеграция кнопки RoboTint в индивидуальном дизайне

Чтобы подключить вызов компонента RoboTint в произвольному элементу страницы, необходимо добавить для родительского тега следующие атрибуты:


  • disabled="disabled" — рекомендовано. Если указано, изначально элемент будет деактивироан. Система автоматически активирует его по событию onLoad(). Это позволит показывать кнопку только у колеруемых товаров

  • data-tint-button="1" — обязательно. Определяет, что к этому элементу будет привязан RoboTint

  • data-tint-data='JSON Array' — данные, передаваемые в вызов для расчёта колеровки

  • data-basket-id='0' — необязательный атрибут с идентификатором корзины

  • onclick="obColorer.show(this)" — обработчик клика

Процесс обработки возвращаемых данных на стороне интернет-магазина
Рекомендуемая структура функции-обработчика результата.

Эта функция должна быть передана в obColorer методом setOption (смотри пример ниже), она вызывается после нажатия клиентом на кнопку "добавить в корзину" / "колеровать"

<script> 
function funcColorSelect(data) {
window.rt_admin?console.log(['select',data]):false // debug можно удалить на продакшене

	var iProductID = parseInt(data.PRODUCT_ID); //получение идентификатора колеруемого продукта в базе интернет-магазина
	var $itemObject = obColorer.itemObject;
	if (iProductID) { //если выбран колеруемый продукт
		var basketAction = "add"; //по умолчанию считать, что ведется добавление новой услуги колеровки в корзину
		var iBasketID = data.BASKET_ID; //получить значение с идентификатором позиции в корзине, если это значение передано

		if (iBasketID) { //если передан идентификатор товара в корзине
			basketAction = "update"; //значит для этого товара ранее уже был выбран оттенок колеровки. Установить действие в состояние "обновление" колеровки — update
			obColorer.close(); //закрыть интерфейс RoboTint
		}

		data.basketAction = basketAction; //определить выполняемую операцию в рабочем объекте
		$.ajax({ //отправить запрос
			type: "POST", //методом POST
			url: "/some/dir/path/ajax.php", //путь до скрипта добавления/обновления  цвета и товара в корзине  (зависит от используемой вами CMS) 
			data: data, //в значении data передать объект со всеми возвращаемыми параметрами
			timeout: 15000, //ожидать ответа от сервера в течение 15 секунд. После — прекратить ожидание
			beforeSend: function () { //функция, которую можно использовать для исполнения логики на время ожидания ответа от сервера. Например — показ спиннера
				//...
			},
			success: function (data, textstatus) { //функция в которую вернётся результат ajax-запроса
				//...
			},
			error: function () { //функция обработчик ошибки ajax-запроса, если что-то пошло не так
				//...
			}
		});
	}
}

</script> 
Примеры округления и ценовые уровни
Большинство наших клиентов сталкиваются с двумя типами задач при интеграции RoboTint в их интернет магазины.

1 - округлять стоимость литра колеровки
2 - назначать минимальную планку стоимости колеровки или ценовые диапазоны.

Обе задачи можно решить в Javascript коде на стороне клиента задав соответствующие опции в obColorer.options.

Опция options.siteSettings.processPrice - это функция, которая будет вызвана после выбора пользователем цвета.

В нашем примере мы передаем метод processPrice объекта obRobotint . Пример этого объекта вы найдете ниже.



<script>
options.siteSettings = {
	bgZindex: 10000,
	colorSelect: obRobotint.select, // callback функция для передачи товара в корзину
	processPrice: obRobotint.processPrice // callback функция для обработки цены 
};
obColorer.setOptions(options);	
 </script>
Пример конфигурирования обработчика цен
В данной функции можно проводить любые манипуляции с ценой и объемом колеруемого продукта.

Здесь мы имеем:
- массив prices (содержит все варианты конфига цен, какие мы хотим определить)
- метод processPrice (производит манипуляции с ценой в соответствии с конфигом)
- метод numberFormat (преобразует цену в нужный нам вид)
- метод select

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

// Объект obRobotint будет содержать обе функции обратного вызова и др. вспомогательный функционал

var obRobotint = {

    prices:[], // в эту переменную мы поместим все варианты настроек для обработчика цен варианты конфигураторов смотри ниже 

    processPrice: function($priceObj, data){ 
// эту функцию. мы передадим в obColorer для обработки цен до того как их показать клиенту 
// $priceObj  - данные о расчете стоимости  
// data - данные о коллекции цветов

if(window.rt_admin==1) console.log($priceObj, data)



 	var data_raw = $priceObj.data();
		
	var ppl_raw = parseFloat(data_raw.pricePerLitr);
	var ppc_raw = parseFloat(data_raw.pricePerCan);
	var ppl = ppl_raw; // сохраняем в отдельную переменную с которой будем работать 
	var ppc = ppc_raw; // сохраняем в отдельную переменную с которой будем работать 
	var ref_vol = parseFloat(data_raw.priceRef_can_volume); // объем колеруемого продукта .. по данным базы 
   	
	// объем колеруемого продукта 
	var iVolume = ref_vol ;

		
		CVID = data.COLLECTION_VENDOR_ID 
		// заглушка если по какой то причине нет Vendor ID
		if(!CVID) CVID = 2 // берем в данном случае Tikkurila 
		
		// здесь у нас будет храниться выбранный конфиг, но пока он false 
		var cur_set = false;


		// обходим цены из конфига для того что бы выбрать нужный 
		// в соответствующем ценовом диапазоне и соответствующей системы
				
     for(var i in obRobotint.prices) {
		// массив конфига ценовых уровней и округлений	
		rt_price = obRobotint.prices[i];
			if(rt_price['tint_system'] == CVID){
				// если цена попадает в диапазон, то берем этот блок конфигуратора цены
				if(ppl > rt_price.price_from ){
					cur_set = rt_price
				}
			}
		}		

		// если конфиг  не установлен то устанавливаем значения по умолчанию 
		if(!cur_set){
			 cur_set = {
				'price_from': 0,
				'tint_system': CVID , // тут у нас tikkurila 
				'set_price': false,
				'round': false,
				'scale': false,
				};
		}
 
			// приводим цену к уровню  
				if(cur_set.set_price){
 					ppl = cur_set.set_price; 
				}
				
				// округляем 
				if(cur_set.round){
 					
					// если не указана кратность округления то =1 
					// а так же фисксим возможные ошибки
					cur_set.scale  = parseInt(cur_set.scale);
	
					if(!cur_set.scale  || cur_set.scale  == 0){
						cur_set.scale = 1;
					}				
 
					// типы округления
					if(cur_set.round == 'math'){
 						ppl = Math.round(ppl/cur_set.scale)*cur_set.scale; 
					}else if(cur_set.round == 'up'){
 						ppl = Math.ceil(ppl/cur_set.scale)*cur_set.scale; 
					}else if(cur_set.round == 'down'){
 						ppl = Math.floor(ppl/cur_set.scale)*cur_set.scale; 
					}else{
 						ppl = Math.round(ppl/cur_set.scale)*cur_set.scale; 
					}
 				}

// стоимость колеровки за банку 
ppc = ppl*iVolume;
		
        if(ppc!=ppc_raw){
			// переписываем значение кнопки на клиентские, приведенные к нужному уровню
            $priceObj.attr("data-price-shop",ppc);
            $priceObj.text(obRobotint.numberFormat(ppc,0,"."," ")+" ₽");
        }
    },
	numberFormat: function ( number, decimals, dec_point, thousands_sep ) {	
// эта функция отформатирует нам цену так как нам нужно
// Format a number with grouped thousands
    //
			// +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
			// +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
			// +	 bugfix by: Michael White (http://crestidg.com)
	
			var i, j, kw, kd, km;
	
			// input sanitation & defaults
			if( isNaN(decimals = Math.abs(decimals)) ){
					decimals = 2;
			}
			if( dec_point == undefined ){
					dec_point = ",";
			}
			if( thousands_sep == undefined ){
					thousands_sep = ".";
			}
	
			i = parseInt(number = (+number || 0).toFixed(decimals)) + "";
	
			if( (j = i.length) > 3 ){
					j = j % 3;
			} else{
					j = 0;
			}
	
			km = (j ? i.substr(0, j) + thousands_sep : "");
			kw = i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands_sep);
			//kd = (decimals ? dec_point + Math.abs(number - i).toFixed(decimals).slice(2) : "");
			kd = (decimals ? dec_point + Math.abs(number - i).toFixed(decimals).replace(/-/, 0).slice(2) : "");
	
	
			return km + kw + kd;
		},

// эта функция для добавления в корзину, вы ее уже видели 	выше	
    select: function (data) {  
	//...
	 }
};

Пример конфига для конфигуратора цен указанного выше

obRobotint.prices = [
	 {
		'price_from': 0, // для всех цен от 0 рублей
		'tint_system': 2, // применить только для системы колеровки tikkurila 
		'set_price': 30, // установить цену 30 для всех цветов от 0р,
		'round': false,
		'scale': false,
	},
	{
		'price_from': 0,
		'tint_system': 6, // действует только для ceresit 
		'set_price': 30,
		'round': false,
		'scale': false,
	},
	{
		'price_from': 30, // для всех цен от 30 рублей
		'tint_system': 2,
		'set_price': false, // не устанавливаем фиксированную цену
		'round': 'up',  // округление в up, down , math
		'scale': 10, // округлять до 1 / 10 / 100 рублей
	}, 
	{
		'price_from': 500,
		'tint_system': 2,
		'set_price': false,
		'round': 'up',  // округление в up, down , math
		'scale': 100, // округлять до 1 / 10 / 100 рублей
	},
	{
		'price_from': 1000,
		'tint_system': 2,
		'set_price': false,
		'round': 'down',  // округление в up, down , math
		'scale': 100, // округлять до 1 / 10 / 100 рублей
	}
];
Конфигуратор типа Лесенка
все цены до 100 рублей будут поделены на 3 группы 30 / 50 / 100 рублей за литр колеровки
все цены > 100 рублей будут округлены до 10 в верх 110 / 120 / 130 и т.д

obRobotint.prices = [
		{
				'price_from': 0,
				'tint_system': 2, // tikkurila 
				'set_price': 30,
				'round': false,
				'scale': false,
		},
		{
				'price_from': 30,
				'tint_system': 2, // tikkurila 
				'set_price': 50,
				'round': false,
				'scale': false,
		},
		{
				'price_from': 50,
				'tint_system': 2, // tikkurila 
				'set_price': 100,
				'round': false,
				'scale': false,
		},
		{
				'price_from': 100,
				'tint_system': 2, // tikkurila 
				'set_price': false,
				'round': 'up',  // округление в up, down , math
				'scale': 10, // округлять до 1 / 10 / 100 рублей
		}
]
		

Пример конфигурирования обработчика цен для банки
В отличии от предыдущего варианта тут мы будем округлять стоимость не литра колеровки а стоимость колеровки всего объема.

    var obRobotint = {
      // ... 
        processPrice: function($priceObj, data){ 
     
            var data_raw = $priceObj.data();           
            var ppl_raw = parseFloat(data_raw.pricePerLitr);
            var ppc_raw = parseFloat(data_raw.pricePerCan);
            var ppl = ppl_raw; // сохраняем в отдельную переменную с которой будем работать 
            var ppc = ppc_raw; // сохраняем в отдельную переменную с которой будем работать 
            var ref_vol = parseFloat(data_raw.priceRef_can_volume); // объем колеруемого продукта .. по данным базы 
            

            var iVolume = ref_vol ;

            CVID = data.COLLECTION_VENDOR_ID 
            if(!CVID) CVID = 2 // берем в данном случае Tikkurila 
            
            var cur_set = false;
              
            for(var i in obRobotint.prices) {
                // массив конфига ценовых уровней и округлений	
                rt_price = obRobotint.prices[i];
                    if(rt_price['tint_system'] == CVID){
                        // если цена попадает в диапазон, то берем этот блок конфигуратора цены
                        if(ppc > rt_price.price_from ){
                            cur_set = rt_price
                        }
                    }
                }		

                if(!cur_set){
                    cur_set = {
                        'price_from': 0,
                        'tint_system': CVID , // тут у нас tikkurila 
                        'set_price': false,
                        'round': false,
                        'scale': false,
                        };
                }
        
                        if(cur_set.set_price){
                            ppc = cur_set.set_price; 
                        }
                        
                        if(cur_set.round){
                            cur_set.scale  = parseInt(cur_set.scale);
            
                            if(!cur_set.scale  || cur_set.scale  == 0){
                                cur_set.scale = 1;
                            }				
        
                            if(cur_set.round == 'math'){
                                ppc = Math.round(ppc/cur_set.scale)*cur_set.scale; 
                            }else if(cur_set.round == 'up'){
                                ppc = Math.ceil(ppc/cur_set.scale)*cur_set.scale; 
                            }else if(cur_set.round == 'down'){
                                ppc = Math.floor(ppc/cur_set.scale)*cur_set.scale; 
                            }else{
                                ppc = Math.round(ppc/cur_set.scale)*cur_set.scale; 
                            }
                        }

                // стоимость колеровки за литр  
                ppl = ppc/iVolume;
                        
                if(ppc!=ppc_raw){
                    // переписываем значение кнопки на клиентские, приведенные к нужному уровню
                    $priceObj.attr("data-price-shop",ppc);
                    $priceObj.text(obRobotint.numberFormat(ppc,0,"."," ")+" ₽");
                }
            },
// .... 
}

Колеровка материалов, не относящихся к брендам Tikkurila, Akzo Nobel, Ceresit, Caparol, Alpina, Vincent Decor



В настоящее время, RoboTint поддерживает системы колеровки компаний Tikkurila, Akzo Nobel, Ceresit (Henkel), Caparol, Alpina, Vincent Decor Это означает, что колеровка будет доступна для всех колеруемых продуктов, относящихся к брендам этих компаний (при условии их наличия в базе RoboTint).

Для того, чтобы организовать онлайн-колеровку материалов других брендов, необходимо выполнить следующую последовательностью действий:


  • В качества штрихкода (BARCODE) в кнопку следует передавать штрихкод продукта Tikkurila или Akzo Nobel, который, по мнению вашего технолога наиболее соответствует колеруемой краске. Как правило, для группы продукции, имеющей одинаковое назначение, указывается один товар-заменитель, штрихкод которого применяется в процессе расчета колеровки

  • Обрабатывать значение стоимости колеровки следует из параметра PRICE_PER_LITER, чтобы исключить погрешность расчета стоимости из-за отличного объёма фасовки

JSON-запросы. Запрос стоимости колорантов
При необходимости, можно отправить запрос расчета стоимости колеровки в JSON формате.

Для обмена необходимо использовать авторизацию в заголовках запроса. Ключ авторизации не равен секретному коду, используемому при Javascript-интеграции.

Пример реализации на PHP:



$client = new HttpClient();

$client->setHeader("Authorization", "e2727d915b415************************************1fa2975ba507ba");
$client->setHeader("Content-type", "application/json");


$arData = [
    "CLIENT_ID"	=> "4",
    "COLOR_ID" 	=> "140660",
    "BARCODE"	=> "6408070012765",
    "action" 	=> "get-color-price"
];

$result = $client->post("https://core.robotint.ru/exchange/", json_encode($arData));

Описание передаваемых параметров:

  • CLIENT_ID: Идентификатор клиента. Обязательный параметр.
  • BARCODE: Штрихкод товара. Обязательный параметр. Используется для стандартной интеграции.
  • VOLUME: Объем товара в литрах. Опционально при интеграции по штрихкоду.
  • COLOR_ID: Идентификатор цвета. Обязательный параметр.
  • ACTION: Команда. Обязательный параметр.