GRAVITSAPA.INFO

Компьютеры, электроника, софт, авто, мото, вело, сайты, жизнь, советы :)

Посты категории: Создание сайтов

Скачать бесплатно модуль импорта из YML для OpenCart 2.3.x

Сразу скажу, автор данного модуля ocext.com, полное название модуля YML import — OCext OpenCart Data Management PRO, версия 2.6.0.0 для OpenCart 2.3.x. Разработчик распространяет его платно.
Но я нашел в интернетах бесплатный зануленый вариант, перекопал код в каждом файле, удалил вредоносный код и проверил на работоспособность в ocStore 2.3.0.2.3. Поэтому скачивая данный модуль, можете быть уверены в его работоспособности и безопасности!

СКАЧАТЬ модуль импорта из YML для OpenCart 2.3.x

Инструкция по установке модуля импорта из YML

Смотреть полностью

Простой адаптивный Lightbox изображений для WordPress без плагинов

Подключать будем библиотеку отсюда. Там же можно посмотреть demo. Называется Lightbox2 от разработчика Lokesh Dhakar. Достаточно простое решение, не перегруженное, изображения в лайтбоксе будут адаптироваться под любые размеры мониторов на любых мобильных устройствах.

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

Итак, делаем всё по инструкции для подключения Lightbox изображений в Вашей теме WordPress:

  1. Скачиваем и распаковываем архив с файлами Лайтбокса.
  2. Ищем папку «src», в ней есть три папки, которые нужно скопировать в корень папки Вашего шаблона WordPress.
  3. Затем в файле header.php между нужно подключить файлы Лайтбокса вот так:
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/lightbox.css">
    <script src="<?php bloginfo('template_url'); ?>/js/lightbox.js"></script>
  4. После этого в файл functions.php нужно вставить этот код:
    <?php
    add_filter('the_content', 'addrellightbox');
    function addrellightbox($content) {
    global $post;
    $pattern ="/<a(.*?)href=('|")(.*?).(bmp|gif|jpeg|jpg|png)('|")(.*?)>/i";
    $replacement = '<a$1href=$2$3.$4$5 data-lightbox="image"$1 title="'.$post->post_title.'"$6>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
    }
    ?>
  5. Изображения в посты нужно вставлять как медиафайл:

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

Делаем кнопки социальных сетей для WordPress самым простым способом

В интернетах по этому поводу написано огромное количество статей. Но все эти варианты реализации кнопок соц. сетей для WordPress сложные или на основе тяжелых плагинов. Поэтому я сделал сам простые рабочие кнопки. А именно кнопки поделиться для Facebook, Telegram, Viber, Twitter, Google+, VK, OK и Whatsapp. Кода мало, нагрузки минимум, универсальное использование. Выглядят они вот так:

Для установки кнопок соц. сетей для WordPress нужно выполнить простые шаги:

  1. В файле header.php между <head></head> подключаем шрифты FontAwesome для красивого отображения иконок:
    Смотреть полностью

Делаем адаптивными видео с Youtube для любого сайта без лишних блоков и без CSS кода

В некоторых статьях блога Gravitsapa.info присутствую видео с Youtube, которые вставлены самым обычным способом:

Видео вставленное на сайт просто с таким кодом не является адаптивным. На мобильных устройствах будет выходить за рамки экрана. В интернетах находил решение, где данный iframe помещают в div контейнер с любым классом и задают css стили для адаптивности. Но мне такое решение не понравилось, так как если на сайте уже присутствует множество встроенных видео с Ютуба, то слишком трудоёмко будет каждое оборачивать в div блок. Поэтому был написан простенький скрипт, который находит на странице такое видео и задаёт ему ширину 100% вместо фиксированной ширины.

Для моего сайта скрипт выглядит следующим образом:
<script>
$(document).ready(function() {
var vidos = $('article iframe'); //article текущий блок в котором iframe
vidos.attr('width','100%');
});
</script>

Вставить его можно между <head>…</head>

Этот скрипт подходит для любого другого сайта. Нужно лишь «article» заменить на класс или ид того блока, где находится iframe. Например, если код будет выглядеть так:
<div class="post"><iframe width="560" height="315" src="https://www.youtube.com/embed/2Vo0lhfE8Jo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
…то в скрипте вместо article iframe нужно написать .post iframe
Таким образом редактировать ничего не нужно, никакими дополнительными div блоками оборачивать видео ненужно и писать дополнительные CSS стили тоже не нужно. Решение простое и универсально, за это спасибо программисту от бога @only_darkangel (Телеграм).

Смотреть полностью

Используя нативный JavaScript исправляем определённую часть текста

Данное задание размещено на одном из крупнейших ресурсов СНГ в качестве теста на фронтендщика…

Итак! Имеем блок с текстом:
<div class="example">Дважды <span>два</span> - пять</div>

Задание изложено следующим образом:
Дан фрагмент HTML. Используя только нативный JavaScript исправьте текст, следующий после тега <span> так, чтобы элемент <span> остался незатронутым.

Решение данной задачи следующее:
<script>
document.getElementsByClassName('example')["0"].childNodes[2].textContent = " - шесть";
</script>

И короткое разъяснение кода для понимания того, что происходит:

  1. document — наша страничка
  2. .getElementsByClassName('example') — выбираем содержимое контейнера с классом example
  3. ["0"] — имеем массив содержимого контейнера, и нам нужен его первый элемент
  4. .childNodes — в этом объекте находятся дочерние элементы, их трое: текст до спана, спан, текст после спана.
  5. [2] — выбираем текст после спана
  6. .textContent = " — шесть" — присваиваем этому элементу свой текст

