70 lines
3.2 KiB
PHP
70 lines
3.2 KiB
PHP
<?php
|
||
/**
|
||
* Template Name: 产品定制器
|
||
*
|
||
* A custom page template that renders the product customizer UI.
|
||
*
|
||
* @package SewJoy_Theme
|
||
*/
|
||
|
||
get_header();
|
||
?>
|
||
|
||
<main id="main" class="site-main site-main--builder">
|
||
<section class="builder">
|
||
<header class="builder__header">
|
||
<h1 class="builder__title">定制你的产品</h1>
|
||
<p class="builder__subtitle">从以下组件中选择你的偏好，打造独一无二的商品。</p>
|
||
</header>
|
||
|
||
<div class="builder__components">
|
||
<!-- Component A -->
|
||
<fieldset class="builder-component" data-component="A">
|
||
<legend class="builder-component__title">组件A</legend>
|
||
<div class="builder-component__options">
|
||
<button type="button" class="builder-option" data-component="A" data-option="A1">选项1</button>
|
||
<button type="button" class="builder-option" data-component="A" data-option="A2">选项2</button>
|
||
<button type="button" class="builder-option" data-component="A" data-option="A3">选项3</button>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<!-- Component B -->
|
||
<fieldset class="builder-component" data-component="B">
|
||
<legend class="builder-component__title">组件B</legend>
|
||
<div class="builder-component__options">
|
||
<button type="button" class="builder-option" data-component="B" data-option="B1">选项1</button>
|
||
<button type="button" class="builder-option" data-component="B" data-option="B2">选项2</button>
|
||
<button type="button" class="builder-option" data-component="B" data-option="B3">选项3</button>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<!-- Component C -->
|
||
<fieldset class="builder-component" data-component="C">
|
||
<legend class="builder-component__title">组件C</legend>
|
||
<div class="builder-component__options">
|
||
<button type="button" class="builder-option" data-component="C" data-option="C1">选项1</button>
|
||
<button type="button" class="builder-option" data-component="C" data-option="C2">选项2</button>
|
||
<button type="button" class="builder-option" data-component="C" data-option="C3">选项3</button>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
|
||
<section class="builder__summary" aria-live="polite">
|
||
<h2 class="builder__summary-title">当前选中的组件组合</h2>
|
||
<ul class="builder__summary-list">
|
||
<li id="summary-A" data-summary="A">组件A：<span class="builder__summary-value">未选择</span></li>
|
||
<li id="summary-B" data-summary="B">组件B：<span class="builder__summary-value">未选择</span></li>
|
||
<li id="summary-C" data-summary="C">组件C：<span class="builder__summary-value">未选择</span></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<div class="builder__actions">
|
||
<button type="button" class="builder__add-to-cart">加入购物车</button>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- page-builder.php 已加载 -->
|
||
|
||
<?php
|
||
get_footer();
|