免费样品选择页

一个使用原生 HTML、CSS 和 JavaScript 开发的响应式免费样品申请页面。用户可以浏览不同类型的产品，在场景图与样品图之间切换，选择最多 4 个样品，然后填写收货资料并提交申请。

项目不依赖 React、Vue、TypeScript 或其他前端框架，可直接运行，也便于嵌入 WordPress 页面模板。

在线流程

页面包含完整的三步申请流程：

1. 选择产品样品
2. 填写联系和配送资料
3. 显示申请成功结果

当前步骤会明显高亮，已经完成的步骤会显示完成状态。

主要功能

• 最大内容宽度为 1600px
• 支持桌面、平板和手机端
• 产品分类切换
• 每个产品包含场景图和样品图
• 桌面端鼠标悬停切换样品图
• 最多选择 4 个产品样品
• 产品列表与已选面板实时联动
• 桌面端已选面板跟随页面滚动
• 手机端底部固定已选栏和样品抽屉
• 支持删除和重新选择样品
• 包含姓名、邮箱、电话、国家、地址和留言字段
• 表单必填验证与隐私确认
• 自动将已选产品写入隐藏字段
• 提交后显示确认页面
• 支持键盘操作和无障碍步骤状态
• 所有产品图和步骤图标均为独立 SVG 文件

项目结构

free-sample-static/
├── index.html
├── styles.css
├── script.js
├── README.md
├── images/
│   ├── products/
│   │   ├── product-01-scene.svg
│   │   ├── product-01-sample.svg
│   │   ├── product-02-scene.svg
│   │   ├── product-02-sample.svg
│   │   └── ...
│   └── ui/
│       ├── step-samples.svg
│       ├── step-details.svg
│       └── step-delivery.svg
└── tools/
    └── generate-placeholders.js

快速开始

项目无需安装依赖或执行构建命令。

直接预览

下载项目后，直接使用浏览器打开：

index.html

使用本地服务器

如果浏览器对本地文件有限制，可以在项目目录启动一个简单的静态服务器：

python3 -m http.server 8080

然后访问：

http://localhost:8080

替换产品图片

所有产品图片都位于：

images/products/

每个产品对应两张图片：

product-01-scene.svg
product-01-sample.svg

• scene：默认显示的产品场景图
• sample：鼠标悬停后显示的产品样品图

最简单的替换方式是保留文件名，直接使用新图片覆盖原文件。

页面也支持 JPG、PNG、WebP 等常见图片格式。使用不同格式或文件名时，需要同步修改 script.js 中相应产品的图片路径。

推荐图片比例：

640 × 430

建议同一产品的场景图和样品图使用一致的尺寸与比例，避免切换时发生布局跳动。

修改产品数据

产品数据位于 script.js 顶部的 products 数组中。

示例：

{
  id: 1,
  category: "decking",
  name: "Anthracite Grey Decking Board",
  price: "From £5.27 per metre",
  tone: "#525a59",
  accent: "#a9b1ad"
}

字段说明：

字段	说明
id	产品唯一编号，不可重复
category	产品分类
name	产品名称
price	价格或补充说明，可省略
tone	SVG 占位图主色
accent	SVG 占位图辅助色

图片路径会根据产品编号自动生成：

images/products/product-编号-scene.svg
images/products/product-编号-sample.svg

例如产品 ID 为 2 时，对应：

images/products/product-02-scene.svg
images/products/product-02-sample.svg

产品分类

当前内置分类：

decking
cladding
fencing

分类按钮位于 index.html：

<button data-category="decking">Decking</button>

产品的 category 值需要与按钮的 data-category 保持一致。

已选样品数据

用户进入第二步时，已选产品会自动写入表单中的隐藏字段：

<input
  type="hidden"
  name="selected_samples"
  id="selected-samples-input"
>

隐藏字段保存 JSON 数据，例如：

