г. Владимир, пр. Ленина 15а, офис 410
8 (904) 259-97-29
(ватсапп, вайбер, телеграмм)
пн-пт: с 09.00-18.00
e-mail: info@pavelsonar.net

создать сайт

  • Всплывающее окно при заходе на сайт

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

    Нам потребуется плагин arcticModal - скачиваем его тут

     

    Далее устанавливаем/подключаем его на наш сайт:

    1. <!-- arcticModal -->
    2. <script src="/main/arcticmodal/jquery.arcticmodal.js"></script>
    3. <link rel="stylesheet" href="/main/arcticmodal/jquery.arcticmodal.css">

    подключаем сам скрипт и стандартный стиль плагина.

    Далее нам нужно подключить плагин cookie от яндекса

    1. <!-- cookie -->
    2. <script src="//yandex.st/jquery/cookie/1.0/jquery.cookie.min.js"></script>

    Теперь нужно подключить на страницу форму HTML

    1. <div style="display: none;">
    2. <div class="box-modal" id="boxUserFirstInfo">
    3. <div class="box-modal_close arcticmodal-close">закрыть</div>
    4. <b>У вас уже есть паспорт?!</b><br>
    5. <br>
    6. Надеюсь тебе понравится на нашем сайте!
    7. У нас много интересных товаров.
    8. Добро пожаловать :)
    9. </div>
    10. </div>

    А теперь сам скрипт, который все это будет обрабатывать:

    1. <script>
    2. (function($) {
    3. $(function() {
    4. // Проверим, есть ли запись в куках о посещении посетителя
    5. // Если запись есть - ничего не делаем
    6. if (!$.cookie('was')) {
    7. // Покажем всплывающее окно
    8. $('#boxUserFirstInfo').arcticmodal({
    9. closeOnOverlayClick: false,//при вызове arcticModal определяет, будет ли закрываться окно при клике на оверлее
    10. closeOnEsc: true
    11. });
    12. }
    13. // Запомним в куках, что посетитель к нам уже заходил
    14. $.cookie('was', true, {
    15. expires: 365, //время хранения куки в днях
    16. path: '/'
    17. });
    18. })
    19. })(jQuery)
    20. </script>
  • Как добавить комментарий пользователя к списку заказов джумшоппинг

     

    Переходим в файл /administrator/components/com_jshopping/views/orders/tmpl//list.php

    202 строка в файле <?php echo $row->payment_name?> (можно найти поиском). После нее вставляем следующий код:

    1. <div class="infoorders"><span class="commenttitle"><?php echo _JSHOP_CUSTOMER_COMMENT?></span>:<br><?php echo $row->order_add_info?></div>

    самом конце файла добавляем:

    1. <style>
      .order_detail{padding: 0 0 25px;}
      .backlight1 td{background-color:#fff; border-top: 3px solid #FFF;}
      .backlight2 td{background-color:#BDF; border-top: 3px solid #FFF;}
      .backlight3 td{background-color:#FF4C4C; color:#fff; border-top: 3px solid #FFF;}
      .backlight4 td{background-color:#FCF; border-top: 3px solid #FFF;}
      .backlight5 td{background-color:#FFC; border-top: 3px solid #FFF;}
      .backlight6 td{background-color:#9D9; border-top: 3px solid #FFF;}
      .backlight7 td{background-color:#CDFB17; border-top: 3px solid #FFF;}
      </style>

    а в файле css вашего АДМИНИСТРАТИВНОГО ШАБЛОНА :

    1. .infoorders {
    2. width: 200px;
    3. padding: 6px;
    4. background: #F5F5F5;
    5. color: #252525;
    6. border: 1px solid;
    7. }
  • Как обернуть блок div ссылкой

    Для того, чтобы наш блок стал активным (тип link, a) необходимо задать ему 

    1. onclick="location.assign('ссылка нужная')"

    Пример:<div onclick="location.assign('http://ya.ru')" class="myblock"></div>

  • Как проверить сайт на адаптивность?

    Друзья, для тех, кто делает сайты, либо же для простых пользователей и владельцев я рекомендую сервис http://quirktools.com/screenfly/ - отличные возможности просмотра разрешений девайсов и гаджетов и изменение до нужных размеров дисплея.

  • Как убрать копирайт Joomla

    Иногда открыв исходный код страницы мы можем увидеть такую запись

    1. <metaname="generator"content="Joomla! - Open Source Content Management" />

    И многие спрашивают у меня как убрать это. На самом деле это системная инфомация о CMS выпущеная разработчиками. Убрать ее можно "костыльным" методом, но после обновления джумла файл затрется и надпись появится вновь. Сам же я пользуюсь данным плагином - он замечательно справляется с задачей. Скачать плагин для джумла вы можете кликнув по ссылке ранее. Если вам требуется настройка вашего сайта или доработка, то прошу писать вконтакте или на почту указанную в контактах.

     

  • Как удалить товары в базе MySQL

    Для удаления товаров массово с сайта джумла + джумшоппинг

    введите SQL запрос

    • DELETE FROM суффикс_jshopping_products WHERE 1
  • Маска ввода поля для сайта

    Друзья, для удобства пользователей, и корректности заполнения текстовых полей на сайте, часто применяю маску ввода. 

    Что для этого требуется:

    1. Проверьте у себя на сайте подключение библиотеки jquery. Должно быть что-то такого плана:

    1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

    если даннное подключение отсутствует, то подключите после <head> в индексном файле шаблона

    2. Затем необходимо скачать плагин с официального сайта и подключить опять же в <head>

    1. <script src="/main/js/maskedinput.js"></script>

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

    1. <script type="text/javascript">
    2. jQuery(function($){
    3. $("#phone").mask("(999) 999-9999");
    4. });
    5. </script>

    #phone - идентификатор вашего поля .mask - формат отображения

    Существуют и другие значения для масок:

    a — Все алфавитные значения (A-Z,a-z) или (A-Я,a-я). Если не сработает, попробуйте убрать запятую.
    9 — Все цифровые значения (0-9)
    * — Любые алфавитно-цифровые значения (A-Z,a-z,0-9)

     

  • Модуль карусель новинок товаров джумшоппинг

    Для начала в <head> шаблона джумла подключаем скрипты:

    1. <script type="text/javascript" src="/main/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/owl.carousel.js" ></script>
    2. <script type="text/javascript" src="/main/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/owl.carousel.min.js" ></script>

    Сами скрипты качаем тут http://owlgraphic.com/owlcarousel/ и распаковываем в папку js шаблона - там же, кстати имеются и примеры

    После того как все подключили, качаем модуль.

  • Портфолио

    Кафе "Пшеничный Кот" - http://pshenichniy-kot.ru
    "Пшеничный кот" - семейное кафе в центре Владимира - стильное и уютное место с хорошей кухней.

    Сервис легковых и комерческих авто во Владимире "Слик-Авто" - http://slik-avto.ru
    автомойка, автосервис

    Сертифицированный установочный центр "Carbon33" - http://www.carbon33.ru/
    Защита и уход за вашим автомобилем

    Прогнозы на спорт от "Мегабет" - http://megabet.su/
    платные прогнозы на спортивные события

    Официальный магазин Xiaomi - https://ru-xiaomi.com
    Продажа современных гаджетов и аксессуаров

    Школа-салон красоты во владимире "DECO" - https://bsdeco.ru
    продажа товаров для педикюра и маникюра

    Интернет-магазин "Рыбалка Шоп" - https://rybalka-shop.ru/
    интернет-магазин товаров для современного рыболова

    Сеть фитнес-клубов "Академия Тела" - http://akademiatela.ru/
    самая большая сеть фитнес-клубов Владимира

    Интернет-магазин SFOOD - http://sfood.ru
    сбалансированное питание для спортсменов с доставкой

    ИКЦ ПроЭксперт - https://proexpert.su
    Сайт компании занимающейся консалтинговыми услугами, бухгалтерские услуги во Владимире

    ИКЦ ПроЭксперт - https://proexpert-center.ru
    Сайт компании занимающейся консалтинговыми услугами

    Сеть магазинов спортивного питания #Bodybar33 - http://bodybar33.ru
    Продажа спортивного питания, восстановительных комплексов, энергетических напитков

    Интернет-магазин "Шерстистость-Пушистость" - http://sherstistost.ru/
    Магазин товаров из натуральной шерсти и меха

    Интернет-магазин Пультов в Красноярске - https://kraspult.ru
    Продажа пультов по всей России с доставкой

    Интернет-магазин Технобай - http://tehnobuy.net
    Продажа техники apple, аксессуаров и гаджетов

    Интернет-магазин автозапчастей Автопоинт54 - http://autopoint54.ru
    Поиск и подбор товаров по vin, продажа запчастей

    Сайт компании АвтоТрансфер - http://авто-трансфер.рф
    Трансфер в аэропорты Москвы из Рязани

    Интернет-магазин фотоштор во Владимире - http://шторы33.рф
    фотошторы, фототюль и другая фотопродукция от производителя

    Интернет-магазин пультов http://kraspult.ru/
    пульты для любого вида техники с доставкой по РФ

  • Разрешения для адаптивной верстки @media подключения

    1. /* monitors and laptops */
      @media screen and (min-width: 1240px) {} 
    1. /* tablet */
    2. @media screen and (min-width: 1024px) and (max-width: 1240px) {}
    3. @media screen and (min-width: 768px) and (max-width: 1024px) {}
    1. /* mobile */
    2. @media screen and (max-width: 768px) {}
    1. /* iPad in portrait & landscape */
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
    1. /* iPad in landscape */
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
    1. /* iPad in portrait */
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
    1. /* Retina iPad in portrait & landscape */
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {}
    1. /* Retina iPad in landscape */
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
      and (-webkit-min-device-pixel-ratio: 2) {}
    1. /* Retina iPad in portrait */
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {}
    1. /* iPad 1 & 2 in portrait & landscape */
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){}
    1. /* iPad 1 & 2 in landscape */
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {}
    1. /* iPad 1 & 2 in portrait */
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}
    1. /* iPad mini in portrait & landscape */
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) {}
    1. /* iPad mini in landscape */
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {}
    1. /* iPad mini in portrait */
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}
    1. /* iPhone 5 in portrait & landscape */
      @media only screen and (min-device-width : 320px) and (max-device-width : 568px) {}
    1. /* iPhone 5 in landscape */
      @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {}
    1. /* iPhone 5 in portrait */
      @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {}
    1. /* iPhone 2G-4S in portrait & landscape */
      @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
    1. /* iPhone 2G-4S in landscape */
      @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {}
    1. /* iPhone 2G-4S in portrait */
      @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {}
  • Скрипты добавления класса блокам

    Скрипт добавления класса при наведении:

    1. $('img').hover(function() { // выбираем наш блок
    2. $(this).addClass('class'); // добавляем ему класс, который появится при наведении
    3. },
    4. function() {
    5. $(this).removeClass('class'); //удаляем
    6. }
    7. );

     

     

    (наведите на картинку)

     


    Скрипт добавления класса при клике и удаления:

    1. <script>
      $(".jshop_img_thumb").on('click',function() {
      $(this).addClass('active').siblings().removeClass('active');
      });
      </script>

  • Сортировка товаров в джумшоппинг

    Клиенты иногда спрашивают, как сортировать товары в джумшоппинг? Т.е. один товар выше другого, или наоборот убрать товар в конец списка. Делается это очень просто, но скажу что не интуитивно понятно это сделано. Приложу скрины.

    1. Переходим в раздел категории джумшоппинг и жмем на цифры (которые указываю кол-во товаров в категории)

    2. После этого откроется список товаров, в котором возможна сортировка товара, предварительно на кликнуть на само слово СОРТИРОВКА и далее уже выставлять позиции

    думаю теперь это облегчит ваши страдания :)

  • Фиксирование блока при прокрутке

    Задача зафиксировать меню при прокрутке страницы на сайте. Для этого нам потребуется скрипт и некоторые стили CSS

    1. <script type="text/javascript">
    2. $(document).ready(function () {
    3. var objToStick = $("#menu"); //Получаем нужный объект, div который необходимо зафиксировать
    4. var topOfObjToStick = $(objToStick).offset().top; // Получаем начальное расположение нашего блока
    5. $(window).scroll(function () {
    6. var windowScroll = $(window).scrollTop(); //Получаем величину, показывающую на сколько прокручено окно
    7. if (windowScroll > topOfObjToStick) { // Если прокрутили больше, чем расстояние до блока, то приклеиваем его
    8. $(objToStick).addClass(".block"); // добавляем класс к нашему блоку
    9. } else {
    10. $(objToStick).removeClass(".block"); // убираем класс блока при возврате
    11. };
    12. });
    13. });

    А теперь получившемуся диву добавим CSS стили:

    1. .block {
    2. position: fixed;
    3. top: 0;
    4. z-index:9999; /*значение, которое дает расположение по оси Z выше других блоков*/
    5. }

    Пример на сайте http://kraspult.ru/