Форум

artem_L · #1 (**permalink**) 07.06.2018, 07:13

Добрый день.
В общем, долблюсь уже третий день - не могу решить простую задачку. Есть интернет магазин. С помощью ajax и php/mysql при нажатии на кнопку "Купить" товар добавляется в корзину. Все работает. Только кнопка купить не меняется (естественно)... Кнопки добавляются скриптом, поэтому айдишники у всех одинаковые. На сколько понимаю, нужно отследить добавление товара в корзину -> узнать его айди -> переслать обработчику, что бы тот изменил кнопку. Но так как я чайник, не могу додумать как это все сделать.
Может, я не правильно мыслю. Подскажите, плиз.

//добавление товаров в корзину

$('#add-cart-style-list,#add-cart-style-grid,#add-cart,.add-cart,#add-cart-view,#random-add-cart').click(function(){

var tid = $(this).attr("tid");

$.ajax({
type: "POST",
url: "PHP/addtocart.php",
data: "id="+tid,
dataType: "html",
cache: false,
success: function(data) {
loadcart();
}
});

});

function loadcart(){
$.ajax({
type: "POST",
url: "PHP/loadcart.php",
dataType: "html",
cache: false,
success: function(data) {

if (data == "0")
{

$("#basket").html("<img src='images/commerce.png'> Корзина пуста");

}else
{
$("#basket").html('<img src="images/commerce.png"> '+data);

}

}
});

}

Dilettante_Pro · #2 (**permalink**) 07.06.2018, 07:32

artem_L,
Покажите пример вашего html

void() · #3 (**permalink**) 07.06.2018, 07:35

Может, сразу по клику и менять?

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Пример</title>
	<script
	src="https://code.jquery.com/jquery-3.3.1.min.js"
	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
	crossorigin="anonymous"></script>
</head>
<body>
	<button id="add-cart-style-list">Купить</button>
	<script>
		$('#add-cart-style-list').click(function(e){
			e.target.innerHTML = 'В корзине';
		});
	</script>
</body>
</html>

А потом сохранить в локальное хранилище и читать при загрузке?

load: function(){
		if(localStorage.getItem('buy') != undefined){
			buy = JSON.parse(localStorage.getItem('buy'));
		}
		return this;
	},
	save: function(){
		localStorage.setItem('buy', JSON.stringify(buy));
	}

Не знаю - как вариант...

Dilettante_Pro · #4 (**permalink**) 07.06.2018, 08:14

void(),
У ТС вроде как ко всему еще и id одинаковые. Зат вроде где-то есть уникальный (относительно уникальный?) tid товара

artem_L · #5 (**permalink**) 07.06.2018, 16:51

Да, это переменная с id товара. Получаем с помощью РНР и использую еще и с помощью ajax. Ну, такое в общем )) Понимаю, что костыли, но пока только так получается.
Кстати, уже думал. Если я добавлю к айдишнику товаров эту переменную, что бы id изменялось вместе с айди товара (например #style-list24). Как можно получить доступ к такому айди через функцию, что б при нажатии менялась именно нужная мне кнопка?

Nexus · #6 (**permalink**) 07.06.2018, 16:58

Сообщение от artem_L

Кнопки добавляются скриптом, поэтому айдишники у всех одинаковые.

Интересно, почему было выбрано такое "гениальное" решение по поводу размещения кнопок на странице?
Почему не генерировать кнопки сервером?
На клиенте останется только изменить надпись на кнопке по успешному добавлению товара в корзину.

artem_L · #7 (**permalink**) 07.06.2018, 18:20

Ну, тут ответ прост - я полный чайник. Решил сделать что-то крупное, что б в процессе научится. Вот и наткнулся на видео уроки по созданию интернет магазина. Что б было интереснее - многие вещи делаю под себя. Там была такая генерация кнопок для каждого товара через рнр. Там по клика кнопка не меняется, и я решил переделать что б было как у людей. Сам додуматься не смог, поэтому пришел за помощью к вам. Если покажете на примере как можно было сделать - я с радостью изучу ваш метод и переработаю свой скрипт.

artem_L · #8 (**permalink**) 07.06.2018, 18:22

Да что там пример. Магазин на сервере в интернете. Сайт: prima-vera.com.ua

void() · #9 (**permalink**) 07.06.2018, 19:15

Жестоко. Я может чего-то не понимаю. Но есть же обработчик клика на кнопках, иначе товары бы не добавлялись в корзину. Можно получить текущую кнопку, на которую нажали с помощью e.target. А затем просто взять атрибут tid.

Вот этот код прекрасно работает:

$('.btn-primary').click(function(e){
	e.target.innerHTML = 'В корзине';
	alert(e.target.getAttribute('tid')); 
});

Этот код:
1. меняет надпись на кнопке
2. получает уникальный tid товара.

Далее имеющийся уже tid нужно сохранить в локальное хранилище. И при загрузке страницы - загружать его. Как примерно сохранять и загружать, я уже приводил выше фрагмент.

Теперь осталось найти кнопку по tid.

1. После загрузки страницы window.onload = function(){};
2. Получаем в переменную все кнопки var $buttons = $('.btn-primary');
3. И в цикле ищем где-то так:

for(var i = 0; i < $buttons.length; i++){
	if( $buttons.getAttribute('tid') ==  tid){
$buttons[i].innerHTML = 'В корзине' // вот она искомая кнопка - $buttons[i]
}
}

Еще, после отмены покупки товара или при совершении покупки, нужно очистить локальное хранилище.

artem_L · #10 (**permalink**) 07.06.2018, 19:27

Ого. Круто. Сейчас буду вникать в эти все функции и пришивать к своему скрипту. Спасибо огромное.

Форум

Справочник

Discord чат

Курсы javascript