----------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------

<!-- Обязательные для всех страниц -->
<meta property='og:title' content='[[*pagetitle]]' />
<meta property='og:image' content='https://orthocenter.me/artmebius/img/logo_title.png' />
<meta property='og:url' content='[[++site_url]][[*uri]]' />
<meta property='og:description' content='[[*metaDescription]]' />
<meta property="og:type" content="website">
<meta property='og:site_name' content='[[++site_name]]' />
<meta property='og:locale' content='ru_RU' />

<!-- Дополнительно для товара -->
<meta property="og:price:amount" content="5490">
<meta property="og:price:currency" content="RUB">
<meta property="product:brand" content="DenimWorks">
<meta property="product:availability" content="in stock">
<meta property="product:condition" content="new">
<meta property="product:retailer_item_id" content="DW-JEAN-2024-BL">
<meta property="product:category" content="Одежда → Джинсы">

----------------------------------------------------------------------------------------------------
Копия ДП

<?php
$tvid = 8596; //ID MIGX-TV
$from = 1; // ID ресурса, откуда копировать
$to = 92; // ID ресурса, куда копировать

$tvr = $modx->getObject('modTemplateVarResource', array(
    'tmplvarid' => $tvid,   
    'contentid' => $from
));
$tv = $tvr->get('value');

$res = $modx->getObject('modResource', $to);
$res->setTVValue($tvid, $tv);
----------------------------------------------------------------------------------------------------
<?php if (JRequest::getVar('id') == 178 && !empty(JRequest::getVar('view')) && JRequest::getVar('view') == 'article') { ?>
	Вставка в статью по ID
<?php } ?>
----------------------------------------------------------------------------------------------------
Режем картинку CSS
clip-path: polygon(0.00% 0.00%,100.00% 0.00%,100.00% 65%,0.00% 65%);
https://atuin.ru/tools/clip-path/
----------------------------------------------------------------------------------------------------
BACKDROP
<div class="header__mobile visible-xs hidden-sm">
  <div class="container">
	<div class="row-flex">
	  <div class="header__mobile-panel col">
		<div data-backdrop="click" data-target=".mod_login .mod_block" data-side="left" data-wrapper="mod_login" data-title="Личный кабинет">
		  <div class="header__icon">
			<img src="<?= $img ?>/user.svg" alt="">
		  </div>
		</div>
	  </div>
	  <div class="header__mobile-panel col">
		<div data-backdrop="click" data-target=".topcontact,.topshedule, .ftr_social" data-side="left" data-wrapper="backdrop_contacts" data-title="Контакты">
		  <div class="header__icon">
			<img src="<?= $img ?>/phone.svg" alt="">
		  </div>
		</div>
	  </div>
	  <div class="header__mobile-panel col">
		<div id="cart-mobile" class="header__icon header__cart">
		  <img src="<?= $img ?>/cart.svg" alt="">
		</div>
	  </div>
	  <div class="header__mobile-panel col">
		<div class="menu-toggler" data-backdrop="click" data-target=".mdl_bg_hor .menu" data-side="left" data-wrapper="backdrop_menu-mobile" data-title="Меню">
		  <span class="menu-toggler__icon">
			<span class=" menu-toggler__bar"></span>
			<span class="menu-toggler__bar"></span>
			<span class="menu-toggler__bar"></span>
		  </span>
		  <span class="menu-toggler__text">Меню</span>
		</div>
	  </div>
	</div>
  </div>
</div>

<style>
.header__mobile {
  margin: 5px 0;
}
.header__mobile-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
  background-color: #dcbe92;
  border-radius: 5px;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  color: #4a3515;
}
.header__icon{
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 27px;
}
.menu-toggler {
  display: flex;
  height: 30px;
  cursor: pointer;
  position: relative;
  z-index: 2;
  line-height: 1;
  flex-shrink: 0;
  padding: 0 10px;
}
.menu-toggler__icon{
  padding: 0px 10px;
}
.menu-toggler__bar {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  margin-left: -30px;
  background: #4a3515;
  height: 2px;
  box-shadow: 0 0 1px;
  margin-top: -1px;
  transition: all 0.3s ease;
}
.menu-toggler__bar:first-child {
  margin-top: 0;
  top: 30%;
}
.menu-toggler__bar:last-child {
  margin-top: 0;
  top: auto;
  bottom: 30%;
}
.menu-opened .menu-toggler__bar {
  opacity: 0;
}
.menu-opened .menu-toggler__bar:first-child {
  opacity: 1;
  top: 50%;
  transform: rotate(135deg);
}
.menu-opened .menu-toggler__bar:last-child {
  opacity: 1;
  top: 50%;
  transform: rotate(-135deg);
}
.menu-toggler__text {
  display: flex;
  align-items: center;
  text-transform: uppercase;  
}
body.backdroped {
  overflow: hidden;
}

.backdrop {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1040 !important;
  background: transparent;
  transition: background 0.5s;
}
.backdrop.active {
  background: rgba(0, 0, 0, 0.3);
}

.backdrop_content {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  height: 100%;
  max-height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.97);
  z-index: 1040;
}
.backdrop_content.left_side {
  left: -100%;
}
.backdrop_content.left_side > .backdrop_close {
  left: 7px;
}
.backdrop_content.right_side {
  right: -100%;
}
.backdrop_content.right_side > .backdrop_close {
  right: 7px;
}
.backdrop_content > .backdrop_close {
  position: absolute;
  top: 7px;
}

.backdrop_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 14px 25px 14px;
  font-weight: bold;
  color: #4a3515;
  background: linear-gradient(to bottom, #e4cba4 0%, #d1ac79 100%);;
  position: sticky;
  top: 0;
  z-index: 1;
}
.backdrop_title i {
  margin-right: 8px;
}
.backdrop_title + .backdrop_content_inner {
  padding: 0px 0px;
}

.backdrop_content_inner {
  padding: 27px 18px 9px;
}

.backdrop_close {
  font-size: 16px;
  color: #4a3515;
  cursor: pointer;
  transition: color 0.2s ease-out;
  margin-left: auto;
}
.backdrop_close:hover {
  color: #003f90;
}
.backdrop_close:active {
  color: #003f90;
}
.backdrop_placeholder {
  display: none;
}

.backdrop_mdl {
  position: relative;
}

.backdrop_menu-mobile {
  display: flex;
  flex-direction: column;
}
.backdrop_menu-mobile .menu-mobile {
  order: 1;
}
.backdrop_menu-mobile .menu-top {
  order: 2;
}

.backdrop_search .search-wrapper {
  margin: 15px;
}

.backdrop_menu_back .icon {
  opacity: 0.7;
  font-size: 1.1rem;
}
.menu-toggler__bar:first-child {
  margin-top: 0;
  top: 30%;
}
.menu-toggler__bar:last-child {
  margin-top: 0;
  top: auto;
  bottom: 30%;
}
.menu-opened .menu-toggler__bar {
  opacity: 0;
}
.menu-opened .menu-toggler__bar:first-child {
  opacity: 1;
  top: 50%;
  transform: rotate(135deg);
}
.menu-opened .menu-toggler__bar:last-child {
  opacity: 1;
  top: 50%;
  transform: rotate(-135deg);
}

