Как передать функции переменные?

Question

На странице при помощи Bootstrap 5 отрисовываются карточки с продуктам, содержащие название товара, его цену и изображение. При нажатии на кнопку "Добавить в корзину" данные о товаре должны уйти в корзину покупок. Ниже приведен код страницы с отрисовкой карточек

{% for child in category.children %}
  <div class="accordion-item">
    <h2 class="accordion-header" id="{{ child.id }}" onclick="give('{{ child.canonical_url }}', '{{ market.store_id }}', '{{ child.id }}')">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse-{{ child.id }}" aria-expanded="true" aria-controls="panelsStayOpen-collapse-{{ child.id }}">                 
        {{ child.name }}
      </button>
    </h2>
    <div id="panelsStayOpen-collapse-{{ child.id }}" class="accordion-collapse collapse" aria-labelledby="{{ child.id }}">
      <div class="accordion-body" >
        <div  id = 'products-{{ child.id }}' class="card-group row row-cols-xs-1 row-cols-sm-2 row-cols-md-4 row-cols-lg-6 row-cols-xl-8 row-cols-xxl-10 ">                        
        </div>
      </div>
    </div>
  </div>
  {% endfor %}

<script type="text/javascript" src="http://localhost:8080/static/scripts/product_list.js"></script>
<script>
  function give(url, store_id, category_id) {
    send_url(url, store_id, category_id);
  }
  function add_to_cart(a) {
    alert(a);
  }
</script>

А этот скрипт создает карточки:

function rendering_markets_cards(products, category_id) {
    // функция создает картточки с продуктами
    let div  = document.getElementById('products-' + category_id);

    for (let i = 0, ln = products.length; i < ln; i++) {
        let div_card = document.createElement('div');
        img_src = products[i].image_urls[0];
        product_name = products[i].name;
        price = products[i].price;
        image = products[i].image_urls[0]
        div_card.innerHTML = "<div class='card'>\
                              <img src="+image+" class='card-img-top'>\
                              <div class='card-body'>\
                                  <h5 class='card-title'>"+product_name+"</h5>\
                                  <p class='card-text'>"+price+" руб</p>\
                                  <button type='button' class='btn btn-outline-primary' onclick='add_to_cart(\"{{ child.canonical_url }}\")'>Добавить в корзину</button>\
                              </div>\
                              </div>";
        div_card.setAttribute('id', products[i].legacy_product_id);
        div_card.setAttribute('class', 'col');
        div.appendChild(div_card);
    }
}

Проблема в том, что при передаче аргумента {{ child.canonical_url }} функция распознает его как строку и выдает "{{ child.canonical_url }}".

Пробовал в скрипте указать в качестве аргумента this.price:

  function add_to_cart() {
    alert(this.price);
  }

но при этом при нажатии на кнопку "Добавить в корзину" выдает цену не выделенного элемента а последнего.

Как добиться того чтобы при нажатии "Добавить в корзину" в функцию add_to_cart() передавались данные именно того продукта, на который пользователь нажал?

Answer 1

Чтобы аргумент распознавался не как строка, а как переменная ее следует указывать в виде ${variable}

function rendering_markets_cards(products, category_id) {
    // функция создает картточки с продуктами
    let div  = document.getElementById('products-' + category_id);

    products.forEach(product => {    
        console.log(product);
        let div_card = document.createElement('div');  
        let image = product.image_urls[0]        
        div_card.innerHTML = `
          <div class='card'>
            <img src="${image}" class='card-img-top'>
            <div class='card-body'>
              <h5 class='card-title'>${product.name}</h5>
              <p class='card-text'>${product.price} руб</p>
              <button type='button' class='btn btn-outline-primary' 
                data-id="${product.id}" 
                data-name="${product.name}" 
                data-price="${product.price}" 
                onclick='add_to_cart_list(this.dataset.id, this.dataset.name, 
                  this.dataset.price)'>
                Добавить в корзину
              </button>
            </div>
          </div>`;
        div_card.setAttribute('id', product.legacy_product_id);
        div_card.setAttribute('class', 'col');
        div.appendChild(div_card);    
    })    
}

БЛОГ НА HUSL

Как передать функции переменные?

Ответы (1 шт):