[ PROMPT_NODE_28034 ]
extensions
[ SKILL_DOCUMENTATION ]
# 扩展参考
构建 UI 扩展和 Shopify Functions 的指南。
## 结账 UI 扩展
使用原生渲染组件自定义结账和感谢页面。
### 扩展点
**区块目标 (商家可配置):**
- `purchase.checkout.block.render` - 主结账页面
- `purchase.thank-you.block.render` - 感谢页面
**静态目标 (固定位置):**
- `purchase.checkout.header.render-after`
- `purchase.checkout.contact.render-before`
- `purchase.checkout.shipping-option-list.render-after`
- `purchase.checkout.payment-method-list.render-after`
- `purchase.checkout.footer.render-before`
### 设置
bash
shopify app generate extension --type checkout_ui_extension
配置 (`shopify.extension.toml`):
toml
api_version = "2026-01"
name = "gift-message"
type = "ui_extension"
[[extensions.targeting]]
target = "purchase.checkout.block.render"
[capabilities]
network_access = true
api_access = true
### 基础示例
javascript
import {
reactExtension,
BlockStack,
TextField,
Checkbox,
useApi,
} from "@shopify/ui-extensions-react/checkout";
export default reactExtension("purchase.checkout.block.render", () => (
));
function Extension() {
const [message, setMessage] = useState("");
const [isGift, setIsGift] = useState(false);
const { applyAttributeChange } = useApi();
useEffect(() => {
if (isGift) {
applyAttributeChange({
type: "updateAttribute",
key: "gift_message",
value: message,
});
}
}, [message, isGift]);
return (
This is a gift
{isGift && (
)}
);
}
### 常用 Hooks
**useApi:**
javascript
const { extensionPoint, shop, storefront, i18n, sessionToken } = useApi();
**useCartLines:**
javascript
const lines = useCartLines();
lines.forEach((line) => {
console.log(line.merchandise.product.title, line.quantity);
});
**useShippingAddress:**
javascript
const address = useShippingAddress();
console.log(address.city, address.countryCode);
**useApplyCartLinesChange:**
javascript
const applyChange = useApplyCartLinesChange();
async function addItem() {
await applyChange({
type: "addCartLine",
mer
粤公网安备44030002003366号