Made on
Tilda
Табы в Zero-блоке
<!-- Табы в Zero-блоке | https://necodim.ru/tilda/zero-tabs -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const blocks = [
['#tab1', '.uc-hide-tab1'],
['#tab2', '.uc-hide-tab2']
];
function getBlock(link) {
for (i in blocks) {
if (link == blocks[i][0]) { return blocks[i][1] }
}
}
for (i in blocks) {
document.querySelectorAll(blocks[i][1]).forEach(block => { block.style.display = 'none' })
document.querySelectorAll(`[href="${blocks[i][0]}"]`).forEach(tab => {
tab.addEventListener('click', e => {
e.preventDefault();
document.querySelectorAll('.active').forEach(node => { node.classList.remove('active') });
e.target.classList.add('active');
for (i in blocks) {
document.querySelectorAll(blocks[i][1]).forEach(block => { block.style.display = 'none' });
}
document.querySelectorAll(getBlock(e.target.hash)).forEach(block => { block.style.display = 'block' });
t_lazyload_update();
window.dispatchEvent(new Event('resize'));
});
});
}
document.querySelectorAll(blocks[1][1]).forEach(block => { block.style.display = 'block' });
document.querySelector('.tab [href="' + blocks[1][0] + '"]').classList.add('active');
});
</script>
<style>
.uc-hide-tab1,
.uc-hide-tab2 {display: none;}
.tab .active {
color: #222222 !important;
background-color: #ffcc00 !important;
border: 2px solid #ffcc00 !important;
}
</style>
Кастомизация страницы списка групп (список ресурсов) личного кабинета
<!-- Кастомизация страницы списка групп личного кабинета | https://necodim.ru/tilda/custom-members-page -->
<style>
.tlk-resources {
padding: 90px 0 90px;
color: #ffcc00;
background-color: #222222;
}
.tlk-resources__container {
max-width: 560px;
}
.tlk-resources__wrap {
padding: 40px 30px 40px 30px;
/*background-image: url(https://static.tildacdn.com/tild6132-3537-4131-a337-613563326266/necodim-pattern_tran.svg);*/
background-color: #ffffff;
border: 0px solid #000000;
border-radius: 40px;
}
.tlk-resources__courses, .tlk-resources__groups {
margin-bottom: 45px;
}
.tlk-resources__item + .tlk-resources__item {
margin-top: 15px;
}
.tlk-resources__title {
color: #ffcc00;
font-weight: 500;
font-size: 24px;
}
.tlk-resources__title span {
color: #999999;
font-weight: 300;
font-size: 14px;
}
#allrecords [data-field="tlk-link"], [data-field="tlk-link"] {
color: #ffcc00 !important;
}
#allrecords [data-field="tlk-link"]:hover, [data-field="tlk-link"]:hover {
color: #999900 !important;
opacity: 1 !important;
}
.tlk-resources__groups-title-link-icon .st0 {
stroke: #222222;
}
</style>Хлебные крошки для товаров
var link = 'https://necodim.ru/';
var storeParts = new Array();
var partsSwitchWrapper = document.querySelector('.t-store__parts-switch-wrapper');
var partElements = partsSwitchWrapper.querySelectorAll('.js-store-parts-switcher');
var catalogIdNum = partsSwitchWrapper.closest('.t-rec').id;
partElements.forEach(part => {
var obj = new Object();
obj.id = part.dataset.storepartUid;
obj.name = part.textContent;
obj.link = obj.name !== 'Все' ? encodeURI(`${link}?tfc_storepartuid[${catalogIdNum.replace('rec', '')}]=${obj.name}&tfc_div=:::`) : link;
storeParts.push(obj);
});
copy(storeParts);[
{
"id": "553805324601",
"name": "Все",
"link": "http://necodim.ru/"
},
{
"id": "505348925141",
"name": "Одежда",
"link": "http://necodim.ru/?tfc_storepartuid%5B592653248%5D=%D0%9E%D0%B4%D0%B5%D0%B6%D0%B4%D0%B0&tfc_div=:::"
},
{
"id": "369752901891",
"name": "Обувь",
"link": "http://necodim.ru/?tfc_storepartuid%5B592653248%5D=%D0%9E%D0%B1%D1%83%D0%B2%D1%8C&tfc_div=:::"
}
]Шаг №2: Создание хлебных крошек для товара
<!-- Хлебные крошки для товаров | https://necodim.ru/tilda/product-breadcrumbs -->
<div id="necodim-breadcrumbs" class="ncdm-breadcrumbs t-text"><a href="/" class="ncdm-breadcrumb">Главная</a></div>
<style>
.ncdm-breadcrumbs {
display: inline-block;
}
.ncdm-breadcrumb {
display: inline-block;
}
.ncdm-breadcrumb:not(:last-child)::after {
content: '→';
margin: 0 20px;
}
.ncdm-breadcrumb:last-child {
font-weight: 700;
text-decoration: underline;
}
</style>
<script>
const storeParts = [];
const getPart = (key, value) => {
const obj = storeParts.find(item => item[key] === value);
return obj;
}
const addBreadcrumb = (data) => {
const breadcrumb = document.createElement('a');
breadcrumb.classList.add('ncdm-breadcrumb');
if (data.id) breadcrumb.dataset.partUid = data.id;
if (data.name) breadcrumb.innerHTML = data.name;
if (data.link) breadcrumb.href = data.link;
breadcrumbs.appendChild(breadcrumb);
}
const breadcrumbs = document.getElementById('necodim-breadcrumbs');
addBreadcrumb(getPart('name', 'Все'));
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
const product = document.querySelector('.js-store-product');
const parts = product.dataset.productPartUid.split(',');
addBreadcrumb(getPart('id', parts[0]));
let prodData = {
'name': product.querySelector('.js-store-prod-name').textContent,
'link': window.location.href
}
addBreadcrumb(prodData);
}, 500);
});
</script>Шаг №3: Создание хлебных крошек для страницы каталога
Массив объектов, полученный на предыдущем шаге
<!-- Хлебные крошки для страницы каталога товаров | https://necodim.ru/tilda/product-breadcrumbs -->
<div id="necodim-breadcrumbs" class="ncdm-breadcrumbs t-text"><a href="/" class="ncdm-breadcrumb">Главная</a></div>
<style>
.ncdm-breadcrumbs {
display: inline-block;
}
.ncdm-breadcrumb {
display: inline-block;
}
.ncdm-breadcrumb:not(:last-child)::after {
content: '→';
margin: 0 20px;
}
.ncdm-breadcrumb:last-child {
font-weight: 700;
text-decoration: underline;
}
</style>
<script>
const storeParts = [];
const getPart = (key, value) => {
const obj = storeParts.find(item => item[key] === value);
return obj;
}
const addBreadcrumb = (data) => {
const breadcrumb = document.createElement('a');
breadcrumb.classList.add('ncdm-breadcrumb');
if (data.id) breadcrumb.dataset.partUid = data.id;
if (data.name) breadcrumb.innerHTML = data.name;
if (data.link) breadcrumb.href = data.link;
breadcrumbs.appendChild(breadcrumb);
}
const addPart = () => {
const url = decodeURI(window.location.href);
const urlParams = new URLSearchParams(window.location.search);
const regex = /tfc_storepartuid\[(\d+)\]/gi;
const match = url.match(regex);
if (match) {
setTimeout(() => {
const name = urlParams.get(match[0]);
addBreadcrumb(getPart('name', name));
}, 20);
}
}
const changePart = () => {
breadcrumbs.childNodes.forEach((element, index) => index > 1 ? element.remove() : false);
addPart();
}
const breadcrumbs = document.getElementById('necodim-breadcrumbs');
addBreadcrumb(getPart('name', 'Все'));
addPart();
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('.js-store-grid-cont').addEventListener('tStoreRendered', () => {
setTimeout(() => {
document.querySelectorAll('.js-store-parts-switcher').forEach(partsSwitcher => {
partsSwitcher.addEventListener('click', changePart);
});
}, 50);
});
});
</script>Аккордеон в несколько колонок на разной ширине экрана
<!-- Аккордеон в несколько колонок на разной ширине экрана | https://necodim.ru/tilda/accordion-columns -->
<script>
const necodimAccrodionSettings = {
breakpoint: [
{
screen: 300,
cols: 1
}, {
screen: 480,
cols: 2
}, {
screen: 640,
cols: 3
}, {
screen: 960,
cols: 4
}, {
screen: 1200,
cols: 5
}, {
screen: 1920,
cols: 6
}
]
}
const necodimCountColumns = () => {
const bodyWidth = document.body.offsetWidth;
let cols;
necodimAccrodionSettings.breakpoint.forEach((breakpoint, index) => {
const isLast = index === necodimAccrodionSettings.breakpoint.length - 1;
const isBetween = bodyWidth >= breakpoint.screen && (isLast || bodyWidth < necodimAccrodionSettings.breakpoint[index + 1].screen);
if (isBetween) {
cols = breakpoint.cols;
}
});
return cols;
}
const necodimResizeAccordionColumns = (n) => {
let bw = document.body.offsetWidth
let cw = Math.floor(document.querySelector('.uc-accordion .t-container').offsetWidth / n);
let columns = document.querySelectorAll('.accordion-column');
columns.forEach(column => {
column.style.width = cw + 'px';
let accordions = column.querySelectorAll('.t-col');
accordions.forEach(accordion => {
accordion.style.paddingLeft = '';
accordion.style.paddingRight = '';
if (bw >= 1200) {
accordion.style.width = cw - 40 + 'px';
} else if (960 <= bw && bw < 1200) {
accordion.style.width = cw - 20 + 'px';
} else if (640 <= bw && bw < 960) {
accordion.style.width = '100%';
} else {
accordion.style.width = cw - 20 + 'px';
accordion.style.paddingLeft = '10px';
accordion.style.paddingRight = '10px';
}
});
});
}
const necodimCreateColumns = (n) => {
let a = Array.from(document.querySelectorAll('.uc-accordion .t-col')),
l = a.length;
let oldColumns = document.querySelectorAll('.accordion-column');
if (Array.from(oldColumns).length > 0) oldColumns.forEach(column => column.classList.add('old'));
for (let i = 0; i < n; i++) {
let column = document.createElement('div');
column.classList.add('accordion-column');
column.dataset.accordionColumn = i;
let accordionsInColumn = a.slice(Math.ceil(l / n * i), Math.ceil(l / n * (i + 1)));
accordionsInColumn[0].closest('.t-container').appendChild(column);
accordionsInColumn.forEach(accordion => {
column.appendChild(accordion);
accordion.classList.remove('t-col_1', 't-col_2', 't-col_3', 't-col_4', 't-col_5', 't-col_6', 't-col_7', 't-col_8', 't-col_9', 't-col_10', 't-col_11', 't-col_12', 't-prefix_1', 't-prefix_2', 't-prefix_3', 't-prefix_4', 't-prefix_5', 't-prefix_6', 't-prefix_7', 't-prefix_8', 't-prefix_9', 't-prefix_10', 't-prefix_11', 't-prefix_12');
});
}
oldColumns = document.querySelectorAll('.accordion-column.old');
if (Array.from(oldColumns).length > 0) oldColumns.forEach(column => column.remove());
necodimResizeAccordionColumns(n);
}
document.addEventListener('DOMContentLoaded', () => {
necodimCreateColumns(necodimCountColumns());
});
window.addEventListener('resize', (() => {
setTimeout((() => {
necodimCreateColumns(necodimCountColumns());
}), 300);
}));
</script>
<style>
@media screen and (max-width: 640px) {
.uc-accordion .t-container {
margin: 0 10px;
}
}
</style>Увеличение изображения в Zero-блоке при наведении в рамках своих границ
<!-- Увеличение изображения в Zero-блоке при наведении в рамках своих границ | https://necodim.ru/tilda/image-zoom-on-hover -->
<style>
.img-zoom {
border-radius: 20px;
overflow: hidden;
}
.img-zoom .tn-atom {
border-radius: 20px;
transition: transform 200ms ease-in-out;
}
.img-zoom:hover .tn-atom {
transform: scale(115%);
}
</style>Меню второго уровня из Zero-блока по клику или наведению
<!-- Меню второго уровня из Zero-блока по клику или наведению | https://necodim.ru/tilda/menu-sub -->
<style>
.uc-menu {
position: absolute;
top: 0;
left: 0;
z-index: 999999;
width: 100%;
}
.uc-menu-sub .t396__artboard {
position: absolute;
top: 80px;
left: 0;
z-index: 999998;
opacity: 0;
pointer-events: none;
transform: translateY(-2000px);
transition: opacity .2s ease-in;
}
.uc-menu-sub .t396__artboard.active {
pointer-events: all !important;
transform: translateY(0px) !important;
opacity: 1;
}
.menu-btn.active .tn-atom {
color: #222222 !important;
background-color: #ffcc00 !important;
border-color: #ffcc00 !important;
}
</style>
<script>
$(function() {
let menu = $('.uc-menu'),
menuBtn = menu.find('.menu-btn'),
menuBtnLink = '#menu',
menuSub = $('.uc-menu-sub'),
menuSubArtboard = menuSub.find('.t396__artboard'),
menuSubWrapper;
for (let i=0; i<menuSub.length; i++) {
$(menuSub[i]).find('.t396__elem').wrapAll('<div class="menu-sub">');
}
menuSubWrapper = $('.menu-sub');
function menuSubOpen(e) {
e.preventDefault();
menuBtn.removeClass('active');
menuSubArtboard.removeClass('active');
let n = parseInt($(e.target).attr('href').replace(menuBtnLink, ''), 10) - 1;
$(menuBtn[n]).addClass('active');
$(menuSub[n]).find('.t396__artboard').addClass('active');
t_lazyload_update();
}
function menuSubClose(e) {
e.preventDefault();
menuBtn.removeClass('active');
menuSubArtboard.removeClass('active');
}
// menuBtn.hover(e => menuSubOpen(e));
menuBtn.click(e => menuSubOpen(e));
menuSubWrapper.mouseleave(e => menuSubClose(e));
menuSubArtboard.mouseleave(e => menuSubClose(e));
$(window).scroll(e => menuSubClose(e));
});
</script>Скругление углов у видео
<!-- Cкругление углов у видео | https://necodim.ru/tilda/video-border-radius -->
<style>
.t121 *:not(.t-text, .t-descr) {
border-radius: 15px;
}
</style>Эффект при наведении на элемент в Zero-блоке
<!-- Эффект при наведении на элемент в Zero-блоке | https://necodim.ru/tilda/zero-element-hover -->
<style>
.my-class {
text-decoration: none;
transition: opacity 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.my-class::after {
--scale: 0;
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100%;
z-index: -1;
border-radius: 5px;
background: linear-gradient(135deg, #ffcc00, #ca1a2b);
transform: scale(var(--scale));
transform-origin: var(--x) 50%;
transition: transform 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.my-class:hover {
opacity: 1;
}
.my-class:hover::after {
--scale: 1;
}
</style>
<script>
document.querySelectorAll('.my-class').forEach((elem) => {
elem.onmouseenter = elem.onmouseleave = (e) => {
const tolerance = 10;
const left = 0;
const right = elem.clientWidth;
let x = e.pageX - elem.offsetLeft;
if (x - tolerance < left) x = left;
if (x + tolerance > right) x = right;
elem.style.setProperty('--x', `${ x }px`);
}
});
</script>Эффект при наведении на элемент в Zero-блоке
<!-- Эффект при наведении на элемент в Zero-блоке | https://necodim.ru/tilda/zero-element-hover -->
<style>
.my-class {
text-decoration: none;
transition: opacity 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.my-class::after {
--scale: 0;
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100%;
z-index: -1;
border-radius: 5px;
background: linear-gradient(135deg, #ffcc00, #ca1a2b);
transform: scale(var(--scale));
transform-origin: var(--x) 50%;
transition: transform 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.my-class:hover {
opacity: 1;
}
.my-class:hover::after {
--scale: 1;
}
</style>
<script>
document.querySelectorAll('.my-class').forEach((elem) => {
elem.onmouseenter = elem.onmouseleave = (e) => {
const tolerance = 10;
const left = 0;
const right = elem.clientWidth;
let x = e.pageX - elem.offsetLeft;
if (x - tolerance < left) x = left;
if (x + tolerance > right) x = right;
elem.style.setProperty('--x', `${ x }px`);
}
});
</script>Drag scroll или панорамы и необычные слайдеры в Zero-блоке
<!-- Drag scroll или панорамы и необычные слайдеры в Zero-блоке | https://necodim.ru/tilda/drag -->
<script src="https://cdn.jsdelivr.net/npm/jquery.kinetic/jquery.kinetic.js"></script>
<script>
$('#rec123456789').find($('.t396__artboard')).kinetic({
cursor: 'grab',
x: true,
y: true,
filterTarget: function(target, e){
if (!/down|start/.test(e.type)){
return !(/area|a|input/i.test(target.tagName));
}
}
});
</script>Горизонтальный скролл элементов Zero блока по движению мыши
Кнопка «Подробнее» для длинного текста
Хотите скрыть огромный текст на странице в кнопку «Подробнее»? С помощью этого скрипта, такое сделать будет очень легко. Пример работы скрипта в стандартном блоке можно посмотреть ниже, а как ведёт себя Zero-блок с раскрывающимся внутри текстом, видно тут.
Пример работы модификации в Zero-блоке в самом низу страницы.
Если по какой-то причине в Zero-блоке у вас кнопка «Подробнее» не скрывает текст, а помещается под него, проверьте настройки текстового блока. У него должен быть задан параметр line-height (высота строки). В Zero-блоке за это отвечает Spacing (первое значение).
<!-- Кнопка «Подробнее» для длинного текста | https://necodim.ru/tilda/collapsed-text -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.2.1/readmore.js"></script>
<script>
document.querySelector('#rec123456789 .t396__artboard').addEventListener('artBoardRendered', function() {
let block = $('#rec123456789'),
blockArtboard = block.find($('.t396__artboard')),
longTextWrap = block.find($('.t-text')),
longText = longTextWrap.find($('.tn-atom')),
blockHeight = blockArtboard.height(),
textHeight = longTextWrap.height(),
rowHeight = Math.round(parseInt(longText.css('line-height'),10)),
collapsedHeight = rowHeight * 3
textPosition = parseInt(longTextWrap.css('top'),10);
longTextWrap.css({'display':'flex','flex-direction':'column'});
blockArtboard.css('transition','all 0.2s ease');
function grow(bh,th,rh,ch,tp) {
blockArtboard.height(bh-th+rh+ch+tp);
};
longText.readmore({
speed: 200,
collapsedHeight: collapsedHeight,
moreLink: '<a href="#read-more" class="t-name read-more">Подробнее</a>',
lessLink: '<a href="#read-less" class="t-name read-less">Скрыть</a>',
blockProcessed: function() {
grow(blockHeight,textHeight,rowHeight,collapsedHeight,0);
},
beforeToggle: function(trigger, element, expanded) {
if(!expanded) {
grow(blockHeight,0,rowHeight,0,0);
} else {
grow(blockHeight,textHeight,rowHeight,collapsedHeight,0);
$('html, body').animate({scrollTop: element.offset().top-textPosition}, {duration: 200});
}
}
});
});
</script>
<style>
.read-more,
.read-less {
color: #ffcc00 !important;
font-size: 22px;
font-weight: 700;
}
</style>Кнопка «Подробнее» для длинного текста
Код для товаров
<!-- Кнопка «Подробнее» для длинного текста | https://necodim.ru/tilda/collapsed-text -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.2.1/readmore.js"></script>
<script>
const makeReadmore = (target) => {
const rowHeight = Math.round(parseFloat(target.css('line-height').split('px')[0], 10));
collapsedHeight = rowHeight * 3,
longTextClasses = target.attr('class');
target.readmore({
speed: 200,
collapsedHeight: collapsedHeight,
moreLink: '<a href="#read-more" class="t-name read-more">Подробнее</a>',
lessLink: '<a href="#read-less" class="t-name read-less">Скрыть</a>'
});
}
$('.js-store-prod-btn').click(function() {
if ($(this).attr('href').indexOf('tproduct') !== -1) {
setTimeout(() => {
let block = $('.t-store__product-popup'),
longText = block.find($('.js-store-prod-all-text'));
makeReadmore(longText);
}, 500);
}
});
if (window.location.href.indexOf('tproduct') !== -1) {
setTimeout(() => {
let block = $('.t-store__product-snippet'),
longText = block.find($('.js-store-prod-all-text'));
makeReadmore(longText);
}, 500);
}
</script>
<style>
.read-more,
.read-less {
color: #ffcc00 !important;
font-size: 22px;
font-weight: 700;
}
</style>Кнопка «Назад» (предыдущая страница)
<!-- Кнопка «Назад» (предыдущая страница) | https://necodim.ru/tilda/history-back -->
<script>
$('a[href="#back"]').click(function() {
history.back();
return false;
})
</script>Кнопка «Назад» (предыдущая страница)
<!-- Кнопка «Назад» (предыдущая страница) | https://necodim.ru/tilda/history-back -->
<script>
$('a[href="#back"]').click(function() {
history.back();
return false;
})
</script>