.menu-mobile {
  display: none;
}
.backdrop_content .menu-mobile {
  display: block;
}
.menu-mobile ul.menu {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-mobile ul.menu li {
  margin: 0;
  padding: 0;
}
.menu-mobile ul.menu li a,
.menu-mobile ul.menu li span {
  display: block;
  position: relative;
  text-decoration: none;
  line-height: 1.4;
  padding: 10px 45px 10px 40px;
  color: #2e2f38;
  border-bottom: 1px solid #eee;
  font-weight: 500;
}
.menu-mobile ul.menu li a:before,
.menu-mobile ul.menu li span:before {
  content: "\f105";
  font: normal normal normal 14px / 1 FontAwesome;
  position: absolute;
  top: 50%;
  left: 22px;
  transform: translateY(-50%);
}
.menu-mobile ul.menu li a .icon,
.menu-mobile ul.menu li span .icon {
  position: absolute;
  right: 25px;
  top: 50%;
  margin-top: -0.5rem;
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 400;
  color: #003f90;
}
.menu-mobile ul.menu li a:hover, .menu-mobile ul.menu li.active > a, .menu-mobile ul.menu li.active > span {
  color: #2e2f38;
}
.menu-mobile ul.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-mobile ul.menu ul a,
.menu-mobile ul.menu ul span {
  padding-left: 20px;
  padding-right: 20px;
}
.menu-mobile ul.menu ul a:before,
.menu-mobile ul.menu ul span:before {
  display: none;
}
.menu-mobile .menu_horz_multi {
  position: relative;
}
.menu-mobile .menu_horz_multi .menu_link_section:before {
  display: none !important;
}
.menu-mobile .menu_horz_multi .menu_link_section a {
  font-weight: 700 !important;
  padding: 0 !important;
  border: none !important;
}
.menu-mobile .menu_horz_multi .menu_link_section a:before {
  display: none !important;
}
.menu-mobile .menu_horz_multi li.opened > ul {
  display: block;
}
.menu-mobile .menu_horz_multi li ul {
  display: none;
  width: 100%;
  position: absolute;
  top: 0;
  left: 100%;
}
.menu-mobile .menu_horz_multi li .menu_link_back:before {
  display: none !important;
}
</style>

<script>
var backdrop = {
    target: null,
    wrapper: null,
    title: null,
    type: null,
    side: null,
    init: function () {
        let _ = this;
        jQuery('body').on('click', '[data-backdrop="click"]', function (e) {
            e.preventDefault();
            e.stopPropagation();
            let $this = jQuery(this);
            _.target = $this.data('target');
            _.wrapper = typeof $this.data('wrapper') != 'undefined' ? '<div class="backdrop_mdl ' + $this.data('wrapper') + '"></div>' : '';
            _.title = typeof $this.data('title') != 'undefined' ? $this.data('title') : '';
            _.type = typeof $this.data('type') != 'undefined' ? $this.data('type') : 'clone';
            _.side = typeof $this.data('side') != 'undefined' ? $this.data('side') : 'left';
            _.sfx = typeof $this.data('sfx') != 'undefined' ? $this.data('sfx') : '';
            let $content = typeof _.target != 'undefined' ? jQuery(_.target) : $this.next();

            $this.toggleClass('active backdrop_close');

            _.build($content, _.side, _.type, _.wrapper, _.title, _.sfx);
            _.show(_.side, _.type);
            jQuery('body').find('.backdrop_content_inner .menu').wrap('<div class="menu-mobile"></div>');
        });
        jQuery('body').on('click', '.backdrop_close,.backdrop', function (e) {
            let direction = _.side != null ? _.side : jQuery('.backdrop_content').hasClass('right_side') ? 'right' : 'left';
            //console.log(direction);
            e.preventDefault();
            // _.destroy();
            _.close(direction);
        });
    },
    // swipe_init: function () {
    //     let _ = this;
    //     jQuery('.backdrop_content').swipe({
    //         swipe: function (event, direction, distance, duration, fingerCount, fingerData) {
    //             if (!jQuery(event.target).hasClass('ui-slider-handle')) {
    //                 if (jQuery('.backdrop_content').length) {
    //                     if (jQuery('.backdrop_content').hasClass('left_side') && direction == 'left') {
    //                         _.close(direction);
    //                     }
    //                     if (jQuery('.backdrop_content').hasClass('right_side') && direction == 'right') {
    //                         _.close(direction);
    //                     }
    //                 }
    //             }
    //         },
    //         threshold: 20,
    //         allowPageScroll: 'vertical',
    //     });
    // },
    build: function ($content, side, type, wrapper, title, sfx) {
        let _ = this;
        if (!jQuery('body').find('.backdrop_content').length) {
            let backdrop_title =
                title != ''
                    ? '<div class="backdrop_title"><span class="backdrop_caption">' + title + '</span><span class="backdrop_close icon icon-times"></span></div>'
                    : '<span class="backdrop_close icon icon-times"></span>';
            jQuery('body').append('<div class="backdrop"></div><div class="backdrop_content ' + sfx + ' ' + side + '_side">' + backdrop_title + '<div class="backdrop_content_inner"></div></div>');
            setTimeout(function () {
                jQuery('body').find('.backdrop').addClass('active');
            }, 1);

            switch (type) {
                case 'ajax':
                    $inner = jQuery('body').find('.backdrop_content_inner').prepend($content).wrapInner(wrapper);
                    break;
                case 'self':
                    $content.before('<div class="backdrop_placeholder"></div>');
                    $inner = jQuery('body').find('.backdrop_content_inner').prepend($content).wrapInner(wrapper);
                    break;
                default:
                case 'clone':
                    $inner = jQuery('body').find('.backdrop_content_inner').prepend($content.clone(true, true)).wrapInner(wrapper);
                    break;
            }
            //_.swipe_init();
            if (typeof backdropBuildCallback == 'function') backdropBuildCallback($inner.children());
        }
    },
    show: function (side, type) {
        switch (side) {
            case 'right':
                jQuery('body').find('.backdrop_content').animate({ right: '0' }, 300);
                break;
            case 'left':
            default:
                jQuery('body').find('.backdrop_content').animate({ left: '0' }, 300);
                break;
        }
        // if (jQuery(document).width() <= 1263) { // 751  1007 1263
        // } else {
        //   jQuery('body').find('.backdrop_content').fadeIn(300);
        // }
        jQuery('body').addClass('backdroped');
        // if (type == 'clone' || type == 'ajax') {
        //   jQuery('body').addClass('backdroped');
        // }
    },
    close: function (direction) {
        if (typeof backdropBeforeCloseCallback == 'function') backdropBeforeCloseCallback();
        switch (direction) {
            case 'left':
                jQuery('body')
                    .find('.backdrop_content')
                    .animate({ left: '-100%' }, 300, function () {
                        backdrop.destroy();
                    });
                break;
            case 'right':
                jQuery('body')
                    .find('.backdrop_content')
                    .animate({ right: '-100%' }, 300, function () {
                        backdrop.destroy();
                    });
                break;
        }
    },
    destroy: function () {
        let _ = this,
            type = _.type != null ? _.type : 'clone';
        if (typeof backdropBeforeDestroyCallback == 'function') backdropBeforeDestroyCallback();
        switch (type) {
            case 'self':
                if (jQuery('.backdrop_content_inner').find('.backdrop_mdl')) {
                    jQuery('.backdrop_content_inner').find('.backdrop_mdl').children().insertAfter('.backdrop_placeholder');
                } else {
                    jQuery('.backdrop_content_inner').children().insertAfter('.backdrop_placeholder');
                }
                jQuery('.backdrop_placeholder').remove();
                jQuery('.backdrop').removeClass('active');
                setTimeout(function () {
                    jQuery('body').removeClass('backdroped').find('.backdrop, .backdrop_content').remove();
                }, 500);
                break;
            case 'clone':
            default:
                jQuery('.backdrop').removeClass('active');
                setTimeout(function () {
                    jQuery('body').removeClass('backdroped').find('.backdrop, .backdrop_content').remove();
                }, 500);
                break;
        }
        jQuery('[data-backdrop="click"]').removeClass('active backdrop_close');
        if (typeof backdropDestroyCallback == 'function') backdropDestroyCallback();
        _.target = null;
        _.wrapper = null;
        _.title = null;
        _.type = null;
        _.side = null;
    },
};

backdrop.init();
</script>
----------------------------------------------------------------------------------------------------
Чат GPT  
логин evgenii4747@gmail.com 
пароль 10032023artemov

https://discord.com/
evgenii4747@gmail.com
ND0toV68G60JPM
----------------------------------------------------------------------------------------------------
<?php
	echo '<pre>';
	print_r($this->category->meta_description);exit;
	var_dump($this->category->meta_description);exit;
	echo '</pre>';
?>
----------------------------------------------------------------------------------------------------
valenina.orloff@gmail.com  -  67dw$#{MhL~LW?o9SB
orlovv721@gmail.com - R2ZhTcJymlfRIcAZ9d
----------------------------------------------------------------------------------------------------

МАСКА для КАРТИНКИ
background: #047985;
-webkit-mask-image: url(../img/phone.svg);
mask-image: url(../img/phone.svg);

----------------------------------------------------------------------------------------------------

MIGX в MIGX (fenom)
http://puzo.artmebius.ru - https://проспект-сервис.рф

{if $employeesService = $_modx->resource.employees | fromJSON}
	<div class="row">
		{foreach $employeesService as $tab}
			<div class="col-12 col-12 col-md-6">
				<div class="employees-item d-flex justify-content-between">
					<div class="job-info">
						<div class="jobtitle">{$tab.jobtitle}</div>
						<div class="name">{$tab.name}</div>
						<div class="phone">{$tab.phone}</div>
						{if $list = $tab.adress_list | fromJSON}
							<div class="list-box d-flex flex-column">
								{foreach $list as $i => $row}
									<span>{$row.adress}</span>
								{/foreach}
							</div>
						{/if}
					</div>
					<img class="employees-img" src="images/{$tab.image}" alt="{$tab.name}" />
				</div>
			</div>
		{/foreach}
	</div>
{/if}

----------------------------------------------------------------------------------------------------

Превращаем меню в вкладки(ТАБЫ)

https://wattnn.ru/
https://пкбпокрытия.рф/

[[+id:eq=`1764`:then=`
	[[!fenom_template?&tpl=`catalog_menu`]]
`]]

{set $menu = (1 | resource : 'catalog_menu') ?  (1 | resource : 'catalog_menu' | fromJSON) : ''}
{if $menu}
	{* первый уровень *}
	<ul class="cst-menu">
		{foreach $menu as $row}
			<li class="cst-menu-nav" data-idx="{$row.MIGX_id}">
				{if $row.id}
					<a class="item-link" href="{$row.id | url}">
						{if $row.img}
							<img class="items_img" src="images/{$row.img}" alt="{$row.title}" loading="lazy" />
						{/if}
						{$row.title}
					</a>
				{else}
					<span class="item-link">
						{if $row.img}
							<img class="items_img" src="images/{$row.img}" alt="{$row.title}" loading="lazy" />
						{/if}
						{$row.title}
					</span>
				{/if}
				{* <!-- второй уровень --> *}
				{if $row.submenu}
					{set $submenu = $row.submenu | fromJSON}
					<ul class="cst-menu-sub" data-idx="{$row.MIGX_id}">
						{foreach $submenu as $row}
							<li class="cst-menu-sub__group">
								{if $row.id}
									<a class="item-caption" href="{$row.id | url}">{$row.title}</a>
								{else}
									<span class="item-caption">{$row.title}</span>
								{/if}
								{* <!-- третий уровень --> *}
								{if $row.submenu}
									{set $submenu = $row.submenu | fromJSON}
									<ul class="menu-last">
										{foreach $submenu as $row}
											<li>
												{if $row.id}
													<a class="item-link" href="{$row.id | url}">{$row.title}</a>
												{else}
													<span class="item-link">{$row.title}</span>
												{/if}
											</li>
										{/foreach}
									</ul>
								{/if}
							</li>
						{/foreach}
					</ul>
				{/if}
			</li>
		{/foreach}
	</ul>
{/if}

<script>
	(function(){
		$('<div class="cst-items" />').insertAfter('.cst-menu');
		$('.cst-menu').each(function(){
			let items = $(this).siblings('.cst-items');
			$(this).find('.cst-menu-nav').first().addClass('cst-current');
			$(this).find('.cst-menu-nav').each(function(){
				let nav = $(this),
					idx = nav.data('idx'),
					menu = nav.find('.cst-menu-sub[data-idx='+idx+']'),
					clone = menu.clone();
				items.append(clone);
				$(this).on('mouseenter', function(){
					if ($(window).width() > 767) {
						$('.cst-menu-nav').removeClass('cst-current');
						$(this).addClass('cst-current'); 
						$('.cst-menu-sub').hide();
						clone.css('display', 'flex');
					}
				});
			});
		});
		function move(){
			if ($(window).width() > 767) {
				$('.cst-menu').each(function(){
					if (!$(this).parent('.cst-wrapper').length) {
						$(this).siblings('.cst-items').addBack().wrapAll('<div class="cst-wrapper" />');
					}
				});
			}
		}
		$(window).resize(function() {
		  move();
		});
		move();
	})();
</script>

----------------------------------------------------------------------------------------------------

Перенос блока при изменении расширения экрана

#where      - где находится
.what       - что переносим
.clone      - куда переносим

<script>
	function resizeBlock(){
		if(window.matchMedia("screen and (max-width: 768px)").matches) {
			$('.clone').append($('.what'));
		}
		else if (window.matchMedia("screen and (min-width: 768px)").matches){
			$('.what').prependTo($('#where'));
		}
	}
	$(window).resize(function() {
		 resizeBlock();
	});
	$(document).ready(function(){
		resizeBlock();
	});
</script>

Еще один вариант 

<!DOCTYPE html>
<html lang="en" >
	<head>
		<meta charset="UTF-8">
		<title>CodePen - A Pen by Ildar Meyker</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
		<style>
			.box {
				margin: 10px 0;
				padding: 10px;
				background: #ff0000;
				color: #ffffff;
			}
			#logs {
				margin-top: 50px;
				border: 1px solid #dddddd;
				padding: 30px;
			}
		</style>
	</head>
	<body>
		<div class="container">
		<h1>Перенос из одного места в другое при изменении ширины монитора</h1>
			<h3>contactsBox</h3>
			<div id="contactsBox" class="box ztest">
				<div id="contacts" class="shop-cart">
					<ul>
						<li>Петя</li>
						<li>Юля</li>
					</ul>
				</div>
			</div>
			<h3>nav</h3>
			<div id="nav" class="box qtest"></div>
			
			<div id="logs"></div>
		</div>
		<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
		<script>
			let lastWindowWidth = 0;
			function replaceCard() { 
				const windowWidth = $(window).width();
				let targetSelector;
				if (windowWidth >= 768 && lastWindowWidth < 768) {
					targetSelector = '.ztest';
				} 
				if (windowWidth < 768 && (lastWindowWidth >= 768 || !lastWindowWidth) ) {
					targetSelector = '.qtest';
				}
				
				if (targetSelector) {
					$(targetSelector).append($('.shop-cart').detach());
					$('#logs').append('<div>Перемещен в ' + targetSelector + '</div>');
				}
				lastWindowWidth = windowWidth;
			}
			$(window).on('resize', replaceCard);
			replaceCard();
		</script>
	</body>
