PageSourceSearch

https://www.forestparkcrematorium.co.uk/memorials-online/shop/jewellery/

html forestparkcrematorium.co.uk collected 2026-09-26 18:21:44 UTC 39,044 bytes, 648 lines download raw bytes

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 &amp; 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 &amp; 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 &amp; 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">&copy; Westerleigh Group Ltd 2026 - <a href="/memorials-online/shop/terms-and-conditions/">Website Terms &amp; 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.