It is crucial to clearly communicate the stock status of products to users in website operations, especially for sites involving product display.This not only optimizes the user experience and reduces invalid consultations, but also effectively guides the user's purchasing decisions.AnQiCMS is a flexible and efficient content management system that can visually display 'In Stock' or 'Out of Stock' status based on the product stock quantity in the template, which is very intuitive.
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 used toarchive(Document) related tags to obtain product data.
Understand the product inventory field.
In AnQiCMS, product data (usually considered a 'document model') contains 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 on this field.StockThe value of this field is used to dynamically display the inventory status.
Display the inventory status on the product detail page.
When the user browses the detail page of a single product, we hope the page can directly inform whether the product is in stock. In the template of the product detail page (for exampleproduct/detail.htmlorarchive/detail.htmlThe specific details depend on your template structure and model name), we can obtain the detailed information of the current product through the labelarchiveDetailto get the detailed information of the current product, including itsStockvalue.
Firstly, get the detailed information of the current product,StockValues:
{%- archiveDetail product with name="Stock" %}
Here we willStockThe value was assigned toproductthe variable. Next, we can use the conditional judgment tag{% if %}Check in.productthe value of the variable:
<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>
Through this code, ifproduct(which is the product inventory) is greater than 0, the page will display a green "In Stock"; otherwise, it will display a red "Out of Stock". You can adjust according to your website's design style.spanThe style of the label or using a predefined CSS class to beautify the display effect.
Show the inventory status on the product list page.
On product list pages (such as category pages, search result pages, or home recommendation modules), we often need to display multiple products. Each product should have its inventory status. In this case, we will usearchiveListTag to iterate over 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'sStockAll fields can be accesseditem.Stockto access.
Here is an example of a stock status displayed 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 go throughdisabledThe 'Buy Now' button has been disabled and the button text changed to 'Sold Out' when out of stock, further enhancing the user experience.
Advanced Considerations and Optimization
Style Separation:To enhance maintainability, it is recommended to replace
styleproperties with CSS classes. For example, define.in-stock { color: green; }and.out-of-stock { color: red; }, and 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", "Almost out", etc., 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 'In stock' when the inventory is greater than 10, 'Low stock with specific quantity' when the inventory is between 1 and 10, and 'Out of stock' when the inventory is 0.
Combine purchase logic:In actual e-commerce scenarios, the inventory status often directly affects the availability of the purchase button. As shown in the above list page example, you can according to
StockSet the button dynamically with 【en】disabledAttribute or click event to prevent users from purchasing out-of-stock products. 【en】
Through 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.
Common Questions (FAQ)
Question: If my product inventory field is not
Stockbut a custom name, how should I judge?- Answer: In the AnQiCMS backend, the custom fields you create in the 'Content Model' can be directly accessed in the template through
{{archive.自定义字段名}}or{{item.自定义字段名}}Get it. For example, if your custom inventory field name isproduct_quantity, then you can use it in the template{% if archive.product_quantity > 0 %}to make judgments, the logic is the same.
- Answer: In the AnQiCMS backend, the custom fields you create in the 'Content Model' can be directly accessed in the template through
Question: Can I display the specific stock quantity directly on the front end?
- Answer: Absolutely. In the
{% if %}or{% else %}block, you can directly output{{product}}(on the detail page) or{{item.Stock}}(On the list page) the specific stock numbers can be displayed. For example, you can display it as "In stock (remaining {{product}} pieces)" to provide users with clearer information.
- Answer: Absolutely. In the
Ask: Can I set statuses like 'Pre-order' or 'About to arrive' in addition to 'In stock' and 'Out of stock'?
- Answer: This usually requires combining with custom fields.You can add a custom field named 'Product Status' (you can choose the field type as 'Dropdown Selection' or 'Single Selection') in the product model, and preset options such as 'In Stock', 'Out of Stock', 'Pre-sale', 'About to Arrive'.
StockQuantity, you can also add a judgment for this 'Product Status' custom field, for example{% if archive.商品状态字段 == "预售" %}Display more detailed status information. In this way, even if the inventory is 0, but the status is 'Presale', it can be displayed correctly.
- Answer: This usually requires combining with custom fields.You can add a custom field named 'Product Status' (you can choose the field type as 'Dropdown Selection' or 'Single Selection') in the product model, and preset options such as 'In Stock', 'Out of Stock', 'Pre-sale', 'About to Arrive'.