</html>

----------------------------------------------------------------------------------------------------

Скрыть - показать - аккордеон 
<script> 
	$('.faq_item_quest').click(function(event) {
		$(this).next().slideToggle(300);
		$(this).parent().siblings().find('.faq_item_answer:visible').slideUp(300);
	});
	
	$('.faq_item_quest').on('click',function(e){
		e.stopPropagation();
		$(this).parent('.filter__item').siblings();
		$(this).find('.fal').toggleClass('fa-angle-down fa-angle-right');
		$(this).toggleClass('active').next('.faq_item_answer').slideToggle(200);
	});
</script>

----------------------------------------------------------------------------------------------------

Способ фиксирования ШАПКИ

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>scroll</title>
	<style>
		body{
			min-height:1500px; 
		}
		header {
			position: relative;
			width: 100%;
			height: 60px;
			background: red;
		}

		header.clone {
			position: fixed;
			top: -60px;
			transition: 0.2s top ease-in;
		}

		body.down header.clone {
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
		}
	</style>
</head>
<body>
	<header>Шапка</header>
	<div class="content">
		<p>Сюда вставляете очень много контента, для того чтобы появился вертикальный скролл...</p>
	</div>
	<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
	<script>
		(function($) {
			$(document).ready(function() {
				var $header = $("header"),
					$clone = $header.before($header.clone().addClass("clone"));
			   
				$(window).on("scroll", function() {
					var fromTop = $(document).scrollTop();
					$("body").toggleClass("down", (fromTop > 200));
				});
			});
		})(jQuery);
	</script>
