Блог

В настоящее время я работаю над веб-приложением, которое в дальнейшем должно функционировать как своего рода веб-магазин. Сейчас я работаю над функцией AddToCart, которая должна выбирать определенные данные из выбранного элемента (название и цену товара, а также добавлять 1 к ПК и сохранять все в сеансе) и вставлять эти 2 значения в созданный мной шаблон и размещать его в shopCart. Сейчас я пытаюсь распечатать 2 значения, которые я только что упомянул, но теперь я застрял.

Это текущий код javascript, который я создал для загрузки во все продукты, и моя попытка показать некоторые значения выбранных элементов:

  $(function(){
        $.getJSON("assets/products/sample_products.json", function(response) {
            $.each(response.data, function (i, el) {
                let card = $($('#productCard-template').html());
                card.find('#cardName').html( el.name);
                card.find('#cardPrice').html( 'amp;euro;'   el.price );
                card.find('.productItem').attr('data-price', el.price)
                    .attr('data-article-number', el.article_number)
                    .attr('data-id', el.id)
                    .attr('data-name', el.name)
                    .attr('data-stock', el.stock)
                    .attr('data-categories', el.categories);
                $('#touchViewProducts').append(card);
            });
        });
    });
    
    //onclick function adds data of product to the designated template
    function addToCart(){
        var value = document.getElementById("productCard").value;
        var getDataVal = document.getElementById('productCard-template').getAttribute('data-name', 'data-price');
        var total = 0;
        console.log(this.data-name)
    
    }
  

Это html-код шаблонов:

    <div class="row touchViewSection">
                    <!-- shopping sector -->
                    <!-- touchView -->
                    <!-- categories menu -->
                    <div class="col-3 categoriesSection">
                        <div class="categories">
                            <p style="background-color: white; margin-bottom: 0px" > Categories </p>
                            <a class="nav-link" id="all" href="#">All</a>
                            <a class="nav-link" id="knalvuurwerk" href="#">Knalvuurwerk</a>
                            <a class="nav-link" id="rotjes" href="#">Rotjes</a>
                            <a class="nav-link" id="siervuurwerk" href="#">Siervuurwerk</a>
                        </div>
                    </div>

                    <!-- categories menu -->
                    <!--                <p style="background-color: white; margin-bottom: 0px" > Products </p>-->
                    <div class="col-9 productItems" >
                        <br>
                        <div class="row" id="touchViewProducts">

                        </div>
                    </div>
                </div>
                <!--/touchView -->
                <!--Keyboard View -->
                <div class="row keyboardViewSection">
                    <div class="col-12 keyboardViewRow">
                        <table id="data-table" class="table table-bordered" style="width: 100%;">
                            <thead id="tableHead">
                            <tr>
                                <th> # </th>
                                <th> Product name </th>
                                <th> Free Stock </th>
                                <th> Price </th>
                                <th> Action </th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <!--/Keyboard View -->
                <div class="footer">
                    <div class="container">
                        <p class="text-muted"> Developed by Vesta Group</p>
                    </div>
                </div>
            </div>
            <!--/shopping sector-->
            <div class="col-4 cartSection">
                <!--cart-->
                <div class="row">
                    <div class="col-5">Product</div>
                    <div class="col-1">Pcs.</div>
                    <div class="col-2">Price</div>
                    <div class="col-3">Total</div>
                </div>
                <hr style="background-color: white;">
                <div id="output" class="row"></div>
                <div class="row shopcardProducts" id="shopcartProducts">
                </div>

                <div class="row cartCheck">
                    <div class="col-5">Number of products</div>
                    <div class="col-1">1</div>
                    <div class="col-2">Subtotal</div>
                    <div class="col-3 total">amp;euro; 0,00</div>

                    <div class="col-5"></div>
                    <div class="col-1"></div>
                    <div class="col-2">Total </div>
                    <div class="col-3">amp;euro; 0,00</div>
                </div>
                <div class="row cartCheck">
                    <div class="col-12 checkoutBtn"> Checkout </div>
                    <div class="col-6 addDiscountBtn"> Add discount </div>
                    <div class="col-6 cancelBtn"> Cancel </div>
                </div>

                <!--buttons-->
                <!--/cart-->
            </div>
        </div>
    </div>

    <script type="text/template" id="productCard-template">
        <div class="col-3 productCard" id="productCard" onclick="addToCart()">
            <a href="#" class="productItem">
                <div class="card">
                    <img src="assets/images/Firecracker.jpg" alt="Avatar" style="width: 100%; height: 8vh;">
                    <div class="container">
                        <div class="row" style="height: 6vh; max-width: 20ch;">
                            <p id="cardName"> </p>
                        </div>

                        <div class="row" style="height: 50%">
                          <b><p id="cardPrice"></p></b>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </script>

    <script type="text/template" id="shopcartRow-template">
        <div class="row">
            <div class="col-5" id="valueName"> </div>
            <div class="col-1" id="valueQty"> </div>
            <div class="col-2" id="valuePrice"> </div>
            <div class="col-3" id="valueTotal"> </div>
        </div>
    </script>
  

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

Поскольку addToCart() это обратный вызов, вы можете использовать this для доступа к его контексту (вызывающему элементу):

 function addToCart(){
    var value = $(this).val(); // what val you want to refer? there are no input in the template
    var getDataVal = $(this).find('.productItem').getAttribute('data-name', 'data-price');
    var total = 0;
    console.log(this.data-name)
}