PHP JQUERY КОРЗИНА
 

Пишу "корзину" на php, jquery. Логика такая: на js при загрузке страницы кидаю на сервер ajax запрос, о том что нужно вывести из бд товары. Сервер понимает это, выбирает товары, запаковывает их в JSON и кидает на клиент. На клиенте я принимаю JSON данные и вывожу их на страничку. Если пользователь нажмет на цену, то js добавляет данные про этот товар в localStorage. Что-бы посмотреть купленный товар, нужно зайти на страничку "Корзина" и там я вытягиваю из localStorage эти данные. Вопрос: как положить эти данные в объект, который я ложу в localStorage. Дальше код, там будет понятнее:

var cart = {};

function init () {
	$.post(
		"../templates/core.php",
		{
			"action" : "init"
		},
		showGoods
	);
};

function showGoods (data) {
	data = JSON.parse(data);

/*	console.log(data);*/

	var out = '';

	for (var key in data) {
		out += '<div class="single_goods" style="padding-right: 0px; padding-left: 0px;">';
		out += '<b> ЗАМОК: ' + data[key].name + '</b>';
		out += `<img src="${data[key].image}">`; 
		out += '<p> Размер: ' + data[key].size + '</p>';
		out += '<p> Цвет: ' + data[key].color + '</p>';
		out += '<div class="btn-group" style="width: 100%;">';
		out += '<button type="button" class="btn btn-warning cost add" style="width: 100%; font-size: 1.7rem;" data-art="'+data[key].id+'"> Купить за: ' + data[key].cost +  '$</button>';
		out += '</div>';
		out += '</div>';
	}
	$('#goods').html(out);
	$('.add').on("click", addToCart);
};

function addToCart () {
	var articul = $(this).attr('data-art');

	if (cart[articul] != undefined) {
		cart[articul]++;
	}
	else {
		cart[articul] = 1;
	}

	localStorage.setItem('cart', JSON.stringify(cart));

	showCart();
};

function checkCart () {
	if (localStorage.getItem('cart') != null) {
		cart = JSON.parse(localStorage.getItem('cart'));
	}
};

function showCart () {
	var out = '';
	for (var w in cart) {
		out += '<span> ID товара: '+ w +'</span> <br>'+'<span> Кол-во товара: '+ cart[w] +'</span> <br> <span> Название:  '+ cart[w].name +' <br> <br>';
	}
	$('#cart').html(out);
};

$(document).ready(function () {
	init();
	checkCart();
	showCart();
});

Вывод товаров осуществлен, теперь делаем функцию для передачи с серверной бд на клиент самих товаров.

Это core.php

<?php 
	$action = $_POST['action'];

	require '../templates/functions.php';

	switch ($action) {
		case 'init':
			init();
			break;
	}
 ?>

Это functions.php

<?php 
	connect();

	function connect () { //Подключение к БД
		$connection = new mysqli("localhost", "root","", "goods");

		if (!$connection) {
			die("Connection failed: " . mysqli_connect_error());
		}
		return $connection;
	}

	function init() { //Вывод товаров
		$conn = connect();
		$sql = "SELECT * FROM padlocks";
		$result = mysqli_query($conn, $sql);

		if (mysqli_num_rows($result) > 0) {
			$out = array();

			while ($row = mysqli_fetch_assoc($result)) {
				$out[$row["id"]] = $row;
			}
			echo json_encode($out);
		} else {
			echo "0";
		}
		mysqli_close($conn);
	}
 ?>

Сама корзина:

var cart = {};

function checkCart () {
	if (localStorage.getItem('cart') != null) {
		cart = JSON.parse(localStorage.getItem('cart'));
		showCart();
	}
};

function showCart () {
	var out = '';
	for (var w in cart) {
		out += '<span> ID товара: '+ w +'</span> <br>'+'<span> Кол-во товара: '+ cart[w] +'</span> <br> <span> Название:  '+ cart[w].name +' <br> <br>';
	}
	$('#my-cart').html(out);
};


$(document).ready(function () {
	checkCart();
});

Вопрос: почему имя undefined? Подправьте где надо, пожалуйста!

Почему список товаров сразу на страницу не вывести (Ну или не вывести на страницу данные о товарах в JSON, если сервер этого не может сделать)?

Почему в качестве контейнера для товаров в корзине решено юзать localStorage?
Что, если я запрещу сайту юзать моё локальное хранилище?

Честно сказать, код особо сильно не разглядывал, однако процитированный код показался мне крайне интересным.
Конструкция, которую ты используешь для перебора списка корзины («for(var i in list)») перебирает не только свойства этого объекта, но и все его унаследованные свойства.
Т.е. при переборе ты можешь получишь не только данные о товаре.
https://learn.javascript.ru/prototype

Далее, кол-во товаров это объект «cart» с ключом «w» («cart[w]»), значит «cart[w]» это число.
Что ты ожидаешь увидеть, если далее по коду пытаешься прочитать свойство «name» у числа?

Прости, но я не понял что ты имел введу) Можешь объяснить подробнее)

АнонимныйПарень, если в функцию «showCart» добавишь эту строку, то в консоли, скорее всего, увидишь, что в переменной «cart» только циферки:

console.log(cart);

Upd. в переменной «cart» у тебя только кол-во товара хранится:

function addToCart () {
    var articul = $(this).attr('data-art');
 
    if (cart[articul] != undefined) {
        cart[articul]++;
    }
    else {
        cart[articul] = 1;
    }
 
    localStorage.setItem('cart', JSON.stringify(cart));
 
    showCart();
};

а как добавить все остальное? У меня чет не получаеться

АнонимныйПарень, получи список артикулов товаров, которые у пользователя в корзине присутствуют и запроси данные этих товаров у сервера.

Тоесть в артикуле у меня находиться id товара, во вкладке "корзина" мне нужно обратиться к серверу и передать ему эти id, а уже там (на сервере), сделать запрос в бд на эти id, найти данные товары, вернуть клиенту JSON, а клиент уже выведет? типо так?

Да, типа так.
Геморойно, неправда ли? Куда проще всё на сервере делать.

ну и каким образом?
Я согласен все на сервере делать, но как? Напишешь пример (текстовый, что-то типа объяснения процессов), я его выполню в коде

На вопросы ответить могу, сам писать не буду.