25
Работы в маршруте
Инструкция
(скрыть)
Товары

1. Добавь товары в каталог, имя автора работы нужно отделить двумя нижними подчеркиваниями без пробела между именем и названием по примеру: __Алексеев никита__без названия

2. На страницу товары добавлены с помощью блока ST300.

3. Часть настроек товаров нужно сделать в настройках этого блока. В слайдере ниже я сделала скрины всех вкладок, где нужно что-то сделать. Задать размер названия, описания, выравнивание и т.д.

4. Добавь характеристики товарам.


Оформление

1. Скопируй код и вставить в блок T123. Желательно, чтобы он был ниже самого блока с товарами.

2. Добавь на страницу блок от ANNEXX - ANX218.

Карточка товара

1. Нужно сделать отдельную страницу и добавить на нее ANNEXX - ANX218. В настройках блока в поле ЭКРАН ОТ 1200PX указать значение -100. Если этого не сделать - карточка по непонятным причинам увеличивается большем, чем нужно.

2. Скопируй код 2 и вставь в блок T123 ниже блока от ANNEXX.

3. Перейди в каталог → Настройки → Шапка для товаров и выбери эту страницу. Убери галочку Открывать страницу вместо попапа.


Если не работает

1. Проверить, что на страницу добавлен нужный блок.

2. Открыть консоль Ctrl + Shift + I → Console и посмотреть ошибки. Иногда, код отображается в редакторе с ошибками, в таком случае ее можно будет там увидеть. Если не хватает каких-то скобок, то их нужно проставить.

3. Скинуть мне ссылку на страницу, если самостоятельно исправить проблему не выходит.
<style>
    *Delete tilda style*/
    .t-store__card {max-width: 280px; margin-bottom: 30px!important;}
    .t-store__card__imgwrapper {padding-bottom: 0!important;}
    .t-store__card__img {position: relative!important;}
    .t-store__card__textwrapper {padding-top: 0!important;}
    .t-store__card {display: flex; flex-direction: column;}
    #allrecords b {font-weight: 600!important;}
    .t-store__card__textwrapper {padding-top: 20px!important;}
    /*Delete tilda style*/
    
    /*New grid*/ 
    .t-container {padding: 0 20px;box-sizing: border-box;}
    .t-clear.t-store__grid-separator {display: none;}
    .t-store__card a {display: flex;flex-direction: column;}
    /*New grid*/
    
    /*Card style*/
    .t-store__relevants-grid-cont {display: flex;gap: 85px;flex-direction: column;overflow-x: hidden!important;}
    .t-store__prod-popup__text {text-transform: none!important;}
    .js-store-prod-all-text {font-size:13px;}
    .js-store-prod-all-charcs {text-transform: uppercase; font-size: 13px; margin-top: 40px!important;}
    .js-store-prod-charcs {display: grid; grid-template-columns: 113px 1fr; padding-bottom: 30px;}
    .t-store__relevants-grid-cont .t-store__card {margin: 0!important;}
    .t-store__relevants__title,.t-store__prod-popup__name {font-size: 36px!important;}
    /*Card style*/
    
    @media (max-width: 768px) {
        .t-store__grid-cont {padding: 0!important;}
    }
    @media (min-width: 1024px) {
        .t-store__card {margin: 0!important;max-width: 330px;margin-bottom: 0;}
        .t-store__card a {padding-bottom: 85px;}
        /*Card style*/
        .t-store__prod-popup__container {padding-top: 100px;}
        .t-store__prod-popup__slider {padding-right: 60px; box-sizing: border-box;}
        .t-store__prod-popup__name {line-height: 1.25!important;}
        .t-store__relevants-grid-cont {flex-direction: row;}
        .t-store__relevants-grid-cont::after {display: none;}
        .js-product-relevant {max-width: 330px!important;}
        .js-product-relevant a {padding-bottom: 0;}
        .t-store__card__title {font-size: 12px;}
        .t-store__relevants__title {margin: 150px 0 80px;}
        /*Card style*/
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
<script>
window.addEventListener("load", function(event) {
    let elem = document.querySelector('.js-store-grid-cont');
    let target = document.querySelector('.t-store');
    const config = {
        attributes: true,
        childList: true,
        subtree: true
    };
    
    masonry();
    editName();
    editNameCart();
    editCharcs();
    
    function masonry () {
        if (window.matchMedia("(min-width: 1024px)").matches) {
            var msnry = new Masonry( elem, {
                itemSelector: '.t-store__card',
                gutter: 85,
                horizontalOrder: true,
                columnWidth: 330,
                percentPosition: true
            });
        }
    }

    const callback = function(mutationsList, observer) {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList') {

            } else if (mutation.type === 'attributes') {
                masonry();
                editName();
                editNameCart();
                editCharcs();
            }
        }
    };
    
    function editName () {
        let name = document.querySelectorAll('.t-store__card__title'); 
        let nameContent;

        name.forEach(el => {
            nameContent = el.textContent.split('__').slice(1);
            for (let i = 0; i < nameContent.length; i += 1) {
                el.innerHTML = `<b>${nameContent[0]}</b><br>${nameContent[1]}`;
            }
        });
    }
    
    function editNameCart () {
        let name2 = document.querySelector('.t-store__prod-popup__name'); 
        let nameContent2 = name2.textContent.split('__').slice(2);
        for (let i = 0; i < nameContent2.length; i += 1) {
            name2.innerHTML = `${nameContent2[0]}`;
        }
    }
    
    function editCharcs() {
        let charc = document.querySelectorAll('.js-store-prod-charcs');
        charc.forEach(e => {
            let charcContent = e.textContent.split(':');
            for (let i = 0; i < charcContent.length; i += 1) {
                e.innerHTML = `<b class="js-store-prod-charcs--left">${charcContent[0]}:</b><span class="js-store-prod-charcs--right" style="max-width: 340px;">${charcContent[1]}</span>`;
            }
        });
    }

    const observer = new MutationObserver(callback);
    observer.observe(target, config);
});
</script> 
<style>
    .t-store__relevants-grid-cont {display: flex;gap: 85px;flex-direction: column;overflow-x: hidden!important;}
    .t-store__prod-popup__text {text-transform: none!important;}
    .js-store-prod-all-text {font-size:13px;}
    .js-store-prod-all-charcs {text-transform: uppercase; font-size: 13px; margin-top: 40px!important;}
    .js-store-prod-charcs {display: grid; grid-template-columns: 113px 1fr; padding-bottom: 30px;}
    .t-store__relevants-grid-cont .t-store__card {margin: 0!important;}
    .t-store__relevants__title,.t-store__prod-popup__name {font-size: 36px!important;}
    #allrecords b {font-weight: 600!important;}
    @media (min-width: 1024px) {
        /*Card style*/
        .t-store__prod-popup__container {padding-top: 100px;}
        .t-store__prod-popup__slider {padding-right: 60px; box-sizing: border-box;}
        .t-store__prod-popup__name {line-height: 1.25!important;}
        .t-store__relevants-grid-cont {flex-direction: row;}
        .t-store__relevants-grid-cont::after {display: none;}
        .js-product-relevant {max-width: 330px!important;}
        .js-product-relevant a {padding-bottom: 0;}
        /*.t-store__card__textwrapper {padding-top: 20px!important;}*/
        .t-store__card__title {font-size: 12px;}
        .t-store__relevants__title {margin: 150px 0 80px;}
        /*Card style*/
    }
