Как сделать онлайн конфигуратор для сайта

Как сделать конфигуратор?

Привет! Подскажите, пожалуйста, как можно сделать конфигуратор?

Нужно для прицепа.

Есть фотка прицепа, когда нажимаем чекбокс — на прицепе появляется допоборудование.
Несколько чекбоксов будет.

+ затем все отмеченные чекбоксы + форма обратной связи

Регистрация: 05.02.2012
Сообщений: 1,046

Репутация: 483
Webmoney BL: ?

Регистрация: 30.06.2011
Сообщений: 39

Репутация: 34
Webmoney BL: ?

В примере не заморачивались: основная картинка и куча png с прозрачностью, изначально скрытых, расположенных в одном месте. Изначально видима только главное изображение, остальные скрыты. При нажатии на галки показываются соответствующие картинки.

и остальные:
vezdehod.com/f/images/uploads/2d303faf513062dd2f7be4139bff933e.png
vezdehod.com/f/images/uploads/ce8dcf7bf9f9943d9cdbf2aa97ef1d35.png
и т. п.

Регистрация: 30.04.2012
Сообщений: 1,078

Репутация: 310

Brovik, не знаком. Ясно на что на JS, можно использовать ImageMapster, но как-то сложно

———- Сообщение добавлено 15:42 ———- Предыдущее 14:49 ———-

Может подскажете какой JS используется здесь? _http://vezdehod.com/argo/models/-750-6×6-hd

Регистрация: 30.06.2011
Сообщений: 39

Репутация: 34
Webmoney BL: ?

Конфигуратор v.2.4
Официальный релиз

Что такое конфигуратор, и зачем он нужен

Конфигуратор вер.2.4 — это бесплатное комплексное решение для вашего лендинг-пейдж (Landing Page, одностраничного сайта).
По сути — это админ-панель, которая позволяет оперативно, (не «ковыряясь» в коде! и не обращаясь к специалистам) менять некоторые данные (старая\новая цена, валюта, скидки, номера телефонов, данные о продавце, данные об отправке товара), и некоторые настройки (скрипты, тригеры).
Это готовое решение Back-end части производства (и копирования) лендингов.
Конфигуратор вер.2.4 позволяет уведомлять вас о лидах, отправляя информцию о них электронной почтой, в мессенджер Telegram и СРМ. На сегодня к Конфигуратору подключены две СРМ — LP-CRM и E-Autopay.
Конфигуратор версии 2.4. позволяет сохранять все заказы во внутренний журнал — что гарантирует сохранность всех заявок, даже в случаях попадания писем в СПАМ, отказов в работе СРМ или Телеграм-бота.

Как выглядит журнал заявок:

Журнал заявок

Как выглядит заявка, отправленная в Телеграм:

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

Буквально «на коленке», на языке PHP была написана первая версия конфигуратора. Именно это и объясняет не совсем дружеский интерфейс всей линейки 1 версии и несколько странное название встраиваемых блоков. Тогда я не заморачивался с реконструкцией внешнего вида, а только добавлял или убирал какие-то элементы и функции и правил выявленные баги.
Конфигуратор в таком виде эволюционировал до версии 1.9.

Спустя какое-то время, весь функционал Конфигуратора был переписан заново на том же PHP (как наиболее доступный на большинстве хостингов) с использованием технологии ООП (объектно-ориентированного программирования) и оптимизирован для мобильных устройств на фреймворке Bootstrap 3.

Именно так и появилась линейка второй версии. От первой версии во вторую перекочевало название некоторых блоков — с целью совместимости с ранними версиями (вдруг кто-то захочет обновится).

Работы по улучшению Конфигуратора продолжаются, поэтому я буду благодарен за все замечания, пожелания и здоровую критика о работе Конфигуратора.

Front-end разработчик одностраничных сайтов (Landing Page)
Занимаетесь копированием лендингов
Занимаетесь продажей через одностраничные сайты

ЭТО РЕШЕНИЕ ДЛЯ ВАС!

Видеоинструкция по использованию

Подключение к LP-CRM

Подключение к е-autopay

Справочник по установке

Видеоинструкция по установке

Как вы могли убедится — установка конфигуратора не представляет особой сложности. Для визуального понимания — выкладываю код примера лендинга с установленными блоками

Поддержка PHP, версия не ниже 5.3
Возможность записи в текстовые файлы (возможно потребуется установка уровня доступа)
Поддержка в PHP сессий ($_SESSION)
Поддержка в PHP Cookie
Подключенная к PHP библиотека CURL (для возможности отправки заявок в СРМ и на Telegram)
Возможность отправки электронной почты с сайта (функция mail).
В версии 2.4. есть возможность отправлять почту через SMTP-сервер

В качестве блоков используются PHP переменные и функции, заключенные в обозначение использования PHP и функции вывода echo , а также блоки для наполнения текстом по технологии jQuery <span></span> , с указанием соответсвующих классов.
Переменные (для того, что бы отличать их от функций) в PHP начинаются со знака $, например: $price_new
Функции в конце содержат параметры в скобках, а если нет параметров — то пустые скобки, например: func() Примечание. Записи <? echo переменная ?> и <?= переменная ?> — абсолютно аналогичные.

Если вы пользуетесь операционной системой Windows — то для редактирования файла index.php при установке конфигуратора удобнее всего пользоваться бесплатным текстовым редактором Notepad++.
Скачать его можно c официального сайта https://notepad-plus-plus.org/.\
Хотя это не принципиально. Можно воспользоваться любым привычным для вас редактором.

