新增两个页面
This commit is contained in:
@@ -0,0 +1,148 @@
|
||||
<?php
|
||||
/**
|
||||
* Template Name: Shop
|
||||
*
|
||||
* Self-contained Shop / product list page. Mirrors front-page.php: own
|
||||
* DOCTYPE, <head>, brand nav (from template-part), banner (inline copy of
|
||||
* the homepage Hero 1), filter bar, hardcoded 9-product waterfall grid,
|
||||
* pagination, and footer (from template-part).
|
||||
*
|
||||
* @package SewJoy_Theme
|
||||
*/
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html <?php language_attributes(); ?>>
|
||||
<head>
|
||||
<meta charset="<?php bloginfo( 'charset' ); ?>">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
|
||||
<?php wp_head(); ?>
|
||||
</head>
|
||||
|
||||
<body <?php body_class( 'home-page' ); ?>>
|
||||
<?php wp_body_open(); ?>
|
||||
|
||||
<div class="home home--shop">
|
||||
|
||||
<?php require get_template_directory() . '/template-parts/home-nav.php'; ?>
|
||||
|
||||
<!-- ============================================
|
||||
BANNER — MAKE CREATION WEARABLE (reused from homepage Hero 1)
|
||||
============================================ -->
|
||||
<section class="hero hero--primary" aria-labelledby="shop-hero-heading">
|
||||
<div class="hero__content">
|
||||
<h1 id="shop-hero-heading" class="hero__heading">MAKE CREATION WEARABLE</h1>
|
||||
<p class="hero__sub">Timeless pieces. Designed by you. Made to be loved.</p>
|
||||
|
||||
<ul class="hero__badges">
|
||||
<li class="hero-badge">
|
||||
<span class="hero-badge__dot" aria-hidden="true"></span>
|
||||
<div class="hero-badge__body">
|
||||
<span class="hero-badge__title">CUSTOM MADE</span>
|
||||
<span class="hero-badge__desc">Design your unique style in just 3 steps</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="hero-badge">
|
||||
<span class="hero-badge__dot" aria-hidden="true"></span>
|
||||
<div class="hero-badge__body">
|
||||
<span class="hero-badge__title">PREMIUM QUALITY</span>
|
||||
<span class="hero-badge__desc">Carefully selected fabrics & craftsmanship</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="hero-badge">
|
||||
<span class="hero-badge__dot" aria-hidden="true"></span>
|
||||
<div class="hero-badge__body">
|
||||
<span class="hero-badge__title">SUSTAINABLE</span>
|
||||
<span class="hero-badge__desc">Made to order, less waste, more care</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="hero__placeholder" aria-hidden="true"></div>
|
||||
</div>
|
||||
|
||||
<div class="hero__big-number" aria-hidden="true">01</div>
|
||||
<div class="hero__caption">CRAFTED FOR MAKERS</div>
|
||||
</section>
|
||||
|
||||
<!-- ============================================
|
||||
SHOP — filter bar + product grid + pagination
|
||||
============================================ -->
|
||||
<section class="shop" aria-label="Product list">
|
||||
|
||||
<header class="shop__toolbar">
|
||||
<div class="shop__filters">
|
||||
<button type="button" class="filter-pill">Style Filter <span class="filter-pill__caret" aria-hidden="true">▾</span></button>
|
||||
<button type="button" class="filter-pill">Fabric Filter <span class="filter-pill__caret" aria-hidden="true">▾</span></button>
|
||||
<input type="text" class="filter-pill filter-pill--search" placeholder="Key word search…" />
|
||||
</div>
|
||||
|
||||
<div class="shop__spacer" aria-hidden="true"></div>
|
||||
|
||||
<div class="shop__sort-group">
|
||||
<button type="button" class="filter-pill">Sort: Featured <span class="filter-pill__caret" aria-hidden="true">▾</span></button>
|
||||
|
||||
<div class="shop-layout" role="group" aria-label="Layout switcher">
|
||||
<button type="button" class="shop-layout__btn is-active" aria-label="Waterfall view" aria-pressed="true">▤</button>
|
||||
<button type="button" class="shop-layout__btn" aria-label="Grid view" aria-pressed="false">▦</button>
|
||||
<button type="button" class="shop-layout__btn" aria-label="List view" aria-pressed="false">☰</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="shop__grid">
|
||||
<?php
|
||||
// 9 products, hardcoded to match the Basic Shopping Flow wireframe
|
||||
// (design/homepage-wireframe.pen → OsAkV frame → BSF Product Grid Light).
|
||||
$products = array(
|
||||
array( 'Linen Wrap Dress', '$128', '#D9C9B0', 450 ),
|
||||
array( 'Cotton Tee', '$48', '#EFE6D6', 390 ),
|
||||
array( 'Silk Blouse', '$156', '#E8D8C8', 490 ),
|
||||
array( 'Tailored Trousers', '$98', '#B8A99A', 410 ),
|
||||
array( 'Pleated Midi Skirt', '$88', '#D9C9B0', 470 ),
|
||||
array( 'Knit Cardigan', '$112', '#C8956C', 430 ),
|
||||
array( 'Denim Jacket', '$138', '#8A6E55', 470 ),
|
||||
array( 'Linen Shorts', '$68', '#EFE6D6', 390 ),
|
||||
array( 'Silk Scarf', '$42', '#E8D8C8', 430 ),
|
||||
);
|
||||
|
||||
foreach ( $products as $p ) {
|
||||
list( $title, $price, $tone, $height ) = $p;
|
||||
?>
|
||||
<article class="product-card"
|
||||
style="--card-tone: <?php echo esc_attr( $tone ); ?>; --card-media-h: <?php echo esc_attr( $height ); ?>px;">
|
||||
<div class="product-card__media" aria-hidden="true"></div>
|
||||
<div class="product-card__body">
|
||||
<h3 class="product-card__title"><?php echo esc_html( $title ); ?></h3>
|
||||
<span class="product-card__price"><?php echo esc_html( $price ); ?></span>
|
||||
</div>
|
||||
</article>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<footer class="shop__pagination">
|
||||
<span class="shop__results">Showing 9 of 124 products</span>
|
||||
|
||||
<nav class="shop__pager" aria-label="Pagination">
|
||||
<a class="shop__page-link shop__page-link--nav" href="#">← Prev</a>
|
||||
<a class="shop__page-link is-current" href="#" aria-current="page">1</a>
|
||||
<a class="shop__page-link" href="#">2</a>
|
||||
<a class="shop__page-link" href="#">3</a>
|
||||
<span class="shop__page-link shop__page-link--ellipsis" aria-hidden="true">…</span>
|
||||
<a class="shop__page-link shop__page-link--nav" href="#">Next →</a>
|
||||
</nav>
|
||||
</footer>
|
||||
|
||||
</section>
|
||||
|
||||
<?php require get_template_directory() . '/template-parts/home-footer.php'; ?>
|
||||
|
||||
</div><!-- .home -->
|
||||
|
||||
<?php wp_footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user