0

Здраствуйте! Пишу сайт по продаже косметики для портфолио. Сам сайт написан полностью на чистом 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
}
4
  • если вы "что-то" оставляете от jq, то зачем переделывать эти кусочки )? Они не просто так сделаны тут jq, а для упрощения :)
    – Crus
    10 авг 2019 в 21:39
  • вообще если вы учитесь у Лущенко Алекса то у него и спросите, на платной основе он ментор ...на шару только видео и всё 10 авг 2019 в 21:50
  • он не закончил тот курс , если что. 10 авг 2019 в 21:57
  • $.getJSON('goods.json', function (data) {...}); => axios.get('goods.json').then(function ({data}) {...}) и нет зашквара.
    – user256824
    11 авг 2019 в 2:22

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Посмотрите другие вопросы с метками или задайте свой вопрос.