如何在AnQiCMS模板中显示商品价格并控制小数位数？

在网站运营中，商品价格的展示是至关重要的一环，不仅要确保信息的准确性，还要保证其呈现方式符合用户的阅读习惯和品牌形象。AnQiCMS 凭借其灵活的模板系统，为用户提供了强大的定制能力，让您可以轻松控制商品价格的显示方式，包括小数位数。

获取商品价格：从哪里来？

在 AnQiCMS 模板中，商品的价格通常作为文档（Article 或 Product）的一个字段存储和调用。根据您希望展示价格的场景，获取方式略有不同：

• 在商品详情页显示单个商品价格： 当您处于某个商品的详情页时，可以使用 archive 对象直接访问当前商品的字段。价格字段通常命名为 Price。

  
  {# 假设当前页面上下文是商品详情 #}
  <p>商品价格：{{ archive.Price }}</p>
  

• 在商品列表页显示多个商品价格： 如果您正在展示一个商品列表，例如通过 archiveList 标签获取的数据，您需要在循环中访问每个商品条目的 Price 字段。

  
  {# 假设通过 archiveList 标签获取商品列表 #}
  {% archiveList products with moduleId="您的产品模型ID" type="list" limit="10" %}
      {% for item in products %}
      <div class="product-card">
          <h3>{{ item.Title }}</h3>
          <p>价格：{{ item.Price }}</p>
      </div>
      {% endfor %}
  {% endarchiveList %}
  

  无论是哪种情况，{{ archive.Price }} 或 {{ item.Price }} 都会直接输出后台录入的原始价格数据。

精确控制小数位数：floatformat 过滤器

仅仅显示原始价格数字往往不够，我们还需要对其小数位数进行精确控制，例如显示两位小数，或者在整数时省略小数部分。AnQiCMS 模板引擎提供了 floatformat 过滤器，能够完美满足这一需求。

floatformat 过滤器专门用于浮点数的格式化，它的用法非常灵活：

1. 默认格式化（一位小数，自动去除末尾零）： 当您不指定小数位数时，floatformat 会默认保留一位小数，并且如果小数部分为 .0，则会自动去除，只显示整数。

   {# 假设 archive.Price 的值是 123.456 #}
   <p>价格：{{ archive.Price|floatformat }}</p> {# 输出 123.5 #}
   
   {# 假设 archive.Price 的值是 100.00 #}
   <p>价格：{{ archive.Price|floatformat }}</p> {# 输出 100 #}
   

2. 指定小数位数： 您可以通过在 floatformat 后面加上冒号和数字来精确指定要保留的小数位数。例如，floatformat:2 表示保留两位小数。

   {# 假设 archive.Price 的值是 123.456 #}
   <p>价格：{{ archive.Price|floatformat:2 }}</p> {# 输出 123.46 #}
   
   {# 假设 archive.Price 的值是 100 #}
   <p>价格：{{ archive.Price|floatformat:2 }}</p> {# 输出 100.00 #}
   

   此方式会进行四舍五入，并补齐指定位数的小数位（即使是零）。

3. 不保留小数位（只显示整数）： 如果您希望价格始终显示为整数，不带任何小数，可以使用 floatformat:0。

   {# 假设 archive.Price 的值是 123.89 #}
   <p>价格：{{ archive.Price|floatformat:0 }}</p> {# 输出 124 #}
   
   {# 假设 archive.Price 的值是 123.49 #}
   <p>价格：{{ archive.Price|floatformat:0 }}</p> {# 输出 123 #}
   

将价格展示与小数控制结合

现在，让我们把价格的获取和小数位的控制结合起来，在实际模板中应用：

在商品详情页显示价格（保留两位小数）：

<div class="product-detail">
    <h1>{{ archive.Title }}</h1>
    <p class="product-price">售价：<span class="currency">¥</span>{{ archive.Price|floatformat:2 }}</p>
    <div class="product-description">{{ archive.Content|safe }}</div>
</div>

在商品列表页显示价格（保留两位小数）：

<div class="product-list-container">
    {% archiveList products with moduleId="您的产品模型ID" type="list" limit="12" %}
        {% for item in products %}
        <div class="product-item">
            <a href="{{ item.Link }}">
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="product-thumbnail">
                <h3>{{ item.Title }}</h3>
                <p class="item-price"><span class="currency">¥</span>{{ item.Price|floatformat:2 }}</p>
            </a>
        </div>
        {% endfor %}
        {% empty %}
        <p>抱歉，目前没有商品可供展示。</p>
    {% endarchiveList %}
</div>

实用技巧与注意事项

• 添加货币符号： floatformat 过滤器只处理数字格式，不会添加货币符号。您需要在模板中手动添加，例如在价格数字前面加上 ¥ 或 $ 符号，如上述示例所示。
• 处理空价格或零价格： 如果商品价格可能为空或为零，您可以使用 default 过滤器来提供一个备用文本，避免页面上出现空白或不美观的零值。

  
  <p>价格：<span class="currency">¥</span>{{ item.Price|floatformat:2|default:"暂无价格" }}</p>
  

  或者，如果价格为零时您不想显示，可以结合 if 判断：

  
  {% if item.Price > 0 %}
      <p>价格：<span class="currency">¥</span>{{ item.Price|floatformat:2 }}</p>
  {% else %}
      <p>价格：面议</p>
  {% endif %}
  

• 数据类型： 确保您在 AnQiCMS 后台录入的价格字段是数字类型（如浮点数或整数），这样 floatformat 过滤器才能正确地对其进行处理。

通过 AnQiCMS 灵活的模板标签和过滤器，您可以轻松地在网站上展示商品价格，并根据需求精确控制小数位数，为用户提供清晰、专业的价格信息，从而提升网站的用户体验。

常见问题 (FAQ)

1. 问：如何让价格始终显示小数点后两位，即使是整数也要显示 .00？ 答：您可以使用 floatformat:2 过滤器。例如，如果价格是 100，{{ item.Price|floatformat:2 }} 将显示 100.00。
2. 问：如果我希望价格为零时不显示任何内容，或者显示“免费”字样，应该怎么做？ 答：您可以使用 if 语句来判断价格是否大于零。如果 item.Price > 0，则显示格式化的价格；否则，您可以选择显示“免费”或不显示任何内容。例如：{% if item.Price > 0 %}<p>价格：¥{{ item.Price|floatformat:2 }}</p>{% else %}<p>免费</p>{% endif %}。
3. 问：能否在价格前面加上货币符号，例如“USD”或“EUR”？ 答：floatformat 过滤器本身只处理数字格式。您需要在模板代码中手动添加货币符号，将其作为文本与格式化后的价格拼接起来。例如 售价：<span class="currency">USD</span>{{ archive.Price|floatformat:2 }}。