ИНТЕРНЕТ-МАГАЗИН
Интернет-магазин нужен для автоматизации продаж. Этот урок поможет вам сориентироваться в структуре и необходимых функциях сайтов данного вида. Вы не будете боятся брать такого рода заказы и будете уверены, что ничего не забыли и со всем справитесь
Чтобы вы не запутались я создала интерактивную схему на которой наглядно видно что нам зачем нужно. При нажатии на блок вы попадаете в инструкции тильды
В интернете много видео видео на тему интернет-магазинов, в своих уроках я хотела показать вам наглядно как это устроено в жизни
00:00 — Что такое интернет-магазин
00:57 — Чем он отличается от лендинга
02:10 — Для чего он служит
04:50 — Основные страницы интернет-магазина
06:10 — Важные страницы интернет-магазина
07:15 — Примеры
00:00 — Анализ конкурентов и прототип
03:00 — Создаём зеро-блок
03:57 — Делаем меню на стандартных блоках
04:38 — Создаём карточки товаров
02:37 — Уведомления
03:20 — Плагины (Plugins)
04:20 — Как добавить доску
Этот код выравнивает цены по нижнему краю

<style>
.t-store__card__textwrapper {
display: flex;
flex-direction: column;
}
.js-store-price-wrapper {
margin-top: auto;
display: flex;
flex-wrap: wrap;
padding-top: 10px;
}
.js-store-prod-sold-out {
width: 100%;
order: -1;
}
.t-store__card__price {
margin-right: 5px;
}
</style>
Этот код создает чек-боксы в карточке товара для выбора нескольких параметров

<style>
.st305n label{
font-family: 'Roboto',Arial,sans-serif;
font-weight: 300;
color: #000000;
font-size: 14px;
}
.st305n p {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.st305n input {
height: 18px;
width: 18px;
margin-right: 6px;
}
</style>
<script>
$( document ).ready(function() {
$(document).on('click','a[href="#prodpopup"]',function(e){
setTimeout(function(){
$('.t-store .t-popup div.js-product-option:eq(0)').addClass('productSt');
$('.t-store .t-store__product-snippet div.js-product-option:eq(0)').addClass('productSt');
//Выбираем первый список
$('.productSt select').addClass('selchk');
$('.selchk').closest('.t-product__option-variants').hide();
var selStsize = $('.selchk option').size();
$('.selchk').closest('.t-product__option').after('<div class="st305n"></div>');
for (let i = 0; i < selStsize ; i++) {
var txtOpt= $('.selchk option:eq('+i+')').val();
var dataAtrprice = $('.selchk option:eq('+i+')').attr('data-product-variant-price');
if(dataAtrprice==''){dataAtrprice=0};
$('.st305n').append('<p><input type="checkbox" data-product-variant-price="'+dataAtrprice+'" id="checkbox_'+i+'" value="'+txtOpt+'"><label for="checkbox_'+i+'">'+txtOpt+'</label></p>');
};
$('.selchk option:first').attr('data-product-variant-price','');
$('.selchk').trigger( "change" );
}, 500);
});
$(document).on('click','.st305n',function(e){
var checkedlbl = '';
var checkprice= 0;
$('.st305n input:checkbox:checked').each(function() {
checkedlbl =checkedlbl+ ' >'+ $(this).val();
checkprice=checkprice+ Number.parseInt($(this).attr('data-product-variant-price'));
});
$('.selchk option:first').attr('data-product-variant-price','+'+checkprice);
$('.selchk option:first').val(checkedlbl);
$('.selchk').trigger( "change" );
});
});
</script>
Меняем поля в корзине, как у меня в Farsh
Инструкция платная: https://mo-ti.ru/deliverypoint

<script>
$(document).ready(function(){
//Добавляем классы для скрытия к нужным пунктам
$('.t706 select[name="mskpoint"]').closest('.t-input-group').addClass("msk notshow");
$('.t706 select[name="spbpoint"]').closest('.t-input-group').addClass("spb notshow");
$('.t706 input[name="adress"]').closest('.t-input-group').addClass("clientadr notshow");
$('.t706 input[name="indeks"]').closest('.t-input-group').addClass("pcode notshow");
$('.notshow').hide();
//При переключении переключателей доставки
$( 'input[name="deliveryvar"]' ).change(function() {
//Орпеделяем выбор
var place = $('input[name="deliveryvar"]').index(this);
//Скрываем поля
$('.notshow').hide();
//Если выбрали доставку
if (place==0 || place==1 || place==2) {
$(".clientadr , .pcode ").show();
$('.clientadr input').addClass('js-tilda-rule');
$('.msk select , .spb select').removeClass('js-tilda-rule');
};
//ПВЗ МСК
if (place==3) {
$(" .msk").show();
$('.msk select ').addClass('js-tilda-rule');
$('.clientadr input , .spb select').removeClass('js-tilda-rule');
$(".spb select :nth-child(1)").prop('selected', true).change();
};
//ПВЗ СПб
if (place==4) {
$(".spb").show();
$('.spb select ').addClass('js-tilda-rule');
$('.clientadr input , .msk select').removeClass('js-tilda-rule');
$(".msk select :nth-child(1)").prop('selected', true).change();
};
});
});
</script>
Made on
Tilda