Документация

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

Стартовые параметры

Конструктор можно запускать с разными параметрами - выбирать предмет, модель, цвет и т.д. Например, на сайте в разделе красных футболок лучше показать конструктор с выбранной красной футболкой, а в другом разделе - с другим предметом. Или в одной группе в соцсети показывать конструктор с футболкой, а в другой группе с чехлом для айфона.

Конструктор поддерживает следующие параметры:
Параметр Описание Возможные значения
baseномер предмета0, 1, 2, …
modelномер модели0, 1, 2, …
colorномер цвета предмета0, 1, 2, …
sideномер стороны0, 1, 2, …
sexномер пола0 – мужской, 1 – женский
ageномер возраста0, 1, 2, …
sizeномер строки размера в списке размеров0, 1, 2, …
methodномер метода печати0, 1, 2, …
langкод или номер языкаrus – Русский, eng – English, …
или 0, 1, 2, …
composномер заготовки композициичисло
btn-base, btn-model, btn-color, btn-side, btn-sex, btn-age, btn-size, btn-method, btn-image, btn-figure, btn-text для скрытия соответствующих кнопок в меню 0 – скрыть, 1 – показать

Применение

1. Если конструктор втроен в страницу сайта:

Указывать параметры нужно в коде вставки конструктора в атрибуте src, между кавычек, после URL, например:
<iframe src="https://cosuv.ru/app/40#base=1;model=5;btn-base=0;btn-model=0" style="width:100%;height:600px;" frameborder="0" allowfullscreen></iframe>

2. Если конструктор полноэкранный (открыт по ссылке):

Указывать параметры нужно после URL, например:
https://cosuv.ru/app/40#base=1;color=1

3. Если конструктор размещён в соцсети:

Нужно создавать разные приложения для каждого из вариантов параметров, и давать ссылки на эти разные приложения. Конструктор при этом будет использоваться один и тот же, то есть разные аккаунты конструктора не нужны. Указывать параметры нужно там, где при создании приложения в соцсети требуется URL:
https://cosuv.ru/app/40#base=1;color=1

Правила написания параметров

Первый параметр начинается с решётки #. Параметры друг от друга отделяются точкой с запятой.

Задавайте несколько параметров, если выбираемое имеет вложенность. Например, если выбираем вторую модель первого предмета, то задаём два параметра – предмет и модель, а не только модель.

Важна последовательность написания параметров: Предметы → Модели → Цвета → Стороны, потом всё остальное.
Если вы сначала пишете выбор второго по счету предмета, то это значит, что модели вы будете выбирать уже у этого предмета. Если написать сначала выбор модели, а потом предмета, то выберется неправильная модель.

При выключении предметов, моделей, цветов или сторон, они пропадают из конструктора и он о них не знает. Поэтому если вы прикажете конструктору при старте показать выключенную модель (через API), то он выберет другую или будет ошибка. Потому что при отключении порядковые номера сдвигаются, как если бы модель удалили. Такая же проблема может возникнуть, если вы написали скрипт расчета цен - номера сдвинутся и скрипт будет считать не верно (с таблицей цен проблем нет).
Если нужны разные параметры конструктора на разных страницах сайта, то:
  • Если сайт на каком-то движке, то серверный язык должен менять параметры в коде вставки конструктора. Например php:
    <iframe src="https://cosuv.ru/app/40#base=<?php echo base_index; ?>" style="width:100%;height:600px;" frameborder="0" allowfullscreen></iframe>
  • Если сайт на CMS, то либо как описано выше, либо у страниц должны быть разные шаблоны или код страниц с разным кодом вставки конструктора. Например если сайт на Wordpress, то проще всего писать разный код вставки в разных постах или страницах во вкладке Текст.
  • Если сайт на HTML (без движка), то в разных html-страницах должен быть разный код вставки конструктора.

Если нужно менять параметры конструктора на одной странице (находу, без перезагрузки страницы), то это делается на языке JavaScript, и подробно описано здесь.
Если вы будете дописывать что-то в URL вашей веб-страницы, то конструктор на это реагировать не будет. Всё описанное здесь относится к самому конструктору - к его URL и к его коду вставки на страницу.

Примеры

Конструктор без параметров

Его код вставки на страницу:
<iframe src="https://cosuv.ru/app/40" style="width:100%;height:600px;position:relative;" frameborder="0" allowfullscreen></iframe>
Ссылка на него: https://cosuv.ru/app/40

