г. Владимир, пр. Ленина 15а, офис 413


8 (904) 259-97-29
(ватсапп, вайбер, телеграмм)

пн-пт: с 09.00-18.00
e-mail: info@pavelsonar.net

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

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

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

Для начала в <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://quirktools.com/screenfly/ - отличные возможности просмотра разрешений девайсов и гаджетов и изменение до нужных размеров дисплея.

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

  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>

Задача зафиксировать меню при прокрутке страницы на сайте. Для этого нам потребуется скрипт и некоторые стили 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/

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

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

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

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

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

Нам потребуется плагин 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>

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

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

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)

 

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

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

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

 

Когда клиент забывает свой измененный пароль к админке джумла, то на помощь приходит данная статья ;)

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

 

 

жмем на карандаш и переходим в редактирование пользователя (пользователей может быть конечно же много, выбираем нужного нам)

Далее находим ячейку с паролем и выбираем MD5

 

 

В ячейку справа прописываем ваш новый пароль и жмем сохранить. Проверяем вход

 

Сегодня я расскажу, как сделать подобное тому, что вы видите на скрине. Итак, данный скрин снят с сайта http://ru-xiaomi.com/ - джумла и джумшоппинг последних версий на 19.10.2016 . Сам интернет-магазин дополнен различными платными плагинами и аддонами, о которых я расскажу позднее.

Приступим

Переходим в файл product_default.php - вашего шаблона джумшоппинг ( /components/com_jshopping/templates/шаблон/product/ ) и вставляем в нужное место форму:

  1. <div class="formclick">
  2. <h4>Купить в один клик<br><span>(укажите свой телефон)</span></h4>
  3. <form id="click-form">
  4. <input type="text" name="name" id="sendphone" placeholder="+7 (012) 345-67-89"/>
  5. <input name="url" id="url" type="hidden" value="<?php echo "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];?>"/>
  6. <input name="urlName" id="urlName" type="hidden" value="<?php print $this->product->name?>"/>
  7. <input type="submit" value="Купить в один клик" class="clickbutton"/>
  8. </form>
  9. </div>

Затем добавляем сразу после формы скрипт маски для поля:

Предварительно скачиваем и подключаем в head шаблона файлы https://github.com/digitalBush/jquery.maskedinput или http://digitalbush.com/projects/masked-input-plugin/

  1. <script>
  2. //Код jQuery, установливающий маску для ввода телефона элементу input
  3. //1. После загрузки страницы, когда все элементы будут доступны выполнить...
  4. $(function(){
  5. //2. Получить элемент, к которому необходимо добавить маску
  6. $("#sendphone").mask("+7 (999) 999-99-99");
  7. });
  8. </script>

и сам скрипт заказа:

  1. <script>
    //инициализируем класс кнопки клика
    $(".clickbutton").click(function(e){
    e.preventDefault();
    //илициализируем id поля телефон
    if ($("#sendphone").val() == '') return false;
    var p = $(e.target).parent();
    //добавляем файл обработчик отправки на почту и поля
    $.post("/click.php", {phone:$("#sendphone").val(),product:$("#urlName").val(),url:$("#url").val()}, function(msg){
    $(p).html($("<p />").addClass("successClicked").text(msg))
    },"html");
    return false;
    })
    </script>

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

Обработчик я думаю не составит для вас труда ;)

Установка на ваш сайт - 500 рублей

Рекомендую отличный хостинг