如何将变量传递给函数？

在页面上，使用 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() 函数？