</style>
<script>
window.addEventListener("load", function(event) {
    let target = document.querySelector('.t-store');
    const config = {
        attributes: true,
        childList: true,
        subtree: true
    };
    
    editName();
    editNameCart();
    editCharcs();
    
    const callback = function(mutationsList, observer) {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList') {
            } else if (mutation.type === 'attributes') {
                editName();
                editNameCart();
                editCharcs();
            }
        }
    };
    
    function editName () {
        let name = document.querySelectorAll('.t-store__card__title');
        let nameContent;

        name.forEach(el => {
            nameContent = el.textContent.split('__').slice(1);
            for (let i = 0; i < nameContent.length; i += 1) {
                el.innerHTML = `<b>${nameContent[0]}</b><br>${nameContent[1]}`;
            }
        });
    }
    
    function editNameCart () {
        let name = document.querySelector('.t-store__prod-popup__name'); 
        let nameContent = name.textContent.split('__').slice(2);
        for (let i = 0; i < nameContent.length; i += 1) {
            name.innerHTML = `${nameContent[0]}`;
        }
    }
    
    function editCharcs() {
        let charc = document.querySelectorAll('.js-store-prod-charcs');
        charc.forEach(e => {
            let charcContent = e.textContent.split(':');
            for (let i = 0; i < charcContent.length; i += 1) {
                e.innerHTML = `<b class="js-store-prod-charcs--left">${charcContent[0]}:</b><span class="js-store-prod-charcs--right" style="max-width: 340px;">${charcContent[1]}</span>`;
            }
        });
    }

    const observer = new MutationObserver(callback);
    observer.observe(target, config);
});
</script>
Made on
Tilda