YML файл для маркета при использовании minishop2

Создаем документ и скрываем из меню.
У документа:
— указываем Тип содержимого — «XML»;
— замораживаем адрес, какой нам необходим.
— шаблон выбираем «Пустой»
— в содержимое добавляем:
Читать дальше

Раздел статьи для сайта через pdoPage

Решил и такой пример оставить, так как часто применяю, когда надо раздел статьи сделать или новости. Храню данные в Collection, а вывожу черех pdoPage. Также здесь в вызове присутствует указание на кастомные параметры "@styled" сниппета. В них переопределена разметка пагинации и соответственно стили. Удобно использовать, когда пагинация на всем сайте повторяется.
Читать дальше

Стрелочки рядом с переключателяи пагинации в slick slider


В slick slider эти навинационные кнопки прописаны через абсолютное позиционирование. По структуре находятся в разных блоках с навигацией. Подгонять расположение кнопок помогало только при фиксированном кол-ве элементов в слайдере. Было решено что-то придумать, не особо костыльное, но чтобы четко работало.
Идея в следующем — на JavaScript'е обернуть элементы пагинации в дополнительный контейнер, в него же поместить элементы отвечающие за прокрутку влево и вправо.

Написал вот такую функцию:
setArrows = function(selector) {
    $(selector+" .slick-dots").wrap("<div class='slick-dots__wrapper'></div>");
    $(selector+" .slick-dots__wrapper").prepend('<span class="slick-dots-prev"></span>');
    $(selector+" .slick-dots__wrapper").append('<span class="slick-dots-next"></span>');
    $(selector+' .slick-dots-prev').on('click', function(){
        $(selector).slick('slickPrev');
    });
    $(selector+' .slick-dots-next').on('click', function(){
        $(selector).slick('slickNext');
    });
};

Добавляем ее к вызову инициализации слайдера
var main_product_slider = false;
initMainProductSlider = function() {
    selector = '.product-slider';
    if ($(window).width()<1050) {
        if (!main_product_slider) {
            $(selector).slick({
                'autoplay': false,
                'arrows': false,
                'dots': true,
                'slidesToShow': 3,
                'slidesToScroll': 1,
                'initialSlide': 1,
                'infinite': false,
                'adaptiveHeight': true,
                'responsive': [
                    {
                        breakpoint: 750,
                        settings: {
                            vertical: false,
                            dots: false,
                            slidesToShow:2
                        }
                    },
                    {
                        breakpoint: 450,
                        settings: {
                            vertical: false,
                            dots: true,
                            slidesToShow: 1
                        }
                    }
                ]
            });

            setArrows(selector);
            $(selector).on('breakpoint', function(event, slick, direction){
                setArrows(selector);
            });

            main_product_slider = true;
        }
    } else {
        if (main_product_slider) {
            $(selector).slick('unslick');
            main_product_slider = false;
        }
    }
};

