Инструкция по установки конструктора памятников на сайт

Инструкция так же присутствует при скачивании файла.

Скачиваете архмв konstruktor-pamyatnikov.zip, по сути всё что находиться в архиве это как бы маленький сайт (в демке он же: https://konstruktor-pamyatnikov.ru/demo/), можете сразу это всё залить на поддомен (как один из способов установки) или в какую-либо папку на сайте и дать на неё ссылку, только при последнем не забудьте указать пути в файлах конструктора.

Из архива konstruktor-pamyatnikov.zip папку construkt-pam кладём в корень сайта, файл save_image.php так же лучше положить в корень сайта.

!!! Если разместили не в корне, а например в папке шаблона сайта: ничего страшного в этом нет, просто Вам нужно будет самостоятельно переопределять пути в файлах конструктора. Это зависит от настроек вашего хостинга и cms сайта.

Файл index.php содержит всю "веб-морду конструктора", можете его переименовать (чтобы не конфликтовал с уже имеющимися файлами), а на сайте разместить ссылку на этот файл. Да, это будет просто страница со своим оформлением, не вшитая в дизайн сайта, но этот способ без заморочек. Способы установки разбирём ниже.

Установка конструктора

Установка осуществляется одним из способов:

1. Установка конструктора путём размещения его "веб-морды" в шаблон или страницу вашего сайта, а так же подключение скриптов конструктора и настройка почты.

Из файла index.php размещаете в шаблон сайта "веб-морду" конструктора, это всё что находиться между тегами < div class="landing" >...< /div >. А так же поключаете скрипты они в самом начале страници и в конце:

< ?php
$dirImg = $_SERVER['DOCUMENT_ROOT'].'/construkt-pam/img/constructor/';

function getImages($dir) {
$nameImg = [];
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
if($file != '.' AND $file != '..') $nameImg[] = $file;
}
closedir($dh);
}
}
return $nameImg;
}

$korpusImg = getImages($dirImg.'memorial/');

$korpusDvoynoyImg = getImages($dirImg.'memorial-dvoynoy/');

$korpusFigurnyImg = getImages($dirImg.'memorial-figurny/');

$korpusReznoyImg = getImages($dirImg.'memorial-reznoy/');

? >

< !-- Js & jQuery -- >

< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" >< /script >
< script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" >< /script >

< !-- CSS -- >

< link rel="stylesheet" href="construkt-pam/css/constructor.css" >
< link rel="stylesheet" href="construkt-pam/css/tabs.css" >

< !-- Js -- >

< script src="construkt-pam/fontfaceobserver.js">< /script >
< script type="text/javascript" src="construkt-pam/fabric/fabric.js" >< /script >

2. Установка конструктора путём размещения его на поддомене сайта. В данном случае просто размещаете все файлы конструктора в корень поддомена. Указываете на него ссылку с основного сайта, так же можете в файле конструктора index.php указать и ссылку на основной сайт, для возврата. И настраиваете почту. По возможности и базовым знаниям вёрстки можете сделать стилизацию под ваш основной сайт.

Как правило ко второму варианту приходится прибегать в случае конфликта скриптов конструктора со скриптами изначально установленными на вашем сайте. Случай редкий, но не исключаемый. А ещё это самый простой способ и как плюс при данном варианте установки не страшны обновления системы сайта (cms на которой ваш сайт разработан).

Настраиваем почту.

Для этого редактируем файл save_image.php

меняем только это (в файле так же есть комментарии):

$mail->Username = 'bla-bla-bla'; // Ваш логин в Яндексе. Именно логин, без @yandex.ru (Эта почта нужна для осуществления отправки писем, просто используется smtp Яндекса. Это почта нигде не фигурирует, на неё ничего не приходит, можете просто зарегистрировать новую почту в Яндексе и всё. На заявки не влияет, просто используется как почтовый сервер. Чтобы письма отправлялись им нужен почтовые сервер. Единственное где она присутствует это указывается в качестве отправителя письма. Много туфтологии, просто пытались расписать подробнее)

$mail->Password = '123456789'; // Ваш пароль (та же почта Яндекса что выше)

$mail->setFrom('bla-bla-bla@yandex.ru'); // Ваш Email (та же почта Яндекса что выше)

$mail->addAddress($_POST['email']); // Email получателя (это Заказчика, ничего не трогаем, нужен для отправки копии заказа Заказчику)

