Products

Error executing template "/Designs/Swift/Paragraph/Clerk_Search.cshtml" System.NullReferenceException: Object reference not set to an instance of an object. at CompiledRazorTemplates.Dynamic.RazorEngine_c8fb99e4548f451fb0756295a8e5c795.Execute() in D:\dynamicweb.net\Solutions\Dynamicweb\hctswift.cloud.dynamicweb-cms.com\files\Templates\Designs\Swift\Paragraph\Clerk_Search.cshtml:line 4 at RazorEngine.Templating.TemplateBase.RazorEngine.Templating.ITemplate.Run(ExecuteContext context, TextWriter reader) at RazorEngine.Templating.RazorEngineService.RunCompile(ITemplateKey key, TextWriter writer, Type modelType, Object model, DynamicViewBag viewBag) at RazorEngine.Templating.RazorEngineServiceExtensions.<>c__DisplayClass16_0.<RunCompile>b__0(TextWriter writer) at RazorEngine.Templating.RazorEngineServiceExtensions.WithWriter(Action`1 withWriter) at Dynamicweb.Rendering.RazorTemplateRenderingProvider.Render(Template template) at Dynamicweb.Rendering.TemplateRenderingService.Render(Template template) at Dynamicweb.Rendering.Template.RenderRazorTemplate()

1 @using Dynamicweb.Frontend 2 @{ 3 var area = PageView.Current().Area; 4 var clerkApiKey = area.Item["ClerkPublicKey"].ToString(); 5 } 6 7 <div class="search-container"> 8  9 <div class="search-wrapper"> 10 <span class="position-absolute top-0 icon-2 px-3 d-flex align-items-center h-100 search-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></span> 11 <input type="text" id="search-input" class="search-input ps-5" placeholder="Search here" /> 12 <button type="button" class="search-button"> 13 14 </button> 15 </div> 16 17  18 <div id="search-results" class="search-results-container"> 19 <span class="clerk" 20 data-template="@@search" 21 data-instant-search="#search-input" 22 data-instant-search-suggestions="4" 23 data-instant-search-categories="10" 24 data-instant-search-pages="5" 25 data-instant-search-positioning="left"/* IEVA */ 26 ></span> 27 </div> 28 </div> 29 30 <span class="clerk" 31 data-template="@@search" 32 data-instant-search="#search-input" 33 data-instant-search-suggestions="4" 34 data-instant-search-categories="10" 35 data-instant-search-pages="5" 36 data-instant-search-positioning="left"/* IEVA */ 37 ></span> 38 39 40 <script type="text/javascript"> 41 (function(w,d){ 42 var e=d.createElement('script');e.type='text/javascript';e.async=true; 43 e.src='https://cdn.clerk.io/clerk.js'; 44 var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s); 45 w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){ w.__clerk_q.push(arguments) }; 46 })(window,document); 47 48 // Wait for Clerk to be ready and inject the content 49 Clerk('config', { 50 key: '@clerkApiKey' 51 }); 52 53 54 </script> 55 <style>/* Basic Styles for the Search Input */ 56 .search-container { 57 position: relative; 58 max-width: 500px; 59 margin: 0 auto; 60 } 61 62 .search-wrapper { 63 display: flex; 64 align-items: center; 65 border: 1px solid #092B74; 66 padding: 5px; 67 border-radius: 25px; 68 height: 40px; 69 } 70 71 .search-input { 72 flex-grow: 1; 73 border: none; 74 padding: 10px; 75 font-size: 14px; 76 border-radius: 25px; 77 background: transparent; 78 color:#092B74; 79 outline: none; 80 max-height:4px; 81 } 82 83 .search-input::placeholder { 84 color: #092B74; 85 86 } 87 88 .search-button { 89 background-color: transparent; 90 border: none; 91 padding: 8px; 92 cursor: pointer; 93 } 94 95 .search-icon { 96 font-size: 16px; 97 color: #333; 98 } 99100 /* Styles for search results (suggestions, categories, pages) */ 101 .search-results-container { 102 margin-top: 15px; 103 position: absolute; 104 top: 100%; 105 left: 0; 106 width: 100%; 107 border: 1px solid #ddd; 108 border-radius: 5px; 109 background-color: #fff; 110 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 111 display: none; /* Initially hidden */ 112 } 113114 .search-results-container.visible { 115 display: block; 116 } 117118 .search-results-container .clerk-design-component-QVkGhAeL { 119 padding: 10px; 120 } 121122 .search-results-container .clerk-design-component-6MlOm05L { 123 margin-bottom: 10px; 124 } 125126 .search-results-container .clerk-design-component-6MlOm05L a { 127 text-decoration: none; 128 color: #333; 129 } 130131 .search-results-container .clerk-design-component-6MlOm05L a:hover { 132 color: #007bff; 133 } 134 .clerk-design-component-aDYXmLut{ 135 padding: 0; 136 margin-top:10px; 137 } 138 .clerk-design-component-uECOdk5X > div:first-child{ 139 justify-content: unset; 140 } 141 .clerk-design-component-ioS8mW9a > div:first-child{ 142 padding-left:0; 143 } 144 .highlight { 145146 border: 1px solid #6CB2DE !important 147148 } 149150151 @@media (min-width: 600px) and (max-width: 1024px) { 152 .clerk-design-component-uECOdk5X{ 153 margin: 0 auto; 154 } 155 .clerk-instant-search-visible{ 156 left: 0 !important; 157 right: 0; 158 } 159 } 160 /* Default theme (white menu) */ 161 .search-wrapper { 162 border: 1px solid #092B74; 163 background-color: white; 164 } 165 .search-input { 166 color: #092B74; 167 } 168 .search-input::placeholder { 169 color: #092B74; 170 } 171 .search-icon { 172 color: #092B74; 173 } 174175 /* Blue theme override */ 176 .blue-theme .search-wrapper { 177 border: 1px solid #ffffff; 178 background-color: #092B74; 179 } 180 .blue-theme .search-input { 181 color: #ffffff; 182 } 183 .blue-theme .search-input::placeholder { 184 color: rgba(255, 255, 255, 0.6); /* Lighter white for placeholder */ 185 } 186 .blue-theme .search-icon { 187 color: #ffffff; 188 } 189 .highlight { 190191192 } 193194 </style> 195 <script> 196 Clerk('on', 'rendered', function(content, data) { 197 (() => { 198 const SELECTORS = { 199 container: '#ioS8mW9a', 200 productCard: '.designs-card', 201 link: 'a', 202 searchInput: 'input[type="text"]' // Adjust if needed 203 }; 204205 if (window._keyNavHandler) { 206 document.removeEventListener('keydown', window._keyNavHandler); 207 } 208209 const container = document.querySelector(SELECTORS.container); 210 if (!container) { 211 console.error('Navigation: Container not found'); 212 return; 213 } 214215 const productCards = container.querySelectorAll(SELECTORS.productCard); 216 if (!productCards.length) { 217 console.warn('Navigation: No product cards found in container'); 218 return; 219 } 220221 const links = Array.from(productCards).map(card => card.querySelector(SELECTORS.link)).filter(Boolean); 222 if (!links.length) { 223 console.warn('Navigation: No selected elements found in container'); 224 return; 225 } 226227 console.info('Navigation: Found', links.length, 'elements'); 228 let currentIndex = 0; 229230 const highlightCard = (index) => { 231 productCards.forEach(card => card.classList.remove('highlight')); 232 if (productCards[index]) { 233 productCards[index].classList.add('highlight'); 234 } 235 }; 236237 highlightCard(currentIndex); 238239 function isInputFocused() { 240 const el = document.activeElement; 241 return el && el.tagName === 'INPUT' && el.type === 'text'; 242 } 243244 window._keyNavHandler = (e) => { 245 // Always allow typing in input, just handle arrows visually 246 if (!links.length || !isInputFocused()) return; 247248 if (e.key === 'ArrowDown') { 249 e.preventDefault(); 250 currentIndex = (currentIndex + 1) % links.length; 251 highlightCard(currentIndex); 252 } else if (e.key === 'ArrowUp') { 253 e.preventDefault(); 254 currentIndex = (currentIndex - 1 + links.length) % links.length; 255 highlightCard(currentIndex); 256 } else if (e.key === 'Enter') { 257 e.preventDefault(); 258 links[currentIndex].click(); 259 } 260 }; 261262 document.addEventListener('keydown', window._keyNavHandler); 263 })(); 264 }); 265 </script> 266267