Nodejs Как автоматически добавить товар в корзину, если добавлен другой товар - PullRequest
Новая
       13

Nodejs Как автоматически добавить товар в корзину, если добавлен другой товар

0 голосов
/ 20 марта 2020

Я хочу предоставить 4-5 разных тарифных планов на моем сайте. первый базовый c план - это однократный платеж, следующие два планируют наши обновленные ежемесячные платежи, которые включают одноразовый платеж (т. е. если клиент собирается выбрать план Б или план C, то они будут платить ежемесячный платеж плана B или плана C плюс единовременный платеж плана A) я запускаю веб-приложение на nodejs express, а страница магазина представляет собой файл e js. информация о другом плане подписки хранится в. json файле

e js файле

'' * 

    <div class="shop-items">
        <% items.merch.forEach(function(item){ %>
        <div class="shop-item" data-item-id="<%= item.id %>">
            <span class="shop-item-title"><%= item.name %></span>
            <img class="shop-item-image" src="img/<%= item.imgName %>">

            <div class="shop-item-details">
                <span class="shop-item-price">$<%= item.price / 100 %></span>
                <button id="addToCart" class="btn btn-primary shop-item-button" type="button">ADD TO
                    CART</button>
            </div>
        </div>
        <% }) %>
    </div>

</section>
<section class="container content-section">
    <h2 class="section-header">CART</h2>
    <div class="cart-row">
        <span class="cart-item cart-header cart-column">ITEM</span>
        <span class="cart-price cart-header cart-column">PRICE</span>
        <span class="cart-quantity cart-header cart-column">QUANTITY</span>
    </div>
    <div class="cart-items">
    </div>
    <div class="cart-total">


        <strong class="cart-total-title">Total</strong>

        <span class="cart-total-price">$0</span>
    </div>

    <div>
        <button style="display:none;" id="checkOutBtn" class="btn btn-primary btn-checkout" type="button">
            Continue to Checkout</button>



    </div>

'' '

js файл 

    function addItemToCart(title, price, imageSrc, id) {
        var cartRow = document.createElement('div')
        cartRow.classList.add('cart-row')
        cartRow.dataset.itemId = id
        var cartItems = document.getElementsByClassName('cart-items')[0]
        var cartItemNames = cartItems.getElementsByClassName('cart-item-title')

        for (var i = 0; i < cartItemNames.length; i++) {

            if (cartItemNames[i].innerText == title) {

                alert('This item is already added to the cart')



                return
            }
        }
 var cartRowContents = `
        <div class="cart-item cart-column">
            <img class="cart-item-image" src="${imageSrc}" width="100" height="100">
            <span class="cart-item-title">${title}</span>

        </div>

        <span class="cart-price cart-column" >${price}</span>

        <div class="cart-quantity cart-column">
            <input class="cart-quantity-input" type="number" value="1">
            <button class="btn btn-danger" href="#removeFromCart" id="remove" type="button">REMOVE</button>
        </div>


        `
    cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)


    console.log("show checkout button");
    document.getElementById("checkOutBtn").style.display = "block";

    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', hideCart)
    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', hideShippingForm)
    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', hideCheckOutBtn)
    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', showCheckOutBtn)
    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', checkoutClicked)
}

json файл 

     "merch": [
    {
      "id": 1,
      "name": "Basic Subscription Plan",
      "price": 49999,
      "imgName": "basic.png"
    },
    {....,
.....,
...,
....,
....,
...