| |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
|
|
|
| <div id="ss-shop">
|
|
|
| <style>
|
| #ss-shop * { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
| #ss-shop {
|
| font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
| max-width: 1200px;
|
| margin: 0 auto;
|
| padding: 2rem 1rem 4rem;
|
| color: #1a1a1a;
|
| }
|
|
|
| .ss-hero {
|
| background: #111111;
|
| border-radius: 12px;
|
| padding: 2.5rem 2rem;
|
| margin-bottom: 2rem;
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| gap: 1.5rem;
|
| flex-wrap: wrap;
|
| position: relative;
|
| overflow: hidden;
|
| }
|
|
|
| .ss-hero::before {
|
| content: '';
|
| position: absolute;
|
| top: -60px; right: -60px;
|
| width: 220px; height: 220px;
|
| border-radius: 50%;
|
| background: rgba(255,255,255,0.04);
|
| }
|
|
|
| .ss-hero::after {
|
| content: '';
|
| position: absolute;
|
| bottom: -80px; right: 80px;
|
| width: 280px; height: 280px;
|
| border-radius: 50%;
|
| background: rgba(255,255,255,0.03);
|
| }
|
|
|
| .ss-hero-text { position: relative; z-index: 1; }
|
|
|
| .ss-hero-text h1 {
|
| font-size: 30px;
|
| font-weight: 700;
|
| color: #ffffff;
|
| letter-spacing: -0.5px;
|
| margin-bottom: 6px;
|
| }
|
|
|
| .ss-hero-text p {
|
| font-size: 15px;
|
| color: rgba(255,255,255,0.6);
|
| margin: 0;
|
| }
|
|
|
| .ss-hero-search {
|
| display: flex;
|
| align-items: center;
|
| background: rgba(255,255,255,0.1);
|
| border: 1px solid rgba(255,255,255,0.2);
|
| border-radius: 8px;
|
| overflow: hidden;
|
| min-width: 280px;
|
| position: relative;
|
| z-index: 1;
|
| }
|
|
|
| .ss-hero-search input {
|
| border: none;
|
| background: transparent;
|
| padding: 11px 16px;
|
| font-size: 14px;
|
| font-family: inherit;
|
| color: #ffffff;
|
| outline: none;
|
| flex: 1;
|
| min-width: 0;
|
| }
|
|
|
| .ss-hero-search input::placeholder { color: rgba(255,255,255,0.45); }
|
|
|
| .ss-hero-search button {
|
| background: #ffffff;
|
| border: none;
|
| color: #111111;
|
| padding: 11px 16px;
|
| cursor: pointer;
|
| display: flex;
|
| align-items: center;
|
| font-size: 16px;
|
| transition: background 0.15s;
|
| }
|
|
|
| .ss-hero-search button:hover { background: #eeeeee; }
|
|
|
| .ss-controls {
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| gap: 1rem;
|
| margin-bottom: 1.25rem;
|
| flex-wrap: wrap;
|
| }
|
|
|
| .ss-filter-pills {
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| flex-wrap: wrap;
|
| }
|
|
|
| .ss-filter-label {
|
| font-size: 13px;
|
| color: #888888;
|
| }
|
|
|
| .ss-pill {
|
| background: #f4f4f4;
|
| border: 1px solid #e0e0e0;
|
| border-radius: 999px;
|
| padding: 6px 14px;
|
| font-size: 13px;
|
| font-family: inherit;
|
| color: #555555;
|
| cursor: pointer;
|
| transition: all 0.15s;
|
| white-space: nowrap;
|
| }
|
|
|
| .ss-pill:hover { background: #ebebeb; color: #111111; border-color: #cccccc; }
|
|
|
| .ss-pill.active {
|
| background: #111111;
|
| border-color: #111111;
|
| color: #ffffff;
|
| }
|
|
|
| .ss-sort-select {
|
| background: #f4f4f4;
|
| border: 1px solid #e0e0e0;
|
| border-radius: 8px;
|
| padding: 7px 32px 7px 12px;
|
| font-size: 13px;
|
| font-family: inherit;
|
| color: #333333;
|
| cursor: pointer;
|
| outline: none;
|
| appearance: none;
|
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
| background-repeat: no-repeat;
|
| background-position: right 10px center;
|
| }
|
|
|
| .ss-sort-select:focus { border-color: #111111; }
|
|
|
| .ss-results-bar {
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| margin-bottom: 1.25rem;
|
| }
|
|
|
| .ss-results-count {
|
| font-size: 13px;
|
| color: #888888;
|
| }
|
|
|
| .ss-results-count strong { color: #111111; }
|
|
|
| .ss-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
|
| gap: 1.5rem;
|
| }
|
|
|
| .ss-card {
|
| background: #ffffff;
|
| border: 1px solid #e8e8e8;
|
| border-radius: 12px;
|
| overflow: hidden;
|
| display: flex;
|
| flex-direction: column;
|
| text-decoration: none;
|
| color: inherit;
|
| transition: transform 0.18s, box-shadow 0.18s;
|
| position: relative;
|
| }
|
|
|
| .ss-card:hover {
|
| transform: translateY(-4px);
|
| box-shadow: 0 12px 32px rgba(0,0,0,0.09);
|
| text-decoration: none;
|
| color: inherit;
|
| }
|
|
|
| .ss-card-img-wrap {
|
| position: relative;
|
| width: 100%;
|
| aspect-ratio: 1 / 1;
|
| background: #f4f4f4;
|
| overflow: hidden;
|
| }
|
|
|
| .ss-card-img-wrap img {
|
| width: 100%;
|
| height: 100%;
|
| object-fit: cover;
|
| display: block;
|
| transition: transform 0.3s;
|
| }
|
|
|
| .ss-card:hover .ss-card-img-wrap img { transform: scale(1.04); }
|
|
|
| .ss-card-img-placeholder {
|
| width: 100%;
|
| height: 100%;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| color: #cccccc;
|
| font-size: 48px;
|
| }
|
|
|
| .ss-badge-sale {
|
| position: absolute;
|
| top: 10px;
|
| left: 10px;
|
| background: #111111;
|
| color: white;
|
| font-size: 10px;
|
| font-weight: 700;
|
| padding: 3px 8px;
|
| border-radius: 4px;
|
| letter-spacing: 0.05em;
|
| text-transform: uppercase;
|
| }
|
|
|
| .ss-badge-cat {
|
| position: absolute;
|
| top: 10px;
|
| right: 10px;
|
| background: rgba(255,255,255,0.92);
|
| color: #333333;
|
| font-size: 10px;
|
| font-weight: 600;
|
| padding: 3px 8px;
|
| border-radius: 4px;
|
| }
|
|
|
| .ss-card-body {
|
| padding: 0.9rem 1rem 0.5rem;
|
| flex: 1;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 4px;
|
| }
|
|
|
| .ss-card-cat-label {
|
| font-size: 11px;
|
| font-weight: 600;
|
| color: #888888;
|
| text-transform: uppercase;
|
| letter-spacing: 0.06em;
|
| }
|
|
|
| .ss-card-name {
|
| font-size: 14px;
|
| font-weight: 600;
|
| color: #111111;
|
| line-height: 1.4;
|
| }
|
|
|
| .ss-card-price {
|
| font-size: 16px;
|
| font-weight: 700;
|
| color: #111111;
|
| margin-top: 4px;
|
| }
|
|
|
| .ss-card-price .ss-was {
|
| font-size: 12px;
|
| color: #aaaaaa;
|
| text-decoration: line-through;
|
| font-weight: 400;
|
| margin-left: 5px;
|
| }
|
|
|
| .ss-card-price .ss-now { color: #cc2200; }
|
|
|
| .ss-card-footer {
|
| padding: 0.75rem 1rem 1rem;
|
| }
|
|
|
| .ss-card-btn {
|
| display: block;
|
| width: 100%;
|
| background: #111111;
|
| color: white;
|
| border: none;
|
| border-radius: 7px;
|
| padding: 10px;
|
| font-size: 13px;
|
| font-family: inherit;
|
| font-weight: 600;
|
| cursor: pointer;
|
| text-align: center;
|
| text-decoration: none;
|
| transition: background 0.15s;
|
| }
|
|
|
| .ss-card-btn:hover { background: #333333; color: white; text-decoration: none; }
|
|
|
| .ss-state {
|
| grid-column: 1 / -1;
|
| text-align: center;
|
| padding: 5rem 2rem;
|
| color: #aaaaaa;
|
| font-size: 15px;
|
| }
|
|
|
| .ss-state i {
|
| font-size: 44px;
|
| display: block;
|
| margin-bottom: 14px;
|
| color: #dddddd;
|
| }
|
|
|
| .ss-error-box {
|
| background: #fff5f5;
|
| border: 1px solid #ffcccc;
|
| border-radius: 8px;
|
| padding: 1rem 1.25rem;
|
| color: #cc0000;
|
| font-size: 14px;
|
| margin-bottom: 1.5rem;
|
| line-height: 1.6;
|
| display: none;
|
| }
|
|
|
| .ss-pagination {
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| gap: 6px;
|
| margin-top: 2.5rem;
|
| flex-wrap: wrap;
|
| }
|
|
|
| .ss-page-btn {
|
| background: #f4f4f4;
|
| border: 1px solid #e0e0e0;
|
| border-radius: 7px;
|
| width: 38px;
|
| height: 38px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| font-size: 13px;
|
| font-family: inherit;
|
| color: #555555;
|
| cursor: pointer;
|
| transition: all 0.15s;
|
| }
|
|
|
| .ss-page-btn:hover { background: #ebebeb; color: #111111; }
|
| .ss-page-btn.active { background: #111111; border-color: #111111; color: white; font-weight: 600; }
|
| .ss-page-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
|
|
|
| .ss-dots {
|
| font-size: 14px;
|
| color: #aaaaaa;
|
| padding: 0 2px;
|
| line-height: 38px;
|
| }
|
|
|
| @media (max-width: 680px) {
|
| .ss-hero { flex-direction: column; align-items: flex-start; }
|
| .ss-hero-search { width: 100%; min-width: unset; }
|
| .ss-hero-text h1 { font-size: 22px; }
|
| .ss-controls { flex-direction: column; align-items: flex-start; }
|
| .ss-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
|
| }
|
|
|
| @media (max-width: 400px) {
|
| .ss-grid { grid-template-columns: 1fr; }
|
| }
|
| </style>
|
|
|
| <div class="ss-hero">
|
| <div class="ss-hero-text">
|
| <h1>Shop All Products</h1>
|
| <p>Gym wear, rugby designs & Celtic collections</p>
|
| </div>
|
| <div class="ss-hero-search">
|
| <input type="text" id="ss-search" placeholder="Search products..." oninput="ssFilter()" />
|
| <button onclick="ssFilter()" aria-label="Search">
|
| <i class="ti ti-search" aria-hidden="true"></i>
|
| </button>
|
| </div>
|
| </div>
|
|
|
| <div class="ss-error-box" id="ss-error"></div>
|
|
|
| <div class="ss-controls">
|
| <div class="ss-filter-pills">
|
| <span class="ss-filter-label">Category:</span>
|
| <button class="ss-pill active" onclick="ssCat('all', this)">All</button>
|
| <button class="ss-pill" onclick="ssCat('gym-wear', this)">Gym Wear</button>
|
| <button class="ss-pill" onclick="ssCat('rugby-designs', this)">Rugby Designs</button>
|
| <button class="ss-pill" onclick="ssCat('celtic-designs', this)">Celtic Designs</button>
|
| </div>
|
| <select class="ss-sort-select" id="ss-sort" onchange="ssFilter()">
|
| <option value="default">Featured</option>
|
| <option value="price-asc">Price: Low to High</option>
|
| <option value="price-desc">Price: High to Low</option>
|
| <option value="name-asc">Name: A to Z</option>
|
| <option value="name-desc">Name: Z to A</option>
|
| <option value="newest">Newest First</option>
|
| </select>
|
| </div>
|
|
|
| <div class="ss-results-bar">
|
| <div class="ss-results-count" id="ss-count"></div>
|
| </div>
|
|
|
| <div class="ss-grid" id="ss-grid">
|
| <div class="ss-state">
|
| <i class="ti ti-loader" aria-hidden="true"></i>
|
| Loading products...
|
| </div>
|
| </div>
|
|
|
| <div class="ss-pagination" id="ss-pagination"></div>
|
|
|
| </div>
|
|
|
| <script type="text/javascript">
|
| (function() {
|
|
|
| var all = [];
|
| var activeCat = 'all';
|
| var pg = 1;
|
| var perPage = 12;
|
|
|
| var CAT_NAMES = {
|
| 'gym-wear': 'Gym Wear',
|
| 'rugby-designs': 'Rugby Designs',
|
| 'celtic-designs': 'Celtic Designs'
|
| };
|
|
|
| function loadPage(p, acc) {
|
| if (!acc) { acc = []; }
|
| var url = '/ss-products.php?page=' + p;
|
| fetch(url)
|
| .then(function(r) {
|
| if (!r.ok) { throw new Error(r.status); }
|
| return r.json();
|
| })
|
| .then(function(res) {
|
| var products = res.products || [];
|
| var totalPages = res.total_pages || 1;
|
| acc = acc.concat(products);
|
| if (p < totalPages) {
|
| loadPage(p + 1, acc);
|
| } else {
|
| all = acc;
|
| ssFilter();
|
| }
|
| })
|
| .catch(function(e) {
|
| var box = document.getElementById('ss-error');
|
| box.textContent = 'Could not load products. Please check the ss-products.php file is in your public_html folder.';
|
| box.style.display = 'block';
|
| document.getElementById('ss-grid').innerHTML = '';
|
| console.error('Shop error:', e);
|
| });
|
| }
|
|
|
| function ssFilter() {
|
| var searchEl = document.getElementById('ss-search');
|
| var sortEl = document.getElementById('ss-sort');
|
| var q = searchEl ? searchEl.value.toLowerCase().trim() : '';
|
| var sort = sortEl ? sortEl.value : 'default';
|
|
|
| var list = [];
|
| for (var i = 0; i < all.length; i++) {
|
| var p = all[i];
|
| var catOk = activeCat === 'all';
|
| if (!catOk && p.categories) {
|
| for (var j = 0; j < p.categories.length; j++) {
|
| if (p.categories[j].slug === activeCat) {
|
| catOk = true;
|
| break;
|
| }
|
| }
|
| }
|
| var qOk = !q || p.name.toLowerCase().indexOf(q) !== -1;
|
| if (catOk && qOk) { list.push(p); }
|
| }
|
|
|
| list = list.slice().sort(function(a, b) {
|
| if (sort === 'price-asc') { return parseFloat(a.price || 0) - parseFloat(b.price || 0); }
|
| if (sort === 'price-desc') { return parseFloat(b.price || 0) - parseFloat(a.price || 0); }
|
| if (sort === 'name-asc') { return a.name.localeCompare(b.name); }
|
| if (sort === 'name-desc') { return b.name.localeCompare(a.name); }
|
| if (sort === 'newest') { return new Date(b.date_created) - new Date(a.date_created); }
|
| return 0;
|
| });
|
|
|
| var maxPg = Math.ceil(list.length / perPage);
|
| if (pg > maxPg || pg < 1) { pg = 1; }
|
| render(list);
|
| renderPager(list.length);
|
| }
|
|
|
| function render(list) {
|
| var grid = document.getElementById('ss-grid');
|
| var count = document.getElementById('ss-count');
|
| var start = (pg - 1) * perPage;
|
| var slice = list.slice(start, start + perPage);
|
|
|
| if (!list.length) {
|
| grid.innerHTML = '<div class="ss-state"><i class="ti ti-search-off" aria-hidden="true"></i>No products found.</div>';
|
| count.innerHTML = '';
|
| return;
|
| }
|
|
|
| count.innerHTML = 'Showing <strong>' + (start + 1) + '-' + Math.min(start + perPage, list.length) + '</strong> of <strong>' + list.length + '</strong> products';
|
|
|
| var html = '';
|
| for (var i = 0; i < slice.length; i++) {
|
| var p = slice[i];
|
|
|
| var img = '';
|
| if (p.images && p.images.length > 0) {
|
| img = '<img src="' + p.images[0].src + '" alt="' + (p.images[0].alt || p.name) + '" loading="lazy">';
|
| } else {
|
| img = '<div class="ss-card-img-placeholder"><i class="ti ti-shirt" aria-hidden="true"></i></div>';
|
| }
|
|
|
| var priceHtml = '';
|
| if (p.on_sale && p.sale_price && p.regular_price) {
|
| priceHtml = '<span class="ss-now">£' + parseFloat(p.sale_price).toFixed(2) + '</span><span class="ss-was">£' + parseFloat(p.regular_price).toFixed(2) + '</span>';
|
| } else {
|
| priceHtml = '£' + parseFloat(p.price || p.regular_price || 0).toFixed(2);
|
| }
|
|
|
| var knownCat = null;
|
| if (p.categories) {
|
| for (var j = 0; j < p.categories.length; j++) {
|
| if (CAT_NAMES[p.categories[j].slug]) {
|
| knownCat = p.categories[j];
|
| break;
|
| }
|
| }
|
| }
|
|
|
| var catBadge = knownCat ? '<div class="ss-badge-cat">' + CAT_NAMES[knownCat.slug] + '</div>' : '';
|
| var catLabel = knownCat ? '<div class="ss-card-cat-label">' + CAT_NAMES[knownCat.slug] + '</div>' : '';
|
| var saleBadge = p.on_sale ? '<div class="ss-badge-sale">Sale</div>' : '';
|
|
|
| html += '<a class="ss-card" href="' + p.permalink + '">';
|
| html += '<div class="ss-card-img-wrap">' + img + saleBadge + catBadge + '</div>';
|
| html += '<div class="ss-card-body">' + catLabel;
|
| html += '<div class="ss-card-name">' + p.name + '</div>';
|
| html += '<div class="ss-card-price">' + priceHtml + '</div>';
|
| html += '</div>';
|
| html += '<div class="ss-card-footer"><span class="ss-card-btn">View Product</span></div>';
|
| html += '</a>';
|
| }
|
|
|
| grid.innerHTML = html;
|
| }
|
|
|
| function renderPager(total) {
|
| var pages = Math.ceil(total / perPage);
|
| var nav = document.getElementById('ss-pagination');
|
| if (pages <= 1) { nav.innerHTML = ''; return; }
|
|
|
| var html = '';
|
| html += '<button class="ss-page-btn" onclick="ssPage(' + (pg - 1) + ')"' + (pg === 1 ? ' disabled' : '') + '><i class="ti ti-chevron-left" aria-hidden="true"></i></button>';
|
|
|
| for (var i = 1; i <= pages; i++) {
|
| if (i === 1 || i === pages || (i >= pg - 2 && i <= pg + 2)) {
|
| html += '<button class="ss-page-btn' + (i === pg ? ' active' : '') + '" onclick="ssPage(' + i + ')">' + i + '</button>';
|
| } else if (i === pg - 3 || i === pg + 3) {
|
| html += '<span class="ss-dots">...</span>';
|
| }
|
| }
|
|
|
| html += '<button class="ss-page-btn" onclick="ssPage(' + (pg + 1) + ')"' + (pg === pages ? ' disabled' : '') + '><i class="ti ti-chevron-right" aria-hidden="true"></i></button>';
|
| nav.innerHTML = html;
|
| }
|
|
|
| function showError(msg) {
|
| var box = document.getElementById('ss-error');
|
| box.textContent = msg;
|
| box.style.display = 'block';
|
| }
|
|
|
| window.ssFilter = ssFilter;
|
|
|
| window.ssCat = function(slug, btn) {
|
| activeCat = slug;
|
| pg = 1;
|
| var pills = document.querySelectorAll('.ss-pill');
|
| for (var i = 0; i < pills.length; i++) { pills[i].classList.remove('active'); }
|
| btn.classList.add('active');
|
| ssFilter();
|
| };
|
|
|
| window.ssPage = function(n) {
|
| pg = n;
|
| ssFilter();
|
| var top = document.getElementById('ss-shop');
|
| if (top) { window.scrollTo({ top: top.offsetTop - 20, behavior: 'smooth' }); }
|
| };
|
|
|
| loadPage(1);
|
|
|
| })();
|
| </script>
|
| |
| |
Comments