</body>
</html>

ДОПОЛНЕНИЕ 
<script>
	$(document).ready(function(){
		var HeaderTop = $('#top-menu-mob').offset().top;
		
		$(window).scroll(function(){
				if( $(window).scrollTop() - 70 > HeaderTop ) {
						$('#top-menu-mob').addClass('fixed');
				} else {
						$('#top-menu-mob').removeClass('fixed');
				}
		});
	});
	
	$(document).ready(function(){
		var HeaderTop = $('#header').offset().top;
		
		$(window).scroll(function(){
				if( $(window).scrollTop() > HeaderTop ) {
						$('#header').css({position: 'fixed', top: '0px'});
				} else {
						$('#header').css({position: 'static'});
				}
		});
	});
</script>

----------------------------------------------------------------------------------------------------

SLICK с превьюшками

<div class="brand-slider">
	<div class="slider-arrow"><div class="container"></div></div>
	<div class="slider-for">
		<div class="item-brend item-brend-1">
			<div class="container">
				<div class="row">
					<div class="col-12 col-md-6 info">
						<div class="lg d-none d-md-block"><img src="images/slider/svg/1lg.svg" /></div>
						<div class="title">Верь в себя!</div>
						<div class="description">
							<p>№1 на YouTube</p>
							<p>№1 в с сетях</p>
							<p>№1 в ТОП 5 в детской категории App Store</p>
						</div>
					</div>
					<img src="images/slider/1.png" class="img-brend d-none d-md-block" />
					<img src="images/slider/small/1.png" class="img-brend d-block d-md-none" />
				</div>
			</div>
		</div>
		<div class="item-brend item-brend-2">
			<div class="container">
				<div class="row">
					<div class="col-12 col-md-6 info">
						<div class="lg d-none d-md-block"><img src="images/slider/svg/2lg.svg" /></div>
						<div class="title">Первые и лучшие с 1986 года!</div>
						<div class="description">
							<p>№1 по продажам в мире</p>
							<p>400 новых моделей ежегодно</p>
							<p>3 млн просмотров на YouTube</p>
						</div>
					</div>
					<img src="images/slider/2.png" class="img-brend d-none d-md-block" />
					<img src="images/slider/small/2.png" class="img-brend d-block d-md-none" />
				</div>
			</div>
		</div>
	</div>
</div>
<div class="nav-slider-box">
	<div class="container">
		<div class="slider-nav">
			<div class="nav-item">
				<div class="lg-ico lg-ico-1">
					<img class="ah" src="images/slider/svg/1lg.svg" />
					<img class="na" src="images/slider/svg/1lg-na.svg" />
				</div>
			</div>
			<div class="nav-item">
				<div class="lg-ico lg-ico-2">
					<img class="ah" src="images/slider/svg/2lg.svg" />
					<img class="na" src="images/slider/svg/2lg-na.svg" />
				</div>
			</div>
		</div>
	</div>
</div>

<script>
$('.slider-for').slick({
	infinite        : true,
	slidesToShow    : 1,
	slidesToScroll  : 1,
	fade            : true,
	dots            : false,
	appendArrows    : '.slider-arrow .container', 
	asNavFor        : '.slider-nav' 
});

$('.slider-nav').slick({
	infinite        : false,
	slidesToShow    : 5,
	slidesToScroll  : 1,
	focusOnSelect   : true,
	dots            : false,
	arrows          : false,
	asNavFor        : '.slider-for',
	responsive      : [
		{
		  breakpoint: 1536,
		  settings: {
			slidesToShow: 5,
		  }
		},
		{
		  breakpoint: 1280,
		  settings: {
			slidesToShow: 4,
		  }
		},
		{
		  breakpoint: 1024,
		  settings: {
			slidesToShow: 3,
		  }
		},
		{
		  breakpoint: 768,
		  settings: {
			slidesToShow: 3,
		  }
		},
		{
		  breakpoint: 480,
		  settings: {
			slidesToShow: 2,
		  }
		}
	]
});
</script>

----------------------------------------------------------------------------------------------------

Показать - скрыть блок

<a class="content_filter_toggle" href="#">Показать текст</a> 
<div class="content_filter_block" style="display: none;">
	<p>Блок скрытого текста...</p>
</div>
<script>
	$(document).ready(function(){
		$('.content_filter_toggle').click(function(){
			$('.content_filter_block').slideToggle(300);      
			return false;
		});
	});
</script>

<button id="showHideContent">Показать/Скрыть</button>
<div id="content" style="display:none;">Содержание, которое скрыто по-умолчанию. Покажется/скроется при клике на одну и ту же ссылку.</div>
<script>
	$(document).ready(function(){
    $("#showHideContent").click(function () {
        if ($("#content").is(":hidden")) {
            $("#content").show("slow");
        } else {
            $("#content").hide("slow");
        }
        return false;
    });
});
</script>



----------------------------------------------------------------------------------------------------

Срабатывание SLICK (RESIZE - на малых разрешениях - меньше чем 768px)

<script>
	jQuery(window).on('load resize', function() {
		if ($(window).width() < 768) {
			$('.action__items .row:not(.slick-initialized)').slick({
				dots: false,
				arrows: false,
				infinite: true,
				draggable: true,
				autoplay: true,
				autoplaySpeed:5000,
				speed:1200,
				slidesToShow:1,
				slidesToScroll:1,
			});
		} else {
			$(".action__items .row.slick-initialized").slick("unslick");
		}
	});
</script>

----------------------------------------------------------------------------------------------------

При нажатии на название - открывается страница, при нажатии на стрелочку - разворачиваются дочерние ресурсы
<script>
	jQuery(mdl+' .menu .icon').click(function(a){
		jQuery(this).next("ul").length&&(a.preventDefault(),
		jQuery(this).parent().toggleClass("opened closed").siblings("li").children("ul:visible").slideToggle(300).parent().toggleClass("opened closed"),
		jQuery(this).next("ul").slideToggle(300));
	});
	
	jQuery(".menu.menu_horz_multi .parent .icon").click(function(a){
		jQuery(this).next("ul").length&&(a.preventDefault(),
		jQuery(this).parent().toggleClass("opened closed").siblings("li").children("ul:visible").slideToggle(300).parent().toggleClass("opened closed"),
		jQuery(this).next("ul").slideToggle(300));
	});
</script>

menu_li.Parent
<li[[+wf.id]] class="[[+wf.classnames]] parent closed">
	<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>
		[[-image:notempty=`<span class="img_wrap"><img alt="[[+wf.linktext]]" src="/[[+image]]"></span>`]]
		<span class="item_title">[[+wf.linktext]]</span>
	</a>
	<span class="icon"></span>
	[[+wf.wrapper]]
</li>

menu_li.Parent.Active
<li[[+wf.id]] class="[[+wf.classnames]] parent opened">
	<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>
		[[-image:notempty=`<span class="img_wrap"><img alt="[[+wf.linktext]]" src="/[[+image]]"></span>`]]
		<span class="item_title">[[+wf.linktext]]</span>
	</a>
	<span class="icon"></span>
	[[+wf.wrapper]]
</li>

menu_li.Parent.Current
<li[[+wf.id]] class="[[+wf.classnames]] parent current opened">
	<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>
		[[-image:notempty=`<span class="img_wrap"><img alt="[[+wf.linktext]]" src="/[[+image]]"></span>`]]
		<span class="item_title">[[+wf.linktext]]</span>
	</a>
	<span class="icon"></span>
	[[+wf.wrapper]] 
