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

В чём проблема дилера?

Есть в Украине такой производитель окон, дверей, гаражных ворот и прочих конструкций - это компания Steko, которая начинала с малого и со временем доросла до представительства во многих регионах страны. И соответственно, есть у компании своя дилерская программа.

Однако дилер дилеру рознь: один способен лишь отнести ближайшим клиентам печатный PDF-буклет продукции Steko, второму - собственный сайт подавай с возможностью принимать заказы из любого уголка страны. И этот тип дилеров сталкивается с вопросом, где разработать такой сайт. Притом чтобы информация располагалась на сайте линейно сверху-вниз, подобно тому же PDF-буклету. А сбоку чтобы присутствовал калькулятор окна, ведь клиенту не интересно разбираться со сложной структурой сайта.

Что надо сделать?

Полная задача состоит в разработке шаблона дилерского сайта. Чтобы этот шаблон компания Steko могла дарить своим дилерам бесплатно с призывом: ещё не имеешь своего сайта - возьми готовый пример под названием StekoDealer, установи на свой хостинг и работай.

Задание 1

Так как сейчас у меня нет всестороннего видения полной задачи, просто начинаем с какого-то первого шага и по ходу движения подстроимся под реалии. Я прикрепляю вам PDF-буклет на испанском языке, который дал мне один из партнёров компании с аналогичным вопросом о создании удобного сайта, и прошу на основе буклета сверстать пробную страницу:

• слева вертикальная полоска меню в виде иконок: Главная, Окна, Двери, Доставка, Оплата, Позвонить, Наши контакты
• сверху горизонтальная полоска меню в виде иконок: Блог, Скайп, Инстаграм, Фейсбук, Ютуб
• по центру один под другим страницы буклета (их пока можно сделать скриншотами)
• справа вертикальный блок с калькулятором окна

За эту работу, - назовём её условно "вёрстка страницы Окна", - я сейчас закину вам на карту 30$ согласно прейскуранта из вашей анкеты фрилансера. И тогда можете приступать к вёрстке пробной страницы. Желательно управиться с заданием за 1 день, так как хочу быстрее показать директору компании, чтобы помог привлечь разовые инвестиции или из резерва его компании, или из пожертвований отдельных дилеров.

Эти инвестиции пойдут вам на оплату следующих заданий: замена каждого важного скриншота адаптивной вёрсткой. Иначе шаблон с необработанными скриншотами ключевых текстов буклета забракует штатный SEO-мастер любого дилера, потому что такой контент сайта невозможно продвинуть в поиске Google.

Что в ближайших планах?

Я уже договорился с одним инвестором, что он даст деньги на вёрстку страниц, вызываемых через иконки левого и верхнего меню. Как только обещанные деньги окажутся у меня, вы получите за каждую вёрстку по 30$ (кроме страниц Позвонить, Скайп, Инстаграм, Фейсбук, Ютуб - ведь это обычные ссылки на телефонный звонок, скайп-звонок и дилерские страницы в социальных сетях).

О калькуляторе

Сейчас в том блоке нужно лишь обозначить оперативные элементы для оформления заказа на изготовление окна. Обрабатывающий функционал пока не делаем. Директор компании или кто-то из дилеров потом объяснит, как в идеале должен работать калькулятор. Вот тогда, Михаил, вы и допишете обрабатывающую функцию.

О мультиязычности сайта

Я сомневаюсь, что дилеру необходима такая возможность. Однако мне прислали PDF-буклет на испанском, а так как компания из Украины, то наверняка есть те же буклеты ещё на украинском и русском языках. Так что делайте вёрстку страничных макетов и настройки шаблона с учётом мультиязычности, а каждый дилер просто включит в настройке только нужный ему язык.

Для инвесторов прикрепляю отчёт по израсходованному бюджету.

Расходы на вёрстку макетных файлов шаблона:
. . . задание №1: 30$ за страницу "Окна"
. . . задание №2: 30$ за страницы "Доставка", "Оплата"
. . . задание №3: 30$ за страницу "Главная"
. . . задание №4: 50$ за страницы "Блог", "Пост блога"
. . . задание №5:
. . . задание №6:
. . . задание №7:
. . . задание №8:

Итого 140$

Сделал Принимайте работу. За день не получилось если хотите качество

Спасибо, Михаил!

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

Одну ошибку я нашёл - отсутствует макет "Страница не найдена". В результате, когда я нажимаю какую-нибудь иконку в боковом меню (например Двери, Доставка, Оплата, Наши контакты), то сайт просто перекидывает меня на главную страницу демонстрации. А по логике, сайт должен был тут же прекратить взаимодействие с пользователем и сообщить на экране браузера, что такой страницы нет на сайте. Прошу вас доработать до соответствующего вида макетный файл missing_template.htm, который служит в шаблоне как раз для уведомления о событии "Page not found".

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

Переходим к заданию 2

Инвестор прислал мне оплату для вёрстки вами следующего макетного файла. Я уже переслал эти 30$ на вашу карту, приступайте к выполнению. По срокам - хотелось бы получить результат за день и двинуться далее, чтобы успеть завершить шаблон к Новому году.

В первую очередь, вам необходимо сверстать в шаблоне сайта макетный файл static_page.htm, который служит для вывода страницы всякой публикации (поста - на сленге блогеров), обозначенной в админпанели как "Статическая страница". Продуманное разрезание макетного файла на динамически подключаемые модули, размещаемые в папке modules того же шаблона, оставляю на ваше усмотрение. Так как правильная фрагментация упростит вам вёрстку остальных макетных файлов, если в них попадутся похожие фрагменты как на свёрстанных ранее страницах.

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

