For phone masking use this webstool.ru/jquery.maskedinput.html
woocommerce выбрать вариацию через jQuery
|
1 |
jQuery( "ul[aria-label='Shoe Size'] li[data-value='39']" ).click() |
Удалить href у ссылок
Иногда бывает ситуация, когда у блоков, к которым нет доступа необходимо удалить ссылки. Например, если вы имеете дело с сайтом, созданном на cms вордпресс, в котором блоки на странице набросаны плагином конструктором контента. Блок выглядит как нужно, содержит необходимую пользователю информацию, но с иконок или заголовков идут ссылки, предусмотренные стандартным компонентом плагина. А ссылки эти не нужны, из-за них страница теряет вес.
Решить данную ситуацию поможет javascript. Сделать это можно с помощью кода:
|
1 2 3 4 5 |
Array.prototype.forEach.call(document.querySelectorAll('.darna-icon-box a, .darna-process a'), el => { if (!el.value) { el.removeAttribute("href"); } }) |
Достоинство кода в том, что в операторе выбора можно через запятую указать все ссылки, у которых необходимо удалить href.
Установка курсора в начало при вводе телефона
В формах заявки на сайтах всегда есть поле ввода для телефона. Чтобы пользователь не мог ввести туда сторонних символов используется скрипт maskedinput. Но проблема в том, что если просто подключить данный скрипт, то пользователь может начать ввод телефона с любой позиции. Точнее будет сказать — с той, в которую попадет нажав мышь. Следующий код поможет это исправить, он будет ставить курсор в начало строки ввода.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function () { $.mask.definitions['9'] = ''; $.mask.definitions['d'] = '[0-9]'; $('input[type="tel"]').mask("+7(ddd) ddd-dd-dd"); }); $.fn.setCursorPosition = function(pos) { if ($(this).get(0).setSelectionRange) { $(this).get(0).setSelectionRange(pos, pos); } else if ($(this).get(0).createTextRange) { var range = $(this).get(0).createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } }; $('input[type="tel"]').click(function(){ $(this).setCursorPosition(3); // set position number }); |
В данном примере сначала производится маскирование номера телефона. Поле ввода телефона должно иметь атрибут type=»tel». И курсор будет ставиться в третью позицию после +7(
fancybox 3 подключить
Существует большое количество различных скриптов, которые реализуют функционал слайдера и галереи изображений.
На вкус и цвет товарищей нет, но данный скрипт по праву является одним из самых популярных в данной категории. Подключается он с помощью двух строк, добавленных в код страницы сайта:
|
1 2 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css" integrity="sha256-P8k8w/LewmGk29Zwz89HahX3Wda5Bm8wu2XkCC0DL9s=" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script> |
Поставить цели в яндекс метрике и гугл аналитикс
Для анализа юзабилити сайта и эффективности отдельных элементов страниц используют цели. В приведенном ниже коде для отслеживания события клика по кнопке используется jquery:
|
1 2 3 4 5 6 7 |
$("#sendMessage_OneClick").click(function(e) { gtag('event', 'click', { 'event_category': 'quick_shop', 'event_label': 'quick-button' }); yaCounter19340647.reachGoal('quick_shop');return true; }); |
Очень часто цели метрики вешают прямо на элемент. То есть прямо на кнопку добавляют событие onsubmit с кодом от ЯМ или ГА. Но такой подход очень тяжел, не всегда быстро и легко найти место в шаблоне, где можно привязать метрику к необходимому элементу.
Retina.js
Данный скрипт используется для того, чтобы на экранах с большим разрешением (стандартное разрешение ретина 2880 x 1800) заменять картинки на их копии с лучшим качеством. Например:
|
1 |
<img src="images/boi.jpg" data-at2x="images/boi_retina.jpg"> |
В данном случае на обычных экранах будет подключаться картинка images/boi.jpg, а на ретина экранах boi_retina.jpg. Естественно последнее изображение имеет лучшее качество(соответственно и больший вес). Скрипт анализирует наличие у тегов атрибута
|
1 |
data-at2x |
И в случае необходимости использует его. Подключен скрипт должен быть перед закрывающимся тегом body
|
1 |
<script src="js/retina-1.1.0.min.js"></script> |
Кнопка вверх для сайта
Кнопка вверх актуальна для одностраничных сайтов, так как они имеют длинное тело. А также при просмотре сайтов, с большим количеством материала с мобильных устройств. Для добавления кнопки на сайт необходимо в верстку добавить элемент с id=»scrollup». При наведении на этот элемент он будет осветляться. Показываться кнопка будет только при прокрутке страницы, заданной в теле скрипта(сейчас стоит смещение 550 пикселей). Читать далее «Кнопка вверх для сайта»