# Klimatic-service

Klimatic service

Demo (opens new window)

Лэндиг пейдж с несколькими вариантами, которые отображаются в зависимости от utm-меток. С формой обратной связи, данные с которой отправляются на email.

# Стэк технологий

    # Фичи

      # Структура проекта

      /css
      /font
      /img
      /inc
      /js
      footer.php
      header.php
      index.php
      sendmail.php
      spasibo.php
      style.css
      

      # Валидация форм

      Klimatic форма

      На странице находятся три формы. Каждая из них валидируется при помощи javascript.

      ...
      
      function ValidateFormverh(theForm)
      {
         var regexp;
      
         if (theForm.Editbox1.value == "")
         {
            alert("Введите Ваше Имя!");
            theForm.Editbox1.focus();
            return false;
         }
      
         if (theForm.Editbox1.value.length < 2)
         {
            alert("Введите Ваше Имя!");
            theForm.Editbox1.focus();
            return false;
         }
      
         ...
      }
      
      ...
      

      Source: /js/main.js

      # Обработка событий

      События слушаются на объекте window и обрабатываются при помощи функции, проверяющей id элемента на котором произошел клик.

      const checkClicks = function(e) {
         switch (e.target.id) {
            case 'cta1Btn':
               e.preventDefault()
               modal1.classList.toggle('display-none')
               break
            default:
               break
         }
      }
      
      window.addEventListener('click', checkClicks)
      

      Source: /js/main.js

      # Всплывающие уведомления

      Klimatic уведомления

      Каждые 5 секунд на странице появляются уведомления о заказе. Для реализации этой функциональности используется jQuery-плагин /js/yved.js.

      # Адаптивность

      Klimatic mobile

      Страница адаптирована под два типа устройств:

      • смартфоны
      • десктопы

      # Утилитарные стили

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

      /* =Font sizes */
      .font-xxs {
      	font-size: 13px;
      }
      .font-s {
      	font-size: 19px;
      }
      .font-m {
      	font-size: 29px;
      }
      .font-l {
      	font-size:35px;
      }
      .font-xl {
      	font-size: 48px;
      }
      

      Source: style.css

      # BEM

      Для именования стилей использована методология BEM (opens new window). Только вы можете заметить, что моя нотация здесь отличается от той что можно увидеть в официальной документации. Это связано с тем, что методология не требует строгой нотации. Важен лишь сам принцип блок-элемент-модификатор. А как мы будем записывать классы block__element или BlockElement не имеет значения.

      В этом проекте я решил применить другой вариант записи имен классов. Кстати, именно такой вариант используется в Яндексе при разработке проектов на React, чтобы имена CSS классов не отличались от имен переменных.

      # Utm-метки

      При загрузке страницы проверяется наличие атрибутов в url. В зависимости от переданого атрибута отображаются разные элементы страницы.

      Реализовано это с помощью PHP-скрипта.

      <?php $text = "кондиционера";
      if (isset($_GET['utm_term'])) {
      	$utm_term = $_GET['utm_term'];
      }
      ?>
      <?php include('header.php'); ?>
      	<?php if (!empty($utm_term)) {
      					if ($utm_term == 'holod') {
      						include 'inc/pageHeader/pageHeader2.php';
      						include 'inc/hero2.php';
      					} elseif ($utm_term == 'vkluchaet') {
      						include 'inc/pageHeader/pageHeader1.php';
      						include 'inc/hero1.php';
      					}
      					
      				} else {
      					include 'inc/pageHeader/pageHeader1.php';
      					include 'inc/hero1.php';
      					
      				}
      	 ?>
      

      Source: index.php

      # Отправка на email

      Данные форм отправляются на email заказчика. Email валидируются перед отправкой на бэке. Работает это на PHP. Скрипт расположен в файле sendmail.php.

      # Исходный код на GitHub

      Klimatic-service (opens new window)