</li>

<style>
	header .topmenu .menu_horz_multi li{
		position: relative;
		border-bottom:1px solid #245f7b;
		transition:background 0.3s ease;
	}
	header .topmenu .menu_horz_multi li ul{
		border-top:1px solid #245f7b;
		margin-bottom:-1px;
	}
	.topmenu .menu_horz_multi li a{
		padding:9px 30px 9px 9px;
		
		position:relative;
		display:block;
		text-decoration:none;
	}
	li.parent .icon{
		position:absolute;
		right:0;
		top:0;
		bottom:0;
		display:block;
		border-left:1px solid #245f7b;
		width:45px;
		height:35px;
		padding:0;
		cursor:zoom-in;
		background-position:center center;
		background-repeat:no-repeat;
		background-size:10px;
	}
	li.parent.closed .icon{
		background-image:url("../img/plus.png") !important;
	}
	li.parent.opened .icon{
		background-image:url("../img/minus.png");
	}
	li.menu_item.opened {
		background-color:#333333; 
	}
</style>

----------------------------------------------------------------------------------------------------

Микроразметка для MODX SCHEMA.ORG
<script type="application/ld+json">
	{
		"@context": "https://schema.org",
		"@type": "Organization",
		"name": "{$_modx->config.site_name}",
		"logo": "{$_modx->config.site_url}{$company_logo}",
		"address": {
			"@type": "PostalAddress",
			"addressLocality": "Нижний Новгород, с.п. Новинки, Россия",
			"postalCode": "607635",
			"streetAddress": "ул. Учительская, д.12, пом.В8"
		},
		"email": "{$company_email}",
		"telephone": "8 920-059-06-17, 8 910-109-88-51, 8 910-146-66-62",
		"url": "{$_modx->config.site_url}"
	}
</script>

<!--ХЛЕБНЫЕ КРОШКИ-->
<nav class="mdl_breadcrumbs">
    [[pdoCrumbs?
    	&showHome=`1`
        &outputSeparator=`&nbsp;&raquo;&nbsp;`
        &hideSingle=`1`
        &tplCurrent=`@INLINE <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
								<meta itemprop="position" content="[[+idx]]" />
								<span itemprop="name">[[+menutitle]]</span>
								<link href="[[+link]]" itemprop="item">
							</li>`
        &tpl = `@INLINE <li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem">
		        <meta itemprop="position" content="[[+idx]]">
                <a itemprop="item" href="[[+link]]"><span itemprop="name">[[+menutitle]]</span></a></li>`
        &tplWrapper = `@INLINE <ul class="breadcrumb" itemscope="" itemtype="https://schema.org/BreadcrumbList">[[+output]]</ul>`
    ]]
</nav>

<!--FAQ-->
<div itemscope itemtype="https://schema.org/FAQPage">
	<h1 itemprop="name">Часто задаваемые вопросы</h1>
	<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
		<h2 itemprop="name">Вопрос?</h2>
		<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
			<div itemprop="text">Ответ</div>
		</div>
	</div>
</div>

<!--BLOG-->
<div itemscope itemtype="https://schema.org/Blog">
	<h1 itemprop="name">Последние статьи</h1>

	<div itemprop="blogPosts" itemscope itemtype="https://schema.org/ItemList">
		<meta itemprop="numberOfItems" content="10">
		<!-- Пост 1 -->
		<div itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
			<a itemprop="url" href="/post/web-development-2024">
				<img itemprop="image" src="/posts/web-dev.jpg" alt="Веб-разработка 2024" width="300" height="200">
			</a>
			<h2 itemprop="headline">
				<a itemprop="url" href="/post/web-development-2024">Веб-разработка в 2024: Новые технологии</a>
			</h2>
			<p itemprop="description">Обзор современных фреймворков и инструментов...</p>
			<div class="post-meta">
				<time itemprop="datePublished" datetime="2024-03-18">18 марта 2024</time>
				<span itemprop="author" itemscope itemtype="https://schema.org/Person">
					<span itemprop="name">Иван Сидоров</span>
				</span>
			</div>
		</div>
	</div>
</div>

<!--PRODUCT-->
<div itemscope itemtype="https://schema.org/Product">
	<h1 itemprop="name">Смартфон iPhone 15 Pro 256GB</h1>
	<div class="product-images">
		<img itemprop="image" src="/iphone15-pro-black.jpg" alt="iPhone 15 Pro черный" width="600" height="600">
		<img itemprop="image" src="/iphone15-pro-side.jpg" alt="iPhone 15 Pro вид сбоку" width="600" height="600">
	</div>
	<p itemprop="description">Флагманский смартфон Apple с процессором A17 Pro, камерой 48 МП и дисплеем Super Retina XDR. Динамический остров, защита от воды IP68.</p>
	<div itemprop="brand" itemscope itemtype="https://schema.org/Brand">
		Бренд: <span itemprop="name">Apple</span>
		<img itemprop="logo" src="/apple-logo.png" alt="Apple" width="50" height="50">
	</div>
	<div>Артикул: <span itemprop="sku">IP15P256GB-BLK</span></div>
	<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
		★★★★☆ 
		<span itemprop="ratingValue">4.7</span>/5 на основе <span itemprop="reviewCount">1289</span> отзывов
		<meta itemprop="bestRating" content="5">
		<meta itemprop="worstRating" content="1">
	</div>
	<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
		<div class="price">
			<span itemprop="price" content="109990">109 990 ₽</span>
			<meta itemprop="priceCurrency" content="RUB">
		</div>
		<div class="old-price">
			<span itemprop="price" content="119990">119 990 ₽</span>
		</div>
		<link itemprop="availability" href="https://schema.org/InStock">
		<span>В наличии</span>
		<link itemprop="url" href="https://example.com/iphone15-pro">
	</div>
</div>

<!--OFFERCATALOG-->
<div itemscope itemtype="https://schema.org/OfferCatalog">
	<meta itemprop="name" content="Каталог электроники">
	<meta itemprop="description" content="Все товары из категории Электроника">
	<meta itemprop="url" content="https://example.com/catalog/electronics">
	<meta itemprop="numberOfItems" content="245">

	<div itemprop="itemListElement" itemscope itemtype="https://schema.org/Offer">
		<a itemprop="url" href="/product/iphone-15">
			<img itemprop="image" src="/products/iphone15.jpg" alt="iPhone 15" width="300" height="300">
		</a>
		<h3 itemprop="name">Смартфон Apple iPhone 15</h3>
		<div itemprop="itemOffered" itemscope itemtype="https://schema.org/Product">
			<span itemprop="name">iPhone 15 128GB</span>
			<div itemprop="brand" itemscope itemtype="https://schema.org/Brand">Бренд: <span itemprop="name">Apple</span></div>
		</div>
		<div class="price">
			<span itemprop="price" content="89990">89 990 ₽</span>
			<meta itemprop="priceCurrency" content="RUB">
		</div>
		<link itemprop="availability" href="https://schema.org/InStock">
		<span>В наличии</span>
	</div>
</div>

----------------------------------------------------------------------------------------------------

https://codepen.io/testingroom/pen/NWYPgBd
спойлер для "тегов"
текст на кнопке так же меняется 4-м и 5-м параметром, например
$('.item').spoiler_elems(5,1,0,'Открыть','Закрыть');
1-й параметр кол-во элементов для показа и шаг, если по частям открывать

----------------------------------------------------------------------------------------------------

Удаляем фильтр товаров - если их нет (Joomla)
<script>
	jQuery(document).ready(function() {
		if (!jQuery('.products_grid').length){// класс списка товаров
			jQuery('.filter_catalog').remove();// класс фильтра
		};  
	});
</script>

----------------------------------------------------------------------------------------------------

Избавляемся от лишних слешей (MODX)
[[+image_absolute:phpthumbon:replace=`///==/`]]


