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