在 AnQiCMS 模板中，如何根据商品库存（`Stock`）数量判断并显示“有货”或“缺货”状态？

在网站运营中，尤其是涉及到商品展示的站点，清晰地向用户传达商品的库存状态至关重要。这不仅能优化用户体验，减少无效咨询，还能有效引导用户的购买决策。AnQiCMS作为一个灵活高效的内容管理系统，在模板中实现根据商品库存数量显示“有货”或“缺货”状态，其实非常直观。

AnQiCMS的模板系统采用了类似Django的语法，它允许我们通过简洁的标签和变量来控制页面内容的展示。在处理商品信息时，通常会用到archive（文档）相关的标签来获取商品数据。

理解商品库存字段

在AnQiCMS中，商品（通常被视为一种“文档模型”）数据会包含一个名为Stock的字段，这个字段就用来存储商品的库存数量。我们的目标就是根据Stock字段的值来动态显示库存状态。

在商品详情页展示库存状态

当用户浏览单个商品的详情页时，我们希望页面能直接告知商品是否有货。在商品详情页的模板（例如product/detail.html或archive/detail.html，具体取决于您的模板结构和模型名称）中，我们可以通过archiveDetail标签来获取当前商品的详细信息，包括它的Stock值。

首先，获取当前商品的Stock值：

{%- archiveDetail product with name="Stock" %}

这里我们将Stock的值赋值给了product变量。接下来，我们就可以使用条件判断标签{% if %}来检查product变量的值了：

<div class="product-stock-status">
    <p>库存状态：
        {% if product > 0 %}
            <span style="color: green; font-weight: bold;">有货</span>
        {% else %}
            <span style="color: red; font-weight: bold;">缺货</span>
        {% endif %}
    </p>
</div>

通过这段代码，如果product（也就是商品库存）大于0，页面就会显示绿色的“有货”；否则，就会显示红色的“缺货”。您可以根据自己网站的设计风格，调整span标签的样式或者使用预设的CSS类来美化显示效果。

在商品列表页展示库存状态

在商品列表页（例如分类页、搜索结果页或首页推荐模块），我们经常需要展示多个商品，每个商品都应该有其库存状态。在这种情况下，我们会使用archiveList标签来遍历商品列表。

archiveList标签会返回一个商品数组，我们通常会用{% for item in products %}这样的循环结构来逐一处理每个商品。在循环内部，每个商品的Stock字段都可以通过item.Stock来访问。

以下是一个在商品列表中显示库存状态的例子：

<div class="product-grid">
    {% archiveList products with moduleId="2" type="page" limit="12" %} {# 假设moduleId="2"代表产品模型 #}
        {% for item in products %}
        <div class="product-item">
            <a href="{{item.Link}}" class="product-link">
                <img src="{{item.Thumb}}" alt="{{item.Title}}" class="product-thumbnail">
                <h3 class="product-title">{{item.Title}}</h3>
            </a>
            <div class="product-meta">
                <p class="product-price">¥ {{item.Price}}</p>
                <p class="product-stock">
                    {% if item.Stock > 0 %}
                        <span style="color: green;">有货</span>
                    {% else %}
                        <span style="color: red;">缺货</span>
                    {% endif %}
                </p>
            </div>
            <button class="add-to-cart-button" {% if item.Stock <= 0 %}disabled{% endif %}>
                {% if item.Stock > 0 %}立即购买{% else %}已售罄{% endif %}
            </button>
        </div>
        {% empty %}
        <p>抱歉，目前没有找到相关商品。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

在这个例子中，除了显示“有货”或“缺货”，我们还通过disabled属性禁用了“立即购买”按钮，并在缺货时将按钮文本改为“已售罄”，进一步提升了用户体验。

进阶考量与优化

  • 样式分离： 为了更好的维护性，建议将style属性替换为CSS类。例如，定义.in-stock { color: green; }和.out-of-stock { color: red; }，然后在模板中使用<span class="in-stock">有货</span>。

  • 多级库存状态： 如果您希望显示更细致的库存状态，例如“少量库存”、“即将售罄”等，可以增加elif条件判断：

    <p>库存状态：
    {% if product > 10 %}
        <span class="in-stock">有货</span>
    {% elif product > 0 and product <= 10 %}
        <span class="low-stock">少量库存 (仅剩 {{ product }} 件)</span>
    {% else %}
        <span class="out-of-stock">缺货</span>
    {% endif %}
</p>

    这里展示了当库存大于10时显示“有货”，库存介于1到10之间时显示“少量库存并显示具体数量”，而库存为0时显示“缺货”。

  • 结合购买逻辑： 在实际的电商场景中，库存状态往往会直接影响购买按钮的可用性。如上述列表页示例所示，您可以根据Stock值来动态设置按钮的disabled属性或点击事件，防止用户购买已售罄的商品。

通过这些灵活的模板标签和条件判断，AnQiCMS让网站运营者能够轻松实现商品库存状态的动态展示，极大地提升了内容呈现的实用性和互动性。

常见问题（FAQ）

  1. 问：如果我的商品库存字段不是Stock，而是自定义名称，该如何判断？

    • 答：在AnQiCMS的后台，您在“内容模型”中创建的自定义字段，其值可以直接在模板中通过{{archive.自定义字段名}}或{{item.自定义字段名}}来获取。例如，如果您的自定义库存字段名为product_quantity，那么在模板中就可以使用{% if archive.product_quantity > 0 %}来进行判断，逻辑是完全一样的。

  2. 问：我可以在前端直接显示库存的具体数量吗？

    • 答：完全可以。在模板的{% if %}或{% else %}块中，您直接输出{{product}}（在详情页）或{{item.Stock}}（在列表页）就可以显示具体的库存数字。例如，您可以显示为“有货（剩余{{product}}件）”来给用户更明确的信息。

  3. 问：除了“有货”和“缺货”，我还能设置“预售”或“即将到货”等状态吗？

    • 答：这通常需要结合自定义字段来实现。您可以在商品模型中添加一个名为“商品状态”的自定义字段（字段类型可以选择“下拉选择”或“单项选择”），并预设“有货”、“缺货”、“预售”、“即将到货”等选项。然后在模板中，除了判断Stock数量，您还可以增加对这个“商品状态”自定义字段的判断，例如{% if archive.商品状态字段 == "预售" %}来显示更丰富的状态信息。这样，即使库存为0，但状态是“预售”，也能正确显示。