Для правильного отображения стрелочек добавляем стили. Кусок из scss файла
.slick-dots{
      &__wrapper{
        position: absolute;
        bottom: -30px;
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: center;
        .slick-dots{
          position: relative;
          bottom: auto;
          display: inline-block;
          width: auto;
          line-height: 10px;
          vertical-align: middle;
        }
        .slick-dots-prev{
          height: 10px;
          display: inline-block;
          vertical-align: middle;
          position: relative;
          cursor: pointer;
          margin-right: 4px;
          line-height: 10px;
          &:before{
            display: inline-block;
            content: "";
            @include sprite($arrow-slider);
            transform: rotate(180deg);
          }
        }
        .slick-dots-next{
          height: 10px;
          display: inline-block;
          vertical-align: middle;
          position: relative;
          cursor: pointer;
          margin-left: 4px;
          line-height: 10px;
          &:before{
            display: inline-block;
            content: "";
            @include sprite($arrow-slider);
          }
        }
}

Вызов slickslider для адаптивного сайта

Для слайдеров/каруселей нравится использовать slick slider. Самая большая его ценность в умении делать зависимые карусели. Эта особенность делает его очень гибким для внедрения в верстку.
Однако есть и несколько проблем в его использовании. Например, при адаптивной верстки у него проблемы с перезапуском. Например, в десктопном исполнении нам не нужен слайдер, а должны выводится только несколько изображений. При постепенном уменьшении размера браузера должен активироваться слайдер, и потом уменьшаться кол-во видимых слайдов. При увеличении экрана — процесс в обратном порядке. В десктопе слайдер должен отключиться.
Как я понял, это должно было работать так
$('.proekt__list').slick({
	slidesToShow: 1,
	slidesToScroll: 1,
	dots: true,
	arrows: true,
	centerPadding: '0px',
	centerMode: true,
	focusOnSelect: true,
	adaptiveHeight: true,
	responsive: [{
		breakpoint: 99999,
		settings: "unslick"
	}, {
		breakpoint: 768,
		settings: {
			slidesToShow: 1,
			arrows: true,
		}
	}, {
		breakpoint: 374,
		settings: {
			slidesToShow: 1,
			arrows: false,
		}
	}]
});
И оно работает при первом запуске, но стоит несколько раз изменить размер окна браузера — и все перестает нормально работать.

Пришел к такому виду вызова slick слайдера как оптимальному (ИМХО). Так как не работает нормально параметр unslick.
var main_product_slider = false;
initMainProductSlider = function() {
    selector = '.product-slider';
    if ($(window).width()<1050) {
        if (!main_product_slider) {
            $(selector).slick({
                'autoplay': false,
                'arrows': false,
                'dots': true,
                'slidesToShow': 3,
                'slidesToScroll': 1,
                'initialSlide': 1,
                'infinite': false,
                'adaptiveHeight': true,
                'responsive': [
                    {
                        breakpoint: 750,
                        settings: {
                            vertical: false,
                            dots: false,
                            slidesToShow:2
                        }
                    },
                    {
                        breakpoint: 450,
                        settings: {
                            vertical: false,
                            dots: true,
                            slidesToShow: 1
                        }
                    }
                ]
            });
            main_product_slider = true;
        }
    } else {
        if (main_product_slider) {
            $(selector).slick('unslick');
            main_product_slider = false;
        }
    }
};
Добавляю вызов функции при загрузке страницы
$(function() {
  initMainProductSlider();
});
Вешаю выполнение на resize страницы
var doresizepage;
$(window).resize(function(){
    clearTimeout(doresizepage);
    doit = setTimeout(resizepage, 100);
});
function resizepage(){
    initMainProductSlider('.product-slider');
}

Маска для input под номер телефона

Я использую вот эту github.com/RobinHerbots/Inputmask
Для подключения понадобиться 1 файл
<script src="assets/template/vendor/jquery.inputmask.bundle.js"></script>
Инициализацию выполняю так:
$(function() {
    $('[data-mask]').each(function() {
        input = $(this);
        mask = input.attr('data-mask');
        input.inputmask({"mask": mask});
    });
});
В разметке у нужного инпута добавляю аттрибут data-mask и прописываю нужный формат. Например так:
<input type="text" data-mask="+7 (999) 999-99-99" class="result-form__input" placeholder="Телефон">

Плавный переход к элементу

В последнее время стал делать переход через аттрибут тегов. Таким образом не привязываюсь к классу или айдишнику, который могут поменять.
В разметке выглядит таким образом
<div class="header__menu">
    <ul>
        <li><a href="#" data-goto=".about">О компании</a></li>
        <li><a href="#" data-goto=".structure">Наш сервис</a></li>
        <li><a href="#" data-goto=".benefit">Ваши выгоды</a></li>
        <li><a href="#" data-goto=".location">Контакты</a></li>
    </ul>
</div>
Понятно, что можно обращаться через селектор по своему усмотрению, например, к id элемента вот так:
<a href="#" data-goto="#footer">Контакты</a>
Обработчик этого события у меня имеет вот такой вид:
$(function() {
    $('body').on('click', '[data-goto]', function(e) {
        e.preventDefault();
        var selector = $(this).attr('data-goto');
        $('html, body').animate({ scrollTop: $(selector).offset().top}, 1200);
    });
});

Выводим дату на Modx с русским названием месяца

Чтобы не настраивать локаль, да и иногда требуется вывести в том или ином формате, то я
Название: rus_months
Содержимое:
<?php
$months = array(
    'Jan' => 'января',
    'Feb' => 'февраля',
    'Mar' => 'марта',
    'Apr' => 'апреля',
    'May' => 'мая',
    'Jun' => 'июня',
    'Jul' => 'июля',
    'Aug' => 'августа',
    'Sep' => 'сентября',
    'Oct' => 'октября',
    'Nov' => 'ноября',
    'Dec' => 'декабря',
);

return str_replace(array_keys($months), array_values($months), $input);

Если используется Fenom, товыводить даты можно так:
{$doc.publishedon | date : "d M Y" | rus_months}
обязательно должен быть символ «М», так как именно он заменяется на название русского месяца.

Если без Fenom:
[[*publishedon:date=`d M Y`:rus_months]]