----------------------------------------------------------------------------------------------------

Снипет для русификации даты
<?php
$month_arr = array('01' => 'Января',
                   '02' => 'Февраля',
                   '03' => 'Марта',
                   '04' => 'Апреля',
                   '05' => 'Мая',
                   '06' => 'Июня',
                   '07' => 'Июля',
                   '08' => 'Августа',
                   '09' => 'Сентября',
                   '10' => 'Октября',
                   '11' => 'Ноября',
                   '12' => 'Декабря'
                  );
  
$time = strtotime($input);

$month = $month_arr[strftime('%m', $time)];
$day = strftime('%d', $time);
$year = strftime('%Y', $time);
$weekDay = strftime('%A', $time);

$options = $options ? $options : '%d %m %Y';
return str_replace(array('%m','%d','%Y','%A'), array($month, $day, $year, $weekDay), $options);

Вывод 
MODX  => [[!+nowdate:default=`now`:dateRu=`%A, %d %m %Y`]]
FENOM => {$publishedon | date : 'd F Y' | dateRu}

----------------------------------------------------------------------------------------------------

Ищем наименьшую цену в товарах категории

SNIPET getMinPrice 
<?php
$price = 0;
$q = $modx->newQuery('msProduct', array('parent' => $id, 'deleted' => 0, 'published' => 1));
$q->innerJoin('msProductData', 'Data', 'msProduct.id = Data.id');
$q->sortby('Data.price', 'asc');
$q->select('Data.price');
$q->limit(1);
if ($q->prepare() && $q->stmt->execute()) {
	$price = $q->stmt->fetch(PDO::FETCH_COLUMN);
}
return $price;
(дефолтный вывод)

<?php
$price = '';
$q = $modx->newQuery('msProduct', array('parent' => $id, 'deleted' => 0, 'published' => 1));
$q->innerJoin('msProductData', 'Data', 'msProduct.id = Data.id');
$q->sortby('Data.price', 'asc');
$q->select('Data.price');
$q->limit(1);
if ($q->prepare() && $q->stmt->execute()) {
	$price = $q->stmt->fetch(PDO::FETCH_COLUMN);
  $price = (int)$price;
}
if (!empty($price)){
  return 'от '.$price.' р/час';
}else{
  echo 'по запросу';
}

Вызов в чанке
{'getMinPrice' | snippet : ['id' => $id,]} 

----------------------------------------------------------------------------------------------------

Выезжающее меню слева (мобильная версия)

HEADER
<div class="header__menu-toggler menu-toggler visible-xs" data-toggle="mobile_toggler" data-type="menu" data-target=".menu-mobile">
	<span class="menu-toggler__bar"></span>
	<span class="menu-toggler__bar"></span>
	<span class="menu-toggler__bar"></span>
</div>

FOOTER 
[[- Menu Mobile ]]
<div class="menu-mobile">
  [[pdoMenu?
          &parents=`0`
          &level=`2`
          &showHidden=`0`
          &resources=`1,12,31,16,26,28,25,38,39,29,41,42,43,44,46`

          &sortby=`menuindex`
          &sortdir=`ASC`

          &outerTpl=`menu_ul`
          &innerTpl=`menu_ul.sub_menu`
          &rowTpl=`menu.li`
		  &tplParentRow=`menu.li.parent`

		  &outerClass=`menu menu_horz tac menu-mobile__list menu-accordeon`
		  &innerClass  =`sub_menu`
		  &rowClass=`menu_item_mobile`
		  &selfClass=`current menu-mobile__list-item--active active`
		  &parentClass=`parent_mobile`
        ]]
</div>

SCRIPT
(функция выезжающего меню)
(function () {
    function open(target, type) {
        let toggle = $('[data-toggle=mobile_toggler][data-type=' + type + ']');
        $(toggle).addClass('active');
        $(target).toggleClass('active');
        $('body').addClass(type + '-opened'); // modal-open?

        $('[data-toggle=mobile_toggler]').each(function () {
            let targetCur = $(this).data('target'),
                typeCur = $(this).data('type');
            if (type != typeCur) {
                close(targetCur, typeCur);
            }
        });

        if ($(target).find('.close')) {
            $(target).find('.close').addClass('active');
            $(target)
                .find('.close')
                .on('click', function () {
                    $(this).toggleClass('active');
                    close(target, type);
                });
        }
    }

    function close(target, type) {
        let toggle = $('[data-toggle=mobile_toggler][data-type=' + type + ']');
        $(toggle).removeClass('active');
        $(target).removeClass('active');
        $('body').removeClass(type + '-opened'); // modal-open?
    }

    let toggle = $('[data-toggle=mobile_toggler]');

    toggle.on('click', function () {
        target = $(this).data('target');
        type = $(this).data('type');

        if ($(target).length) {
            if ($(target).hasClass('active')) {
                close(target, type);
            } else {
                open(target, type);
            }
        }
    });

    $(window).on('resize', function () {
        $('[data-toggle=mobile_toggler]').each(function () {
            let type = $(this).data('type'),
                maxWidth;

            switch (type) {
                case 'search':
                    maxWidth = 768;
                    break;
                default:
                    maxWidth = 992;
                    break;
            }

            if ($(window).width() >= maxWidth) {
                close($(this).data('target'), type);
            }
        });
    });
})();
(по клику на родителя открыть дочек)
jQuery(document).on('click', '.parent_mobile', function () {
	event.preventDefault(); 
	jQuery(this).find('.sub_menu').toggleClass('show_sub_menu'); 
});

CSS
.menu-toggler{
	display:block;
	width:26px;
	height:40px;
	cursor:pointer;
	position:relative;
	z-index:2;
	line-height:1;
	flex-shrink:0;
}
.menu-toggler:hover .menu-toggler__bar{
	background-color:#ac070c;
}
.menu-toggler__bar:first-child{
	margin-top:0;
	top:30%;
}
.menu-toggler__bar:last-child{
	margin-top:0;
	top:auto;
	bottom:30%;
}
.menu-toggler__bar{
	content:"";
	display:block;
	position:absolute;
	top:50%;
	left:0;
	right:0;
	background:#d21319;
	height:2px;
	margin-top:-1px;
	transition:all 0.3s ease;
}
.menu-opened .menu-toggler__bar:first-child{
	opacity:1;
	top:50%;
	transform:rotate(135deg);
}
.menu-opened .menu-toggler__bar:last-child{
	opacity:1;
	top:50%;
	transform:rotate(-135deg);
}
.menu-opened .menu-toggler__bar{
	opacity:0;
}
.menu-mobile{
	display:flex;
	flex-direction:column;
	position:fixed;
	top:60px;
	left:-150%;
	bottom:0;
	width:100%;
	background: #fff;
	z-index:99;
	padding-top:20px;
	overflow:auto;
	box-shadow:0 15px 15px rgb(0 0 0 / 30%);
	transition:all 0.5s ease;
}
.menu-mobile.active{
	left:0;
}

----------------------------------------------------------------------------------------------------

Сортировка
'sortby'=>'FIELD(modResource.id, 6,3,402,491,401,392,400,399)' - FENOM 

&sortby=`FIELD(modResource.id, 4,7,2,5,1 )` - OLD
&select=`id,pagetitle,menutitle,uri`

----------------------------------------------------------------------------------------------------

Кнопка ВВЕРХ
<script>
	$(function() {
		// при нажатии на кнопку scrollup
		$('.scrollup').click(function() {
			// переместиться в верхнюю часть страницы
			$("html, body").animate({
			scrollTop:0
			},1000);
		})
	})
	// при прокрутке окна (window)
	$(window).scroll(function() {
		// если пользователь прокрутил страницу более чем на 200px
		if ($(this).scrollTop()>200) {
			// то сделать кнопку scrollup видимой
			$('.scrollup').fadeIn();
		}
		// иначе скрыть кнопку scrollup
		else {
			$('.scrollup').fadeOut();
		}
	});
</script>

