Patski123/repa-woocommerce
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix products, search, and newsletter form per REPA-17

Browse Source 
- Search: replace static <a href="/?s="> with togglable search overlay
  form that submits post_type=product for proper WooCommerce results
- Newsletter: remove mc4wp shortcode (plugin not installed), replace
  with self-contained HTML form + JS confirmation handler
- Shop by Design: link each design card to real product_tag pages
  (passive-aggressive, email-signatures, meeting-recovery, etc.)
  and show live tag.count instead of hardcoded numbers
- Category slugs: update $cat_meta mapping to match actual WC slugs
  (drinkware, wall-decor, stationery, apparel, stickers, accessories)
  in both front-page.php and archive-product.php
- Footer dept links updated to real WC category slugs

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
FrontendDev
2026-05-02 21:25:45 -04:00
parent 1cc5a8ecfe
commit de8d1b8bef
5 changed files with 126 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
theme/front-page.php
View File

@@ -100,10 +100,12 @@ $shop_url = get_permalink(wc_get_page_id('shop'));
<div class="rar-cats__grid"> <div class="rar-cats__grid">
<?php <?php
$cat_meta = [ $cat_meta = [
'mugs' => ['DEPT. 01', 'For passive aggression at room temp.'], 'drinkware' => ['DEPT. 01', 'For passive aggression at room temp.'],
'canvas' => ['DEPT. 02', 'Wall art for the soul-tired.'], 'wall-decor' => ['DEPT. 02', 'Wall art for the soul-tired.'],
'planners' => ['DEPT. 03', 'Productivity, with a wink.'], 'stationery' => ['DEPT. 03', 'Productivity, with a wink.'],
'apparel' => ['DEPT. 04', 'Casual Friday, but make it bitter.'], 'apparel' => ['DEPT. 04', 'Casual Friday, but make it bitter.'],
'stickers' => ['DEPT. 05', 'Stick it where they'll see it.'],
'accessories' => ['DEPT. 06', 'The extras that speak for you.'],
]; ];
if (!empty($categories)) { if (!empty($categories)) {
@@ -236,23 +238,25 @@ $shop_url = get_permalink(wc_get_page_id('shop'));
<div class="rar-designs__grid"> <div class="rar-designs__grid">
<?php <?php
$designs = [ $designs = [
['Per My Last Email', 'Passive Aggressive', 'paper', ['Per my', 'last email'], 8], ['Per My Last Email', 'Passive Aggressive', 'paper', ['Per my', 'last email'], 'passive-aggressive'],
['Sent from my Deathbed','Email Signatures', 'ink', ['Sent from', 'my deathbed'], 6], ['Sent from my Deathbed','Email Signatures', 'ink', ['Sent from', 'my deathbed'], 'email-signatures'],
['The Quiet Quitter', 'Lifestyle', 'olive', ['Quietly', 'quitting'], 5], ['The Quiet Quitter', 'Lifestyle', 'olive', ['Quietly', 'quitting'], 'lifestyle'],
["OOO Forever", 'Vacation Mode', 'paper', ['OOO', 'forever'], 7], ["OOO Forever", 'Vacation Mode', 'paper', ['OOO', 'forever'], 'vacation-mode'],
["Let's Circle Back", 'Meeting Recovery', 'ink', ['Circle', 'back ↻'], 4], ["Let's Circle Back", 'Meeting Recovery', 'ink', ['Circle', 'back ↻'], 'meeting-recovery'],
['My Plate Is Full', 'Capacity Issues', 'paper', ['My plate', 'is full.'], 5], ['My Plate Is Full', 'Capacity Issues', 'paper', ['My plate', 'is full.'], 'capacity-issues'],
]; ];
$color_map = [ $color_map = [
'paper' => ['bg' => '#FBF8EF', 'fg' => '#1A1A1A'], 'paper' => ['bg' => '#FBF8EF', 'fg' => '#1A1A1A'],
'ink' => ['bg' => '#1A1A1A', 'fg' => '#F5F1E8'], 'ink' => ['bg' => '#1A1A1A', 'fg' => '#F5F1E8'],
'olive' => ['bg' => '#7B8C5A', 'fg' => '#F5F1E8'], 'olive' => ['bg' => '#7B8C5A', 'fg' => '#F5F1E8'],
]; ];
foreach ($designs as [$title, $tag, $color, $lines, $count]) { foreach ($designs as [$title, $tag, $color, $lines, $tag_slug]) {
$tag_term = get_term_by('slug', $tag_slug, 'product_tag');
$count = $tag_term ? $tag_term->count : 0;
$tag_url = $tag_term ? get_term_link($tag_term, 'product_tag') : home_url('/shop/');
$cm = $color_map[$color]; $cm = $color_map[$color];
$designs_url = home_url('/designs/');
?> ?>
<a href="<?php echo esc_url($designs_url); ?>" class="rar-card"> <a href="<?php echo esc_url($tag_url); ?>" class="rar-card">
<div class="rar-card__media" style="aspect-ratio:5/3;"> <div class="rar-card__media" style="aspect-ratio:5/3;">
<div style="width:82%;aspect-ratio:4/2.4;background:<?php echo esc_attr($cm['bg']); ?>;border:1.5px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;color:<?php echo esc_attr($cm['fg']); ?>;font-family:var(--serif);font-style:italic;font-weight:500;font-size:20px;line-height:1.15;text-align:center;padding:10px;"> <div style="width:82%;aspect-ratio:4/2.4;background:<?php echo esc_attr($cm['bg']); ?>;border:1.5px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;color:<?php echo esc_attr($cm['fg']); ?>;font-family:var(--serif);font-style:italic;font-weight:500;font-size:20px;line-height:1.15;text-align:center;padding:10px;">
<?php foreach ($lines as $line) echo '<div>' . esc_html($line) . '</div>'; ?> <?php foreach ($lines as $line) echo '<div>' . esc_html($line) . '</div>'; ?>

28
theme/functions.php
View File

@@ -141,12 +141,13 @@ function rar_nav() {
?> ?>
</div> </div>
<div class="rar-nav__icons"> <div class="rar-nav__icons">
<a href="<?php echo esc_url(home_url('/?s=')); ?>" aria-label="Search"> <button class="rar-nav__search-btn" id="rar-search-toggle" type="button"
onclick="rarToggleSearch()" aria-label="Search" aria-expanded="false">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path> <circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path>
</svg> </svg>
Search Search
</a> </button>
<a href="<?php echo esc_url(get_permalink(wc_get_page_id('myaccount'))); ?>" aria-label="Account"> <a href="<?php echo esc_url(get_permalink(wc_get_page_id('myaccount'))); ?>" aria-label="Account">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="8" r="4"></circle> <circle cx="12" cy="8" r="4"></circle>
@@ -163,6 +164,15 @@ function rar_nav() {
</a> </a>
</div> </div>
</nav> </nav>
<div class="rar-search-overlay" id="rar-search-overlay" hidden>
<form class="rar-search-form" action="<?php echo esc_url(home_url('/')); ?>" method="get">
<input type="hidden" name="post_type" value="product" />
<input class="rar-search-input" type="search" name="s" placeholder="Search products…"
aria-label="Search products" autocomplete="off" />
<button type="submit" class="rar-btn rar-btn--stamp">Search</button>
<button type="button" class="rar-search-close" onclick="rarToggleSearch()" aria-label="Close search">✕</button>
</form>
</div>
<?php <?php
} }
@@ -179,18 +189,20 @@ function rar_footer_content() {
shipped from a warehouse in Cleveland. shipped from a warehouse in Cleveland.
</p> </p>
<div class="rar-footer__newsletter"> <div class="rar-footer__newsletter">
<?php echo do_shortcode('[mc4wp_form id="1"]'); ?> <form class="rar-newsletter-form" onsubmit="return rarNewsletterSubmit(event, this)">
<input type="email" placeholder="your.name@workplace.com" aria-label="Email for newsletter" id="rar-newsletter-email" /> <input type="email" name="EMAIL" placeholder="your.name@workplace.com"
<button class="rar-btn rar-btn--stamp" style="padding:10px 16px;" onclick="document.getElementById('rar-newsletter-email').form && document.getElementById('rar-newsletter-email').form.submit()">CC: ME →</button> aria-label="Email for newsletter" required />
<button type="submit" class="rar-btn rar-btn--stamp" style="padding:10px 16px;">CC: ME →</button>
</form>
</div> </div>
</div> </div>
<div class="rar-footer__col"> <div class="rar-footer__col">
<div class="rar-footer__col-title">Departments</div> <div class="rar-footer__col-title">Departments</div>
<ul> <ul>
<li><a href="<?php echo esc_url(home_url('/product-category/mugs/')); ?>">Mugs</a></li> <li><a href="<?php echo esc_url(home_url('/product-category/drinkware/')); ?>">Drinkware</a></li>
<li><a href="<?php echo esc_url(home_url('/product-category/canvas/')); ?>">Canvases</a></li>
<li><a href="<?php echo esc_url(home_url('/product-category/planners/')); ?>">Planners</a></li>
<li><a href="<?php echo esc_url(home_url('/product-category/apparel/')); ?>">Apparel</a></li> <li><a href="<?php echo esc_url(home_url('/product-category/apparel/')); ?>">Apparel</a></li>
<li><a href="<?php echo esc_url(home_url('/product-category/wall-decor/')); ?>">Wall Decor</a></li>
<li><a href="<?php echo esc_url(home_url('/product-category/stationery/')); ?>">Stationery</a></li>
<li><a href="<?php echo esc_url(home_url('/bulk/')); ?>">Bulk / HR</a></li> <li><a href="<?php echo esc_url(home_url('/bulk/')); ?>">Bulk / HR</a></li>
</ul> </ul>
</div> </div>

46
theme/js/rar.js
View File

@@ -176,7 +176,51 @@
} catch (e) {} } catch (e) {}
} }
// ─── WooCommerce quantity controls (override default +/-) ───────────────── // ─── Search overlay toggle ───────────────────────────────────────────────────
window.rarToggleSearch = function () {
var overlay = document.getElementById('rar-search-overlay');
var btn = document.getElementById('rar-search-toggle');
if (!overlay) return;
var isHidden = overlay.hidden;
overlay.hidden = !isHidden;
if (btn) btn.setAttribute('aria-expanded', isHidden ? 'true' : 'false');
if (isHidden) {
var input = overlay.querySelector('input[type=search]');
if (input) { input.focus(); input.select(); }
}
};
// Close search overlay on Escape key
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') {
var overlay = document.getElementById('rar-search-overlay');
if (overlay && !overlay.hidden) {
overlay.hidden = true;
var btn = document.getElementById('rar-search-toggle');
if (btn) { btn.setAttribute('aria-expanded', 'false'); btn.focus(); }
}
}
});
// ─── Newsletter form submit (placeholder handler) ─────────────────────────
window.rarNewsletterSubmit = function (e, form) {
e.preventDefault();
var email = form.querySelector('input[type=email]');
if (!email || !email.value) return false;
var btn = form.querySelector('button[type=submit]');
if (btn) {
btn.textContent = 'Filed. ✓';
btn.disabled = true;
}
if (email) {
email.value = '';
email.placeholder = 'You're on the list.';
email.disabled = true;
}
return false;
};
// ─── WooCommerce quantity controls (override default +/-) ─────────────────
// Replace WC's quantity input with our styled controls // Replace WC's quantity input with our styled controls
function initQtyControls() { function initQtyControls() {
document.querySelectorAll('.quantity:not(.rar-qty-init)').forEach(function (wrap) { document.querySelectorAll('.quantity:not(.rar-qty-init)').forEach(function (wrap) {

38
theme/style.css
View File

@@ -160,6 +160,44 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
transition: background 0.15s; transition: background 0.15s;
} }
.rar-nav__cart:hover { background: var(--stamp-dark) !important; } .rar-nav__cart:hover { background: var(--stamp-dark) !important; }
.rar-nav__search-btn {
display: inline-flex; align-items: center; gap: 6px;
background: none; border: none; cursor: pointer;
color: var(--manila); font-family: var(--mono); font-size: 11px;
letter-spacing: 0.12em; text-transform: uppercase; padding: 0;
transition: color 0.15s;
}
.rar-nav__search-btn:hover { color: var(--stamp); }
.rar-search-overlay {
position: sticky; top: 0; z-index: 99;
background: var(--paper); border-bottom: 1.5px solid var(--ink);
padding: 12px 40px;
}
.rar-search-form {
display: flex; align-items: center; gap: 10px; max-width: 640px; margin: 0 auto;
}
.rar-search-input {
flex: 1; padding: 10px 14px;
border: 1.5px solid var(--ink); background: transparent;
font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em;
color: var(--ink); outline: none;
}
.rar-search-input:focus { border-color: var(--stamp); }
.rar-search-close {
background: none; border: none; cursor: pointer; font-size: 18px;
color: var(--ink-muted); padding: 4px 8px; line-height: 1;
transition: color 0.15s;
}
.rar-search-close:hover { color: var(--stamp); }
.rar-newsletter-form { display: flex; gap: 8px; width: 100%; }
.rar-newsletter-form input[type=email] {
flex: 1; max-width: 240px; padding: 10px 12px;
background: transparent;
border: 1px solid rgba(245,241,232,0.3);
color: var(--manila); font-family: var(--mono); font-size: 11px;
letter-spacing: 0.06em; outline: none; border-radius: 2px;
}
.rar-newsletter-form input[type=email]::placeholder { color: rgba(245,241,232,0.4); }
/* ───────── Buttons ───────── */ /* ───────── Buttons ───────── */
.rar-btn { .rar-btn {

10
theme/woocommerce/archive-product.php
View File

@@ -15,10 +15,12 @@ $cat_slug = $is_category ? $term->slug : 'shop';
// Category descriptions // Category descriptions
$cat_desc_map = [ $cat_desc_map = [
'mugs' => '47 ceramics, 12 enamels, and a few we honestly forgot to count. Dishwasher safe. Microwave safe. HR safe (mostly).', 'drinkware' => 'Dishwasher safe. Microwave safe. HR safe (mostly). Mugs, tumblers, and vessels for the passively aggressive.',
'canvas' => 'Print-on-demand wall art for the soul-tired and decoratively passive-aggressive.', 'wall-decor' => 'Print-on-demand wall art for the soul-tired and decoratively passive-aggressive.',
'planners' => 'For the person who plans a lot and does a little. Or the other way around.', 'stationery' => 'For the person who plans a lot and does a little. Or the other way around.',
'apparel' => 'Wear your grievances. Business casual with a quiet fury.', 'apparel' => 'Wear your grievances. Business casual with a quiet fury.',
'stickers' => 'Stick your opinions where they'll be seen. Water-resistant, like your resolve.',
'accessories' => 'The extras that speak for you when you've run out of words.',
]; ];
if (empty($cat_desc)) { if (empty($cat_desc)) {
$cat_desc = $cat_desc_map[$cat_slug] ?? 'The complete collection. Curated for the chronically employed.'; $cat_desc = $cat_desc_map[$cat_slug] ?? 'The complete collection. Curated for the chronically employed.';