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

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

Избавляемся от проблем в PageSpeed Insights

Для этого нам поможет простой скрипт, который будет отдавать роботу PageSpeed Insights пустые результаты, вместо реальных. Вот стоит у вас счётчик Метрики или Аналитикс, из-за которых занижаются показатели. Влиять на код счётчика вы не можете. Что делать?

<? if(strpos($_SERVER['HTTP_USER_AGENT'],'Chrome-Lighthouse')):?>
<? else: ?>
// your code here 
<? endif; ?>

Водяной знак 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.

 Нет комментариев    169   2020   css   js   ui

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

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

$("#input_Id").change(function()
     $(this).val($(this).val().replace(/ +/g, ''))
});
 Нет комментариев    130   2020   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()"

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, но все изображения в итоге перевернул.

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 с условием если вы находитесь на странице корзины, чтобы не перегружать сайт лишними скриптами.

Ранее Ctrl + ↓