# HTML表单shortcode

> 在Custom HTML付款表单里显示实时价格、库存和表单资料的shortcode。
>
> Source: https://docs.bcl.my/zh/html-form-shortcodes/

shortcode让你自己的HTML显示表单的实时资料，例如产品价格或剩余库存。每次页面加载时，BCL都会把每个shortcode换成当前的数值，所以价格或库存改变时，你不需要修改HTML。

shortcode适用于**Type of Form**为**Custom HTML**的付款表单，以及**Content Type**为**Custom HTML**的**Donation**表单。

## 在表单里加入shortcode

在表单的HTML编辑器里输入shortcode：

1. 前往**Payments** → **Forms**，在你的表单上点击**Edit**。
2. 点击**Open HTML Editor**。BCL会先保存表单，再打开编辑器。

   *(Screenshot: Edit Payment Form页面，Open HTML Editor按钮已标示)*

3. 在你想显示数值的地方输入shortcode，然后点击**Save HTML**。点击**Preview**可以查看设计；shortcode只会在正式表单上填入数值。

   *(Screenshot: HTML编辑器的代码里有shortcode，Save HTML按钮已标示)*

4. 点击**Back**，然后点击**View Form**查看实时数值。

   *(Screenshot: 正式的Custom HTML表单，显示由shortcode生成的产品名称、价格和状态标记)*

## 找出产品ID

产品shortcode需要产品ID，而且表单必须使用**Multiple Items**。找出ID的方法：

1. 打开表单，滚动到标签页下方的**List of Items**。
2. 点击产品上的**More**。

   *(Screenshot: List of Items，第一个产品的More按钮已标示)*

3. 查看面板标题里`#`后面的数字，例如**House Blend 250g Settings (#87)**。

   *(Screenshot: 面板标题显示产品ID 87)*

## shortcode列表

把`123`换成你的产品ID。每个产品shortcode都可以用`product=`或`id=`。

| Shortcode | 显示 | 输出示例 |
| --- | --- | --- |
| `[stock product=123]` | 库存 | “25 available”、“Out of Stock”，没有追踪库存时显示“In Stock” |
| `[price product=123]` | 产品价格 | “RM 28.00” |
| `[product_name id=123]` | 产品名称 | “House Blend 250g” |
| `[status product=123]` | 状态标记 | “Available”、“Coming Soon”或“Out of Stock” |
| `[form_title]` | 表单标题 | “Kopi Kampung Coffee Beans” |
| `[form_slug]` | 表单网址slug | “kopi-kampung-coffee-beans” |
| `[total_products]` | 表单上的产品数量 | “12” |
| `[available_products]` | 现在可以购买的产品（不是即将推出，也没有售罄） | “8” |

## 设置状态标记的样式

`[status]`会输出一个`<span>`，class为`badge`，再加上`badge-success`（Available）、`badge-warning`（Coming Soon）或`badge-danger`（Out of Stock）。在你的HTML里为这些class加上CSS，就能给标记上色。

## 常见问题

### 为什么我的shortcode在表单上显示成普通文字？

检查拼写和括号，例如[price product=123]。无法识别的shortcode会保持原样。可识别的shortcode如果产品ID错误，就什么都不显示。shortcode只能在Custom HTML表单的HTML里使用。

### 价格shortcode显示原价，而不是我的特价。

[price]显示的是产品的Amount (RM)，不会显示在More里设置的Sale Price (Optional)。