Этот же конструктор с выбранным предметом

Его код вставки на страницу:
<iframe src="https://cosuv.ru/app/40#base=2" style="width:100%;height:600px;position:relative;" frameborder="0" allowfullscreen></iframe>
Ссылка на него: https://cosuv.ru/app/40#base=2

Этот же конструктор с выбранным предметом, цветом, на английском языке

Его код вставки на страницу:
<iframe src="https://cosuv.ru/app/40#base=3;color=1;lang=eng" style="width:100%;height:600px;position:relative;" frameborder="0" allowfullscreen></iframe>
Ссылка на него: https://cosuv.ru/app/40#base=3;color=1;lang=eng

Управление конструктором

Конструктором можно управлять на ходу, во время того, как пользователь взаимодействует со страницей вашего сайта. Например, пользователь выбирает на странице сайта фильтр «женские», и конструктор покажет женские модели, без перезагрузки страницы сайта или самого конструктора. Это реализуется на языке JavaScript на вашем сайте (не в самом конструкторе) и применимо только если конструктор размещён на странице вашего сайта.

Чтобы задавать конструктору параметры во время его работы, нужно посылать ему сообщения функцией postMessage. Пример:
frame.contentWindow.postMessage( 'cosuv-api;base=0;model=2', '*' );
  • frame — это найденный на странице фрейм конструктора (HTMLElement).
  • contentWindow — это глобальный объект window у фрейма.
  • postMessage — это функция отправки сообщения окну.
  • cosuv-api; — это обязательный префикс, чтобы конструктор реагировал только на нужные сообщения.
  • base=0;model=2 — это параметры, которые описаны на странице Стартовые параметры. Все правила оттуда применяются и здесь, кроме символа решётки # - он здесь не нужен.
  • * — просто ставьте звёздочку как показано в примере.

Посылайте несколько параметров, если выбираемое имеет вложенность. Например, если выбираем вторую модель первого предмета, то посылаем два параметра – предмет и модель, а не только модель.

Пример

Понажимайте на эти ссылки: выбрать брелок, выбрать женскую футболку, выбрать красную подушку, скрыть/показать кнопку фигур Код этого примера с комментариями:

пример кода

Обработка событий

Сейчас в конструкторе реализовано только событие отправки заказа. Оно даёт возможность запрограммировать добавление заказа в корзину вашего сайта или перенаправление клиента на оплату на вашем сайте. Можно использовать его и в других целях, например для сбора информации о заказах или для метрики. Обработка этого события не отменяет добавление заказа в кабинет управления, и никак не влияет на заказ. Она реализуется на языке JavaScript на вашем сайте (не в самом конструкторе) и возможна только если конструктор размещён на странице вашего сайта.

Чтобы обработать это событие, добавьте в ваш JavaScript слушатель события "message". Пример:
window.addEventListener( 'message', function(e){
    console.log(e);
});

Данный код при отправке заказа выведет событие в консоль браузера.
Событие представляет собой объект, в котором есть ключ data.
В этом ключе записана строка в формате JSON, которую нужно распарсить.
После парсинга мы получаем объект со следующими ключами:
  • type — для проверки, обязательно проверяйте что его значение - cosuvOrder
  • vars — номера выбранных предмета, модели, цвета и т.д.
  • vars.readable — названия выбранных предмета, модели, цвета и т.д. на языке админа
  • vars.readableUserLang — названия выбранных предмета, модели, цвета и т.д. на языке клиента
  • fields — массив заполненных клиентом полей формы заказа
  • thumb — ссылка на скриншот заказа
  • sum — сумма заказа

В следующем примере скрипта вы можете наглядно посмотреть, как обрабатывается событие заказа, и как отправлять данные заказа на сервер: https://cosuv.ru/js/order-to-server.js

Пример

Сделайте заказ в этом конструкторе, и данные вашего заказа покажутся ниже:

Код этого примера с комментариями:

пример кода

Заказы в корзину сайта

Отправку заказов из конструктора в корзину вашего сайта нужно программировать вашими силами у вас на сайте. Готовых модулей нет. Программируется это на основе события отправки заказа, описанного в разделе Обработка событий, и возможно только если конструктор размещён на странице вашего сайта.

Процесс выглядит так:
1. При отправке заказа конструктор отдаёт все данные заказа вашему сайту через JavaScript (описано в Обработка событий);
2. Вы на сайте программируете обработку этих данных - формирование заказа в корзине на их основе, или что-то другое, например переход на страницу оплаты без корзины.

