Работа для специалистов, работающих с битрикс.
Необходимо доработать сайт на cms битрикс https://gemslight.ch/. Сделать правки верстки по psd макетам и списку доработок в т.з., верстка не готовых страниц и окон: окно регистрации на сайте, окно корзины и окно оформления заказа (должны быть реализованы в виде модальных окон), письмо уведомление о совершённом заказе, страница 404, страница с результатами поиска. А так же страница каталога, карточка товара (сверстаны не полностью),. Есть все макеты в PSD, кроме письма уведомления, которое необходимо сделать отдельно.
Так же необходимо настроить бекэнд битрикса, подключить функционал авторизации. личного кабинета, оформления корзины, поиска, платежной системы paypal.
Результатом должен быть полностью готовый сайт проходящий основные встроенные тесты битрикса.
макеты: https://drive.google.com/drive/folders/1_iWJHb987PsZ4zuNkGKB4IcaiHetD-iG https://dropmefiles.com/2DdQz
Детально доработки описаны в т.з.:
Техническое задание на доработку интернет магазина Gemslight
Результатом работы должен быть полностью готовый и настроенный на моём хостинге (hetzner, адреса gemslight.ch и gemslight.eu) мультиязычный (5 языков)
интернет магазин с кроссбраузерной адаптивной версткой (корректно работающий как на стационарных широкоформатных мониторах любого разрешения (вплоть до 5к) так и на планшетах и телефонах),
который проходил бы все встроенные все тесты качества битрикса включая проактивную защиту.
За образец (элементы дизайна и работы) был взят https://jannataresort.com/ соответственно логика работы многих блоков, их анимация и способ отображения отдельных блоков при прокрутке и наведении взят с этого сайта.
Общие доработки по верстке.
Все страницы для каждого из пяти языков должны отображаться полностью одинаково, отличия только в языке меню, текстовой и сервисной информации (модальные окна, письма уведомления), которая будет содержаться на сайте.
1. Необходимо сверстать: окно регистрации на сайте, окно корзины и окно оформления заказа (должны быть реализованы в виде модальных окон), письмо уведомление о совершённом заказе, страница 404, страница с результатами поиска. А так же страница каталога, карточка товара (сверстаны не полностью),. Есть все макеты в PSD, кроме письма уведомления, которое необходимо сделать отдельно.
2. Доработка футера
Под футером на всех страницах отображается белая полоса, которой быть не должно.
Так же в футере имя и фамилия Kuehbacher Oskar должны писаться в одной строке, а не так как это было отображено в макете (неточность дизайнера). Кнопки «оставайтесь на связи» должны иметь соответствующую привязку к ссылкам (модерируемым из цмс), на страницу Фейсбука, группу в Телеграме и страницу в Инстаграме.
3. Все кнопки на сайте должны работать по единой схеме (отображение/наведение/нажатие, макет Buttons в приложении)
4. Для всех страниц где есть анимационный эффект параллакс скроллинга, содержимое тестовой части и движущейся фоновой картинки должно отображаться сразу при загрузке страницы иначе эти блоки выглядят пустыми.
Доработки по отдельным страницам (на примере русскоязычной версии, все остальные языки должны работать идентично):
- На главной последний слайд и футер при прокрутке отделены белой полоской толщиной в 1 пиксель который мигает при прокрутке страницы и хорошо выделяется на темном фоне (видна только при прокрутке), та же полоска слева от этого же слайда (видна всегда).
Блок «наша миссия» по разному отображается в Хроме и Эксплорере (правильно в Эксплорере). Все блоки должны отображаться одинаково в любом браузере (Хром, Фаерфокс, Сафари, Эксплорер, Опера).
В блоке «Каталог» и «Новости» кнопки должны работать по указанной в п.3 схеме (При наведении мыши на блок каталога как на главной странице, так и на странице каталог происходит смещение текста в кнопках в право), а три блока с фото при наведении должны вести себя как в образце https://jannataresort.com/, т.е. при наведении на каждый отдельный блок формировалась отдельная картинка из трех блоков (в данный момент при наведении на любой из трех блоков отображается только одна картинка). В новостных блоках текст на маленьких экранах не должен выходить за пределы блоков.
- На странице «О нас» текстовые блоки расползаются на всю ширину страницы и не имеют прокрутки (пример страница «Система Джемслайт».
Так же там нет блока «наша команда», которая есть в макете.
- На странице «Система» корректно отображается анимация в Эксплорере (в Хроме подрезается скруглённая рамочка движущейся картинки). В любом браузере все должно работать одинаково. Второй текстовый блок “Глубокий и эффективный отдых”... не имеет прокрутки текста, как в первом и третьем (должен быть по аналогии как на макете)
- В меню пункт "Отрасли применения" должен быть некликабельным для всех языков, он служит только для перехода в четыре тематических раздела.
- В разделе применение «Спорт и фитнес» текстовый блок не имеет прокрутки и поэтому выходит за пределы текстовой области. Должна быть прокрутка в этом блоке как в разделе «Система». В нижнем фото блоке есть слева полоска, которой быть не должно.
- В открытом меню языковая панель должны быть в открытом виде, как в сайте образце, иначе не ясно что есть возможность переключать языки. Кнопка закрытия (крест вверху не должен иметь отдельного черного фона, весь фон меню просто однотонный (сейчас на фоне видны полосы сверху и снизу более светлого цвета.
- Страница «спа и красота» сверстана не полностью и должна быть сделана по макету.
- Все 4 страницы из раздела отрасли применения (должны иметь кнопку перехода в раздел «Система» как на макетах.
- На странице «наша продукция» (https://www.gemslight.ch/catalog/) блок перехода в разделы каталога должен работать так же как и на главной странице. И естественно все кнопки одинакового размера как на макете.
- Должны быть закончены пункты каталога с перечнем отображаемых товаров и карточки товара (по макетам). В данный момент страница с товаром перечнем товаров выглядит так https://www.gemslight.ch/catalog/gemslight-devices/ а с карточкой товара так https://www.gemslight.ch/catalog/gemslight-devices/?SECTION_ID=28&ELEMENT_ID=315
В каталоге 4 позиции товара в ширину + сортировки (2 по цене, 2 по алфавиту, 2 по новизне, отобразить проданные/показать все. Способ представления плиткой и списком.
В карточке товара настраиваемые опции для каждой товарной группы. По умолчанию *Название
*Артикул
*Размеры
*Вес
*Материалы
*В наличии или под заказ
Условия доставки и оплаты (как на макете, наведение на иконки доставки вызывает тестовом блоке условия доставки, наведение на кнопку оплаты тестовый блок оплаты) этот текст должен иметь возможность редактирования из цмс для каждого из языков. Иконку избранное нужно удалить.
Фото/видеоматериалы, цена (опционально) условия доставки и отзывы. Для товаров, которые есть в наличии должна быть кнопка «купить» для тех которых нет в наличии должна быть кнопка «заказать аналог» c выпадающим окном для заполнения реквизитов (имя мэйл, телефон и кнопкой отправить). Товары, которых нет в наличии должны быть отсортированы в конец списка отображаемых товаров и затенены и иметь соответствующую пометку, вместо кнопки купить кнопка заказать аналог. При наведении мыши на товар должны появляться характеристики товара (редактируемые из цмс) вид на макете Gemslight-Catalogue_Stargate.psd добавление товара либо сразу с этой страница (нажатием кнопки «купить»), либо с карточки товара.
- В разделе новости/мероприятия должна быть возможность оставить заявку на участие, согласно т.з.
- В разделе контакты карта не отображается на всю ширину экрана (скрин в приложении).
- В разделе статей должны отображаться блоки статей с фильтром по язакам макеты статейного раздела в приложении.
- Должна быть защита от копирования любого контента с сайта (пример https://teaplace.com.ua)
Доработки по бекэнду битрикса а так же по функционалу.
- Не все языковые блоки в разделах имеют одинаковую структуру, есть блоки, вообще без элементов внутри (Например текстовый блок beauty в русском разделе, т.к. верстка этой страницы не закончена). Более менее структурирован блок для внесения информации на русском языке, Все блоки, предназначенные для внесения информации на разных языках должны быть структурированы одинаково.
- Текстовые блоки не форматируются, нельзя задать ни размер шрифта ни наклон и т.п. (не работает визуальный редактор) даже абзаца не соблюдаются - все сбивается в одну кучу. В итоге при попытке ввести отформатированный текст в цмс при отображении на странице используются разные шрифты, разного размера и цвета.
- Нет статейного раздела для внесения статей.
- Для всех фото на сайте (баннера каждого пункта меню, заставки для меню при наведении мыши в блоке и т.п. должны меняться из цмс) Реализовано частично.
- Должна быть подключена система «пейпал бизнес» для приема и обработки платежей как через сам пейпал так и через платежные карточки. Есть учетные данные для подключения.
- В каталоге товаров должна быть возможность размещения различных фото и видео для одного товара с возможностью увеличения и прокрутки как на компьютере мышью так и на телефоне, планшете, пальцами.
- Прохождение заказа (корзина, оформление) во всплывающих окнах. Примеры корректной работы с корзиной и оформлением заказа: https://teaplace.com.ua/ https://aromamania.com.ua/ (суммы пересчитываются без перезагрузки окна).
В корзине полная информация о заказе, включая количество, скидки и т.п. в окне подтверждения заказа всплывающее окно с условиями заказа и чекбоксом согласия с условиями. По корзине уточнение: после наименований с заказом позиций должны быть строчки:
Subtotal (сумма по позициям в корзине)
Shipping costs (сумма доставки, фиксированные значения 20 евро/50 евро/300 евро для разделов с кулонами/композициями с кристаллами/шезлонгами соответственно, с возможностью корректировки из цмс) Должно быть оформлено в правилах работы с корзиной в цмс.
Total amount (общая сумма с доставкой).
- Автоматическая система уведомлений через e-mail при приёме заказа, и получении оплаты (А также, статусы выполнения заказа, отправка сообщений). По аналогии с тем как заказ выглядит в корзине но с шапкой и футером (Шапка есть в макете бланка)., т.е. с порядковым номером, артикулом/id номером в системе, наименованием с иконкой фото с товаром, ценой за единицу, количеством и суммой. Внизу итог по количеству и общей сумме, стоимости доставки и общей сумме с доставкой.
- Авторизация как через личный кабинет через мэйл/пароль; так и через аккаунты соц сетей. Facebook и аккаунт google
- В истории заказов у клиента должна быть полная информация о заказе (позиции, количество цена на штуки общая цена и т.п.) способ оплаты/доставки даты, т.е. все то, что человек видит при оформлении заказа + общая сумма всех сделанных заказов.
- Поиск должен осуществляться стандартными средствами битрикса с возможностью пролистывания страниц с результатами (если они есть) и выбором разделов в которых проходит поиск (каталог/новости мероприятия/статьи).
- При заполнениях всех стандартных форм использовать маски, не допускающие введение неправильных данных (мэйл, телефон и т.п.). Защита от заполнения форм ботами везде.
- Подписка на новости как при регистрации, так и без с возможностью отмены в обоих случаях из личного кабинета.
- Подгрузка позиций и цен из csv файлов для синхронизации актуального ассортимента товаров по наличию и ценам (импорт и экспорт прайслистов в битриксе).
Установить фавикон. Файл с фавиконом в ссылке на файлообменник. (давал выше).
