Добавить/удалить из LocalStorage

231

17 октября 2021, 11:30

Есть витрина товара, имеется кнопка Добавить в корзину и при нажатии на неё товар добавляется в LocalStorage и отображается в корзине․

Как сделать так чтобы после нажатии на кнопку Добавить в корзину, появлялась кнопка Удалить товар из корзины и при нажатии на неё товар удалялся из LocalStorage?

Пример

Html


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="smartbasket/css/smartbasket.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML</title>
</head>
<div class="product__element">
      <img class="product__img" src="smartbasket/img/iphone-4.png" alt="Iphone 4">
      <div class="product__name">Iphone 4</div>
      <div class="product__price">7000 Р</div>
      <div class="product__quantity">
      </div>
      <button class="product__add-to-cart-button" data-sb-id-or-vendor-code="005" data-sb-product-name="Iphone 4" data-sb-product-price="7000" data-sb-product-quantity="1" data-sb-product-img="smartbasket/img/iphone-4.png">
                        <i class="fas fa-cart-plus"></i> Добавить в корзину
                    </button>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
    <script src="smartbasket/js/smartbasket.js"></script>
    <script>
        $(function () {
            $('.smart-basket__wrapper').smbasket({
                productElement: 'product__element',
                buttonAddToBasket: 'product__add-to-cart-button',
                productPrice: 'product__price-number',
                productSize: 'product__size-element',
                productQuantityWrapper: 'product__quantity',
                smartBasketMinArea: 'header__basket-min',
                countryCode: '+7',
                smartBasketCurrency: '₽',
                smartBasketMinIconPath: 'smartbasket/img/shopping-basket-wight.svg',
            });
        });
    </script>

Java Script

    methods.getSmartBasketMinState(productsArr);
    addToBasketButton.click(function() {
      let productsArr = methods.getProducts() || {}; // получаем данные корзины или создаём новый объект, если данных еще нет
      let sbId = $(this).attr("data-sb-id-or-vendor-code"); // ID товара
      if (productsArr[sbId] !== undefined) {
        let beforeClickHtml = $(this).html();
        $(this).text('Товар уже в корзине');
      } else {
        let productProperties = {};
        productProperties.sbId = sbId;
        productProperties.sbImg = $(this).data("sbProductImg");
        productProperties.sbName = $(this).data("sbProductName");
        if (defaults.productSize && defaults.productPrice) {
          productProperties.sbSize = $(this).attr("data-sb-product-size");
        }
        //console.log(`getQuantity = ${getQuantity}`);
        productsArr[sbId] = productProperties;
        methods.setProducts(productsArr); //записываем в localStore
        smartBasket.empty(); // проверка пустой переменной
        smartBasket.append(methods.showProducts(productsArr));
        methods.getSmartBasketMinState(productsArr, 'updateSmartBasketMin');
        methods.commonResult(productsArr, 'updateCommonResult');
        $('body').append(methods.alertBlock('inBasket'));
        // $(this).removeAttr('data-sb-product-size').removeAttr('data-sb-product-size');
        // $(this).removeData('sbProductPrice').removeData('sbProductPrice');
      }
    }
    });
    return smartBasket;
    },

Answer 1

Что то вроде такого, возможно есть ошибки в синтаксисе которые я не заметил. Цвет кнопки можно будет менять через добавление класса или css свойств функциями из Jquery В HTML добавлен <span> с идентификатором товара. Думаю общий смысл кода понятен, там еще не совсем ясно для чего часть функций и я вписал их, поправите если они не нужны

HTML:

<button class="product__add-to-cart-button" data-sb-id-or-vendor-code="005" data-sb-product-name="Iphone 4" data-sb-product-price="7000" data-sb-product-quantity="1" data-sb-product-img="smartbasket/img/iphone-4.png">
    <i class="fas fa-cart-plus"></i> <span data-sb-id-or-vendor-code="005">Добавить в корзину</span>
</button>

JS:

 addToBasketButton.click(function() {
  let productsArr = methods.getProducts(); // получаем данные корзины или создаём новый объект, если данных еще нет
  let sbId = $(this).attr("data-sb-id-or-vendor-code"); // ID товара
  if (productsArr[sbId] !== undefined) {
    delete productsArr[sbId]; //Удаляем из массива
    methods.setProducts(productsArr); //Обновляем хранилище
    $('span[data-sb-id-or-vendor-code="'+sbId+'"]').html('Добавить в корзину');//Меняем текст
    /* Тут можно сделать добавление свйосв CSS или класса через Jquery для смены цвета*/
    //Дальше какие то не понятные функции... если они нужны
    smartBasket.empty(); // проверка пустой переменной
    smartBasket.append(methods.showProducts(productsArr));
    methods.getSmartBasketMinState(productsArr, 'updateSmartBasketMin');
    methods.commonResult(productsArr, 'updateCommonResult');
    $('body').append(methods.alertBlock('inBasket'));
    // $(this).removeAttr('data-sb-product-size').removeAttr('data-sb-product-size');
    // $(this).removeData('sbProductPrice').removeData('sbProductPrice');
  }else {
    let productProperties = {};
    productProperties.sbId = sbId;
    productProperties.sbImg = $(this).data("sbProductImg");
    productProperties.sbName = $(this).data("sbProductName");
    if (defaults.productSize && defaults.productPrice) {
      productProperties.sbSize = $(this).attr("data-sb-product-size");
    }
    //console.log(`getQuantity = ${getQuantity}`);
    productsArr[sbId] = productProperties;
    methods.setProducts(productsArr); //записываем в localStore
    $('span[data-sb-id-or-vendor-code="'+sbId+'"]').html('Удалить из корзины');//Меняем текст
    smartBasket.empty(); // проверка пустой переменной
    smartBasket.append(methods.showProducts(productsArr));
    methods.getSmartBasketMinState(productsArr, 'updateSmartBasketMin');
    methods.commonResult(productsArr, 'updateCommonResult');
    $('body').append(methods.alertBlock('inBasket'));
    // $(this).removeAttr('data-sb-product-size').removeAttr('data-sb-product-size');
    // $(this).removeData('sbProductPrice').removeData('sbProductPrice');
  }
}