URL скопирован в буфер обмена!
Как показать купленные товары на странице спасибо на Tilda?
С помощью этой модификации можно пробросить купленные товары на страницу спасибо. Купленные товары покажет в виде таблицы с показом количества цены и общей суммы. Дополнительно можно настроить кнопку очистки и сценарий при случайном переходе на страницу спасибо.
Модификация работает с включенным Autoscale в блоках
Модификация работает только cо стандартными блоками
Номер модификации в библиотеке TiCode
id таблицы
Время кеширования (в днях)
Цвет фона последней строки
Цвет текста последней строки
Подпись перед общей суммой
Действие при пустом кеше
id блока
Ссылка для редиректа
Код для страницы "Спасибо"
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD139--><style>
#rec1741312031 .t431__tbody tr.tcd-totalrow td{
background: #F7D5CE !important;
color: #f96855 !important;
}
.tc-thanks {cursor: pointer;}
</style>
<script>
(function(){
const TCkey='tc_last_order_shop';
function TiCodeEmptyMd(){ return 0; }
function TiCodeCacheDs(){ return 2; }
const TildatcDay = 86400000;
const ticodeEsc=tiS=>String(tiS||'').replace(/[&<>"']/g,tcM=>({
'&':'&','<':'<','>':'>','"':'"',"'":'''
}[tcM]));
function TiCodeClearCache(){
try{ localStorage.removeItem(TCkey); }catch(e){}
}
function TiCodeGetSnapRaw(){
try{ return JSON.parse(localStorage.getItem(TCkey)||'null'); }catch(tiE){ return null; }
}
function TiCodeGetSnap(){
const tiSnap = TiCodeGetSnapRaw();
if(!tiSnap || typeof tiSnap!=='object') return tiSnap;
if(!tiSnap.__tcts){
try{
tiSnap.__tcts = Date.now();
localStorage.setItem(TCkey, JSON.stringify(tiSnap));
}catch(e){}
}
const tcDays = parseInt(TiCodeCacheDs(),10);
if(isFinite(tcDays) && tcDays>0){
const tcTs = parseInt(tiSnap.__tcts,10) || 0;
if(tcTs>0 && (Date.now() - tcTs) > (tcDays * TildatcDay)){
TiCodeClearCache();
return null;
}
}
return tiSnap;
}
function TiCodeHide(el){ if(el) el.style.display='none'; }
function TiCodeShow(el){ if(el) el.style.display=''; }
function TiCodeMainRecSel(){ return '#rec1741312031'; }
function TiCodeAltRecSel(){ return ''; }
function TiCodeGroup3(intStr){
return String(intStr).replace(/\B(?=(\d{3})+(?!\d))/g,' ');
}
function TiCodeFormatMoney(num){
if(typeof num!=='number' || !isFinite(num)) return '';
const isInt = Math.abs(num - Math.round(num)) < 1e-9;
if(isInt) return TiCodeGroup3(String(Math.round(num)));
let s = num.toFixed(2).replace(/\.?0+$/,'');
const parts = s.split('.');
const i = TiCodeGroup3(parts[0]);
return parts.length>1 ? (i + ',' + parts[1]) : i;
}
function tiMoneyLine(TCit){
const ticodeP=(TCit&&TCit.priceText)?String(TCit.priceText).trim():'';
const tcC=(TCit&&TCit.currency)?String(TCit.currency).trim():'';
return (ticodeP+(tcC?' '+tcC:'')) .trim();
}
function TiCodeEmptyAction(){
if(TiCodeEmptyMd()===1){
try{ window.location.href=''; }catch(e){}
return true;
}
TiCodeHide(document.querySelector(TiCodeMainRecSel()));
TiCodeShow(document.querySelector(TiCodeAltRecSel()));
return true;
}
function TCDfillTable(tcTable, tiSnap){
const Tctbody=tcTable.querySelector('tbody.t431__tbody');
const ticodeThead=tcTable.querySelector('thead.t431__thead');
if(!Tctbody) return false;
const TCDitems=(tiSnap&&Array.isArray(tiSnap.items))?tiSnap.items:[];
Tctbody.innerHTML='';
if(!TCDitems.length){
return TiCodeEmptyAction();
}
TiCodeShow(document.querySelector(TiCodeMainRecSel()));
TiCodeHide(document.querySelector(TiCodeAltRecSel()));
tcTable.style.display='';
let TCDtotal = 0;
let TCDtotalCur = '';
TCDitems.forEach((tiIt,TCidx)=>{
const tcRow=document.createElement('tr');
tcRow.className=(TCidx%2===0)?'t431__oddrow':'t431__evenrow';
const ticodeQty=parseInt(tiIt.qty,10)||0;
const TCpriceNum=(typeof tiIt.priceNumber==='number' && isFinite(tiIt.priceNumber))?tiIt.priceNumber:null;
const tiSumNum=(TCpriceNum!==null)?TCpriceNum*ticodeQty:null;
const TCDcur=(tiIt.currency||'').trim();
if(!TCDtotalCur && TCDcur) TCDtotalCur = TCDcur;
const tcTd1=document.createElement('td'); tcTd1.className='t431__td t-text';
tcTd1.innerHTML=tiIt.img?`<span style="display:inline-block;width:44px;height:44px;border-radius:10px;background:#0000000a url('${ticodeEsc(tiIt.img)}') center/cover no-repeat;"></span>`:'—';
const TCTd2=document.createElement('td'); TCTd2.className='t431__td t-text';
const tiTitle=ticodeEsc(tiIt.title||'Товар');
TCTd2.innerHTML=tiIt.url
? `<a href="${ticodeEsc(tiIt.url)}" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;font-weight:700;">${tiTitle}</a>`
: tiTitle;
const tiTd3=document.createElement('td'); tiTd3.className='t431__td t-text'; tiTd3.textContent=String(ticodeQty);
const TCDtd4=document.createElement('td'); TCDtd4.className='t431__td t-text'; TCDtd4.textContent=tiMoneyLine(tiIt)||'—';
const tcTd5=document.createElement('td'); tcTd5.className='t431__td t-text';
tcTd5.textContent=(tiSumNum!==null)
? (TiCodeFormatMoney(tiSumNum) + (TCDcur ? ' ' + TCDcur : '')).trim()
: '—';
if(tiSumNum!==null && isFinite(tiSumNum)) TCDtotal += tiSumNum;
tcRow.append(tcTd1,TCTd2,tiTd3,TCDtd4,tcTd5);
Tctbody.appendChild(tcRow);
});
const tcTotalRow=document.createElement('tr');
tcTotalRow.className='tcd-totalrow';
const tcTotalLabel=document.createElement('td');
tcTotalLabel.className='t431__td t-text tcd-totalcell';
tcTotalLabel.colSpan=4;
tcTotalLabel.style.textAlign='right';
tcTotalLabel.textContent='Всего';
const tcTotalVal=document.createElement('td');
tcTotalVal.className='t431__td t-text tcd-totalcell';
tcTotalVal.textContent=(TiCodeFormatMoney(TCDtotal) + (TCDtotalCur ? ' ' + TCDtotalCur : '')).trim();
tcTotalRow.append(tcTotalLabel, tcTotalVal);
Tctbody.appendChild(tcTotalRow);
return true;
}
function TCtryInit(){
TiCodeHide(document.querySelector(TiCodeAltRecSel()));
const tiSnap=TiCodeGetSnap();
const tcItems=(tiSnap&&Array.isArray(tiSnap.items))?tiSnap.items:[];
const tcIsEmpty=!tiSnap || !tcItems.length;
if(tcIsEmpty && TiCodeEmptyMd()===1){
return TiCodeEmptyAction();
}
const tcRec=document.querySelector(TiCodeMainRecSel());
if(!tcRec) return false;
if(tcIsEmpty && TiCodeEmptyMd()===0){
return TiCodeEmptyAction();
}
const tcTable=tcRec.querySelector('.t431 .t431__table');
if(!tcTable) return false;
return TCDfillTable(tcTable, tiSnap);
}
document.addEventListener('click', function(e){
const btn = e.target && e.target.closest ? e.target.closest('.tc-thanks') : null;
if(!btn) return;
TiCodeClearCache();
}, true);
let TCDtries=0;
const tiTimer=setInterval(()=>{
TCDtries++;
if(TCtryInit() || TCDtries>60) clearInterval(tiTimer);
}, 250);
})();
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
Код для внутренних страниц (см. инструкцию)
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD139--><script>
(function(){
const tcKey = 'tc_last_order_shop';
function TiCodeParseBgUrl(tcBg){
const tcMatch = (tcBg || '').match(/url\(['"]?(.*?)['"]?\)/i);
return tcMatch ? tcMatch[1] : '';
}
function TiCodeToNumber(tcPriceText){
const tcStr = (tcPriceText || '').replace(/\s+/g,'').replace(',', '.').replace(/[^\d.]/g,'');
const tcNum = parseFloat(tcStr);
return Number.isFinite(tcNum) ? tcNum : null;
}
function TiCodeGetCurrencyFallback(){
const tcCart = document.querySelector('.t706');
return (tcCart && tcCart.getAttribute('data-project-currency')) ? tcCart.getAttribute('data-project-currency') : '';
}
function TiCodeCollectCartItems(){
const tcProductsWrap = document.querySelector('.t706__cartwin-products');
if(!tcProductsWrap) return [];
return Array.from(tcProductsWrap.querySelectorAll('.t706__product')).map(tcProd=>{
const tcImgDiv = tcProd.querySelector('.t706__product-imgdiv');
const tcImg = tcImgDiv ? TiCodeParseBgUrl(tcImgDiv.style.backgroundImage) : '';
const tcLink = tcProd.querySelector('.t706__product-title a');
const tcTitle = tcLink ? (tcLink.textContent || '').trim() : ((tcProd.querySelector('.t706__product-title')?.textContent || '').trim());
const tcUrl = tcLink ? tcLink.href : '';
const tcQtyText = (tcProd.querySelector('.t706__product-quantity')?.textContent || '').trim();
const tcQty = parseInt(tcQtyText, 10) || 0;
const tcPriceEl = tcProd.querySelector('.t706__product-amount .t706__cartwin-prodamount-price');
const tcCurEl = tcProd.querySelector('.t706__product-amount .t706__cartwin-prodamount-currency');
const tcPriceText = tcPriceEl ? (tcPriceEl.textContent || '').trim() : '';
const tcCurrency = tcCurEl ? (tcCurEl.textContent || '').trim() : TiCodeGetCurrencyFallback();
return {
title: tcTitle,
url: tcUrl,
img: tcImg,
qty: tcQty,
priceText: tcPriceText,
priceNumber: TiCodeToNumber(tcPriceText),
currency: tcCurrency
};
}).filter(tcItem => tcItem.title || tcItem.url || tcItem.img);
}
function TiCodeCollectTotals(){
const tcTotalWrap =
document.querySelector('.t706__cartwin-totalamount-wrap') ||
document.querySelector('.t706__cartwin-prodamount-wrap');
const tcTotalPriceText = (tcTotalWrap?.querySelector('.t706__cartwin-prodamount-price')?.textContent || '').trim();
const tcTotalCurrency = (tcTotalWrap?.querySelector('.t706__cartwin-prodamount-currency')?.textContent || '').trim() || TiCodeGetCurrencyFallback();
return {
totalPriceText: tcTotalPriceText,
totalPriceNumber: TiCodeToNumber(tcTotalPriceText),
totalCurrency: tcTotalCurrency
};
}
function TiCodeSaveSnapshot(){
const tcSnapshot = {
ts: Date.now(),
items: TiCodeCollectCartItems(),
...TiCodeCollectTotals()
};
try{ localStorage.setItem(tcKey, JSON.stringify(tcSnapshot)); }catch(tiE){}
}
function TiCodeWrapOnce(){
if(window.tcCartSnapshotWrapped) return true;
if(typeof window.t706_onSuccessCallback !== 'function') return false;
const tcOrig = window.t706_onSuccessCallback;
window.t706_onSuccessCallback = function(){
try{ TiCodeSaveSnapshot(); }catch(tiE){}
return tcOrig.apply(this, arguments);
};
window.tcCartSnapshotWrapped = true;
return true;
}
if(!TiCodeWrapOnce()){
let tcTries = 0;
const tcTimer = setInterval(function(){
tcTries++;
if(TiCodeWrapOnce() || tcTries > 50) clearInterval(tcTimer);
}, 200);
}
})();
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
1. Создаем на странице "спасибо" таблицу CL46, копируем ее id и вставляем в генератор в поле «id таблицы»
2. Переходим в контент таблицы и указываем настройки:
Шапка таблицы — Название;;Количество;Стоимость;Сумма (можно указать свои названия ячеек)
Содержимое таблицы — Товаров еще нет (или любой другой текст)
Ширина колонок — 10%;40%;10%;20%;20%
Должно получиться как на скрине
3. Указываем дополнительные настройки в генераторе:
Время кеширования (в днях) — указываем сколько дней хранить купленные товары;
Цвет фона последней строки и Цвет текста последней строки — указываем цвет фона и цвет текста последней строки;
Подпись перед общей суммой — указываем текстовую подпись перед общей суммой в таблице;
Действие при пустом кеше — что делать, если пользователь открыл страницу «Спасибо» без данных или кеш уже очистился: Показать блок — таблица скрывается, а вместо неё показывается блок, ID которого указан в поле «id блока» Редирект — пользователь будет перенаправлен на страницу, указанную в поле «Ссылка»
Дополнительно можешь добавить кнопку «Вернуться в каталог». Если присвоить кнопке класс tc-thanks, то при клике кеш будет очищаться и повторно зайти на страницу «Спасибо» уже не получится (сработает выбранный сценарий при пустом кеше).
5. Копируем код для страницы «Спасибо» и вставляем в HTML блок T123. Блок кода размещаем в самом низу на страницы «спасибо».
6. Копируем второй код и вставляем в HTML блок T123 на страницу с корзиной. Блок кода размещаем под корзиной. Этот скрипт будет кешировать товары при покупке. Если у вас многостраничный сайт, то корзину и код лучше вынести в футер или прокидывать Alias (T213) блоками на нужные страницы.
2. Переходим в контент таблицы и указываем настройки:
Шапка таблицы — Название;;Количество;Стоимость;Сумма (можно указать свои названия ячеек)
Содержимое таблицы — Товаров еще нет (или любой другой текст)
Ширина колонок — 10%;40%;10%;20%;20%
Должно получиться как на скрине
3. Указываем дополнительные настройки в генераторе:
Время кеширования (в днях) — указываем сколько дней хранить купленные товары;
Цвет фона последней строки и Цвет текста последней строки — указываем цвет фона и цвет текста последней строки;
Подпись перед общей суммой — указываем текстовую подпись перед общей суммой в таблице;
Действие при пустом кеше — что делать, если пользователь открыл страницу «Спасибо» без данных или кеш уже очистился: Показать блок — таблица скрывается, а вместо неё показывается блок, ID которого указан в поле «id блока» Редирект — пользователь будет перенаправлен на страницу, указанную в поле «Ссылка»
Дополнительно можешь добавить кнопку «Вернуться в каталог». Если присвоить кнопке класс tc-thanks, то при клике кеш будет очищаться и повторно зайти на страницу «Спасибо» уже не получится (сработает выбранный сценарий при пустом кеше).
5. Копируем код для страницы «Спасибо» и вставляем в HTML блок T123. Блок кода размещаем в самом низу на страницы «спасибо».
6. Копируем второй код и вставляем в HTML блок T123 на страницу с корзиной. Блок кода размещаем под корзиной. Этот скрипт будет кешировать товары при покупке. Если у вас многостраничный сайт, то корзину и код лучше вынести в футер или прокидывать Alias (T213) блоками на нужные страницы.
