案例作品集 浏览精选项目

WESWOO 提供 Shopify Plus 项目开发费抵扣,至多 US$4,800

开发知识库 / 购物车、金额与优惠

购物车、金额与优惠

按服务端行项目展示,再解释金额、支付与优惠条件。

优惠卡、优惠码与截止条件

先展示适用商品、门槛、币种和有效期,再提供复制按钮。复制成功只改变提示文字,活动是否真正应用由购物车或结账结果确认。

数据与依赖

  • 核准的活动码、期限和叠加条件。
  • 只读输入、按钮和 role=status 提示区。

交互逻辑

  • 复制失败时让顾客手动选择文本。
  • 过期或不适用时移除误导的领取文案。
示例代码 · assets/ww-copy-code.js
JavaScript · WESWOO
export function bindDiscountCopy(button, input, status) {
  button.addEventListener('click', async () => {
    const value = input.value.trim();
    if (!value) return;
    try {
      await navigator.clipboard.writeText(value);
      status.textContent = 'Code copied. Check its conditions at checkout.';
    } catch {
      input.focus();
      input.select();
      status.textContent = 'Select and copy the code.';
    }
  });
}
// Use a read-only text input, a type=button control and a role=status element.
// Copying a code does not apply or validate a discount.

验收检查

  • 核无权限复制、空码和多次点击。
  • 用适用与不适用商品分别核结账。

复制代码不等于自动应用优惠;不要用客户端显示值承诺成交价。

先理解,再整合,最后验证

  1. 选择模块,确认数据和输入输出。
  2. 将片段接入当前主题或框架。
  3. 用真实变体、市场和失败恢复场景验收。

示例按 Shopify Online Store 2.0 主题编写;Headless 使用单独的数据与版本边界。代码片段需接实际字段、主题和语言文件。

架构参考

示例由 WESWOO 编写,结合 Shopify 官方文档和固定版本的仓库参考。采用仓库代码时应保留适用许可。

Shopify/dawn · 许可commit 3e9ee2281dc4 · Shopify 集成主题的限定许可;参考架构,不复制仓库实现。
Shopify/hydrogen · 许可commit 9e358a2462ba · MIT;采用实质代码时保留版权与许可。

依据核对 2026-11-12