1 2<!-- FPK --><!DOCTYPE html> 3<html lang="en"> 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 <title>Jewellery</title> 8 <link rel="preconnect" href="https://fonts.googleapis.com"> 9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 10 <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"> 11 <link rel="stylesheet" href="/memorials-online/shop/css/style.css?1751537884" type="text/css"> 12 <link rel="stylesheet" href="/memorials-online/shop/thirdparty/fontawesome-pro-6.2.0-web/css/all.min.css" type="text/css"> 13
13<script src="https://cdn-ukwest.onetrust.com/scripttemplates/otSDKStub.js" type="text/javascript" charset="UTF-8" data-domain-script="01951e80-9919-7f6b-99f0-375ccbc591dc"></script>
13 14
14<script type="text/javascript"> 15 function OptanonWrapper() { } 16 </script>
16 17
17<script src="/memorials-online/shop/js/loading.js"></script>
17 18
18<script src="/memorials-online/shop/js/components-v2.js"></script>
18 19
19<script src="/memorials-online/shop/thirdparty/alpinejs.min.js" defer></script>
19 20 </head> 21 <body> 22 23<div class="bg-[#363C4B]"> 24 25 <div x-data="{ open: false }" @keydown.window.escape="open = false"> 26 <!-- Mobile menu --> 27 28 <div x-show="open" class="fixed inset-0 flex z-40 lg:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state." x-ref="dialog" aria-modal="true"> 29 30 <div x-show="open" x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." class="fixed inset-0 bg-black bg-opacity-25" @click="open = false" aria-hidden="true"> 31 </div> 32 33 <div x-show="open" x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" x-description="Off-canvas menu, show/hide based on off-canvas menu state." class="relative max-w-xs w-full bg-white shadow-xl pb-12 flex flex-col overflow-y-auto"> 34 <div class="px-4 pt-5 pb-2 flex"> 35 <button type="button" class="-m-2 p-2 rounded-md inline-flex items-center justify-center text-gray-400" @click="open = false"> 36 <span class="sr-only">Close menu</span> 37 <svg class="h-6 w-6" x-description="Heroicon name: outline/x" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> 38 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> 39 </svg> 40 </button> 41 </div> 42 43 44 <div class="py-6 px-4 space-y-6"> 45 <div class="flow-root"> 46 <a href="/memorials-online/shop/casket/" class="-m-2 p-2 block font-medium text-gray-900">Casket</a> 47 </div> 48 <div class="flow-root"> 49 <a href="/memorials-online/shop/jewellery/" class="-m-2 p-2 block font-medium text-gray-900">Jewellery</a> 50 </div> 51 <div class="flow-root"> 52 <a href="/memorials-online/shop/keepsake/" class="-m-2 p-2 block font-medium text-gray-900">Keepsake</a> 53 </div> 54 <div class="flow-root"> 55 <a href="/memorials-online/shop/scattering/" class="-m-2 p-2 block font-medium text-gray-900">Scattering</a> 56 </div> 57 <div class="flow-root"> 58 <a href="/memorials-online/shop/urn/" class="-m-2 p-2 block font-medium text-gray-900">Urn</a> 59 </div> 60 </div> 61 62 63 </div> 64 65 </div> 66 67 <header class="relative"> 68 <nav aria-label="Top"> 69 <!-- Secondary navigation --> 70 <div> 71 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 72 <div> 73 <div class="h-24 flex items-center justify-between"> 74 <!-- Logo (lg+) --> 75 <div class="hidden lg:flex-1 lg:flex lg:items-center"> 76 <a href="/"> 77 <span class="sr-only">Westerleigh Group</span> 78 <img class="w-auto" src="https://www.westerleighgroup.co.uk/files/logos/logoforestpark.png" alt=""> </a> 79 </div> 80 81 82 <!-- Mobile menu and search (lg-) --> 83 <div class="flex items-center lg:hidden mr-3"> 84 <button type="button" x-description="Mobile menu toggle, controls the 'mobileMenuOpen' state." class="-ml-2 bg-white p-2 rounded-md text-gray-400" @click="open = true"> 85 <span class="sr-only">Open menu</span> 86 <svg class="h-6 w-6" x-description="Heroicon name: outline/menu" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> 87 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> 88 </svg> 89 </button> 90 </div> 91 92 <!-- Logo (lg-) --> 93 <a href="/" class="lg:hidden">
94 <span class="sr-only">Westerleigh Group</span> 95 <img src="https://www.westerleighgroup.co.uk/files/logos/logoforestpark.png" alt="" class="h-10 w-auto"> </a> 96 97 <div class="flex-1 flex items-center justify-end gap-2"> 98 <a href="/memorials-online/shop/search/" class="inline-block align-middle py-2 px-6 border border-transparent shadow-sm text-sm font-medium text-white bg-[#5BCFE4] hover:bg-[#24BFDB] focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-full items-center transition-all lh"><span class="hidden md:inline">Search</span><i class="fa-solid fa-search text-white md:ml-2"></i></a> 99 <a href="/memorials-online/shop/portal/" class="inline-block align-middle py-2 px-6 border border-transparent shadow-sm text-sm font-medium text-white bg-[#5BCFE4] hover:bg-[#24BFDB] focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-full items-center transition-all lh"><span class="hidden md:inline">Have an account? Login</span><i class="fa-solid fa-house text-white md:ml-2"></i></a> 100 <a href="/memorials-online/shop/basket/" class="inline-block align-middle py-2 px-6 border border-transparent shadow-sm text-sm font-medium text-white bg-[#5BCFE4] hover:bg-[#24BFDB] focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-full items-center transition-all lh"><span class="hidden md:inline">0 Items in Basket</span><i class="fa-solid fa-basket-shopping text-white md:ml-2"></i></a> 101 </div> 102 </div> 103 </div> 104 </div> 105 </div> 106 </nav> 107 </header> 108 </div> 109 110 </div> 111 112 <div class="bg-white"> 113 <div x-data="{ open: false }" @keydown.window.escape="open = false"> 114 <!-- Mobile filter dialog --> 115 116 <div x-show="open" class="fixed inset-0 flex z-40 lg:hidden" x-description="Off-canvas filters for mobile, show/hide based on off-canvas filters state." x-ref="dialog" aria-modal="true"> 117 118 <div x-show="open" x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." class="fixed inset-0 bg-black bg-opacity-25" @click="open = false" aria-hidden="true"> 119 </div> 120 121 122 <div x-show="open" x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" x-description="Off-canvas menu, show/hide based on off-canvas menu state." class="ml-auto relative max-w-xs w-full h-full bg-white shadow-xl py-4 pb-12 flex flex-col overflow-y-auto"> 123 <div class="px-4 flex items-center justify-between"> 124 <h2 class="text-lg font-medium text-gray-900">Filters</h2> 125 <button type="button" class="-mr-2 w-10 h-10 bg-white p-2 rounded-md flex items-center justify-center text-gray-400" @click="open = false"> 126 <span class="sr-only">Close menu</span> 127 <svg class="h-6 w-6" x-description="Heroicon name: outline/x" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> 128 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> 129</svg> 130 </button> 131 </div> 132 133 <!-- Filters --> 134 <form class="mt-4 border-t border-gray-200"> 135 <h3 class="sr-only">Categories</h3> 136 <ul role="list" class="font-medium text-gray-900 px-2 py-3"> 137 138 <li> 139 <a href="/memorials-online/shopnode://" class="block px-2 py-3"> 140 Bracelet </a> 141 </li> 142 <li> 143 <a href="/memorials-online/shopnode://" class="block px-2 py-3"> 144 Chain </a> 145 </li> 146 <li> 147 <a href="/memorials-online/shopnode://" class="block px-2 py-3"> 148 Charm Bead </a> 149 </li> 150 <li> 151 <a href="/memorials-online/shopnode://" class="block px-2 py-3"> 152 Cufflinks </a> 153 </li> 154 <li> 155 <a href="/memorials-online/shopnode://" class="block px-2 py-3"> 156 Earrings </a> 157 </li> 158 <li> 159 <a href="/memorials-online/shopnode://" class="block px-2 py-3"> 160 Element </a> 161 </li> 162 <li> 163 <a href="/memorials-online/shopnode://" class="block px-2 py-3"> 164 Glass Locket </a> 165 </li> 166 <li> 167 <a href="/memorials-online/shopnode://" class="block px-2 py-3"> 168 Necklace </a> 169 </li> 170 <li> 171 <a href="/memorials-online/shopnode://" class="block px-2 py-3"> 172 Pendant </a> 173 </li> 174 <li> 175 <a href="/memorials-online/shopnode://" class="block px-2 py-3"> 176 Ring </a> 177 </li> 178 <li> 179 <a href="/memorials-online/shopnode://" class="block px-2 py-3"> 180 <i class="fa-solid fa-chevron-left mr-2"></i>Back (All Products) </a> 181 </li> 182 183 </ul> 184 185 <div x-data="{ open: false }" class="border-t border-gray-200 px-4 py-6"> 186 <h3 class="-mx-2 -my-3 flow-root"> 187 <button type="button" x-description="Expand/collapse section button" class="px-2 py-3 bg-white w-full flex items-center justify-between text-gray-400 hover:text-gray-500" aria-controls="filter-section-mobile-2" @click="open = !open" aria-expanded="false" x-bind:aria-expanded="open.toString()">
188 <span class="font-medium text-gray-900"> 189 Material 190 </span> 191 <span class="ml-6 flex items-center"> 192 <svg class="h-5 w-5" x-description="Expand icon, show/hide based on section open state. 193 194Heroicon name: solid/plus-sm" x-show="!(open)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 195 <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path> 196</svg> 197 <svg class="h-5 w-5" x-description="Collapse icon, show/hide based on section open state. 198 199Heroicon name: solid/minus-sm" x-show="open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 200 <path fill-rule="evenodd" d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z" clip-rule="evenodd"></path> 201</svg> 202 </span> 203 </button> 204 </h3> 205 <div class="pt-6" x-description="Filter section, show/hide based on section state." id="filter-section-mobile-2" x-show="open"> 206 <div class="space-y-6"> 207 208 <div class="flex items-center"> 209 <input id="filter-mobile-size-0" name="size[]" value="2l" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-[#D5A844] focus:ring-[#d9b157]"> 210 <label for="filter-mobile-size-0" class="ml-3 min-w-0 flex-1 text-gray-500"> 211 2L 212 </label> 213 </div> 214 215 <div class="flex items-center"> 216 <input id="filter-mobile-size-1" name="size[]" value="6l" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-[#D5A844] focus:ring-[#d9b157]"> 217 <label for="filter-mobile-size-1" class="ml-3 min-w-0 flex-1 text-gray-500"> 218 6L 219 </label> 220 </div> 221 222 <div class="flex items-center"> 223 <input id="filter-mobile-size-2" name="size[]" value="12l" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-[#D5A844] focus:ring-[#d9b157]"> 224 <label for="filter-mobile-size-2" class="ml-3 min-w-0 flex-1 text-gray-500"> 225 12L 226 </label> 227 </div> 228 229 <div class="flex items-center"> 230 <input id="filter-mobile-size-3" name="size[]" value="18l" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-[#D5A844] focus:ring-[#d9b157]"> 231 <label for="filter-mobile-size-3" class="ml-3 min-w-0 flex-1 text-gray-500"> 232 18L 233 </label> 234 </div> 235 236 <div class="flex items-center"> 237 <input id="filter-mobile-size-4" name="size[]" value="20l" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-[#D5A844] focus:ring-[#d9b157]"> 238 <label for="filter-mobile-size-4" class="ml-3 min-w-0 flex-1 text-gray-500"> 239 20L 240 </label> 241 </div> 242 243 <div class="flex items-center"> 244 <input id="filter-mobile-size-5" name="size[]" value="40l" type="checkbox" checked="" class="h-4 w-4 border-gray-300 rounded text-[#D5A844] focus:ring-[#d9b157]"> 245 <label for="filter-mobile-size-5" class="ml-3 min-w-0 flex-1 text-gray-500"> 246 40L 247 </label> 248 </div> 249 250 </div> 251 </div> 252 </div> 253 254 </form> 255 </div> 256 257 </div> 258 259 260 <main> 261 262 <nav class="bg-[#D0D7DC] mt-2" aria-label="Breadcrumb"> 263 <div class="max-w-2xl mx-auto py-2 px-4 sm:px-6 lg:max-w-7xl lg:px-8"> 264 <ol role="list" class="flex items-center space-x-4"> 265 <li> 266 <div> 267 <a href="/memorials-online/" class="text-[#363C4B] hover:text-[#D5A844]"> 268 <!-- Heroicon name: solid/home --> 269 <svg class="flex-shrink-0 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 270 <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" /> 271 </svg>
272 <span class="sr-only">Home</span> 273 </a> 274 </div> 275 </li> 276 277 <li> 278 <div class="flex items-center"> 279 <!-- Heroicon name: solid/chevron-right --> 280 <svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 281 <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /> 282 </svg> 283 <a href="/memorials-online/shop/jewellery/" class="ml-4 text-sm font-medium text-[#363C4B] hover:text-[#D5A844]">Jewellery</a> 284 </div> 285 </li> </ol> 286 </div> 287 </nav> 288 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 289 290 <div x-data="products"> 291
291<script> 292 document.addEventListener('alpine:init', () => { 293 Alpine.store('filters', { 294 show: true 295 }); 296 }); 297 </script>
297 298 <div class="z-10 flex justify-between pt-16 pb-6 border-b border-gray-200"> 299 <h1 class="text-4xl font-extrabold tracking-tight text-gray-900" x-text="name"></h1> 300 <button @click="$store.filters.show = !$store.filters.show" class="lg:hidden py-2 px-6 border border-transparent shadow-sm text-sm font-medium text-white bg-[#5BCFE4] hover:bg-[#24BFDB] focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-full items-center transition-all lh"><i class="fa-solid fa-filter text-white mr-2"></i><span x-text="$store.filters.show ? 'Hide Filters' : 'Show Filters'"></span></button> 301 </div> 302 303 <section aria-labelledby="products-heading" class="pt-6 pb-24"> 304 <h2 id="products-heading" class="sr-only">Products</h2> 305 306 <div class="grid grid-cols-1 lg:grid-cols-4 gap-x-8 gap-y-10"> 307 <!-- Filters --> 308 <form x-show="$store.filters.show"> 309 310 <div x-data="{ open: false }" class="border-b border-gray-200 py-6"> 311 <h3 class="-my-3 flow-root"> 312 <button type="button" x-description="Expand/collapse section button" class="py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400 hover:text-gray-500" aria-controls="filter-section-0" @click="open = !open" aria-expanded="false" x-bind:aria-expanded="open.toString()"> 313 <span class="font-medium text-gray-900"> 314 Price Range 315 </span> 316 <span class="ml-6 flex items-center"> 317 <svg class="h-5 w-5" x-description="Expand icon, show/hide based on section open state. Heroicon name: solid/plus-sm" x-show="!(open)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 318 <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path> 319 </svg> 320 <svg class="h-5 w-5" x-description="Collapse icon, show/hide based on section open state. Heroicon name: solid/minus-sm" x-cloak x-show="open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 321 <path fill-rule="evenodd" d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z" clip-rule="evenodd"></path> 322 </svg> 323 </span> 324 </button> 325 </h3> 326 <div class="pt-6" x-description="Filter section, show/hide based on section state." x-cloak x-show="open"> 327 <style> 328 input[type=range].slider { 329 -webkit-appearance: none; 330 -moz-appearance: none; 331 appearance: none; 332 background: transparent; 333 pointer-events: none; 334 } 335 input[type=range].slider::-webkit-slider-thumb { 336 -webkit-appearance: none; 337 appearance: none; 338 height: 16px; 339 width: 16px; 340 border-radius: 50%; 341 background: #4B5563; 342 cursor: pointer; 343 pointer-events: auto; 344 border: 2px solid white; 345 box-shadow: 0 0 1px rgba(0,0,0,0.3); 346 margin-top: -7px; 347 } 348 input[type=range].slider::-moz-range-thumb { 349 height: 16px; 350 width: 16px; 351 border-radius: 50%; 352 background: #4B5563; 353 cursor: pointer; 354 pointer-events: auto; 355 border: 2px solid white; 356 box-shadow: 0 0 1px rgba(0,0,0,0.3); 357 } 358 input[type=range].slider::-webkit-slider-runnable-track { 359 height: 2px; 360 background: transparent; 361 } 362 input[type=range].slider::-moz-range-track { 363 height: 2px; 364 background: transparent; 365 } 366 </style> 367 368 <div class="flex justify-between">
369 <span class="text-sm text-gray-800" x-text="`£${fmin}`"></span> 370 <span class="text-sm text-gray-800" x-text="`£${fmax}`"></span> 371 </div> 372 373 <div class="relative h-8"> 374 <div class="absolute top-1/2 transform -translate-y-1/2 w-full h-2 bg-gray-300 rounded-full z-0"></div> 375 <input type="range" min="0" :max="max" step="10" x-model="fmin" @input="adjustMin" @mouseup="reset" class="slider absolute top-0 w-full h-2 appearance-none bg-transparent z-10 border-none shadow-none"> 376 <input type="range" min="0" :max="max" step="10" x-model="fmax" @input="adjustMax" @mouseup="reset" class="slider absolute top-0 w-full h-2 appearance-none bg-transparent z-20 border-none shadow-none"> 377 </div> 378 </div> 379 </div> 380 381 <div x-data="{ open: false }" class="border-b border-gray-200 py-6"> 382 <h3 class="-my-3 flow-root"> 383 <button type="button" x-description="Expand/collapse section button" class="py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400 hover:text-gray-500" aria-controls="filter-section-0" @click="open = !open" aria-expanded="false" x-bind:aria-expanded="open.toString()"> 384 <span class="font-medium text-gray-900"> 385 Sort By 386 </span> 387 <span class="ml-6 flex items-center"> 388 <svg class="h-5 w-5" x-description="Expand icon, show/hide based on section open state. Heroicon name: solid/plus-sm" x-show="!(open)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 389 <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path> 390 </svg> 391 <svg class="h-5 w-5" x-description="Collapse icon, show/hide based on section open state. Heroicon name: solid/minus-sm" x-cloak x-show="open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 392 <path fill-rule="evenodd" d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z" clip-rule="evenodd"></path> 393 </svg> 394 </span> 395 </button> 396 </h3> 397 <div class="pt-6" x-description="Filter section, show/hide based on section state." x-cloak x-show="open"> 398 <select x-model="sort" @change="reset"> 399 <option value="default">Default</option> 400 <option value="low">Price (Low to High)</option> 401 <option value="high">Price (High to Low)</option> 402 </select> 403 </div> 404 </div> 405 406 <h3 class="sr-only">Categories</h3> 407 <ul role="list" class="text-sm font-medium text-gray-900 space-y-4 pb-6 border-b border-gray-200"> 408 409 <template x-for="(category, index) in categories"> 410 <li> 411 <a @click.prevent="reset(category.url)" x-html="category.name" href="#"></a> 412 </li> 413 </template> 414 415 </ul> 416 417 <div x-data="{ open: false }" class="border-b border-gray-200 py-6" x-cloak x-show="filters.materials.length"> 418 <h3 class="-my-3 flow-root"> 419 <button type="button" x-description="Expand/collapse section button" class="py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400 hover:text-gray-500" aria-controls="filter-section-0" @click="open = !open" aria-expanded="false" x-bind:aria-expanded="open.toString()"> 420 <span class="font-medium text-gray-900"> 421 Materials 422 </span> 423 <span class="ml-6 flex items-center"> 424 <svg class="h-5 w-5" x-description="Expand icon, show/hide based on section open state. Heroicon name: solid/plus-sm" x-s
424how="!(open)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 425 <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path> 426 </svg> 427 <svg class="h-5 w-5" x-description="Collapse icon, show/hide based on section open state. Heroicon name: solid/minus-sm" x-cloak x-show="open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 428 <path fill-rule="evenodd" d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z" clip-rule="evenodd"></path> 429 </svg> 430 </span> 431 </button> 432 </h3> 433 <div class="pt-6" x-description="Filter section, show/hide based on section state." id="filter-section-0" x-cloak x-show="open"> 434 <div class="space-y-4"> 435 436 <template x-for="(filter, index) in filters.materials"> 437 <div class="flex items-center"> 438 <input x-model="materials" @change="reset" :id="'filter-material-' + index" name="materials[]" :value="filter" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-[#D5A844] focus:ring-[#d9b157]"> 439 <label x-text="filter" :for="'filter-material-' + index" class="ml-3 text-sm text-gray-600"></label> 440 </div> 441 </template> 442 443 </div> 444 </div> 445 </div> 446 447 <div x-data="{ open: false }" class="border-b border-gray-200 py-6" x-cloak x-show="filters.colours.length"> 448 <h3 class="-my-3 flow-root"> 449 <button type="button" x-description="Expand/collapse section button" class="py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400 hover:text-gray-500" aria-controls="filter-section-0" @click="open = !open" aria-expanded="false" x-bind:aria-expanded="open.toString()"> 450 <span class="font-medium text-gray-900"> 451 Colours 452 </span> 453 <span class="ml-6 flex items-center"> 454 <svg class="h-5 w-5" x-description="Expand icon, show/hide based on section open state. Heroicon name: solid/plus-sm" x-show="!(open)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 455 <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path> 456 </svg> 457 <svg class="h-5 w-5" x-description="Collapse icon, show/hide based on section open state. Heroicon name: solid/minus-sm" x-cloak x-show="open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 458 <path fill-rule="evenodd" d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z" clip-rule="evenodd"></path> 459 </svg> 460 </span> 461 </button> 462 </h3> 463 <div class="pt-6" x-description="Filter section, show/hide based on section state." id="filter-section-0" x-cloak x-show="open"> 464 <div class="space-y-4"> 465 466 <template x-for="(filter, index) in filters.colours"> 467 <div class="flex items-center"> 468 <input x-model="colours" @change="reset" :id="'filter-colour-' + index" name="colours[]" :value="filter" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-[#D5A844] focus:ring-[#d9b157]"> 469 <label x-text="filter" :for="'filter-colour-' + index" class="ml-3 text-sm text-gray-600"></label> 470 </div> 471 </template> 472 473 </div> 474 </div> 475 </div> 476 477 </form> 478 479 <!-- Product grid --> 480 <div class="lg:col-span-3"> 481 482 <div> 483 <div x-ref="results" class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"></div> 484 <div x-cloak x-show="noresults" class="flex flex-col items-center gap-6 mt-8"> 485 <p>No products could be found for the selected category and filters. Please try different options.
485</p> 486 <button @click="reset_filters" class="py-2 px-6 border border-transparent shadow-sm text-sm font-medium text-white bg-[#5BCFE4] hover:bg-[#24BFDB] focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-full items-center transition-all lh">Reset Filters</button> 487 </div> 488 <div x-cloak x-show="more" class="flex justify-center mt-8"> 489 <button @click="load" class="py-2 px-6 border border-transparent shadow-sm text-sm font-medium text-white bg-[#5BCFE4] hover:bg-[#24BFDB] focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-full items-center transition-all lh">Load More</button> 490 </div> 491 </div> 492 493 </div> 494 </div> 495 </section> 496 </div> 497 </div> 498 </main> 499 </div> 500 </div> 501
502<script type="text/javascript"> 503document.addEventListener("alpine:init", () => { 504 Alpine.data("products", () => ({ 505 limit: 20, 506 offset: 0, 507 name: "", 508 categories: [], 509 filters: {materials:[],colours:[]}, 510 materials: [], 511 colours: [], 512 more: false, 513 noresults: false, 514 min: 0, 515 max: 10000, 516 fmin: 0, 517 fmax: 10000, 518 sort: "default", 519 adjustMin() { 520 if (parseInt(this.fmin) >= parseInt(this.fmax) - 50) { 521 this.fmin = parseInt(this.fmax) - 50; 522 } 523 }, 524 adjustMax() { 525 if (parseInt(this.fmax) <= parseInt(this.fmin) + 50) { 526 this.fmax = parseInt(this.fmin) + 50; 527 } 528 }, 529 async init() { 530 this.load(); 531 }, 532 async reset_filters() { 533 this.materials = []; 534 this.colours = []; 535 this.fmin = 0; 536 this.fmax = 10000; 537 this.sort = "default"; 538 this.reset(); 539 }, 540 async reset(url) { 541 if (typeof url == "string") 542 window.history.pushState(null, "", "/memorials-online/shop/"+url+"/"); 543 this.limit = 20; 544 this.offset = 0; 545 this.more = false; 546 this.noresults = false; 547 this.$refs.results.innerHTML = ""; 548 this.load(); 549 }, 550 async load() { 551 let response = await fetch(location.href, {method:"POST", body:JSON.stringify({limit:this.limit,offset:this.offset,materials:this.materials,colours:this.colours,min:this.fmin,max:this.fmax,sort:this.sort})}); 552 let json = await response.json(); 553 this.name = json.category; 554 this.categories = json.categories; 555 this.$refs.results.innerHTML += json.products; 556 this.filters = json.filters; 557 this.offset += json.count; 558 this.more = json.more; 559 this.noresults = json.products.length == 0; 560 this.min = json.min; 561 this.max = json.max; 562 if (this.fmax == 10000 || this.fmax > this.max) 563 this.fmax = this.max; 564 } 565 })); 566}); 567</script>
567 <footer class="bg-[#D0D7DC] mt-12"> 568 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8"> 569 <div class="grid grid-cols-3 md:grid-cols-4 gap-2"> 570 <div class="flex flex-col gap-2"> 571 <p class="font-semibold">Here to help</p> 572 <a href="https://www.forestparkcrematorium.co.ukmemorials-online/returns-and-refunds.php" target="_blank" class="text-base text-[#363C4B] hover:text-[#D5A844]">Returns & Refunds</a> 573 <a href="https://www.forestparkcrematorium.co.ukcontact-map.php" target="_blank" class="text-base text-[#363C4B] hover:text-[#D5A844]">Contact Us</a> 574 <a href="https://www.forestparkcrematorium.co.ukcompany-info.php" target="_blank" class="text-base text-[#363C4B] hover:text-[#D5A844]">Company Info</a> 575 </div> 576 577 <div class="flex flex-col gap-2"> 578 <p class="font-semibold">Privacy & legal</p> 579 <a href="https://www.forestparkcrematorium.co.ukmemorials-online/terms-and-conditions.php" target="_blank" class="text-base text-[#363C4B] hover:text-[#D5A844]">Orders Terms & Conditions</a> 580 <a href="https://www.forestparkcrematorium.co.ukcookies.php" target="_blank" class="text-base text-[#363C4B] hover:text-[#D5A844]">Cookies</a> 581 <a href="https://www.forestparkcrematorium.co.ukprivacy-policy.php" target="_blank" class="text-base text-[#363C4B] hover:text-[#D5A844]">Privacy Policy</a> 582 </div> 583 584 <div> 585 <p class="font-semibold">Social</p> 586 <div class="flex gap-2 text-2xl"> 587 <a href="https://www.linkedin.com/company/westerleigh-group" target="_blank" class="text-[#363C4B] hover:text-[#D5A844]"><i class="fa-brands fa-linkedin"></i></a> 588 <a href="https://www.facebook.com/ForestParkCemeteryCrematorium" target="_blank" class="text-[#363C4B] hover:text-[#D5A844]"><i class="fa-brands fa-facebook"></i></a> 589 </div> 590 </div> 591 592 <div class="col-span-3 md:col-span-1"> 593 <p class="font-semibold text-center">Our Group</p> 594 <div class="flex flex-row text-sm gap-2"> 595 <div class="flex flex-col items-center text-center gap-2"> 596 <img class="h-10" src="/memorials-online/shop/bas/footer_grouplogo.png" alt="Westerleigh Group"> 597 <p>Over 70,000 cremations performed each year</p> 598 </div> 599 <div class="flex flex-col items-center text-center gap-2"> 600 <img class="h-10" src="/memorials-online/shop/bas/footer_distinctlogo.png" alt="Distinct Cremations"> 601 <p>For direct cremations and funeral plans</p> 602 </div> 603 </div> 604 </div> 605 </div> 606 607 <div class="grid grid-cols-2 md:grid-cols-6 text-sm my-12 gap-2"> 608 <div class="flex flex-col items-center text-center gap-2"> 609 <img class="h-10" src="/memorials-online/shop/bas/ptnr_saif.png" alt="Partner"> 610 <p>Associate Member of</p> 611 </div> 612 613 <div class="flex flex-col items-center text-center gap-2"> 614 <img class="h-10" src="/memorials-online/shop/bas/ptnr_nafd.png" alt="Partner"> 615 <p>Supplier Member of</p> 616 </div> 617 618 <div class="flex flex-col items-center text-center gap-2"> 619 <img class="h-10" src="/memorials-online/shop/bas/ptnr_fbca.png" alt="Partner"> 620 <p>Regularly inspected and colleague training accredited by</p> 621 </div> 622 623 <div class="flex flex-col items-center text-center gap-2"> 624 <img class="h-10" src="/memorials-online/shop/bas/ptnr_scotgov.png" alt="Partner"> 625 <p>Regularly inspected by</p> 626 </div> 627 628 <div class="flex flex-col items-center text-center gap-2"> 629 <img class="h-10" src="/memorials-online/shop/bas/ptnr_fsa.png" alt="Partner"> 630 <p>Member of</p> 631 </div> 632 633 <div class="flex flex-col items-center text-center gap-2"> 634 <img class="h-10" src="/memorials-online/shop/bas/ptnr_iccm.png" alt="Partner"> 635 <p>Colleague training accredited by</p> 636 </div> 637 </div> 638 639 <hr class="py-4 border-[#363C4B]"> 640 641 <p class="text-sm">© Westerleigh Group Ltd 2026 - <a href="/memorials-online/shop/terms-and-conditions/">Website Terms & Conditions</a></p> 642 643 </div> 644 645</footer> 646 <!-- --> 647 </body> 648</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.