Loading...

Как сделать 5 карточек в ряд для товаров Tilda?

С помощью нашего скрипта ты можешь сделать в стандартном блоке Тильды 5 товаров в ряд
Время настройки: 1 минута
Генератор кода
Пример
Инструкция
5 товаров в ряд могут отображаться в Планшетной и ПК версии.

1. Настрой блок ST305N на странице:
-КОЛ-ВО БЛОКОВ В РЯДУ: 4
-Оригинальное соотношение сторон изображений: ☑
-Два товара в ряд на мобильных устройствах: ☑
-Высота: Настройте в зависимости от ваших изображений

2. В генераторе добавь id блока ST305N;

3. Добавь код на страницу в блок T123;

На данный момент модификация работает только с блоком ST305N и товарами из каталога.
Введите id ST305N
Копировать код<!-- Как сделать 5 карточек в ряд для товаров TILDA? -->
<!-- https://nolim.cc/5-tovarov-v-ryad -->
<script> function t_store_process2(t, e, r, o, s, i) { var a = $("#rec" + e) , n = a.find(".js-store-grid-cont") , l = "973" === a.attr("data-record-type"); s && (n = a.find(".js-store-relevants-grid-cont")); var _ = t_store_get_horizSeparator_html(r) , d = {} , c = n.find(".t-store__card").length; if (0 === t.length) { var p = t_store_get_emptyMsg_html(r); return n.append(p), void a.find(".js-store-empty-part-msg").fadeIn(200) } var u = "" , f = 4 , h = s ? f : 5; if (s && r.relevants_slider && (t.length > f || $(window).width() <= 960) || !s && l) { var v = "" , m = "300"; "fast" === r.slider_opts.anim_speed && (v = "t-slds_animated-fast"), "slow" === r.slider_opts.anim_speed && (v = "t-slds_animated-slow", m = "500"), u += '<div class="t-slds" style="visibility: hidden;">', u += '<div class="t-slds__main t-container">', u += '<div class="t-slds__container">', u += '<div class="t-slds__items-wrapper ' + v + '" data-slider-items-in-row="' + (!s && l ? h : f) + '" data-slider-transition="' + m + '" data-slider-with-cycle="true" data-slider-cycle="yes" data-slider-correct-height="' + (!s && l ? "true" : "false") + '" data-auto-correct-mobile-width="false">', u = u.replace("[[noCycleClass]]", r.slider_opts.cycle ? "" : "t-slds__nocycle").replace("[[isCycled]]", r.slider_opts.cycle ? "true" : "false") } if ($.each(t, function(o, i) { (!s && !l || s && !r.relevants_slider) && c > 0 && c % h == 0 && (u += _), u += t_store_get_productCard_html(a, i, r, s, e, o, t), d[i.uid] = i, c++ }), s && r.relevants_slider && (t.length > f || $(window).width() <= 960) || !s && l) { var g = a.find(".js-store-tpl-slider-arrows") , w = g.html(); if (u += "</div>", u += "</div>", w && !s && l && (u += w, n.removeClass("t-container").removeClass("t-store__grid-cont_mobile-grid")), !s && l) { var b = '<div class="t-slds__bullet_wrapper">'; $.each(t, function(t, e) { var r = t + 1; b += '<div class="t-slds__bullet' + (1 === r ? " t-slds__bullet_active" : "") + '" data-slide-bullet-for="' + r + '"><div class="t-slds__bullet_body" style="background-color: transparent;"></div></div>' }), b += "</div>", u += b } u += "</div>", u += "</div>", w && s && (u += w) } if (t_store_process_appendAndShowProducts(a, n, u), $.each(t, function(t, o) { var i = s ? a.find('.t-store__relevants__container .js-product.t-item[data-product-gen-uid="' + o.uid + '"]') : a.find('.js-product.t-item[data-product-gen-uid="' + o.uid + '"]'); i.data("cardSize", "small"), o = d[o.uid], "both" !== r.showStoreBtnQuantity && "list" !== r.showStoreBtnQuantity || t_store_addProductQuantity(e, i, o, r), t_store_addProductOptions(e, o, i, r), t_store_option_handleOnChange_custom(e, i, r), t_store_onFuncLoad("t_prod__initProduct", function() { t_prod__initProduct(e, i) }) }), !o && r.isFlexCols && r.isHorizOnMob && (n.find(".t-store__tail-gap").remove(), n.append('<div class="t-store__tail-gap"></div>')), "y" !== window.lazy && "yes" !== $("#allrecords").attr("data-tilda-lazy") || (r.relevants_slider ? setTimeout(function() { t_store_onFuncLoad("t_lazyload_update", function() { t_lazyload_update() }) }, 100) : t_store_onFuncLoad("t_lazyload_update", function() { t_lazyload_update() })), $(".t706__cartwin").length > 0 ? "function" == typeof tcart__addEvent__links && tcart__addEvent__links() : console.log("Warning: cart block is not added to this page"), t_store_initPopup(e, d, r, s, i), t_store_unifyCardsHeights(e, r), r.verticalAlignButtons && t_store_verticalAlignButtons(e, r), setTimeout(function() { t_store_unifyCardsHeights(e, r), r.verticalAlignButtons && t_store_verticalAlignButtons(e, r) }, 1), void 0 !== document.fonts ? void 0 !== document.fonts.ready && document.fonts.ready.then(function() { setTimeout(function() { t_store_unifyCardsHeights(e, r) }, 1e3) }) : setTimeout(function() { t_store_unifyCardsHeights(e, r) }, 1e3), r.verticalAlignButtons && ("complete" === document.readyState ? t_store_verticalAlignButtons(e, r) : $(window).on("load", function() { t_store_verticalAlignButtons(e, r) })), !r.previewmode) try { addEditFieldEvents_new(e) } catch (t) { console.log(t.message) } } $(document).ready(function(){ t_store_process = t_store_process2; setTimeout(function(){ t_store_process = t_store_process2; },100); setTimeout(function(){ t_store_process = t_store_process2; },500); setTimeout(function(){ t_store_process = t_store_process2; },1000); }); </script> <style> @media screen and (min-width: 1200px){ #rec304965880 .t-col_3 { max-width: 220px!important; } #rec304965880 .t-col { margin-left: 10px!important; margin-right: 10px!important; } } @media screen and (max-width: 1200px) and (min-width: 960px){ #rec304965880 .t-col_3 { max-width: 170px; } } @media screen and (max-width: 480px){ #rec304965880 .t-col_3 { margin-bottom: 30px; width: 50%; position: relative; } } #rec304965880 .t-store__card__imgwrapper { position: relative; width: 100%; padding-bottom: 60%; } </style>
Код доступен только тем, кто оплатил подписку
Подписка стоит 390р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, что бы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Made on
Tilda