----------------------------------------------------------------------------------------------------

Характеристика JOOMSHOPPIND - разделяем на LI-элементы

<?php 
$extrafield_sphera = ''; /* что надо делить - объявление переменной */
if (is_array($this->product->extra_field)){?>
	<div class="extra_fields extra_fields_box">
	<?php $extra_field_group = "";
	foreach($this->product->extra_field as $extra_field){
		if ($extra_field['id'] == 8) { /* получаем объект через ID */
			$extrafield_sphera = explode(',', $extra_field['value']);
			continue;
		}
		if ($extra_field_group!=$extra_field['groupname']){ 
			$extra_field_group = $extra_field['groupname'];
		?>
		<div class='extra_fields_group'><?php print $extra_field_group?></div>
		<?php }?>
		<div>
			<span class="extra_fields_name"><?php print $extra_field['name'];?> : </span>
			<span class="extra_fields_value"><?php print $extra_field['value'];?></span>
			<?php if ($extra_field['description']) {?> 
			<span id="extra_fields_tooltip_<?php print $extra_field["id"]?>"></span>
			<script type="text/javascript">
				jQuery("#extra_fields_tooltip_<?php print $extra_field['id']?>").nvgtooltip({
					txt: '<span class="extra_fields_description"><?php print $extra_field["description"];?></span>'
				});
			</script>
			<?php } ?>				
		</div>
	<?php }?>
	</div>
<?php }?>

Выводим 
<?php 
if (!empty($extrafield_sphera)) {?>
	<div class="tabs__content">
		<ul>
			<?php foreach ($extrafield_sphera as $value) {?>
				<li><?=trim($value)?></li>
			<?php } ?>
		</ul>
	</div>
<?php } ?>

----------------------------------------------------------------------------------------------------

Плавная прокрутка до якоря
<script>
	var $page = $('html, body');
	$('a[href*="#"]').click(function () {
		$page.animate({
			scrollTop: $($.attr(this, 'href')).offset().top
		}, 400); // плавная прокрутка до якоря
		$('.backdrop_close').trigger('click');
		return false; // закрываем меню на мобилке
	});
	
	------------------------------------
	
	$(document).ready(function(){
		$("a[href*='#']").on("click", function(e){
			e.preventDefault();
			var anchor = $(this);
			$('html, body').stop().animate({
				scrollTop: $(anchor.attr('href')).offset().top - 100 //отступ сверху
			}, 777);
			return false;
		});
	});
</script>

----------------------------------------------------------------------------------------------------

Как убрать копирайт внизу SimplefForm2 в Джумла?

заходим на хостинг в домен сайта и далее идет вот так: /modules/mod_simpleform2/models/form.php

Открываем этот файл, лучше всего с помощью Notepad++  и через Контр+F ищем такой код:

$code.= ($this->checkDomain()?'':base64_decode('..........'));

----------------------------------------------------------------------------------------------------

Передаем название кнопки в заголовок модальной формы 

КНОПКА (атрибут data-title) 
<a href="javascript:void(0);" class="btn-slider" data-toggle="modal" data-target="#callback_mdl" data-title="[[+slide_button]]"><span class="icon-check"></span>[[+slide_button]]</a>

скрытое поле в форме cbm_theme
<input type="hidden" name="cbm_theme" value="" />

<script>
$('#callback_mdl').on('show.bs.modal', function (event) {
  let button = $(event.relatedTarget),
    title = button.data('title');
  $('#callback_mdl_label').text(title+':');
  $('[name=cbm_theme]').val(title);
});
</script>

----------------------------------------------------------------------------------------------------

Родитель и дочки - 

Снипет getParentId

<?php
$options = array_map('trim',explode(",", $options));
$parents = $modx->getParentIds($modx->resource->id);
array_push($parents, $modx->resource->id);     
if(array_intersect($parents, $options)){
    echo 1;
} else {
    echo 0;
}
?>

[[*id:getParentId=`129,130`:eq=`1`:then=`
	[[$chunk1]]
`:else=`
	[[$chunk2]]
`]]

----------------------------------------------------------------------------------------------------

Команда для препорцессора для scss

sass --watch SITENAME/artmebius/scss/template_styles.scss SITENAME/artmebius/css/template_styles.css

----------------------------------------------------------------------------------------------------

Картинки из папки

<?php
  $dir = 'images/test-photo'; // Папка с изображениями
  $cols = 3; // Количество столбцов в будущей таблице с картинками
  $files = scandir($dir); // Берём всё содержимое директории
  echo "<table>"; // Начинаем таблицу
  $k = 0; // Вспомогательный счётчик для перехода на новые строки
  for ($i = 0; $i < count($files); $i++) { // Перебираем все файлы
    if (($files[$i] != ".") && ($files[$i] != "..")) { // Текущий каталог и родительский пропускаем
      if ($k % $cols == 0) echo "<tr>"; // Добавляем новую строку
      echo "<td>"; // Начинаем столбец
      $path = $dir.$files[$i]; // Получаем путь к картинке
      echo "<a href='$path'>"; // Делаем ссылку на картинку
      echo "<img src='$path' alt='' width='100' />"; // Вывод превью картинки
      echo "</a>"; // Закрываем ссылку
      echo "</td>"; // Закрываем столбец
      /* Закрываем строку, если необходимое количество было выведено, либо данная итерация последняя */
      if ((($k + 1) % $cols == 0) || (($i + 1) == count($files))) echo "</tr>";
      $k++; // Увеличиваем вспомогательный счётчик
    }
  }
  echo "</table>"; // Закрываем таблицу
?> 

----------------------------------------------------------------------------------------------------

Режем строку PHP

<?php print preg_match("/^(.{200,}?)\s+/s", $product->name, $m) ? $m[1] . '...' : $product->name;?>

----------------------------------------------------------------------------------------------------

Определяем страницу товара joomshopping и дописываес класс к BODY
<?php
$cssClass = '';
if (JRequest::getVar('option') == 'com_jshopping' && JRequest::getVar('controller') == 'product') {
  $cssClass = 'js-product-page';
}
?>
<body class="<?=$cssClass?>">
...
</body>

----------------------------------------------------------------------------------------------------

Joomla - вставить молуль в модуль
<?php
	$document = &JFactory::getDocument();
	$renderer = $document->loadRenderer('modules');
	$options = array('style' => 'xhtml');
	$position = 'ПОЗИЦИЯ';
	echo $renderer->render($position, $options, null);
?>
Joomla - вставить молуль в компонент
<?php
	jimport( 'joomla.application.module.helper' ); 
	$module = JModuleHelper::getModules('ПОЗИЦИЯ');
	$attribs['style'] = 'none';
	foreach($module as $moduleitem){
		echo JModuleHelper::renderModule($moduleitem, $attribs);
	}
?>

----------------------------------------------------------------------------------------------------

kuhni-goldenwood.ru
Выводим картинки из назначенных альбомов галереи
Снипет
<?php 

$modx->toPlaceholders($scriptProperties,'param');

$thumbnails = $output = "";

$albums 	= explode(",", $scriptProperties['albums']);
$limit 		= $scriptProperties['limit'];
$tplWrapper = $scriptProperties['containerTpl'] ? $scriptProperties['containerTpl'] : 'itemGall_wrapper';
$tpl    	= $scriptProperties['thumbTpl'] ? $scriptProperties['thumbTpl'] : 'itemGall_row';

$q = $modx->newQuery('galItem');
$q->select('galItem.*, albItem.album');
$q->leftJoin('galAlbumItem', 'albItem', "albItem.item = galItem.id");
$q->where(array(
    array(
      '`albItem`.`album`:IN'   => $albums,
    )
  ));
if($scriptProperties['random']){
	$q->sortby('RAND()');
}
else {
	$q->sortby('rank','ASC');
}
$q->limit($limit);