Пример страницы index.php
с установленными блоками Конфигуратора 2.4 (содержится в дистрибутиве)

Обязательные блоки

Индексная страница должна иметь расширение PHP, то есть называться index.php
Кодировка индексной страницы должна быть UTF-8 без BOM

Блок для размещения в коде лендинга	Название и место установки
<? require_once(‘config.php’); ?>	Подключение Конфигуратора. Устанавливается в самом начале страницы перед самым первым тегом
<? lands::head($head_index64); ?>	Устанавливается перед закрывающимся тегом *</head>*
<? lands::body($body_index64); ?>	Устанавливается сразу после открывающегося тега *<body>*
<? lands::footer($body2_index64); ?>	Устанавливается перед закрывающимся тегом *</body>*
<?= $currency ?>	Валюта. Размещается в обозначении валюты
<?= $valuta ?>	Валюта. Дубликат переменной , <?= $currency ?> , для совместимости с 1 версией
<?= $price_new ?>	Новая цена. Размещается в обозначении «новой» цены
<?= $price_old ?>	Старая цена. Размещается в обозначении «старой» цены
<?= $discount ?>	Скидка. Размещается в обозначении предоставлемой скидки
<?= $skidka ?>	Скидка. Дубликат переменной , <?= $discount ?> , для совместимости с 1 версией
<? lands::seller(); ?>	Данные о продавце. Размещается в предусмотренном месте (обычно в футере) Параметр — цвет. По умолчанию — черный. Например: <? lands::seller(‘blue’); ?>
<? lands::politics(); ?>	Политика конфиденциальности. Размещается в предусмотренном месте (обычно в футере) Параметр — цвет. По умолчанию — черный. Например: <? lands::politics(‘red’); ?>

Настройка формы

Значение	Параметр
Скрипт обработки формы. Размещается в поле *action* формы. Например: <form action=»zakaz.php» method=»post» > Также обратите внимание, что должен быть указан метод передачи данных — *POST* (см. пример)	zakaz.php
Переменная «Имя покупателя». Размещается в поле *name* тега *input* формы. Примеры: <input type=»text» name=»name» required placeholder=»Имя»> <input type=»text» name=»fio» required placeholder=»Имя»> Важно. Необходимо проверить (и если нет, то присвоить тегу атрибут *required* — чтобы не отправлялась пустая форма (см. пример)	name или fio
Переменная «Телефон покупателя». Размещается в поле *name* тега *input* формы. Примеры: <input type=»text» name=»phone» required placeholder=»Телефон»> <input type=»text» name=»tel» required placeholder=»Телефон»> Важно. Необходимо проверить (и если нет, то присвоить тегу атрибут *required* — чтобы не отправлялась пустая форма (см. пример)	phone или tel
Переменная «E-mail покупателя». Размещается в поле *name* тега *input* формы. Пример: <input type=»email» name=»email» required placeholder=»E-mail»> Опциональное поле.	email
Переменная «Комментарий». Размещается в поле *name* тега *input* формы. Примеры: <input type=»text» name=»comment» required placeholder=»Комментарий»> <input type=»hidden» name=»comment» value=»Комментарий»> Опциональное поле.	comment

Примечание 2:
Для того, что бы в старых браузерах, не поддерживающих HTML5 не отправлялись пустые формы для верификации рекомендуется добавить JavaScript через обработчик событий onsubmit.
Пример для переменных name и phone:
<form role=»form» action=»zakaz.php» method=»post» onsubmit=»if(this.name.value==»)if(this.phone.value==»)return true;»>

Дополнительные блоки

Доступные данные из конфигуратора, которые также можно использовать в сайте

m — Мужское имя
w — Женское имя
n — Нейтральное имя

$contact_phone1 — Телефон 1
$contact_phone2 — Телефон 2
$contact_phone3 — Телефон 3
Произвольный телефон —
Свой телефон в международном формате,
заключенный в кавычки

$contact_email — Контактный e-mail
$email — E-mail, на который отправлюятся письма
Произвольный e-mail — Свой email, заключенный в кавычки

Настройка письма

Письмо состоит из двух частей и представляет из себя html код. Первая часть — информация о заказе, задана в скрипте Конфигуратора, и может быть отредактирована специалистом, знающим PHP.
Вторую часть (информацию о покупателе) можно отредактировать при помощи встроенного редактора. Если вы разбираетесь в html, можно отредактировать непосредственно в коде.

Редктор письма

Необходимые параметры в виде переменных (см. ниже) подставляются автоматически.
Пример письма в HTML по умолчанию, представлен в виде невидимой таблицы.

Этот код генерирует письмо такого содержания:

Товар: Демонстрация возможностей Конфигуратора v.2.0
Цена:	490 грн
Старая цена:	1490 грн
Скидка:	53 %
Покупатель:	Test by Proger
Телефон:	+38(050) 478-42-74
Сайт продажи:	http://site.com
Дата заказа:	Пт, 18 Мая 2018 г.
Время заказа:	13:26:35
Комментарий к заказу:

Используя встроенный редактор и\или знания разметки HTML и эти переменные, вы можете настроить вид письма на свое усмотрение.
Обратите внимание, что html-код для отправки на электронную почту не может использовать CSS-стили, не рекомендуется использовать картинки. Вместо этого используются невидимые таблицы.

Онлайн-конструктор макетов сайтов

Хотите сделать дизайн сайта самостоятельно? Без проблем! Вам не нужны сложные программы и десятки часов времени согласований с дизайнером. Выберите готовый макет сайта на онлайн-конструкторе Wilda, замените изображения и тексты на собственные, и все – сайт готов для верстки!

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