Виджет (widget) — блок внедряемый в ваш сайт. Если вы немного знакомы с веб-разработкой, вы наверняка уже встерчали этот термин. Ставшие давно привычными внешние счетчики на сайт, информеры погоды, блоки «лайков» и подписчиков для социальных сетей — все это виджеты. «Виджет.ОКНАРДИЯ» — блок привносящий функционал маркетплейс-агрегатора «Окнардия» на сайт любой оконной компании.

 Виджет.ОКНАРДИЯ

Как установить «Виджет.ОКНАРДИЯ»?

Просто! Всего-навсего надо разместить на нужной страничке своего сайта следующий HTML-код:

<iframe src="https://oknardia.ru/widget/id_000?css=https://адрес.вашего.сайта/путь_к_файлу_стилей/oknardia.css"
        name="oknardia" id="oknardia" width="100%" frameborder="0" height="320" seamless
        onload="var th=this;var h=null;setInterval(function(){if(!h)if(location.hash.match(/^#h(\d+)/))
                h=RegExp.$1;if(!h)for(var i=0;i<10000;i+=10)if(top.frames['h'+i]){h=i;break;}if(h)
                th.style.height=h+'px';},100);">
        Если бы ваш браузер поддерживал плавающие фреймы, тут был бы виджет!
</iframe>

где: id_000 — id-номер полученный при регистрации компании в базе «Окнардия»*, а http://адрес.вашего..сайта/путь_к_файлу_стилей/oknardia.css — путь к CSS-файлу, для адаптации внешнего вида виджета под дизайн вашего сайта.

* — регистрация и присвоение id-номера происходит автоматически при размещении ценовый предложений компании в «Окнардии».

Как настроить свой CSS для «Виджет.ОКНАРДИЯ»?

Возможно дизайн вашего сайта требует использование специальных стилей (отступов, цветов, рамок, шрифтов, размеров текста и тому подобного) или вы просто захотели сделать отображение внутри «Виджета.ОКНАРДИЯ» отличным от предлагаемого. Вы можете сделать это подключив собсвенный стилевой CSS-файл как указано выше. «Виджет.ОКНАРДИЯ» базируется на фреймворке Twitter Bootstrap (версия 3.3.6) и использует стилевые настройки установленные в нем по умолчанию. Вы можете создать свой CSS-файл воспользовавшить инструментами настройки стилей Bootstap или в любом текстовом редакторе, отследив какой CSS-класс и id используется теми или иными элементами вижжета с помощью инструментов вебмастера встроенных браузер. Для вашего удобства, используйте css-шаблон в котором описаны все основные стилевые компоненты виджета. Этот шаблон используется в приведенном выше примере:

