如何使用“添加到购物车”按钮将我的报价添加到购物车？

问：

“我有一个动态的产品报价，我对报价进行了计算。用户可以选择产品多属性，现在我想创建一个“添加到购物车”按钮，该按钮将发送产品名称以及用户选择的多属性和报价

但老实说，我承认我是 Shopify 开发的新手，我仍然不了解“添加到购物车”功能。

有人可以帮我吗？

这是我在main-product.liquid中的代码

s>
             {% when 'select_variants' %}
                  {% assign productPrice = product.price %}
                  {% assign priceReduce = 100 | minus: block.settings.percentage_first %}
                  {% assign discountAmount = productPrice | times: priceReduce %}
                  {% assign baseprice = discountAmount | divided_by: 100 %}
                  {% assign secondOffer = baseprice | times: 2 %}
                  {% assign secondBase = secondOffer | times: priceReduce %}
                  {% assign secondOfferAmount = secondBase | divided_by: 100 %}
                  {% assign lastOffer = baseprice | times: 3 %}
                  {% assign lastbase = lastOffer | times: priceReduce %}
                  {% assign lastOfferAmount = lastbase | divided_by: 100 %}

                  <div class="card" style="background-color: {{ block.settings.background_color }};" data-title="{{ block.settings.title_offer_first }}" data-price="{{ baseprice }} {{ shop.currency }}">
                    <div class="accordion">
                      <div class="offerText">
                        <p class="title" style="color: {{ block.settings.title_color }}; background: {{ block.settings.background_color }};"> {{ block.settings.title_offer_first }}</p>
                        <p class="rightplace">
                          <span class="oldprice"><del> {{ product.price }} {{ shop.currency }} </del></span>
                          <span class="newprice" style="color: {{ block.settings.colorprice }};">{{ baseprice }}  {{ shop.currency }}</span>
                        </p>
                      </div>
                      <p class="resume" style="color: {{ block.settings.phrase_color }};"> {{ block.settings.phrase1 }} </p>
                    </div>
                    <!-- Contenu de l'accordéon -->
                    <div class="panel">
                      <div class="selecteds">
                        {%- for option in product.options_with_values -%}
                          {%- assign option_name = 'option' | append: forloop.index -%}
                          {%- if product.variants[0][option_name] -%}
                            <div class="select-pair">
                              <label for="{{ option_name }}">{{ option.name }}</label>
                              <select name="{{ option_name }}" id="{{ option_name }}">
                                {%- assign unique_option_values = product.variants | map: option_name | uniq -%}
                                {%- for option_value in unique_option_values -%}
                                  <option value="{{ option_value }}">{{ option_value }}</option>
                                {%- endfor -%}
                              </select>
                            </div>
                          {%- endif -%}
                        {%- endfor -%}
                      </div>
                    </div>
                  </div>

这是我的架构块

{
  "type": "select_variants",
  "name": "variant bundle",
  "settings": [
    {
      "type": "text",
      "label": "titre offre",
      "id": "title_offer_first",
      "default": "STANDARD OFFER",
      "info": "taille de l'offre."
    },
    {
      "type": "text",
      "label": "phrase_offer1",
      "id": "phrase1",
      "default": "Box of surgical masks (x1)",
      "info": "texte attirant pour offre"
    },
    {
      "type": "text",
      "label": "taux offre",
      "id": "percentage_first",
      "default": "10",
      "info": "donne le pourcentage de l'offre 1"
    },
    {
      "type": "text",
      "label": "titre offre 1",
      "id": "title_offer_second",
      "default": "MOST POPULAR OFFER",
      "info": "second offer title."
    },
    {
      "type": "text",
      "label": "phrase offer2",
      "id": "phrase2",
      "default": "Box of surgical masks (x2)",
      "info": "texte attirant pour offre"
    },
    {
      "type": "text",
      "label": "taux offre 2",
      "id": "percentage_second",
      "default": "15",
      "info": "donne le pourcentage de l'offre 2"
    },
    {
      "type": "text",
      "label": "titre offre 3",
      "id": "title_offer_last",
      "default": "BEST DEAL  : UP TO 28% OFF",
      "info": "first offer title."
    }

这是我的js代码

<script>
  var cards = document.getElementsByClassName('card');
  var i;

  for (i = 0; i < cards.length; i++) {
    cards[i].addEventListener('click', function () {
      // Fermer tous les cards avant d'ouvrir le clic actuel
      for (var j = 0; j < cards.length; j++) {
        var panel = cards[j].querySelector('.panel');
        if (cards[j] !== this) {
          cards[j].classList.remove('active-card');
          panel.style.maxHeight = null;
        }
      }
      this.classList.toggle('active-card');
      var panel = this.querySelector('.panel');
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + 'px';
      }
    });

    var selects = cards[i].querySelectorAll('select');
    var j;

    for (j = 0; j < selects.length; j++) {
      selects[j].addEventListener('click', function (event) {
        event.stopPropagation(); // Empêche la propagation du clic au card parent
      });
    }
  }
</script>