Как добавить товар в корзину без перезагрузки страницы

Как мне это сделать? Если я должен использовать REST api, как мне его настроить? Буду очень признателен за помощь, спасибо!

ссылка на код:

https://gist.github.com/StackingUser/34b682b6da9f918c29b85d6b09216352

Вы, кажется, получили часть, связанную с извлечением, не уверен, что это работает - но, по существу, то, над чем вам нужно будет работать, называется манипулированием DOM.

Это процесс манипулирования элементами вашего html с помощью javascript.

Поскольку вы уже знаете, как выполнить fetch и затем его метод then. Вы можете поместить ваш код прямо внутрь вашего последнего кода ".then" и поместить или отобразить данные ответа на соответствующие элементы, которые вы хотели бы иметь дома для этих данных.

Поскольку вы не предоставили html-код, я просто приведу пример

html
<body>
  <ul id="cart"></ul> <!-- this is where you populate your cart -->
</body>

js
fetch("URL OF THE REST API").then(res => { //where res is the response data
 let cart = document.querySelector('#cart'); // get ul element from html
 let item = document.createElemennt('li'); //create an li for the ul
 let img = document.createElement('img'); //image for the item/product
 let img.src = res.product_image; // let's say this is the product image
 let name = document.createElement('span'); // for the product name
 let name.innerHTML = res.product_name; // give name to element
 
 item.append(img);  // now place the img element inside the li
 item.append(name); // place the span element inside the li

 cart.append(item); // place the product item li inside the cart ul

 //now you don't have to reload the page, because they have been programmatically changed inside the dom via javascript.
});

// Остальное можно доработать, просто сопоставить данные с соответствующим элементом, можно сделать (let span = document.createElement('span');), если вы хотите сделать span, или div, или img, что угодно вашему api.

Вернуться на верх