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

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

Водяной знак 1С-Битрикс

Задача: добавить watermark на товары импортируемые из 1С.
Откроем result_modifier.php в catalog.element, catalog.sections и добавим функцию:

$arWatermark = Array(
	array(
		"name" => "watermark", 
		"position" => "center", 
		"size" => "real", 
		"type" => "image", 
		"alpha_level" => 50,
		"file" => $_SERVER['DOCUMENT_ROOT']."/img/watermark.png"
	)
);

Теперь при вызове функции ResizeImageGet нужно добавить наш водяной знак:

if ($arResult['DETAIL_PICTURE']['SRC']) {
$big_file = CFile::ResizeImageGet($arResult['DETAIL_PICTURE']['ID'], array('width' => 2000, 'height' => 2000), BX_RESIZE_IMAGE_PROPORTIONAL, true, $arWatermark);
$arResult['DETAIL_PICTURE']['SRC'] = $big_file['src'];

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

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

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

 Нет комментариев    36   8 мес   css   js   ui
 Нет комментариев    39   8 мес   php

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

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

$("#input_Id").change(function()
     $(this).val($(this).val().replace(/ +/g, ''))
});
 Нет комментариев    33   8 мес   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()"
 Нет комментариев    27   8 мес   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, но все изображения в итоге перевернул.

 Нет комментариев    35   8 мес   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>
 Нет комментариев    25   9 мес   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"
  }
});
 Нет комментариев    24   9 мес   js   ui   ux
Ранее Ctrl + ↓