23.10.2014

Конструктор браслетов и шармов

Мы реализовали проект конструктора браслетов для сайта love-gerda.ru. В статье кратко рассматриваются основные и технические моменты. Тестовый сайт с функционалом можно посмотреть по ссылке.


Возможности конструктора

  1. Создание произвольного изделия-сборки (браслет, кулон, колье) посетителями сайта, используя элементы каталога, загружаемые в административной части.
  2. Покупка только что созданной сборки (цена считается как сумма цен элементов каталога).
  3. Предмодерируемое сохранение изделия-сборки в виде элемента каталога, для последующей демонстрации и продажи другим пользователем сайта.
  4. Возможность поделиться своим уникальным дизайном изделия с пользователями интернета в виде ссылки на сборку.

Интерфейс пользователя

Изначальный дизайн представлен на рисунке 2, но в ходе множества правок итоговый дизайн изменился (рисунок 3).

  1. Для удобства все элементы и основания сгруппированы по типу. Для отображения конкретного типа, необходимо кликнуть по его названию. (п.1, рисунок 1)
  2. Основание загружаются в конструктор при клике на изображение основания в блоке оснований. (п.2, рисунок 1)
  3. Имеется возможность подобрать размер основания, кликнув соответствующий размер на линейке. (п.3, рисунок 1)
  4. Элементы насаживаются на основание при клике на изображение элемента в блоке элементов (п.4, рисунок 1), а перетаскиваются и удаляются с основания путем захватывания и движения мыши в нужном направлении. (п.5, рисунок 1)
  5. Элементы возможно отсортировать по свойствам в правой части блока элементов, кликнув на соответствующее свойство. (п.6, рисунок 1)
  6. Для получения ссылки на дизайн текущей сборки, необходимо нажать на ссылку "Ссылка на ваш дизайн". (п.7, рисунок 1)
  7. Чтобы добавить текущую сборку в список покупок, необходимо нажать на кнопку "Купить". (п.8, рисунок 1)

Примечания: п.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


В итоге менеджер получает точные значения в сантиметрах и вписывает их в соответствующие поля инфоблока.