Fix mobile hamburger menu, designs page template, product tab styling, and stock field (REPA-78)

- Add mobile hamburger toggle button and full-screen nav drawer (≤1024px)
- Fix product tab styles: complete tab CSS without relying on WC parent selectors; explicit wc-single-product enqueue on product pages
- Fix STOCK field: conditionally hide when get_stock_quantity() returns null instead of showing '— units'
- Add page-designs.php template + template_include filter so /designs/ uses themed layout instead of raw WooCommerce output
- Align nav/footer terminology: 'Canvas' → 'Wall Decor' in nav fallback; correct broken category URL slugs (mugs→drinkware, canvas→wall-decor, planners→stationery, blog→the-memo); add 'Bulk / HR' to mobile drawer

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
FrontendDev
2026-05-03 10:57:54 -04:00
parent 210a685630
commit 9bd61b4236
5 changed files with 303 additions and 2 deletions

112
theme/page-designs.php Normal file
View File

@@ -0,0 +1,112 @@
<?php
/**
* Template Name: Designs Index
* Themed product listing for the /designs/ page.
*/
defined('ABSPATH') || exit;
get_header();
$paged = max(1, get_query_var('paged'));
$designs_query = new WP_Query([
'post_type' => 'product',
'posts_per_page' => 12,
'paged' => $paged,
'post_status' => 'publish',
]);
?>
<div class="rar-breadcrumb">
<a href="<?php echo esc_url(home_url('/')); ?>">Shop</a> /
<span>Designs</span>
</div>
<div class="rar-cat-hero">
<div class="rar-folder-tab">DEPT. DESIGNS · COLLECTION</div>
<div class="rar-cat-hero__inner">
<div>
<h1>
Designs.<br>
<em style="color:var(--stamp);font-style:italic;">Art for the quietly suffering.</em>
</h1>
</div>
<div>
<p style="font-size:14px;line-height:1.6;color:var(--ink-muted);margin:0 0 18px;max-width:380px;">
Print-on-demand wall art and stickers for the desk-bound. Corporate in format, passive-aggressive in spirit.
</p>
<div class="rar-cat-hero__stats">
<span><?php echo esc_html($designs_query->found_posts); ?> ITEMS</span>
<span>·</span>
<span>FREE SHIP OVER $40</span>
</div>
</div>
</div>
</div>
<div class="rar-toolbar">
<div class="rar-toolbar__left">
Showing <?php echo esc_html(($paged - 1) * 12 + 1); ?><?php echo esc_html(min($paged * 12, $designs_query->found_posts)); ?>
of <?php echo esc_html($designs_query->found_posts); ?> designs
</div>
</div>
<div class="rar-products" style="padding-top:0;">
<div class="rar-products__grid" id="rar-product-grid">
<?php if ($designs_query->have_posts()) : while ($designs_query->have_posts()) : $designs_query->the_post();
global $product;
if (!$product) $product = wc_get_product(get_the_ID());
if (!$product) continue;
$img_id = $product->get_image_id();
$img_url = $img_id ? wp_get_attachment_image_url($img_id, 'rar-product-card') : '';
$sku = $product->get_sku() ?: 'SKU-' . $product->get_id();
$cats = get_the_terms(get_the_ID(), 'product_cat');
$catname = $cats ? $cats[0]->name : '';
$stock = $product->get_stock_status();
$stock_label = $stock === 'instock' ? 'IN STOCK' : ($stock === 'onbackorder' ? 'BACKORDER' : 'OUT OF STOCK');
$stock_color = $stock === 'instock' ? 'var(--olive-dark)' : 'var(--ink-faint)';
?>
<a href="<?php echo esc_url(get_permalink()); ?>" class="rar-card">
<div class="rar-card__media">
<div class="rar-card__sku">SKU <?php echo esc_html($sku); ?></div>
<?php if ($img_url) : ?>
<img src="<?php echo esc_url($img_url); ?>" alt="<?php echo esc_attr($product->get_name()); ?>" />
<?php else : ?>
<div class="rar-placeholder__label"><?php echo esc_html(strtoupper($catname ?: $product->get_name())); ?></div>
<?php endif; ?>
</div>
<div class="rar-card__body">
<?php if ($catname) : ?><div class="rar-card__cat"><?php echo esc_html($catname); ?></div><?php endif; ?>
<div class="rar-card__title"><?php echo esc_html($product->get_name()); ?></div>
<div class="rar-card__row">
<span class="rar-card__price"><?php echo wp_kses_post($product->get_price_html()); ?></span>
<span style="color:<?php echo esc_attr($stock_color); ?>;font-family:var(--mono);font-size:9px;letter-spacing:0.18em;"><?php echo esc_html($stock_label); ?></span>
</div>
</div>
</a>
<?php endwhile; wp_reset_postdata();
else : ?>
<p style="font-family:var(--serif);font-size:18px;font-style:italic;color:var(--ink-muted);grid-column:1/-1;">
No designs found. The creative department is on a deadline.
</p>
<?php endif; ?>
</div>
<?php if ($designs_query->max_num_pages > 1) : ?>
<div class="rar-pagination">
<div class="rar-page-btns">
<?php
echo paginate_links([
'total' => $designs_query->max_num_pages,
'current' => $paged,
'prev_text' => '',
'next_text' => '',
]);
?>
</div>
</div>
<?php endif; ?>
</div>
<?php get_footer(); ?>