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

Diamond grinding point, Electroplated Bond, round cone, Ø 3.4 / 2.6

Diamond grinding point, Electroplated Bond, round cone, Ø 3.4 / 2.6

Diamond grinding point, solid carbide metal, galvanic bonding, cylinder, shank Ø 3 mm, tl 55 mm

Diamond grinding point, solid carbide metal, galvanic bonding, cylinder, shank Ø 3 mm, tl 55 mm

Precision diamond grinding points, pointed cone, galvanic bonding, shank Ø 3 mm

Precision diamond grinding points, pointed cone, galvanic bonding, shank Ø 3 mm

Diamond grinding point, solid carbide metal, galvanic bonding, cylinder, shank Ø 3 mm, tl 40 mm

Diamond grinding point, solid carbide metal, galvanic bonding, cylinder, shank Ø 3 mm, tl 40 mm

Diamond grinding point, trapeze, front coated, galvanic bonding, shank Ø 2.35 mm

Diamond grinding point, trapeze, front coated, galvanic bonding, shank Ø 2.35 mm

Diamond grinding points with carbide metal shank, galvanic bonding, shank Ø 3 mm

Diamond grinding points with carbide metal shank, galvanic bonding, shank Ø 3 mm

Diamond grinding points, galvanic bonding, shank Ø 3 mm

Diamond grinding points, galvanic bonding, shank Ø 3 mm

Precision diamond grinding point, rounded cylinder, galvanic bonding, shank Ø 1.6 mm

Precision diamond grinding point, rounded cylinder, galvanic bonding, shank Ø 1.6 mm

Diamond grinding point, ball, lightly springy

Diamond grinding point, ball, lightly springy

Diamond grinding point, pointed cone, galvanic bonding, shank Ø 6 mm

Diamond grinding point, pointed cone, galvanic bonding, shank Ø 6 mm

Diamond grinding point, sphere, galvanic bonding, shank Ø 6 x 60 mm

Diamond grinding point, sphere, galvanic bonding, shank Ø 6 x 60 mm

Diamond pointed needle, 2.35 mm shaft, galvanically coated from joke.

Diamond pointed needle, 2.35 mm shaft, galvanically coated from joke.

Diamond grinding point, lens, galvanic bonding, shank Ø 2.35 mm

Diamond grinding point, lens, galvanic bonding, shank Ø 2.35 mm

Precision diamond grinding points, wheel, galvanic bonding, shank Ø 3 mm

Precision diamond grinding points, wheel, galvanic bonding, shank Ø 3 mm

Diamond grinding points with carbide metal shank, galvanic bonding, shank Ø 3 mm

Diamond grinding points with carbide metal shank, galvanic bonding, shank Ø 3 mm

Diamond lens shape, 2.35 mm shaft, galvanically coated from joke.

Diamond lens shape, 2.35 mm shaft, galvanically coated from joke.

Diamond point DIATIP, conical pointed, shank Ø 3 mm

Diamond point DIATIP, conical pointed, shank Ø 3 mm

Precision diamond grinding point, conical pointed, galvanic bonding, shank Ø 1.6 mm

Precision diamond grinding point, conical pointed, galvanic bonding, shank Ø 1.6 mm

Precision diamond grinding point, galvanic bonding,.,trapeze

Precision diamond grinding point, galvanic bonding,.,trapeze

Set diamond grinding points, vacuum brazed, shank Ø 6 mm

Set diamond grinding points, vacuum brazed, shank Ø 6 mm

Set diamond grinding points, vacuum brazed, shank Ø 3 mm

Set diamond grinding points, vacuum brazed, shank Ø 3 mm

Diamond wheel with front screw, 3.00 mm shaft, galvanically coated Di from joke.

Diamond wheel with front screw, 3.00 mm shaft, galvanically coated Di from joke.

Cone-shaped diamond with radius, 2.35 mm shaft, galvanically coated from joke.

Cone-shaped diamond with radius, 2.35 mm shaft, galvanically coated from joke.

Diamond wheel with side coating, 3.00 mm shaft, galvanically coated from joke.

Diamond wheel with side coating, 3.00 mm shaft, galvanically coated from joke.

Drop Diamond Point 3.00 mm shaft galvanically coated Diprofile

Drop Diamond Point 3.00 mm shaft galvanically coated Diprofile

DIPROFIL® diamond grinding point, cone, galvanic bonding, shank Ø 2.35 mm

DIPROFIL® diamond grinding point, cone, galvanic bonding, shank Ø 2.35 mm

Diamond grinding point set (10 pieces), shank Ø 6 mm

Diamond grinding point set (10 pieces), shank Ø 6 mm

Diamond wheel with round edge, 3.00 mm shaft, galvanically coated Dip from joke.

Diamond wheel with round edge, 3.00 mm shaft, galvanically coated Dip from joke.

Cylindrical diamond 3.00 mm shaft, galvanically coated Diprofil from joke.

Cylindrical diamond 3.00 mm shaft, galvanically coated Diprofil from joke.

Cone-shaped, half-round end diamond, 2.35 mm shaft, galvanically coated from joke.

Cone-shaped, half-round end diamond, 2.35 mm shaft, galvanically coated from joke.

DIPROFIL® diamond grinding point,Electroplated Bond,trapeze,Ø 2.4x3mm

DIPROFIL® diamond grinding point,Electroplated Bond,trapeze,Ø 2.4x3mm

Diamond wheel with front screw on 2.35 mm shaft, galvanically coated from joke.

Diamond wheel with front screw on 2.35 mm shaft, galvanically coated from joke.

32 out of 74 products