$mail->addAddress('bla-bla-bla@mail.ru'); // Email получателя (сюда приходят заказы, другими словами это Ваш основная рабочая эл. почта)

// Письмо

$mail->Subject = "КОМПАНИЯ - Эскиз памятника"; // Заголовок письма, желательно заменить слово КОМПАНИЯ на название Вашей организации

Удаление и добавление изображений

Если нужно добавить или удалить какие-то изображения или эскизы памятника, то Вы это так же можете сделать.

Все изображения лежат в папке

construkt-pam/img/constructor

в соответствующих подпапках лежат изображения по видам: эпитафии, кресты, венки, цветы и пр.

Скрипт работает таким образом, что выводит все имеющиеся изображения в папке в заданный блок; т.е. из свечей в свечи, из эпитафий в эпитафии и т.д. Ничего прописывать не нужно, просто добавляете изображение в нужную папку, либо удаляете ненужное. Например у Вас есть интересные модели крестиков, взяли их изображения и разместили в папку с крестиками (crosses) или ассортимент моделей памятников нужно расширить - подготовили изображение - залили в соответствующую папку памятников.

ВАЖНОЕ ПО ИЗОБРАЖЕНИЯМ!!!

Изображения памятников должны быть точных размеров 400 рх на 750 рх, меньше можно, но желательно придерживаться. Изображение памятников желательно делать так же на белом фоне, а сам памятник размещать по центру, тут Вам поможет фотошоп и начальные знания.

Изображения различных оформлений желательно делать размерами 400 рх на 400 рх (либо хотябы ширину 400 рх) и весом не более 150 Кб. Так же желательно делать прозрачный фон (редактировать в фотошопе либо ином редакторе) и сохранять в формате .PNG

Заголовок всех файлов изображений писать латиницей либо цифрами без пробелов.

Группы памятников

Группы памятников выводятся в табах из соответствующих папок. Их кол-во можно как уменьшить так и увеличить. На данный момент присутствуют такие папки с памятниками:

memorial - вертикальные памятники

memorial-dvoynoy - горизонтальные памятники

memorial-figurny - фигурные памятники

memorial-reznoy - резные памятники

Для увеличения:

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

$korpusImg = getImages($dirImg.'memorial/');
$korpusDvoynoyImg = getImages($dirImg.'memorial-dvoynoy/');
$korpusFigurnyImg = getImages($dirImg.'memorial-figurny/');
$korpusReznoyImg = getImages($dirImg.'memorial-reznoy/');

и добавляем например

$korpusНазваниеImg = getImages($dirImg.'memorial-Название/');

и добавляете таб между тегами < div class = "tabs-constructor_cont" >...< /div > с соответствующей переменной и путём к папке

Для удаления просто удаляете ненужную группу.

Если же у Вас только одна группа и в табах надобности нет, то удаляете всё между тегами < section class = "tabs-constructor">...< /section > и сами теги, и вместо всего удалённого вставляете этот код:

< ul id = "slide-mem" >

< ?php
asort($korpusImg);
foreach ($korpusImg as $key => $val) {
echo '< li >< img src="/demo/construkt-pam/img/constructor/memorial/'.$val.'" >< /li >';
}
? >

< /ul >

Эскизы заказов памятников

Все эскизы заказов храняться в папке

construkt-pam/img/users-memorials

по мере формирования заказов эта папка наполняется эскизами. Вес эскиза небольшой, около 200 Кб, но всё таки периодически не мешало бы чистить эту папку.

Убираем чёрный цвет с изображения в Adobe Photoshop (фотошоп)

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

1. Отройте файл

2. Если это была картинка, то сначала делаем Ctrl+A, Ctrl+X, Ctrl+V

3. Ctrl+A

4. В доке управления слоями на слое Layer 1 создаем Clipping Mask (внизу кнопка, где создать новый слой, удалить слой)

5. Открываем док управления каналами Window > Channels

6. В нем будут 4 слоя + наша маска

7. Выбираем самый контрастный слой, например Red, остальные выключаем

8. Делаем на этом слое Ctrl+A, Ctrl+C

9. Включаем все слои, активным делаем нашу маску, Ctrl+V

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

11. Сохраняем в формате .PNG название обязательно латиницей или цифрами без пробелов!