Как этот jQuery код выглядел бы на чистом javascript?

107
24 мая 2021, 15:20

Здраствуйте! Пишу сайт по продаже косметики для портфолио. Сам сайт написан полностью на чистом javascript. Хотел сделать корзину для товаров. Очень понравился подход к реализации на канале ютуб Александра Лущенко. Но проблема в том что у него это реализовано частично c помощью библиотеки jQuery которую я совсем не знаю. Там не так уж и много всего несколько строк кода на JQuery, остальное на javascript. Прошу помочь переделать эти строки на чистый javascript. Только единственное я хочу оставить JQuery метод- $.getJSON потому что смотрел аналог реализации этого метода на javascript чистом то это вообще зашквар, то эту функцию не передиливайте. Заранее спасибо!

Строки(или функции) в которых есть jquery я обозначил коментарием:

//моя корзина
var cart = {}; 
$('document').ready(function(){       // jQuery
    loadGoods();
    checkCart();
    showMiniCart();
});
function loadGoods() {
    //загружаю товары на страницу
    $.getJSON('goods.json', function (data) {
        var out = '';
        for (var key in data){
            out+='<div class="single-goods">';
            out+='<h3>'+data[key]['name']+'</h3>';
            out+='<img src="'+data[key].image+'">';
            out+='<p>Цена: '+data[key]['cost']+'</p>';
            out+='<button class="add-to-cart" data-art="'+key+'">Купить</button>';
            out+='</div>';
        }
        $('#goods').html(out);                       // jQuery
        $('button.add-to-cart').on('click', addToCart);         // jQuery
    });
}
function addToCart() {
    //добавляем товар в корзину
    var articul = $(this).attr('data-art');                           // jQuery
    if (cart[articul]!=undefined) {
        cart[articul]++;
    }
    else {
        cart[articul] = 1;
    }
    localStorage.setItem('cart', JSON.stringify(cart) );
    showMiniCart();
}
//проверяю наличие корзины в localStorage;
function checkCart(){
    if ( localStorage.getItem('cart') != null) { 
        cart = JSON.parse (localStorage.getItem('cart'));
    }
}
//показываю содержимое корзины
function showMiniCart(){
    var out ='';
    for (var w in cart){
        out += w + ' --- '+cart[w]+'<br>';
    }
    out+='<br><a href="cart.html">Корзина</a>';
    $('#mini-cart').html(out);                                              // jQuery
}
READ ALSO
React-spring анимация после анимации

React-spring анимация после анимации

Как с помощю библиотеки react-spring или просто с помощю react и css , сделать анимацию после анимацииК примеру у меня есть div и я хочу сначала увеличить...

118
как добавить AJAXом sql запрос

как добавить AJAXом sql запрос

не получается сделать запрос на добавление записи с помощью AJAXJS срабатывает, вроде нормально, насколько я понимаю у меня где-то ошибка в PHP

135
Помогите разобраться в виджете datapicker!

Помогите разобраться в виджете datapicker!

Есть такой код $("#datepicker1,#datepicker2" )datepicker({ showWeek: true, firstDay: 1 }); Есть форма состоящая из 2 полей в одном нужно выбрать дату приезда(#datapicker1)...

120