Если ваш сайт на CMS, то вам потребуется добавлять в корзину продукт, нигде ранее не описанный. С этим могут быть трудности, поскольку модуль корзины может работать только на известных продуктах, добавленных в админке. Соответственно может потребоваться программист, способный написать новые функции к вашей CMS.

Переход после заказа

После отправки заказа можно перенаправить клиента на другую страницу сайта, например на страницу оплаты или благодарности. Программируется это на вашем сайте на основе события отправки заказа, описанного в разделе Обработка событий, и возможно только если конструктор размещён на странице вашего сайта.

Для этого разместите этот код на странице вашего сайта, где размещён конструктор:
<script>
    window.addEventListener( 'message', function(e){
        if( !e.data ) return;
        var parsed;
        try{ parsed = JSON.parse(e.data) } catch(err){ return }
        if( parsed.type !== 'cosuvOrder' ) return;
        window.location = 'http://адрес_новой_странички';
    });
</script>

Пример

Сделайте заказ в этом конструкторе, и вы будете перенаправлены в раздел выше:

Яндекс-Метрика

Метрику для конструктора можно сделать двумя способами:

Способ 1 - на вашем сайте

Подходит если конструктор размещён на одном вашем сайте.

Чтобы отследить новый заказ как цель, добавьте на страницу, где вставлен конструктор, следующий код JavaScript:
<script>
    window.addEventListener( 'message', function(e){
        if( !e.data ) return;
        var parsed;
        try{ parsed = JSON.parse(e.data) } catch(err){ return }
        if( parsed.type !== 'cosuvOrder' ) return;
        if( window.yaCounter00000000 ) yaCounter00000000.reachGoal( 'zakaz' );
    });
</script>
Где 00000000 нужно заменить на номер вашего счётчика, а zakaz - заменить на название вашей цели в метрике.

Посещения конструктора из метрики и так видны, или можно настроить в метрике цель - посещение страницы конструктора.

Способ 2 - в кабинете управления

Подходит если нет сайта, или если конструктор размещается на нескольких сайтах или в группах.

В кабинете управления разделе "Скрипт JS" нужно вписать "код счётчика" метрики. Но не весь, а только код, содержащийся между тегами <script...> и </script> , вот пример:
пример кода метрики
(Стояла птичка "В одну строку". У вас будет свой код, а не этот.)

Если нужно отслеживать новый заказ как цель, то ниже после кода метрики допишите следующий код:
$(co).on( 'order-sent', function(){
    if( window.yaCounter00000000 ) yaCounter00000000.reachGoal( 'zakaz' );
});
Где 00000000 нужно заменить на номер вашего счётчика, а zakaz - заменить на название вашей цели в метрике.

Вычисление суммы

Цены в конструкторе задаются в кабинете управления — в разделе "Цены" есть таблица цен. Если возможностей этой таблицы не хватает, то нужно писать скрипт расчета суммы, о котором этот раздел. Он позволяет описать более сложные ситуации и нюансы. Скрипт пишется на языке JavaScript, и запускается после каждого изменения в конструкторе, например после выбора цвета изделия.

Нам нужно получать какие-то параметры конструктора, и на их основе менять сумму. Получать параметры конструктора можно из переменной v. В этой переменной хранятся следующие параметры:
Параметр Описание Возможные значения
v.baseномер выбранного предмета0, 1, 2, …
v.modelномер выбранной модели0, 1, 2, …
v.colorномер выбранного цвета модели0, 1, 2, …
v.sideномер выбранной стороны0, 1, 2, …
v.sexномер выбранного пола0 - мужской, 1 - женский
v.ageномер выбранного возраста0, 1, 2, …
v.sizeпорядковый номер выбранного размера одежды0, 1, 2, …
v.methodномер выбранного метода нанесения изображения (метода печати)0, 1, 2, …
v.filledколичество заполненных сторон (на которых что-то нарисовали)0, 1, 2, …
v.sidesинформация по каждой стороне (см. ниже)массив
v.sides[ номер_стороны ].filledзаполнена ли сторона0 - пустая, 1 - заполнена

Вот самый простой пример скрипта:
sum = 100
Такой скрипт будет говорить конструктору, что сумма всегда равна сотне. Валюту писать не нужно. Чтобы указать сумму, задавайте нужное значение глобальной переменной sum. По умолчанию эта переменная равна нулю. В неё можно писать любые числа, включая дробные.

