It is crucial to clearly communicate the inventory status of products to users in website operations, especially for sites involving product display.This not only optimizes the user experience, reduces invalid consultations, but also effectively guides users' purchase decisions.AnQiCMS as a flexible and efficient content management system, actually implements the display of "in stock" or "out of stock" status according to the product inventory quantity in the template, which is very intuitive.
The AnQiCMS template system uses a syntax similar to Django, which allows us to control the display of page content through concise tags and variables. When handling product information, it is usually usedarchiveTags related to the document to obtain product data.
Understand the product inventory field
In AnQiCMS, product data (usually considered a "document model") will include a field namedStockThe field, this field is used to store the inventory quantity of the product. Our goal is to display the inventory status based onStockthe value of the field to dynamically display the inventory status.
Display the inventory status on the product detail page
When the user browses the details page of a single product, we hope the page can directly inform whether the product is in stock. In the template of the product details page (such asproduct/detail.htmlorarchive/detail.htmlIn your template structure and model name, we can usearchiveDetailtags to obtain the details of the current product, including itsStockValue.
First, obtain the details of the current product,StockValue:
{%- archiveDetail product with name="Stock" %}
Here we willStockThe value is assigned toproductthe variable. Next, we can use the conditional judgment tag{% if %}To checkproductThe value of the variable is:
<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>
If the following code is run,product(That is, the product inventory) greater than 0, the page will display a green "In stock"; otherwise, it will display a red "Out of stock". You can adjust it according to your website design style.spanThe style of the label or use the preset CSS class to beautify the display.
Display stock status on the product list page.
On the product list page (such as category pages, search result pages, or home page recommendation modules), we often need to display multiple products, and each product should have its inventory status. In this case, we will usearchiveListTag to traverse the product list.
archiveListTag will return an array of products, we usually use{% for item in products %}such a loop structure to process each product one by one. Inside the loop, each product'sStockFields can be passed throughitem.Stock.
Here is an example of displaying inventory status in a product list:
<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>
In this example, in addition to displaying 'In stock' or 'Out of stock', we also throughdisabledThe "Buy Now" button has been disabled, and the button text changed to "Sold Out" when out of stock, further improving the user experience.
Advanced consideration and optimization
Style separation:To ensure better maintainability, it is recommended that
styleReplace the attribute with a CSS class. For example, define.in-stock { color: green; }and.out-of-stock { color: red; }Then use it in the template<span class="in-stock">有货</span>.Multi-level inventory status:If you wish to display more detailed stock status, such as "low stock", "about to sell out", and so on, you can add
elifConditional judgment:<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>Here is displayed when the inventory is greater than 10, when the inventory is between 1 and 10, it displays "Low stock and shows specific quantity", and when the inventory is 0, it displays "Out of stock".
Combine purchase logic:In actual e-commerce scenarios, inventory status often directly affects the availability of the purchase button. As shown in the above list page example, you can use the following
StockSet the button's value dynamicallydisabledProperty or click event to prevent users from purchasing out-of-stock items.
By these flexible template tags and conditional judgments, AnQiCMS allows website operators to easily implement dynamic display of product inventory status, greatly enhancing the practicality and interactivity of content presentation.
Frequently Asked Questions (FAQ)
Ask: If my product inventory field is not
Stockbut a custom name, how should I judge?- Answer: In the AnQiCMS backend, the custom field you create in the "Content Model" can be directly passed through the template by its value
{{archive.自定义字段名}}or{{item.自定义字段名}}To get. For example, if your custom inventory field name isproduct_quantity, then you can use it in the template{% if archive.product_quantity > 0 %}The logic is the same. To judge
- Answer: In the AnQiCMS backend, the custom field you create in the "Content Model" can be directly passed through the template by its value
Question: Can I directly display the specific quantity of inventory on the front end?
- Answer: Absolutely. In the template's
{% if %}or{% else %}block, you can directly output{{product}}(on the detail page) or{{item.Stock}}(On the list page) you can display the specific inventory number. For example, you can display it as "In stock (remaining {{product}} pieces)" to provide users with clearer information.
- Answer: Absolutely. In the template's
Ask: Can I set statuses like "Presale" or "Coming soon" in addition to "In stock" and "Out of stock"?
- Answer: This usually requires combining with custom fields to implement. You can add a custom field named "Product Status" in the product model (the field type can be selected as "Dropdown" or "Single Selection") and preset options such as "In Stock", "Out of Stock", "Pre-sale", "About to Arrive".Then in the template, except for the judgment
StockQuantity, you can also add a judgment for this 'Product Status' custom field, for example{% if archive.商品状态字段 == "预售" %}To display more rich status information. This way, even if the inventory is 0, but the status is "pre-sale", it can be displayed correctly.
- Answer: This usually requires combining with custom fields to implement. You can add a custom field named "Product Status" in the product model (the field type can be selected as "Dropdown" or "Single Selection") and preset options such as "In Stock", "Out of Stock", "Pre-sale", "About to Arrive".Then in the template, except for the judgment