Мы реализовали проект конструктора браслетов для сайта love-gerda.ru. В статье кратко рассматриваются основные и технические моменты. Тестовый сайт с функционалом можно посмотреть по ссылке.
Изначальный дизайн представлен на рисунке 2, но в ходе множества правок итоговый дизайн изменился (рисунок 3).
Примечания: п.1 - п.8 - рис 1
Изначальный дизайн - рис 2
Итоговый дизайн дизайн - рис 3
Конструктор написан с учетом интеграции с cms 1C-Битрикс, в часнтости с модулями торговый каталог и интернет-магазин.
Визуальная часть (front-end) конструктора основана на формировании Javascript-объекта, задача которого обработать 2 входных массива, которые содержат информацию о всех параметрах элементов каталога. Массивы формируются при загрузке страницы на основании данных, поступающих из свойств и полей элементов инфоблока каталога.
Часть кода формирования массивов:
element_products_keys.forEach(function(el, ind, arr) {
var id = el[0]["ID"];
if(el[0]["TYPE"].VALUE_ENUM != null) {
size_obj = new Object();
el.forEach(function(e, i, a) {
size_obj[e["ID"]] = {
pre : parseFloat(e["OTCTUP_LEFT"].VALUE),
mid : parseFloat(e["SIZE_WORK_ARIA"].VALUE),
aft : parseFloat(e["OTCTUP_RIGHT"].VALUE),
width : parseFloat(e["WIDTH_ELEMENT"].VALUE),
sign : parseFloat(e["SELECT_WRITE"].VALUE),
url : e["IMG_FOR_KONSTRUCTOR"].PATH,
imgWidth : parseFloat(e["IMG_FOR_KONSTRUCTOR"].WIDTH),
imgHeight : parseFloat(e["IMG_FOR_KONSTRUCTOR"].HEIGHT),
price : parseFloat(e["DISCOUNT_PRICE"]),
}
});
// формирование массива с основаниями
bases[ind] = {
pic: el[0]["PREVIEW_PICTURE"],
name: el[0]["NAME"],
sizes: size_obj,
};
} else {
// формирование массива с элементами
elements[el[0]["ID"]] = {
url: el[0]["IMG_FOR_KONSTRUCTOR"].PATH,
size: {
pre : parseFloat(el[0]["KOORD_X_LEFT"].VALUE),
mid : parseFloat(el[0]["WIDTH_KREPLENIYA"].VALUE),
aft : parseFloat(el[0]["KOORD_X_RIGHT"].VALUE),
top : parseFloat(el[0]["SIZE_TOP_TO_OSN"].VALUE),
width : parseFloat(el[0]["WIDTH_ELEMENT"].VALUE),
height : parseFloat(el[0]["HEIGHT_ELEMENT"].VALUE),
},
price: el[0]["DISCOUNT_PRICE"],
};
}
});
Также объект содержит методы обработки действий пользователя по созданию сборки.
Серверная часть (back-end) отвечает за формирование массива данных для отдачи фронт-енду, а также обрабатывает запросы на создание готовых сборок. В процессе создания готовой сборки, создается элемент торгового каталога с сгенерированными изображением и ценой. Если сборка создается успешно, она добавляется к покупкам пользователя.
Часть кода формирования элемента торгового каталога:
// добавляем элемент в торговый каталог global $USER; $el = new CIBlockElement; $PROP = array(); $PROP[1] = $composition; // уникальный код сборки $PROP[2] = $arIMAGE; // изображение, созданное в процессе создания сборки $arLoadProductArray = Array( "MODIFIED_BY" => $USER->GetID(), "IBLOCK_SECTION_ID" => $IBLOCK_SECTION_ID, "IBLOCK_ID" => $IBLOCK_CATALOG_ID, "PROPERTY_VALUES"=> $PROP, "NAME" => "Сборка: ".$composition, "CODE" => $composition, "ACTIVE" => "N", "PREVIEW_PICTURE" => $arIMAGE, "DETAIL_PICTURE" => $arIMAGE, ); $PRODUCT_ID = $el->Add($arLoadProductArray); $arFields = array( "ID" => $PRODUCT_ID, "QUANTITY" => $QUANTITY, ); CCatalogProduct::Add($arFields); //обновляем цену созданного товара CPrice::SetBasePrice($PRODUCT_ID,$PRODUCT["PRICE"],$CURRENCY); // добавим товар в корзину $arFields = array( "PRODUCT_ID" => $PRODUCT_ID, "PRICE" => $PRODUCT["PRICE"], "CURRENCY" => $CURRENCY, "QUANTITY" => 1, "LID" => LANG, "DELAY" => "N", "CAN_BUY" => "Y", "NAME" => "Сборка: ".$composition, ); CSaleBasket::Add($arFields);
Одной из трудностей с которой сталкивается менеджер при добавлении элемента в конструктор в административной части сайта - это правильное указание размеров и отступов для изображения, учавствующего в сборке. Ведь необходимо, чтобы элемент размещался красиво и ровно на основании. Для этого была написана инструкция о том, как правильно измерить эти параметры и разработан небольшой скрипт "линейка по элементам", который позволяет измерить параметры в сантиметрах (рис 3).
Скрипт подключается в момент загрузки формы редактирования элемента:
AddEventHandler("main", "OnPageStart", Array("Constructor", "LineElementsAdmin"));
function LineElementsAdmin()
{
$sCurPage = $GLOBALS['APPLICATION']->GetCurPage();
$iblockElementEdit = $sCurPage == "/bitrix/admin/iblock_element_edit.php";
if($iblockElementEdit && $_REQUEST["IBLOCK_ID"] == $IBLOCK_CATALOG_ID) {
$GLOBALS['APPLICATION']->AddHeadScript('full_path_to_script/constructor_admin.js');
}
}
Линейка по элементам - рис 3
В итоге менеджер получает точные значения в сантиметрах и вписывает их в соответствующие поля инфоблока.