商品详情 - <%= @product.title %> - 购买<%= @product.title %>，尽享优惠！

<div class="card-body">
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item"><h5 class="card-title"><%= @product.title %></h5></li>
<pre><code>                &lt;li class=&quot;list-group-item&quot;&gt;&lt;label&gt;价格&lt;/label&gt;&lt;em&gt;￥&lt;/em&gt;&lt;span&gt;&lt;%= @product.price %&gt;&lt;/span&gt;&lt;/li&gt;
                &lt;li class=&quot;list-group-item d-flex justify-content-between&quot;&gt;
                  &lt;div&gt;
                    累计销量 &lt;span class=&quot;count&quot;&gt;&lt;%= @product.sold_count %&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                  累计评价 &lt;span class=&quot;count&quot;&gt;&lt;%= @product.review_count %&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div  &lt;%= @product.rating %&gt;&gt;
                    评分 &lt;span class=&quot;count&quot;&gt;&lt;%= '★' * @product.rating.floor %&gt;&lt;%= '☆' * (5 - @product.rating.floor) %&gt;&lt;/span&gt;
                  &lt;/div&gt;
                &lt;/li&gt;
                &lt;li class=&quot;list-group-item&quot;&gt;
                  &lt;label&gt;选择&lt;/label&gt;
                  &lt;div class=&quot;btn-group&quot; data-bs-toggle=&quot;buttons&quot;&gt;
                    &lt;% @product.product_skus.each do |product_sku|%&gt;
                      &lt;label class=&quot;btn btn-default sku-btn&quot; title=&quot;&lt;%= product_sku.description %&gt;&quot;
                      &lt;% if product_sku == @product.product_skus.first %&gt;checked&lt;% end %&gt;
                      data-stock=&quot;&lt;%= product_sku.stock %&gt;&quot;&gt;
                        &lt;input type=&quot;radio&quot; name=&quot;skus&quot; autocomplete=&quot;off&quot; value=&quot;&lt;%= product_sku.id %&gt;&quot;&gt; &lt;%= product_sku.title %&gt;
                      &lt;/label&gt;
                    &lt;% end %&gt;
                  &lt;/div&gt;
                &lt;/li&gt;
                &lt;li class=&quot;list-group-item  d-flex justify-content-between&quot;&gt;
                  &lt;label&gt;数量&lt;/label&gt;
                  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; value=&quot;1&quot;&gt;&lt;span&gt;件&lt;/span&gt;
                  &lt;span id=&quot;stock-count&quot;&gt;888&lt;/span&gt;&lt;span&gt;件&lt;/span&gt;
                &lt;/li&gt;
              &lt;/ul&gt;

             
            &lt;/div&gt;
</code></pre>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const skuButtons = document.querySelectorAll(".sku-btn");
    const stockCount = document.getElementById("stock-count");

    skuButtons.forEach(function(button) {
      button.addEventListener("click", function() {
        const selectedSku = document.querySelector("input[name='skus']:checked");
        const stock = selectedSku.dataset.stock;
        stockCount.innerText = stock;
      });
    });
  });
</script>