Что значит отказался? Может вы что-то не то понаписали? Попробуйте ещё раз!

Была одна проблема, стало две! Может, всё-таки доковырять пункт А? И разобраться, что не так?

ну а логично подумать от чего неработает active?

у формы

У формы такого нету. Может вы имели в виду action? Адрес, куда отправлять данные формы.

Все зделал все работает вот результат
http://korzinka.byethost9.com/

jobananada, я рад, что вы разобрались с формой!

А загрузка пол-гигабайта? Сделайте, чтобы не показывало больше карточек, чем размер экрана!

я незнаю как загружать часть экрана нужно копатся в инфе

Вот код который подгружает все карты на главную как сделать чтоб выводилась только видимая часть экрана

function showCategories(data,cool){
        let j = cool;
        //console.log(j);
        let out = '';
        for (let i = 0; i < data.length; i++){
            if (data[i]['gsx$show']['$t'] != 0){
                if(data[i]['gsx$category']['$t'] == j){
					let str = data[i]['gsx$image']['$t'];
					let im = str.split(',')[0];
        			out +=`<div class="goods-category-cart">`;
        			out +=`<div class="goods-category-name">${data[i]['gsx$name']['$t']}</div>`;

			out +=`<div class="goods-img" id="goods-image">
					<img  id="${data[i]['gsx$id']['$t']}" class="square"  src="${im}">
					<span class="text">Кликни фото для просмотра</span>
					</div>`;
			
			out +=`<div class="goods-cost">Цена: ${data[i]['gsx$cost']['$t']}гр</div>`;
			out +=`<div class="goods-pol">Пол: ${data[i]['gsx$pol']['$t']}</div>`;
			out +=`<div class="goods-knopka"><button id="but" name="add-to-cart" data="${data[i]['gsx$id']['$t']}">Купить</button></div>`;
			out +=`</div>`;
                }else if(j == 0){
					let str = data[i]['gsx$image']['$t'];
					let im = str.split(',')[0];
        			out +=`<div class="goods-category-cart">`;
        			out +=`<div class="goods-category-name">${data[i]['gsx$name']['$t']}</div>`;
	
			out +=`<div class="goods-img" id="goods-image">
					<img  id="${data[i]['gsx$id']['$t']}" class="square" src="${im}">
					<span class="text">Кликни фото для просмотра</span>
					</div>`;
			
			out +=`<div class="goods-cost">Цена: ${data[i]['gsx$cost']['$t']}гр</div>`;
			out +=`<div class="goods-pol">Пол: ${data[i]['gsx$pol']['$t']}</div>`;
			out +=`<div class="goods-knopka"><button id="but" name="add-to-cart" data="${data[i]['gsx$id']['$t']}">Купить</button></div>`;
			out +=`</div>`;
				}else if(data[i]['gsx$type']['$t'] == j){
					let str = data[i]['gsx$image']['$t'];
					let im = str.split(',')[0];
        			out +=`<div class="goods-category-cart">`;
        			out +=`<div class="goods-category-name">${data[i]['gsx$name']['$t']}</div>`;

			out +=`<div class="goods-img" id="goods-image">
					<img  id="${data[i]['gsx$id']['$t']}" class="square" src="${im}">
					<span class="text">Кликни фото для просмотра</span>
					</div>`;
			
			
			out +=`<div class="goods-cost">Цена: ${data[i]['gsx$cost']['$t']}гр</div>`;
			out +=`<div class="goods-pol">Пол: ${data[i]['gsx$pol']['$t']}</div>`;
			out +=`<div class="goods-knopka"><button id="but" name="add-to-cart" data="${data[i]['gsx$id']['$t']}">Купить</button></div>`;
			out +=`</div>`;
				}else if(j == 1){
                    
                }
            }
        }
        return out;
    }

Вот нашол статью какуюто
по этой теме
https://webformyself.com/otlozhennay...ivoj-zagruzki/

А как этот способ использовать в моем примере?
https://appelsiini.net/projects/lazyload/