Эти две абстракции нужно разместить в папке abstract, предназначенной в том же шаблоне как раз для подобной цели, и назвать абстрактные файлы аналогично прописанному в меню УРЛу соответствующей абстракции, добавив к нему типичное расширение макетного файла. То есть:

• delivery.htm - так как в боковом меню URL для страницы "Доставка" прописан как {site}delivery
• payment.htm - так как в боковом меню URL для страницы "Оплата" прописан как {site}payment

Дело в том, что URL этих двух страниц зашит в боковое меню намертво. Оправданием такой дурацкой идеи зашить URL, не спросив надобность у дилеров, служит лишь предположение, что именно эти две страницы понадобятся каждому дилеру и скорее всего будут расположены контент-менеджером дилера именно на таких УРЛах.

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

Еще ошибки.

• Нажмите ярлык Окна. Страница открылась. Где подсветка активного ярлыка?
• Откройте на телефоне вертикально. Блоки сжались в центре. Текст не прочесть.

Спасибо Кириллу за подсказку!

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

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

Да, и ещё одно пожелание. Калькулятор хотелось бы вынести в отдельный модуль, пусть это будет макетный файл modules/aside-right.htm. Дело в том, что калькулятор имеет сейчас простой вид, но кому-то из дилеров возможно захочется переделать в красивую графическую форму, когда на правой боковой панели нарисовано окно и выбор клиентом цвета или вида стёкол тут же отражается в нарисованном окне. Так вот штатному вебмастеру дилера гораздо проще переделать только файл модуля, чем ковыряться в целом макетном файле страницы, рискуя случайно нарушить какой-то её соседний элемент.

Принимайте задани2. Ошибки я исправлю по одной иначе затяну сроки заданий.

Активный ярлык подсветил меньшим квадратом чем область ярлыка.

Спасибо за хорошую работу!

Я уже загрузил ваши изменения на выставочный сайт. Михаил, теперь можете приступать к следующей задаче. Оплату 30$ отправил на вашу карту.

Задание 3

Вам необходимо сверстать в шаблоне сайта макетный файл catalog.htm. Как правило, он служит для вывода главной страницы. Если быть более точным, такой макетный файл служит для вывода всякой специальной страницы, обозначенной в админпанели как "Каталог товаров". Просто в интернет-магазинах, для которых изначально и создавался движок Импера, подобную страницу как раз ставят главной и выводят туда завлекающую часть каталога - хиты продаж, новинки, акционные товары и тому подобное.

Судя по отсутствию товарных карточек на аналогичной странице сайта Steko, их дилерам тоже не понадобится каталожный функционал на главной странице. Значит вам, Михаил, необходимо в настроечном файле шаблона helper-settings.php отключить упреждающее чтение неиспользуемых данных (переменных) для главной страницы. Вообще говоря, можно выключить все эти переменные:

• categoriesTree - дерево категорий
• brandsTree - дерево брендов
• filtered - опции фильтра товаров
  • properties - список свойств товаров в текущей категории
  • brands - список брендов в текущей категории
  • variants - список имён вариантов товаров в текущей категории
• menus - список менюшек сайта
• news - список анонсовых блоговых публикаций
• articles - список анонсовых обзорных публикаций
• defer_products - список отложенных товаров
• banners - список баннеров сайта
• recent_articles - список недавно просмотренных обзоров
• recent_news - список недавно просмотренных блоговых постов
• recent_categories - список недавно просмотренных категорий
• recent_brands - список недавно просмотренных брендов
• recent_products - список недавно просмотренных товаров
• search_history - список недавних поисков пользователей

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

Так вот, Михаил, сверстайте в макетном файле главной страницы такие блоки: основная фотография (баннер), вступительный текст. Если понадобится дополнить макет другим блоком, я думаю, дилеры подскажут позже.

Готово

Ошибку верхнего меню исправил.

Отлично! Продолжайте дальше, Михаил, очередную оплату 50$ (за парный макет) я уже отправил на вашу карту.

Задание 4

Сверстайте макетный файл news.htm, предназначенный для вывода списка блоговых публикаций, и его логическую пару - макетный файл news_item.htm, который служит для вывода конкретной блоговой публикации.

Состав страницы блога:

• Основная фотография (баннер) - если загружена в админке для такой страницы
• Название страницы
• Вступительный текст - если написан
• Список постов
• Пагинация - достаточно кнопок "Вперёд", "Назад"

Состав страницы блогового поста:

• Основная фотография - если загружена
• Название
• Полный текст
• Дополнительные фотографии - если есть

Сразу напомню, что URL равный {site}blog для страницы блога зашит в боковое меню, поэтому к макетному файлу блога необходимо добавить следующую абстакцию с аналогичной проверкой присутствия реальной страницы, как было в задании 2 для абстракций "Доставка" и "Оплата":

• abstract/blog.htm

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

Для удобного изучения шаблона все его макетные файлы отмечены в теле исходных кодов меткой шага, на котором эти макеты обрабатываются движком:

• [STEP 0] - подготовительный шаг
• [STEP 1] - генерация центрального контента страницы
• [STEP 2] - генерация остальной части вокруг центра

Так как в нашем шаблоне получилось, что некоторые страницы генерируются по похожим траекториям, - или через реальный макет, или через макет абстракции, - то подключемые на этих траекториях модули отмечены в своих исходных кодах спаренной меткой [STEP 1] [STEP 2].