В вашем скрипте можете писать всё, что умеет JavaScript, – математические операции, условия, функции, комментарии и т.д. Ошибки в вашем скрипте могут привести к ошибкам конструктора в целом, тогда он может не запуститься или зависнуть. В этом случае отмените последние изменения в скрипте.

Предположим, что у вас в конструкторе два предмета – подушка и кружка. Сделать для них разные суммы просто:
if( v.base == 0 ) sum = 210;
if( v.base == 1 ) sum = 260;
Здесь проверяется порядковый номер выбранного предмета, и в переменную sum записывается сумма. Номера начинаются с нуля.

Разберём другой пример. Допустим, вам нужно, чтобы сумма всегда была 600 р., но если выбрана кружка (предмет номер 1) с ручкой (модель номер 4), и метод печати надглазурная деколь (метод печати номер 6), то сделать сумму 800 р:
sum = 600;
if( v.base == 1 && v.model == 4 && v.method == 6 ) sum = 800;
Номера в примере взяты случайные, у вас они будут своими.

Ещё пример – как задавать сумму в зависимости от количества заполненных сторон, например сторон футболки. Допустим, что у нашей футболки только две стороны – передняя и задняя. Если стороны не заполнены, то сумма за пустую футболку 300 р. Если заполнена только одна сторона, то сумма 500 р. Если две стороны – 700 р. Вот код:
sum = 300;
if( v.filled == 1 ) sum = 500;
if( v.filled == 2 ) sum = 700;
Здесь 1 и 2 означают количество заполненных сторон, а не номер стороны. Вот другой вариант, когда сумма увеличивается на 20, если заполнено больше двух сторон:
if( v.filled > 2 ) sum += 20;

Теперь предположим, что изначальная сумма 500 р. А если на задней стороне что-то нарисовано, то сделать сумму 700 р. Вот код:
sum = 500;
if( v.sides[1].filled == 1 ) sum = 700
Здесь v.sides[1].filled == 1 означает заполненность задней стороны. Здесь она номер 1, но у вас может быть другой номер между квадратных скобок, например:
if( v.sides[3].filled == 1 ) sum = 700

И последний пример, комментарии будут по ходу кода:
sum = 500; // начальная сумма 500 рублей
if( v.base == 1 && v.model == 2 ){ // если выбран второй предмет и третья модель
    sum += 300; // то сумму увеличим на 300 рублей
    // а если при этом заполнена третья сторона, то добавим еще 100 рублей:
    if( v.sides[2].filled == 1 ) sum += 100;
} // фигурные скобки нужны если после условия выполняется много действий
if( v.sex == 1 ) sum -= 50; // если женский пол, то снизить сумму на 50
// а если выбран четвертый метод печати, то сумма 1000 рублей, несмотря на всё предыдущее:
if( v.method == 3 ) sum = 1000;
Здесь номера в коде и номера в описании не совпадают специально, чтобы обратить внимание, что номера начинаются с нуля. В чистом виде этот скрипт выглядит так:
sum = 500;
if( v.base == 1 && v.model == 2 ){
    sum += 300;
    if( v.sides[2].filled == 1 ) sum += 100;
}
if( v.sex == 1 ) sum -= 50;
if( v.method == 3 ) sum = 1000;

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

Как расставлять скобки и точку с запятой:

if( условие ) тут одно действие;
if( одно_условие && второе_условие ) тут одно действие;
if( условие ){
    одно_действие;
    второе_действие;
}
if( одно_условие || второе_условие ){
    одно_действие;
    второе_действие;
}

ОператорыОписание
=записать в переменную (присвоить значение)
==равенство при сравнении
>больше
<меньше
>=больше или равно
<=меньше или равно
!=не равно
+ - * /плюс минус умножить разделить
+=увеличить имеющееся значение на
-=уменьшить имеющееся значение на
*=увеличить имеющееся значение в
/=уменьшить имеющееся значение в
&&И
||ИЛИ   (две вертикальные черты)

Более подробного обучения написанию скрипта расчета суммы здесь нет, потому что он пишется на языке JavaScript, который с одной стороны прост при элементарных задачах, с другой стороны очень обширен и сложен. Если вы не понимаете описанное в данном разделе, то для написания скрипта можете нанять JavaScript-программиста или верстальщика со знанием JavaScript.