Автор решения @only_darkangel (Telegram).
Спасибо за внимание 😉

Почему может не работать стиль transition-delay?

Итак, имеем менюху с выпадающими списками. В стилях это реализовано как display: none по умолчанию для подменю. И display: block для подменю при hover на основное меню.

Хотим сделать анимацию и задержку появления меню. Используем стиль transition с параметрами или просто стиль паузы transition-delay. Но из-за того, что подменю изначально назначено display: none, то transition работать не будет.

Для этого вместо display: none и display: block будем использовать opacity: 0; visibility: hidden; и opacity: 1; visibility: visible;.

Пример реализации можно посмотреть тут.

Выводим количество комментариев в Moguta CMS используя плагин «Древовидные комментарии»

В Moguta CMS, что бы организовать более функциональные отзывы в товарах обычно используют плагин «Древовидные комментарии». Работает он отлично и есть в нём дополнительно функция для вывода количества комментариев, вот такой шорткод [mg-treelike-count-comments item="" type=""].

А вот таким шорткодом мы выводим сами комментарии в табе комментариев страницы товара [mg-treelike-comments type=""]. Вставлять его нужно в файле mg-templates/default/views/product.php в div с id="tab2".

Итак, а что бы заработал первый шорткод и начал выводить количество отзывов к определённому товару, нужно в параметре item указать относительную ссылку на сам товар. Т.е. выглядеть это должно например так [mg-treelike-count-comments item="/ssilka-na-tovar" type=""]. Поэтому нужно, что бы в шорткоде автоматически определялась относительная ссылка на товар. Я захотел количество вывести в названии самого таба:

Для этого снова заходим в файл mg-templates/default/views/product.php и там где ссылка с параметром href="#tab2" должен получится такой код:
<li><a href="#tab2">Отзывы ([mg-treelike-count-comments item="/<?= URL::parsePageUrl(); ?>" type="product"])</a></li>

Надеюсь вам удалось разобраться где что вставлять и заменять в коде 🙂 Если возникли вопросы, пишите в комментариях 😉

Закрываем от индексации технические страницы в Moguta CMS

Для эффективного продвижения интернет-магазина на Moguta CMS следует правильно настроить индексацию страниц. Делать мы это будем при помощи мета тега <meta name="robots" content="noindex, nofollow" /> — в случае полного закрытия от поисковиков (страницы корзины, регистрации, личного кабинета и подобные), и <meta name="robots" content="noindex, follow" /> — в случае, если хотим что бы поисковики сканировали внутренние ссылки на странице, но не брали её саму в выдачу (общая страница каталога и страницы пагинации).

Для этого открываем файл в папке mg-core/lib/mg.php и примерно на 800 строке ищем public static function meta(). Там найдём следующее:
$meta = '
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>'.$title.'</title>
<meta name="keywords" content="'.$metaKeywords.'" />
<meta name="description" content="'.$metaDescription.'" />
';

Код выше заменяем на этот:
Смотреть полностью

Простой Progress Bar на JQury как на YouTube

  1. Создаем файл progress.js, помещаем его в удобную папку на сайте и подключаем на всех страницах между <head></head> вот так <script src="полный_адрес_к_файлу/progress.js"></script>
  2. В файл progress.js вставляем этот код:
    $(function() {
    var $progress = $('#progress');
    $(document).ajaxStart(function() {
    if ($progress.length === 0) {
    $progress = $('<div><dt/><dd/></div>').attr('id', 'progress');
    $("body").append($progress);
    }
    $progress.width((50 + Math.random() * 30) + "%");
    });
    $(document).ajaxComplete(function() {
    $progress.width("100%").delay(200).fadeOut(400, function() {
    $progress.width("0%").delay(200).show();
    });
    });
    $(document).ready(function(){
    $.getJSON('https://jsonip.com');
    });
    });
  3. Дописываем такие стили, которые можно подправить под свой дизайн:
    Смотреть полностью

Делаем выезжающее боковое меню на чистом CSS

Итак, коротко и ясно… Ниже способ реализации простого выезжающего меню. Код сразу с комментами, что бы было понятно. Тут DEMO. Смысл в том, что нажимаем на значок ☰, и слева выезжает менюшка. Значек бургера превращается в крестик, как в Телеграме 🙂 Затем нажимаем на крестик и менюшка заезжает влево. Всё очень простенько… При желании код и стили легко модернизировать, изменить цвета и размеры. Так же если хотите переместить меню в правую часть, то в стилях просто все left замените на right. Опять же в DEMO песочнице можно экспериментировать. Преимущество такого меню в том, что его можно внедрить в большинство шаблонов.

Вот сама вёрстка:
<!-- input нужен для того, что бы в дальнейшем задать стили иконке ☰ по событию checked, то есть когда меню будем открыать и закрыать -->
<input type="checkbox" id="hmt" class="hidden-menu-ticker">
<!-- Далее вёрстка самой иконки. Разделена на спаны, что бы красиво превращать в крестик при открытии (почти как в Телеграме :) -->
<label class="btn-menu" for="hmt">
<span class="first"></span>
<span class="second"></span>
<span class="third"></span>
</label>
<!-- Менюшка раскрывающаяся и скрывающаяся -->
<ul class="hidden-menu">
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">CONTACTS</a></li>
</ul>
<!-- А затем уже контент странички. В примере просто зашголовок, что бы было видно, как менюшка нахлёстом выдвигается -->
<header>
<h1>ПРОСТОЕ ВЫЕЗЖАЮЩЕЕ БОКОВОЕ МЕНЮ</h1>
</header>

Далее CSS стили:
Смотреть полностью

NIGHT
Наверх