Блог Чуденкова Алексея

Веб-разработка и интернет-реклама без воды.

JS: Рисуем логотип

Я бродил по Codepen в поисках интересных решений для анимаций форм и объектов на CSS и наткнулся на клёвую реализацию анимации SVG логотипа. Принцип прост — указываем для каждого элемента path в SVG класс и он будет анимирован. Можно на прелоадер поставить, будет эффектно.

See the Pen Animated SVG Logo by Alexey Chudenkov (@alexey-chudenkov) on CodePen.

 Нет комментариев    31   2 мес   css   js   ui
 Нет комментариев    25   3 мес   php

jQuery: запретить вводить пробелы в E-Mail

Защита от дурака, который может скопировать и вставить почту с пробелами или хуже того ещё и написать её с пробелами.

$("#input_Id").change(function()
     $(this).val($(this).val().replace(/ +/g, ''))
});
 Нет комментариев    18   3 мес   jquery   js   ui   ux

CSS3: Simplest preloader with your logo

Написал простейший прелоадер для предварительной загрузки страниц вашего сайта. Работает на чистом CSS, скрипты используются только для того чтобы после загрузки скрыть прелоадер.

See the Pen Simple preloader with your logo by Alexey Chudenkov (@alexey-chudenkov) on CodePen.

Чтобы заработало, надо в тег body добавить:

onload="preloader()"
 Нет комментариев    17   3 мес   css

PHP: повернуть все изображения в папке

Возникла потребность сменить ориентацию у 5 гигабайт фотографий с тканями. Так как понятия «небо» и «земля» в этом случае отсутствуют, написал скрипт на PHP, который анализирует ширину и высоту всех изображений в папке, и в случае портретной ориентации, происходит поворот изображения на 90 градусов.

В корне сайта создадим файлик с таким содержимым:

<?php
$pathto = getcwd(); // узнаём текущую директорию файла
$dir = $pathto . 'путь к папке с файлами'; // от корня сайта
$f = scandir($dir); // получаем все файлы в папке

foreach ($f as $file){
    if(preg_match('/\.(jpg)/', $file)) // проверяем расширение на JPG
        {
        $filename = $dir.$file; // формируем полный путь к изображению
        $size = getimagesize($filename); // получаем размеры изображения
        $width = $size[0]; // записываем значение ширины в переменную 
        $height = $size[1]; // записываем значение высоты в переменную
        
        if ($height > $width) { // проверяем изображение на портретную ориентацию
            $img = imagecreatefromjpeg($filename); // создадим новое изображение
            $new_image = $dir.'/rotated/'.$file; // укажем название для будущего файла и его расположение
            $imgRotated = imagerotate($img, 90, 0); // повернём изображение на 90 градусов
            imagejpeg($imgRotated, $new_image, 90); // сохраним изображение
        }
    }
}
?>

Всё.

P.S. У меня подвисал скрипт, даже писал 504 Bad Gateway Timeout, но все изображения в итоге перевернул.

 Нет комментариев    21   3 мес   php

Shopify: add quantity button to cart

Добавить в cart-template.liquid

<input type='button' value='-' class='qtyminus' field='updates_{{ item.id }}' />
<input type="number" name="updates[]" id="updates_{{ item.id }}" class="quantity" value="{{ item.quantity }}" />
<input type='button' value='+' class='qtyplus' field='updates_{{ item.id }}' />

Добавить в Assets cart.js и его содержание:

jQuery(document).ready(function(){
    $('.qtyplus').click(function(e){
        e.preventDefault();
        fieldName = $(this).attr('field');
        var currentVal = parseInt($('input[id='+fieldName+']').val());
        if (!isNaN(currentVal)) {
            $('input[id='+fieldName+']').val(currentVal + 1);
        } else {
            $('input[id='+fieldName+']').val(0);
        }
    });
    $(".qtyminus").click(function(e) {
        e.preventDefault();
        fieldName = $(this).attr('field');
        var currentVal = parseInt($('input[id='+fieldName+']').val());
        if (!isNaN(currentVal) && currentVal > 0) {
            $('input[id='+fieldName+']').val(currentVal - 1);
        } else {
            $('input[id='+fieldName+']').val(0);
        }
    });
});

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

Shopify: check user age before shopping

Есть продукты, которые можно продавать в США только лицам старше 21 года, да и то, не во всех штатах. Сам шопифай такого решения разумеется не имеет, поэтому появилось следующее решение, которое работает так: если нет соответствующей куки, то показываем пользователю предупреждение (предупреждение сами верстаем), а если кука есть, то не показываем пользователю предупреждение N-дней. Если пользователю нет 21 года, то отправляем его в магазин лего и куку не присваиваем.

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