if ($q->prepare() && $q->stmt->execute()) {
	$result = $q->stmt->fetchAll(PDO::FETCH_ASSOC);
	if(count($result)){
		foreach ($result as $item) {
			$item['image_absolute'] = $modx->call('galAlbum','getFilesUrl',array(&$modx)).$item['filename'];
			$thumbnails .= $modx->getChunk($tpl, $item);
		}

		if ($tplWrapper && $thumbnails) {
			$output = $modx->getChunk($tplWrapper, array('thumbnails' => $thumbnails));
		}
	}
}
return $output;

Вывод на страницу
[[getGalleryItems?
	&albums=`[[*main_albums_items]]` - id через запятую
	&limit=`0`
	&random=`1`
	&containerTpl=`itemGall_wrapper`
	&thumbTpl=`itemGall_row_new`
	&param_showtitle=`1`
	&param_image=`&w=450&h=300&zc=1&far=1&bg=ffffff`
	
	&classClr=`clr-sxs-1 clr-xs-2 clr-sm-2 clr-md-3 clr-lg-3`
	&classCol=`col-xs-4 col-sm-3 col-md-2 col-lg-1` 
]]
?>

----------------------------------------------------------------------------------------------------


Костыль для пагинации от Жени Суродина (MODX) 
\core\components\pdotools\model\pdotools\pdopage.class.php
в function makePageLink перед $data вставить
if($page == 1){
     $href = $url;
}

----------------------------------------------------------------------------------------------------

Все-кроватки.рф
Старая цена в списке товаров категории из торгового предложения (только первое значение)
Снипет getTpOldPrice
<?php
$options = json_decode($options);
$result = $options->default;
if(!empty($options->migx_torg)){
    if(count($options->migx_torg) && !empty($options->migx_torg[0]->old_price)){
        $result = $options->migx_torg[0]->old_price;
    }
}
return $result;

Вывод 
[[+phx:getTpOldPrice=`{"default":"[[+tv.old_price]]","migx_torg":[[+tv.migx_torg]]}`:notempty=`
	<span class="items_price old_price">Старая цена: <span>[[*id:getTpOldPrice=`{"default":"[[+tv.old_price]]","migx_torg":[[+tv.migx_torg]]}`]]</span> руб.</span>
`]]
?>

----------------------------------------------------------------------------------------------------

Меню типа bootstrap для MODX 
Сайт щколы №37
<script>
var ww = document.body.clientWidth;

$(document).ready(function() {
  $(".nav.top-menu li a").each(function() {
    if ($(this).next().length > 0) {
      $(this).addClass("parent");
    };
  })
  
  $(".toggleMenu").click(function(e) {
    e.preventDefault();
    $(this).toggleClass("active");
    $(".nav.top-menu").toggle();
  });
  adjustMenu();
})

$(window).bind('resize orientationchange', function() {
  ww = document.body.clientWidth;
  adjustMenu();
});

var adjustMenu = function() {
  if (ww < 1024) {
    $(".toggleMenu").css("display", "inline-block");
    if (!$(".toggleMenu").hasClass("active")) {
      $(".nav.top-menu").hide();
    } else {
      $(".nav.top-menu").show();
    }
    $(".nav.top-menu li").unbind('mouseenter mouseleave');
    $(".nav.top-menu li a.parent").unbind('click').bind('click', function(e) {
      // must be attached to anchor element to prevent bubbling
      e.preventDefault();
      $(this).parent("li").toggleClass("hover");
    });
  } 
  else if (ww >= 1024) {
    $(".toggleMenu").css("display", "none");
    $(".nav.top-menu").show();
    $(".nav.top-menu li").removeClass("hover");
    $(".nav.top-menu li a").unbind('click');
    $(".nav.top-menu li.parent").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
      // must be attached to li so that mouseleave is not triggered when hover over submenu
      $(this).toggleClass('hover');
    });
  }
}
</script>

----------------------------------------------------------------------------------------------------

Снипет ten_percent (вычетаем из цены процент)
<?php
    $output = round ($input - ($input * 0.1)); 
    return $output;
?>
Вывод [[*price:ten_percent=`[[*price]]`]] (карточка товара)
      [[+tv.price:ten_percent]] (список товаров) 

----------------------------------------------------------------------------------------------------

1.1. Каноническая ссылка для материалов
Открываем шаблон статьи. Он обычно находится в файле
/templates/ваш шаблон/html/com_content/article/default.php. После строки
JHtml::addIncludePath(JPATH_COMPONENT.'/helpers'); добавляем следующие строки:

$doc=JFactory::getDocument();
$doc->addHeadLink(
   rtrim(JUri::base(),'/').
   JRoute::_(ContentHelperRoute::getArticleRoute($this->item->id,$this->item->catid)),
   'canonical','rel','');
1.2. Каноническая ссылка для блога
Открываем шаблон блога. Он обычно находится в файле
/templates/<ваш шаблон>/html/com_content/category/blog.php. После строки
JHtml::addIncludePath(JPATH_COMPONENT.'/helpers'); добавляем следующие строки:

$doc=JFactory::getDocument();
$docstart = JRequest::getInt('start',0);
if($docstart > 0) { 
$doc->addHeadLink(
   rtrim(JUri::base(),'/').
   JRoute::_(ContentHelperRoute::getCategoryRoute($this->category->id)),
   'canonical','rel','');
}
1.3. Каноническая ссылка для joomshopping
Открываем шаблон сатегории. Он обычно находится в файле
components/jshopping/templates/<ШАБЛОН>/category/category_default.php. После строки
defined('_JEXEC') or die('Restricted access'); добавляем следующие строки:
$pos = strpos($this->action, 'start');
if ($pos){
    $doc->addHeadLink($doc->base, 'canonical');
}

----------------------------------------------------------------------------------------------------

/* пульсирущия кнопка */
<style>
.pulse-button {
	border-radius: 28px;
	background-image: -moz-linear-gradient( 50deg, rgb(255,217,73) 0%, rgb(252,187,0) 100%);
	background-image: -webkit-linear-gradient( 50deg, rgb(255,217,73) 0%, rgb(252,187,0) 100%);
	background-image: -ms-linear-gradient( 50deg, rgb(255,217,73) 0%, rgb(252,187,0) 100%);
	border: 0;
	text-transform: uppercase;
	color: #111111;
	display: table;
	transition: all 0.8s;
	outline: none !important;
	text-align:center;
	display: block;
	text-shadow: 0 1px 0 #1f4c76;
	box-shadow: 0 0 0 0 rgba(237,184,24, 0.7), inset 0 1px 0 #FDC61A;
	border-radius: 10px;
	v-align: middle;в
	background: #FDC61A;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #FDC61A), color-stop(100%, #EDB818));
	background-image: -webkit-linear-gradient(#FDC61A, #EDB818);
	background-image: -moz-linear-gradient(#FDC61A, #EDB818);
	background-image: -o-linear-gradient(#FDC61A, #EDB818);
	background-image: linear-gradient(#FDC61A, #EDB818);
	cursor: pointer;
	background-repeat: no-repeat;
	cursor: pointer;
	-webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
	-moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
	-ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
	animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
.pulse-button:hover {
	-webkit-animation: none;
	color: #111111;
	background-image: -moz-linear-gradient( 90deg, rgb(252,187,0) 0%, rgb(255,217,73) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(252,187,0) 0%, rgb(255,217,73) 100%);
	background-image: -ms-linear-gradient( 90deg, rgb(252,187,0) 0%, rgb(255,217,73) 100%);
	box-shadow: 0px 5px 15px -14px #000;
}
@-webkit-keyframes pulse {
	to {box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);}
}
@-moz-keyframes pulse {
	to {box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);}
}
@-ms-keyframes pulse {
	to {box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);}
}
@keyframes pulse {
	to {box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);}
}
</style>

--------------------------------------------------------------------------------------------------------

/* инвертация изображения */
<style>
.advantages_main .advantage_block:hover .item_icon img {
  mix-blend-mode: screen;
  filter: invert(1);
  
  filter: brightness(0) invert(1);
}
</style>