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         <!-- Custom Search Input -->
  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         <!-- Search Results Container -->
 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