{% capture warning_header %}
THE SITE IS ONLY AVAILABLE TO PERSONS OVER 21 YEARS OF AGE.
{% endcapture %}

{% capture warning_question %}
ARE YOU'RE 21 YEARS OLD?
{% endcapture %}

Далее вёрстка самого предупреждения, который нужно запихать в theme.liquid сразу после body. Рекомендую подключить сниппетом, чтобы не засорять шаблон кучей строк.

<div class="warning" id="warning">
    <div class="warning-popup" id="popup">
        <div class="logo">
            <img src="https://cdn.shopify.com/s/files/logo.svg" alt="logo">
        </div>
        <div>{{ warning_header }}</div>
        <div class="warning-question">{{ warning_question }}</div>
        <div class="btns">
            <a href="https://lego.com/"><button class="btn">No</button></a>
            <button class="btn" onclick="ageCheck()">Yes</button>
        </div>
    </div>
</div>

Далее сам скрипт, логику работы описал выше.

<script>
 function ageCheck() {
     var days = 14; //количество дней, через которое спросим возраст снова
     var date = new Date();
     date.setTime(date.getTime()+(days*24*60*60*1000));
     var expires = "; expires="+date.toGMTString();
     document.cookie = 'isAnAdult=true;'+expires+"; path=/";
     location.reload();
   };
  function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
      var c = ca[i];
      while (c.charAt(0)==' ') c = c.substring(1,c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
  };
  var isAnAdult = readCookie('isAnAdult');
  if (isAnAdult) {
    document.write("<style> #warning { display: none; overflow:hidden; }</style>");
  };
</script>
 Нет комментариев    17   3 мес   js   shopify

JS: Определяем включён Caps Lock или нет

На W3C нашёл простой и отличный способ определения капса. Для чего? Всё для UI/UX! Особенно, если аудитория слегка деревянная. Итак, реализация:

var input = document.getElementById("myInput");
var text = document.getElementById("text");
input.addEventListener("keyup", function(event) {
  if (event.getModifierState("CapsLock")) {
    text.style.display = "block";
  } else {
    text.style.display = "none"
  }
});
 Нет комментариев    20   4 мес   js   ui   ux

SimplaCMS: Подсчёт количества введённых символов в поля SEO-параметров

Сеошники знают, что есть правила, которые ограничивают нам ввод длинных title или description. Чтобы не кидать каждый раз в Sublime для подсчёта символов, я набросал простенький скрипт, который показывает текущее значение каждого поля SEO-параметров.

Потестить можно на категориях, для которых в первую очередь и писался сам скрипт. Для этого откроем /simpla/design/html/category.tpl и заменим блок

на код ниже:

<div class="block layer">
<h2>Параметры страницы</h2>
<ul>
	<li><label id="url_count"class=property>Адрес</label><div class="page_url">/catalog/</div><input name="url" class="page_url" type="text" value="{$category->url|escape}" id="url_source" /></li>
	<li><label id="title_count" class=property>Заголовок</label><input name="meta_title" class="simpla_inp" type="text" value="{$category->meta_title|escape}" id="title_source" /></li>
	<li><label id="keys_count" class=property>Ключевые слова</label><input name="meta_keywords" class="simpla_inp" type="text" value="{$category->meta_keywords|escape}" id="keys_source" /></li>
	<li><label id="description_count" class=property>Описание</label><textarea name="meta_description" class="simpla_inp" id="description_source" >{$category->meta_description|escape}</textarea></li>
			</ul>
<script>
var urlname = document.getElementById("url_source");
var urlcount = document.getElementById("url_count");
var titlename = document.getElementById("title_source");
var titlecount = document.getElementById("title_count");
var keywordname = document.getElementById("keys_source");
var keywordscount = document.getElementById("keys_count"); 
var descriptionname = document.getElementById("description_source");
var descriptioncount = document.getElementById("description_count");                                   
window.onload = urlCount();
window.onload = titleCount();
window.onload = keywordsCount();
window.onload = descriptionCount();
urlname.oninput = urlCount;
titlename.oninput = titleCount;
keywordname.oninput = keywordsCount;
descriptionname.oninput = descriptionCount;                  
function urlCount() {
var x = urlname.value;
urlcount.innerHTML = "Адрес (" + x.length + ")";
}             
function titleCount() {
var y = titlename.value;
titlecount.innerHTML = "Заголовок (" + y.length + ")";
}                  
function keywordsCount() {
var z = keywordname.value;
keywordscount.innerHTML = "Ключевые слова (" + z.length + ")";
}
function descriptionCount() {
var xx = descriptionname.value;
descriptioncount.textContent = "Описание (" + xx.length + ")";
}                 
</script>
</div>
 Нет комментариев    48   4 мес   js   seo   simplacms
Ранее Ctrl + ↓