[
  {
    "id": 2,
    "name": "Slate Grey Grooved Decking",
    "category": "decking"
  }
]

后端、邮件模板或 WordPress 表单插件可以读取 selected_samples 字段，获取用户选择的产品。

表单字段

当前表单包含：

• 姓名
• 邮箱
• 电话
• 国家
• 地址
• 留言内容
• 隐私政策确认
• 已选样品隐藏字段

浏览器会对必填字段和邮箱格式进行基础验证。

当前演示版本不会向服务器发送数据，而是在提交后进入成功页面。表单提交入口位于 script.js 底部：

sampleForm.addEventListener("submit", event => {
  event.preventDefault();

  // 在这里连接实际的表单接口。
});

WordPress 集成

方式一：嵌入主题页面模板

将 index.html 中 <main> 内的页面结构复制到 WordPress 页面模板，然后在主题的 functions.php 中加载 CSS 和 JavaScript：

function free_sample_assets() {
    wp_enqueue_style(
        'free-sample-style',
        get_template_directory_uri() . '/free-sample/styles.css',
        array(),
        '1.0.0'
    );

    wp_enqueue_script(
        'free-sample-script',
        get_template_directory_uri() . '/free-sample/script.js',
        array(),
        '1.0.0',
        true
    );
}

add_action('wp_enqueue_scripts', 'free_sample_assets');

方式二：通过 WordPress 输出产品数据

可以使用 wp_localize_script() 将 WordPress 产品数据传递给前端：

wp_localize_script(
    'free-sample-script',
    'freeSampleData',
    array(
        'products' => $products,
        'ajaxUrl'  => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('free_sample_nonce')
    )
);

随后将 script.js 中的静态 products 数组替换为：

const products = window.freeSampleData.products;

方式三：连接 WordPress AJAX

表单提交时可以通过 fetch() 发送到 admin-ajax.php：

const formData = new FormData(sampleForm);
formData.append("action", "submit_free_sample");
formData.append("nonce", window.freeSampleData.nonce);

fetch(window.freeSampleData.ajaxUrl, {
  method: "POST",
  body: formData
})
  .then(response => response.json())
  .then(result => {
    if (result.success) {
      // 显示提交成功页面
    }
  });

实际使用时还需要在 WordPress 后端完成：

• Nonce 验证
• 字段清理和验证
• 邮件通知
• 数据库存储
• 防垃圾提交
• 错误信息返回

接入表单插件

页面结构也可以与以下插件配合：

• Contact Form 7
• Gravity Forms
• WPForms
• Fluent Forms
• Elementor Form

接入表单插件时，应保留 selected_samples 隐藏字段，并在样品选择变化后同步更新其值。

修改样式

主要颜色在 styles.css 顶部统一定义：

:root {
  --blue: #0784ce;
  --blue-dark: #006dad;
  --ink: #17242a;
  --muted: #69767c;
  --soft: #f3f5f5;
  --wash: #eaf7fe;
}

修改这些变量即可快速调整页面主题。

最大页面宽度由以下样式控制：

width: min(calc(100% - 48px), 1600px);

重新生成 SVG 占位图

项目保留了 SVG 占位图生成工具：

tools/generate-placeholders.js

如需重新生成全部产品占位图，可在项目目录运行：

node tools/generate-placeholders.js

该工具只用于生成演示图片，不影响页面运行。正式使用时建议替换为真实产品图片。

浏览器支持

建议使用近几年的主流浏览器：

• Google Chrome
• Microsoft Edge
• Mozilla Firefox
• Safari
• iOS Safari
• Android Chrome

后续建议

正式上线前建议继续完成：

• 接入真实产品图片
• 接入 WordPress 产品数据
• 接入实际表单提交接口
• 增加服务器端字段验证
• 增加邮件通知
• 增加隐私政策链接
• 增加防垃圾提交机制
• 根据业务范围完善国家选项

License

可根据项目实际用途添加合适的开源许可证，例如 MIT License。