body {
  background-color: rgba(255, 255, 255, 0); /* прозрачный фон для всех блоков виджета */
}
/*******************************************************
 ПЕРВАЯ ИТЕРАЦИЯ (БЛОК) -- ВВОД АДРЕСА В ВИДЖЕТ
********************************************************/
#input_address { /* форма (form) */
  padding-top: 1ex;
}
#input_address .input-group { /* блок формы и кнопок */
  margin: 0;
}
#input_address .input-group input, #addr { /* поле ввода адреса */
  color: black;
  font-family: monospace;
  border: outset 1px darkblue;
}
#input_address .input-group .input-group-addon { /* блок со значком "лупа" */
  background-color: darkblue !important;
  border: outset 1px darkblue;
}
#input_address .input-group .input-group-addon .glyphicon-search { /* значок "лупа" */
  color: white;
}
#input_address .input-group .input-group-btn { /* блок с кнопкой "найти" */
  font-family: monospace;
}
#input_address .input-group .input-group-btn button { /* кнопка "найти" */
  text-transform: uppercase;
  background-color: darkblue !important;
  color: white !important;
}
.ui-autocomplete { /* Подсказки с адресами */
  font-family: monospace;
}
/***********************************************************************************************************/
/*** ВТОРАЯ ИТЕРАЦИЯ (БЛОК) -- ВЫБОР ТИПА КВАРТИРЫ                                                       ***/
/***********************************************************************************************************/
#select_apart h1 { /* Заголовок */
  margin-top: -1ex;
}
#select_apart h1 small { /* Адрес дома, который выводится в заголовке*/
  font-size: xx-small;
  color: black !important;
}
#select_apart .btn-toolbar { /* Блок с кнопками*/
  padding-top: 1ex;
  width: 95%
}
#select_apart .btn-toolbar button { /* Кнопки */
  font-family: monospace;
  background-color: darkblue !important;
  color: white !important;
  margin: 0.5ex;
}
#select_apart p { /* текст, если в базе нет данных для здания по указанному адресу */
  width: 80%;
}
/***********************************************************************************************************/
/*** ТРЕТЬЯ ИТЕРАЦИЯ (БЛОК) -- ВЫВОД РЕЗУЛЬТАТОВ                                                         ***/
/***********************************************************************************************************/
#report h1 { /* <------------------------------------------------------------------------------- Заголовок */
  color: black !important;
}
#report h1 #header1 { /* <----------------------------------------------- Заголовок: строка "Цены окон..." */
  color: black !important;
}
#report h1 #header1 span { /* <-------------------------------------------- Заголовок: название серии дома */
  font-style: italic;
}
#report h1 #header2 { /* <---------------------------------------------------- Заголовок: строка с адресом */
  margin-top: 0 !important;
  font-size: 0.8ex !important;
  padding-left: 50px !important;
}
#report h1 #header3 { /* <------------------------------ Заголовок: строка с названием планировки квартиры */
  font-size: 1.4ex !important;
  font-weight: 100 !important;
  padding-left: 50px !important;
}
#report .demo-mode { /* <--------------------------- Блок отображаемый когда виджет работает в демо-режиме */
  padding-top: 1ex;
  padding-bottom: 1ex;
  border-left: red double;
}
#report .pict-row { /* <-------------------------- Блок-ряд с картинками проемов и базовых схем открывания */
  padding: 1ex 0;
}
#report .pict-row .win_discr { /* <------------------------- Блоки с картинками оконных проёмов + описания */
  padding-right: 1em;
}
#report .pict-row .win_discr .pict { /* <--------------------------------Блоки с картинкой оконного проема */
  border-left: grey 1px solid;
}
#report .pict-row .win_discr .pict img { /* <------------------------------------------- Блоки с картинкой */
  height: 250px; /* виджет формирует 500px, но для четкости на retina-дисплеев картинка уменьшается на 50% */
  width: auto;
}
#report .pict-row .win_discr .discr { /* блок с описанием оконного проема */
  border-left: grey 1px solid;
  min-width: 13ex;
  padding-left: 2px;
  font-size: smaller;
  color: black;
}
#report .pict-row .win_discr .discr .size { /* строка "количество окон" в блоке с описанием проема */
  font-size: x-small;
}
#report .pict-row .win_discr .discr .quantity { /* строка "размер проема" в блоке с описанием */
  font-size: x-small;
  font-weight: bold;
}
#report #price-list { /* Таблица с ценовыми предложениями */
  padding: 1ex 0;
}
#report #price-list thead { /* Заголовок таблицы */
  background-color: darkblue;
  color: white;
}
#report #price-list thead tr th { /* Ячейки в зголовке таблицы */
  border-top: black solid 2px;
  border-bottom: black solid 2px;
}
#report #price-list thead .discount {  <>/* Ячейка "СКИДКА". Можете скрыть ее через
  display: none; /* если вы не предоставляете скидок и не хотите акцентировать на это внимания */
}
#report #price-list tbody .specification { /* Ячейка со спецификациями */
  color: black;
}
#report #price-list tbody .specification h3 { /* Заголовок спецификации */
  color: darkblue;
  margin: 0;
  font-size: large;
}
#report #price-list tbody .specification h3 .merchant-name { /* Название поставщика */
  display: none; /* делаем невилимым (скрытым) */
}
#report #price-list tbody .specification small { /* Текст спецификации */
  color: black;
}
#report #price-list tbody .specification .spec-item { /* пункт спецификации */
  padding-right: 1ex;
}

#report #price-list tbody .specification .bullet-red { /* пункт спецификации с минус-фактором
  минус-фактор -- отсутствие доставки, подоконников, отливов, откосов, монтажа и пр. */
  display: none; /* В виджете на своем сайте вы можете скрыть минус-фактор */
}
#report #price-list tbody .specification .bullet-green { /* пункт спецификации с плюс-фактором
  плюс-фактор -- наличие системы климат-контроля, доставки и монтажа/демонтажа */
  font-weight: bold;
}
#report #price-list tbody td { /* ячейки основной части таблицы*/
  border-top: solid 1px darkblue;
}
#report #price-list tbody .discount { /* ячейки с "ИТОГОВОЙ СКИДКОЙ". Можете скрыть ее через
  display: none; /* если вы не предоставляете скидок и не хотите акцентировать на этом внимания */
  font-weight: 900;
  background-color: greenyellow;
}
#report #price-list tbody .in-total { /* ячейки с "ИТОГОВОЙ ЦЕНОЙ" */
  text-align: right;
  font-weight: 900;
  background-color: greenyellow;
}
#report h6 { /* закоговок навигации по типам квартиры */
  font-size: large;
  color: darkblue;
}
#report ul li { /* пункты с типами планировок */
  font-weight: 900;
}
#report ul li a { /* ссылки на пунктах с типами планировок */
  font-weight: 100;
}

Во всем элементам по желанию можно применять модификторы :hover, :focus, :before, :after и прочее.

 
© oknardia.ru, 2016.

Рейтинг@Mail.ru Яндекс.Метрика