如何修改Solidus 3.1.8主导航栏购物车按钮仅显示商品数量？

核心定位 #

你看到的AJAX返回的购物车HTML，是由Solidus前端的spree/shared/_cart_link.html.erb模板生成的，spree.cart_link_path路由对应的就是这个模板的渲染结果。

推荐解决方案：重写视图模板 #

这是Solidus定制化的标准方式，步骤如下：

1. 在你的Rails项目中创建路径：app/views/spree/shared/
2. 在该目录下新建_cart_link.html.erb文件
3. 复制Solidus原模板内容，移除金额相关代码：

原模板内容（Solidus 3.1.8版本）：

<% if current_order.present? && current_order.item_count > 0 %>
  <a class="cart-info full" href="<%= spree.cart_path %>">
    <%= Spree.t('cart') %>: (<%= current_order.item_count %>)
    <span class="amount"><%= current_order.display_total %></span>
  </a>
<% else %>
  <a class="cart-info empty" href="<%= spree.cart_path %>">
    <%= Spree.t('cart') %>: (<%= Spree.t('empty') %>)
  </a>
<% end %>

修改后的模板（仅保留数量）：

<% if current_order.present? && current_order.item_count > 0 %>
  <a class="cart-info full" href="<%= spree.cart_path %>">
    <%= Spree.t('cart') %>: (<%= current_order.item_count %>)
  </a>
<% else %>
  <a class="cart-info empty" href="<%= spree.cart_path %>">
    <%= Spree.t('cart') %>: (<%= Spree.t('empty') %>)
  </a>
<% end %>

修改完成后，Spree.fetch_cart通过AJAX请求到的HTML会自动变成只显示商品数量的版本，无需修改任何JavaScript代码。

备选方案：通过JavaScript修改返回结果 #

若不想重写模板，也可以修改Spree.fetch_cart的回调逻辑，移除金额部分：

Spree.fetch_cart = function(cartLinkUrl) {
  Spree.ajax({
    url: cartLinkUrl || Spree.pathFor("cart_link"),
    success: function(data) {
      const $cartElement = $(data);
      $cartElement.find('.amount').remove();
      $("#link-to-cart").html($cartElement);
    }
  });
};

注意：这种方式属于前端hack，后续Solidus版本更新可能因HTML结构变化失效，优先推荐模板重写方案。

内容的提问来源于stack exchange，提问作者Jason