1<!DOCTYPE html> 2<html lang="en"> 3 4<head>
vendor: 75 bytes, lines 4-7
4 5 6 7 <script async src="https://www.googletagmanager.com/gtag/js?id=
7G-7S01FXEE6H
vendor: 12 bytes, line 7
7"></script>
8<script>
vendor: 129 bytes, lines 9-12
9window.dataLayer = window.dataLayer || []; 10function gtag() { dataLayer.push(arguments);} 11gtag("js", new Date()); 12gtag("config", "
12G-7S01FXEE6H
vendor: 4 bytes, line 12
12");
13</script>
13 14 15 16 17 <meta charset="utf-8" /> 18 <title>Purchase A Gift Card</title> 19 <meta name="viewport" content="width=device-width, initial-scale=1" /> 20 <meta name="keywords" content="" /> 21 <meta name="description" content="" /> 22 <!-- Icons --> 23 <meta name="msapplication-TileColor" content="#1bb8de" /> 24 <meta name="msapplication-TileImage" content="/assets/branding/shop.runningcompany.com/ms-icon-144x144.png" /> 25 <meta name="theme-color" content="#8dc63f" /> 26 <meta property="og:title" content="Purchase A Gift Card Naperville Running" /> 27 <meta property="og:image" content="https://shop.runningcompany.com/assets/branding/shop.runningcompany.com/logo.png" /> 28 <meta property="og:description" content="" /> 29 <link rel="canonical" href="https://shop.runningcompany.com/giftcard" /> 30 <link rel="shortcut icon" id="appFavicon" href="/assets/branding/shop.runningcompany.com/favicon.ico" /> 31 <link rel="apple-touch-icon" id="appFaviconApple57" sizes="57x57" href="/assets/branding/shop.runningcompany.com/apple-icon-57x57.png" /> 32 <link rel="apple-touch-icon" id="appFaviconApple60" sizes="60x60" href="/assets/branding/shop.runningcompany.com/apple-icon-60x60.png" /> 33 <link rel="apple-touch-icon" id="appFaviconApple72" sizes="72x72" href="/assets/branding/shop.runningcompany.com/apple-icon-72x72.png" /> 34 <link rel="apple-touch-icon" id="appFaviconApple76" sizes="76x76" href="/assets/branding/shop.runningcompany.com/apple-icon-76x76.png" /> 35 <link rel="apple-touch-icon" id="appFaviconApple114" sizes="114x114" href="/assets/branding/shop.runningcompany.com/apple-icon-114x114.png" /> 36 <link rel="apple-touch-icon" id="appFaviconApple120" sizes="120x120" href="/assets/branding/shop.runningcompany.com/apple-icon-120x120.png" /> 37 <link rel="apple-touch-icon" id="appFaviconApple144" sizes="144x144" href="/assets/branding/shop.runningcompany.com/apple-icon-144x144.png" /> 38 <link rel="apple-touch-icon" id="appFaviconApple152" sizes="152x152" href="/assets/branding/shop.runningcompany.com/apple-icon-152x152.png" /> 39 <link rel="apple-touch-icon" id="appFaviconApple180" sizes="180x180" href="/assets/branding/shop.runningcompany.com/apple-icon-180x180.png" /> 40 <link rel="icon" type="image/png" id="appFavicon192" sizes="192x192" href="/assets/branding/shop.runningcompany.com/android-icon-192x192.png" /> 41 <link rel="icon" type="image/png" id="appFavicon32" sizes="32x32" href="/assets/branding/shop.runningcompany.com/favicon-32x32.png" /> 42 <link rel="icon" type="image/png" id="appFavicon96" sizes="96x96" href="/assets/branding/shop.runningcompany.com/favicon-96x96.png" /> 43 <link rel="icon" type="image/png" id="appFavicon16" sizes="16x16" href="/assets/branding/shop.runningcompany.com/favicon-16x16.png" /> 44 <!-- Font Preloading - Optimized for Performance --> 45 <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin> 46 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 47 <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap"> 48 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" media="print" onload="this.media='all'"> 49 <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap"></noscript> 50 <!-- Styles --> 51 <link href="/assets/styles/font-variables.css?v=1.2.0" rel="stylesheet" type="text/css" media="all" /> 52 <style>:root { --font-primary: "Nunito", "Open Sans", "Helvetica Neue", sans-serif; }</style> 53 <link href="/assets/admin/styles/spectrum.css?v=1.2.0" rel="stylesheet" type="text/css" media="all" /> 54 <link href="/assets/styles/bootstrap.css?v=1.2.0" rel="stylesheet" type="text/css" media="all"/> 55 <link href="/assets/styles/themify-icons.css?v=1.2.0" rel="stylesheet" type="text/css" media="all" /> 56 <link href="/assets/styles/flexslider.css?v=1.2.0" rel="stylesheet" type="text/css" media="all" /> 57 <link href="/assets/styles/theme.css?v=1.2.0" rel="stylesheet" type="text/css" media="all" /> 58 <link href="/assets/styles/custom.css?v=1.2.0" rel="stylesheet" type="text/css" media="all" /> 59 <link href="/assets/styles/runfree.css?v=1.2.0" rel="stylesheet" type="text/css" media="all" /> 60 <link href="/assets/styles/modal.css?v=1.2.0" rel="stylesheet" type="text/css" /> 61 <link href="/assets/styles/datetimepicker.css?v=1.2.0" rel="stylesheet" type="text/css" media="all" /> 62 <link href="/assets/styles/font-awesome.min.css?v=1.2.0" rel="stylesheet" type="text/css" media="all" /> 63 <link rel="stylesheet" href="/assets/styles/tooltips.css?v=1.2.0" rel="stylesheet" type="text/css" media="all" /> 64 <link href="/assets/styles/runfreefont.css?v=1.2.0" rel="stylesheet" type="text/css" media="all" /> 65 <link href="/assets/styles/search-overlay.css?v=1.2.0" rel="stylesheet" type="text/css" media="all" /> 66 <link href="/assets/branding/shop.runningcompany.com/branding.css?v=1.2.0" rel="stylesheet" type="text/css" media="all" /> 67
67<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
67 68
68<script> 69 // Universal tracking helper - supports both GTM and direct gtag 70 window.dataLayer = window.dataLayer || []; 71 function trackEvent(eventName, eventData) { 72 // Clear previous ecommerce object (GTM best practice) 73 dataLayer.push({ ecommerce: null }); 74 75 // Map UA field names to GA4 schema (keep both for store GTM compatibility) 76 if (eventData && eventData.items) { 77 eventData.items = eventData.items.map(function(item) { 78 var mapped = { 79 item_id: item.item_id || item.id, 80 item_name: item.item_name || item.name, 81 item_brand: item.item_brand || item.brand, 82 item_category: item.item_category || item.category, 83 item_variant: item.item_variant || item.variant, 84 item_list_name: item.item_list_name || item.list_name, 85 index: item.index != null ? item.index : item.list_position, 86 quantity: item.quantity, 87 price: item.price, 88 id: item.id, 89 name: item.name, 90 brand: item.brand, 91 category: item.category, 92 variant: item.variant, 93 list_name: item.list_name, 94 list_position: item.list_position 95 }; 96 if (item.affiliation) mapped.affiliation = item.affiliation; 97 return mapped; 98 }); 99 } 100 101 // Map legacy UA event names to GA4 equivalents 102 var ga4EventName = eventName; 103 if (eventName === 'checkout_progress') { 104 ga4EventName = 'add_shipping_info'; 105 } 106 107 // GTM format: push object with event property (sends both legacy and GA4 names) 108 var gtmData = { event: eventName }; 109 if (eventData) { 110 if (eventData.items) gtmData.ecommerce = eventData; 111 for (var key in eventData) { 112 if (eventData.hasOwnProperty(key)) gtmData[key] = eventData[key]; 113 } 114 } 115 dataLayer.push(gtmData); 116 117 // Also push GA4 event name if different (for GTM GA4 triggers) 118 if (ga4EventName !== eventName) { 119 dataLayer.push({ ecommerce: null }); 120 var ga4GtmData = { event: ga4EventName }; 121 if (eventData) { 122 if (eventData.items) ga4GtmData.ecommerce = eventData; 123 for (var key in eventData) { 124 if (eventData.hasOwnProperty(key)) ga4GtmData[key] = eventData[key]; 125 } 126 } 127 dataLayer.push(ga4GtmData); 128 } 129 130 // Direct gtag format (for stores using GA4 directly) - always use GA4 event name 131 if (typeof gtag === 'function') { 132 gtag('event', ga4EventName, eventData); 133 } 134 } 135 </script>
135 136 137 <style> 138 :root { 139 --primary: #8dc63f; 140 --primaryOpaque: rgba(141,198,63,0.1); 141 --secondary: #fefffe; 142 --white: #FFF; 143 --almostblack: #252525; 144 --grey: #eff1f5; 145 --red: #ff104b; 146 --shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08); 147 --bigShadow: 0px 12px 23px 0px rgba(0, 0, 0, .1); 148 --transition: 0.5s; 149 --even: #FCFCFC; 150 --siteLogo: url(/assets/branding/shop.runningcompany.com/logo.png); 151 --input: #F5F6FA; 152 --border: #f5f6fa; 153 --inputfocus: #e7ebf1; 154 --glass: rgba(250, 250, 250, 0.7); 155 --navutility: #f5f8fb; 156 --menu: #434c5e; 157 --filterhr: #d2d8e5; 158 --bggrey: #f5f6fa; 159 --thumbloader: linear-gradient(90deg, #eef1f5 0px, #fbfbfd 40px, #eef1f5 80px); 160 --skeleton-one: #eff1f5; 161 --skeleton-two: #F5F6FA; 162 --disappearing-header: linear-gradient(to bottom, rgba(245, 246, 250, 1) 0%, rgba(245, 246, 250, 0) 100%); 163 --disappearing-footer: linear-gradient(to bottom, rgba(245, 246, 250, 0) 0%, rgba(245, 246, 250, 1) 100%); 164 } 165 </style> 166 <link href="/assets/styles/round.css" rel="stylesheet" type="text/css" media="all" /> 167
167<script> 168 var logoCard = '/assets/branding/shop.runningcompany.com/logo.png'; 169 var logoUrl = '/'; 170 </script>
170 171 172
172<script>var cdnOn = false;</script>
vendor: 1 bytes, line 172
172
173<script type="text/javascript">var _learnq;</script>
173<script type="text/javascript">window.blueshift = null;</script>
173 174
174<script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","@id":"https://www.runningcompany.com/#organization","name":"Naperville Running","url":"https://www.runningcompany.com/","logo":"https://www.runningcompany.com/logo.png","sameAs":["https://shop.runningcompany.com"]}</script>
174 175 <!-- End Header Script --> 176</head> 177 178<body class="scroll-assist"> 179 180 181 <!-- Cart Template //--> 182 <li id="CartTemplate" class="cartItem template"> 183 <div class="productImage" style="background-image: url('{{product.url}}')"></div> 184 <div class="rel"> 185 <div class="productName">{{product.name}}</div> 186 <div class="productPrice"> 187 {{product.quantity}} at ${{product.cost}} - {{product.options}} 188 </div> 189 <div class="remove" data-index="{{index}}"></div> 190 </div> 191 </li> 192 193 <div class="nav-container"> 194 <nav> 195 <div class="nav-bar"> 196 <div class="module left"> 197 <img id="StoreLogo" class="logo logo-dark" alt="Naperville Running" src="/assets/branding/shop.runningcompany.com/logo.png" /> 198 </div> 199 200 <!-- Mobile toggle (hamburger) --> 201 <div class="module right widget-handle mobile-toggle visible-sm visible-xs"> 202 <i class="icon-Main-Menu mobilemenu"></i> 203 </div> 204 205 <!-- Cart icon - visible on mobile only --> 206 <div id="MobileCartMenu" class="module right widget-handle visible-sm visible-xs ecomtrue" style="width: 65px; padding: 0; border-left: 2px solid var(--border); text-align: center;"> 207 <a href="/cart" style="text-decoration: none; position: relative; display: block; height: 69px; filter: brightness(100%);"> 208 <i class="icon-ti-Cart" style="line-height: 69px !important; font-size: 24px; display: inline-block; vertical-align: middle;"></i> 209 <span id="MobileCartItemCount" class="label number"></span> 210 </a> 211 </div> 212 213 <div class="module-group right pt0 pb0"> 214 215 <!-- Account Pod --> 216 <div id="AccountMenu" class="module right widget-handle hidden-sm hidden-xs"> 217 <ul class="menu"> 218 <li class="has-dropdown-account" style="border-top: unset;"><i class="icon-Profile"></i> 219 <span class="title">My Account</span> 220 <ul style="margin-top: -7px; margin-right: -20px;"><li><a href="/login"><i class="icon-Log-In dropdown-icon"></i> Login</a></li><li><a href="/signup"><i class="icon-Signup dropdown-icon"></i> Signup</i></a></li></ul> 221 </li> 222 </ul> 223 </div> 224 225 <!-- Cart Pod --> 226 <div id="CartMenuSize" class="module widget-handle cart-widget-handle right ecomtrue hidden-sm hidden-xs"> 227 <div class="cart max" data-url="/cart"> 228 <i class="icon-ti-Cart"></i> 229 <span id="CartItemCount" class="label number"></span> 230 <span class="title">Shopping Cart</span> 231 </div> 232 <div id="CartMenu" class="function"> 233 <div class="widget" style="padding: 16px;"> 234 <h6 class="title">Shopping Cart</h6> 235 <hr /> 236 <ul id="CartInfo" class="cart-overview"></ul> 237 <div class="cart-controls mt16"> 238 <a class="btn btn-sm btn-filled" href="/cart">View Cart</a> 239 <div class="list-inline pull-right"> 240 <span class="cart-total">Total: </span> 241 <span id="CartTotal" class="number"></span> 242 </div> 243 </div> 244 </div> 245 </div> 246 </div> 247 248 <!-- Search Pod - Overlay Trigger --> 249 <div id="SearchOverlayTrigger" class="module widget-handle search-widget-handle right ecomtrue hidden-sm hidden-xs" style="cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;"> 250 <div class="search max"> 251 <i class="icon-aisearch" style="pointer-events: none;"></i> 252 <span class="title" style="pointer-events: none;">Search Site</span> 253 </div> 254 </div> 255 256 <!-- Menu Pod --> 257 <div id="TheMenu" class="module left pt0 pb16"> 258 <ul id="MainMenu" class="menu"><li class="has-dropdown"><a href="#">Shop by Category</a><ul class="mega-menu"><li><ul id="HeaderCategories"></ul></li></ul></li><li id="GiftCardCart"><a href="/giftcard">Gift Cards</a></li><li style="display:none"></li></ul> 259 </div> 260 261 </div> 262 <!-- End Modal Group --> 263 264 </div> 265 </nav> 266 </div> 267 268 <!-- Search Overlay Component -->
269 <!-- RunFree Search Overlay - Modular Component --> 270<div id="SearchOverlay" class="search-overlay" role="dialog" aria-modal="true" aria-label="Search Products" aria-hidden="true"> 271 <div class="search-overlay-header"> 272 <div class="search-logo"> 273 <img id="SearchStoreLogo" alt="" src="" /> 274 </div> 275 <div class="search-input-container"> 276 <i class="icon-aisearch search-icon" aria-hidden="true"></i> 277 <input 278 type="search" 279 id="SearchOverlayInput" 280 class="search-overlay-input" 281 placeholder="Search for Products, Brands..." 282 autocomplete="off" 283 spellcheck="false" 284 aria-label="Search for products, brands, or categories" 285 aria-expanded="false" 286 aria-controls="SearchProductPreviews SearchSuggestions" 287 aria-describedby="SearchOverlayDescription" 288 /> 289 <span id="SearchOverlayDescription" class="sr-only">Type to search. Use arrow keys to navigate results. Press enter to view all results.</span> 290 <button 291 class="icon-Broswer-Close clear-search x" 292 id="ClearSearchInput" 293 style="display: none;" 294 aria-label="Clear search" 295 type="button" 296 ></button> 297 </div> 298 <button class="search-cancel mb0" id="SearchOverlayCancel">Cancel</button> 299 </div> 300 301 <div class="search-overlay-content"> 302 <!-- Left: Suggestions --> 303 <div class="search-suggestions"> 304 <!-- Popular Searches --> 305 <div class="suggestions-section" id="PopularSearches" role="region" aria-label="Popular searches"> 306 <h4 class="suggestions-title">Popular Searches</h4> 307 <ul id="PopularSearchesList" class="suggestions-list" role="list" aria-live="polite"> 308 <!-- Loading skeleton --> 309 <li class="suggestion-skeleton" aria-hidden="true"><span></span></li> 310 <li class="suggestion-skeleton" aria-hidden="true"><span></span></li> 311 <li class="suggestion-skeleton" aria-hidden="true"><span></span></li> 312 </ul> 313 </div> 314 315 <!-- Top Searched Brands --> 316 <div class="suggestions-section" id="TopBrands" role="region" aria-label="Top brands"> 317 <h4 class="suggestions-title">Top Brands</h4> 318 <ul id="TopBrandsList" class="suggestions-list" role="list" aria-live="polite"> 319 <!-- Loading skeleton --> 320 <li class="suggestion-skeleton"><span></span></li> 321 <li class="suggestion-skeleton"><span></span></li> 322 <li class="suggestion-skeleton"><span></span></li> 323 </ul> 324 </div> 325 326 <!-- Top Searched Categories --> 327 <div class="suggestions-section" id="TopCategories" role="region" aria-label="Top categories"> 328 <h4 class="suggestions-title">Top Categories</h4> 329 <ul id="TopCategoriesList" class="suggestions-list" role="list" aria-live="polite"> 330 <!-- Loading skeleton --> 331 <li class="suggestion-skeleton"><span></span></li> 332 <li class="suggestion-skeleton"><span></span></li> 333 <li class="suggestion-skeleton"><span></span></li> 334 </ul> 335 </div> 336 337 <!-- Dynamic Search Suggestions (shown when typing) --> 338 <div class="suggestions-section" id="SearchSuggestions" style="display: none;"> 339 <h4 class="suggestions-title">Top Suggestions</h4> 340 <ul id="SuggestionsList" class="suggestions-list"> 341 <!-- Dynamic suggestions populated here --> 342 </ul> 343 </div> 344 </div> 345 346 <!-- Right: Product Previews --> 347 <div class="search-products"> 348 <div class="search-loading-bar" id="SearchLoadingBar"> 349 <div class="search-loading-bar-progress"></div> 350 </div> 351 <div class="search-products-fade"></div> 352 <div id="SearchProductPreviews" class="product-previews-grid"> 353 <!-- Dynamic product tiles populated here --> 354 </div> 355 <div id="SearchSearching" class="search-searching" style="display: none;"> 356 <h3>Searching...</h3> 357 </div> 358 <div id="SearchEmptyState" class="search-empty-state" style="display: none;"> 359 <div class="icon-aisearch empty-icon"></div> 360 <p id="SearchEmptyStateText">Start Typing to Search</p> 361 <div class="recent-searches-inline mt8" id="RecentSearches" style="display: none;" role="region" aria-label="Recent searches"> 362 <div class="recent-searches-container">
363 <span class="recent-searches-label">Your Recent Searches:</span> 364 <span id="RecentSearchesList" class="recent-searches-links" role="list"> 365 <!-- Dynamic recent searches --> 366 </span> 367 </div> 368 </div> 369 </div> 370 <div id="SearchNoResults" class="search-no-results" style="display: none;"> 371 <div class="sad-search"></div> 372 <p>Hmmm... We didn't find any matches</p> 373 <span>Modify your search and try again</span> 374 </div> 375 </div> 376 </div> 377 378 <!-- Search All Button --> 379 <div class="search-overlay-footer"> 380 <button id="SearchAllButton" class="search-all-button"> 381 <div>Search All Products</div> 382 </button> 383 </div> 384</div> 385 386<!-- Product Preview Template --> 387<div id="SearchProductTemplate" class="search-product-tile product clickable template" data-url="{{url}}" style="display: none;"> 388 <div class="search-product-image image" style="background-image: url('{{product.url}}')"> 389 <span class="search-sale-badge{{onsale}}">SALE</span> 390 </div> 391 <div class="colorswatches" data-product-name="{{product.name}}" data-site-id="{{siteId}}" data-total-colors="{{totalColors}}"></div> 392 <div class="search-product-info"> 393 <div class="search-product-name">{{product.name}}</div> 394 <div class="search-product-brand">{{product.brandName}}</div> 395 <div class="search-product-price">{{product.price}}</div> 396 </div> 397</div> 398 399<!-- Color Swatches Component -->
400<script src="/assets/scripts/shared/colorSwatches.js"></script>
400 401 402 403 <div class="main-container"></div> 404 405 <!-- Search Overlay Script --> 406
406<script src="/assets/scripts/search-overlay.js?v=1.2.0"></script>
406 407
407<script> 408 // Initialize search overlay triggers - use immediate execution to avoid race conditions 409 (function() { 410 function attachSearchTriggers() { 411 var trigger = document.getElementById('SearchOverlayTrigger'); 412 413 if (trigger && typeof SearchOverlay !== 'undefined') { 414 // Remove any existing listener first 415 trigger.replaceWith(trigger.cloneNode(true)); 416 trigger = document.getElementById('SearchOverlayTrigger'); 417 418 trigger.addEventListener('click', function(e) { 419 e.preventDefault(); 420 e.stopPropagation(); 421 SearchOverlay.open(); 422 }); 423 } 424 } 425 426 // Attach immediately if DOM is ready, otherwise wait 427 if (document.readyState === 'loading') { 428 document.addEventListener('DOMContentLoaded', attachSearchTriggers); 429 } else { 430 attachSearchTriggers(); 431 } 432 })(); 433 434 // Sync mobile cart count with desktop cart count - run after DOM is ready 435 (function() { 436 function syncMobileCart() { 437 var desktopCount = document.getElementById('CartItemCount'); 438 var mobileCount = document.getElementById('MobileCartItemCount'); 439 if (desktopCount && mobileCount) { 440 mobileCount.textContent = desktopCount.textContent; 441 mobileCount.className = desktopCount.className; 442 } 443 } 444 445 function initCartSync() { 446 syncMobileCart(); 447 448 var observer = new MutationObserver(syncMobileCart); 449 var desktopCount = document.getElementById('CartItemCount'); 450 if (desktopCount) { 451 observer.observe(desktopCount, { childList: true, characterData: true, subtree: true }); 452 } 453 } 454 455 if (document.readyState === 'loading') { 456 document.addEventListener('DOMContentLoaded', initCartSync); 457 } else { 458 initCartSync(); 459 } 460 })(); 461 </script>
461<section class="page-title page-title-4 image-bg overlay hideshopheaders"> 462 <div class="background-image-holder"> 463 <img alt="Background Image" class="background-image" src="/assets/images/running/giftcards.jpg" /> 464 </div> 465 <div class="headeroverlay"></div> 466 <div class="container"> 467 <div class="row"> 468 <div class="col-md-6"> 469 <h3 class="uppercase mb0 text-shadow">Digital Gift Cards</h3> 470 </div> 471 <div class="col-md-6 text-right"> 472 <ol class="breadcrumb breadcrumb-2 text-shadow"> 473 <li><a href="/">Shop</a></li> 474 <li><a href="/giftcard">Gift Cards</a></li> 475 </ol> 476 </div> 477 </div> 478 <!--end of row--> 479 </div> 480 <!--end of container--> 481</section> 482<div class="threshold hidden">Free Shipping<span class="freeterms hidden"> on orders totalling more than $<span id="Threshold"></span></span></div> 483<section class="pt24 pt-xs-16 white"> 484 <div class="container wide"> 485 <div class="row"> 486 <div class="col-md-12"> 487 <div class="product-single"> 488 <div class="row mb24 mb-xs-16"> 489 <div class="col-md-6 col-sm-12"> 490 <div class="back-title mb24 mb-xs-16"><a href="javascript:history.go(-1);" style="font-weight: 800; color: var(--menu);"> <i class="icon-ti-back" style="font-size: 13px; color: var(--primary);"></i> Back</a></div> 491 <div class="giftcard"> 492 <div class="gloss"></div> 493 <div class="siteLogo"></div> 494 <div class="chip"></div> 495 <div class="foot">Digital Gift Card</div> 496 </div> 497 <div class="description"> 498 <p id="GiftCardDescription" style="margin-top:50px; margin-left: 30px; margin-right: 30px;"> 499 </p> 500 </div> 501 </div> 502 <div class="col-md-5 col-md-offset-1 col-sm-12"> 503 <div class="description"> 504 <h5 id="ProductBrand" class="uppercase" style="margin-bottom: 0px; color: #434c5e; font-weight: 800;">Naperville Running</h5> 505 <h3 id="ProductTitle" class="uppercase" style="margin-bottom: 10px; font-weight: 600;">Digital Gift Card</h3> 506 <div class="mb16 mb-xs-16"> 507 <span id="ProductPrice" class="number price"></span> USD 508 </div> 509 <ul class="mb24"> 510 <li>â Delivered via e-mail</li> 511 <li>â Can be redeemed online <span id="InStore" style="display: none;">or in-store</span></li> 512 <li>â Digital Gift certificate never expires</li> 513 <li>â Please allow up to 24 hours for activation</li> 514 <li>â Note that only one may be applied per online order</li> 515 </ul> 516 </div> 517 <!--end of widget--> 518 <form> 519 <div class="select-option"> 520 <label class="giftlabel">How much would you like to send?</label> 521 <input id="HowMuch" type="text" placeholder="Enter Amount" /> 522 <!-- Gift Card Awards --> 523 <label class="giftlabel awards gradient-text" style="display: none;">Bonus Gift Card Award! ð¥³</label> 524 <div class="awards" style="display: none;">This purchase will give you an additional $<span id="AwardAmount"></span></div>
525 <select id="AwardDoWhat" class="awards mb32" style="display: none;"> 526 <option value="addtogift">Add bonus to this gift card for recipient</option> 527 <option value="email">Send seperate bonus gift card to myself</option> 528 </select> 529 <label class="giftlabel">To: Recipient's Name</label> 530 <input id="RecipientName" type="text" placeholder="John Smith" /> 531 <label class="giftlabel">From: Sender's Name</label> 532 <input id="SenderName" type="text" placeholder="Jane Smith" /> 533 <label class="giftlabel">Recipient's Email</label> 534 <input id="RecipientEMail" type="text" placeholder="[email protected]" /> 535 <label class="giftlabel">Confirm Recipient's Email</label> 536 <input id="ConfirmEMail" type="text" placeholder="[email protected]" /> 537 <label for="SendPhone" class="giftlabel">Send To Phone ð¬ (Optional)</label> 538 <input id="SendPhone" type="text" placeholder="(555) 867-5309" /> 539 <label class="giftlabel">Leave a Gift Note</label> 540 <textarea id="Message" class="mt0 mb24" placeholder="Happy Birthday! I thought you might like"></textarea> 541 542 <!-- Schedule Delivery --> 543 <label class="giftlabel">Schedule a Delivery Date (Optional)</label> 544 <div id="DateBlank" class="red">Leave blank to send immedietely</div> 545 <div id="DateWarning" class="red" style="display: none;">Selected date is more than 60 days in the future.</div> 546 <input id="DateToSend" type="text" placeholder="Select a Date" autocomplete="new-password" /> 547 548 <!-- Physicel Gift Card --> 549 <div id="PhysicalToggle" style="display: none;"> 550 <label class="giftlabel">Physical Copy</label> 551 <div class="gifttoggle mt0"> 552 <div>MAIL A PHYSICAL GIFT CARD AS WELL</div> 553 <div id="IsPhysical" class="toggler"> 554 <div class="switch"></div> 555 <div class="on">On</div> 556 <div class="off">Off</div> 557 </div> 558 </div> 559 </div> 560 </div> 561 <div class="addArea mb48 floatright"> 562 <div id="AddCartButton" class="button">Add To Cart</div> 563 </div> 564 </form> 565 <hr> 566 <h5 style="margin-top:24px; color: #434c5e; font-weight: 600; background-color: #fff6b8; padding: 15px; border-radius: 12px;"> 567 Note: Looking to purchase for yourself instead? No worries, enter your name and email in the recipient's fields. 568 </h5> 569 </div> 570 </div> 571 </div> 572 </div> 573 </div> 574 </div> 575</section> 576
577<script language="javascript" type="text/javascript"> 578 579 var pos = Number('3'); 580 581 page = { 582 type: "giftcards", 583 minValue: 5.00, 584 maxValue: 1500.00, 585 init: function () { 586 page.events(); 587 588 $("#DateToSend").datetimepicker({ 589 validateOnBlur: false, 590 startDate: new Date(), 591 minDate: new Date(), 592 timepicker: false, 593 format: "m/d/Y" 594 }); 595 596 if (pos>=1&&pos<=4) $("#InStore").show(); 597 }, 598 events: function () { 599 context.addListener("settings-"+page.type, page.dataLoaded); 600 $("#AddCartButton").click(page.add); 601 $("#ConfirmEMail").change(page.confirmEmail); 602 $("#HowMuch").blur(function(e) { 603 var value = $("#HowMuch").val().split('$').join(''); 604 if (isNaN(Number(value))) value = 100; 605 value = "$"+Number(value).toFixed(2); 606 $("#HowMuch").val(value); 607 }); 608 $("#SendPhone").blur((e) => { 609 var phone = $(e.currentTarget).val(); 610 phone = phone.split('-').join('').split(' ').join('').split('(').join('').split(')').join(''); 611 phone = page.formatPhoneNumber(phone); 612 phone = phone.split('-').join('').split(' ').join('').split('(').join('').split(')').join(''); 613 if (phone.length>0 && phone.indexOf("+")!=0) phone = "+"+phone; 614 $(e.currentTarget).val(phone); 615 }); 616 $("#HowMuch").blur(page.awards); 617 $("#DateToSend").blur((e) => { 618 $("#DateWarning").hide(); 619 $("#DateBlank").show(); 620 var value = $("#DateToSend").val().trim(); 621 if (value.length==0) { 622 return; 623 } else { 624 var date = moment(value, "M/D/YYYY"); 625 if (!date.isValid()) { 626 $("#DateToSend").val(""); 627 growler.error("Please enter a valid date for scheduled delivery."); 628 } 629 if (date.diff(moment(), "days")>60) { 630 $("#DateWarning").show(); 631 $("#DateBlank").hide(); 632 } else { 633 $("#DateWarning").hide(); 634 $("#DateBlank").show(); 635 } 636 } 637 }); 638 }, 639 awards: (e) => { 640 var awards = 0; 641 if (settings.val(page.type, "IsAwardsOn", "false")=="false") return; 642 var amount = $("#HowMuch").val().split('$').join(''); 643 amount = Number(amount); 644 var tiers = [ 645 { buy: settings.val(page.type, "BuyHowMuch1", "0"), get: settings.val(page.type, "GetHowMuch1", "0") }, 646 { buy: settings.val(page.type, "BuyHowMuch2", "0"), get: settings.val(page.type, "GetHowMuch2", "0") }, 647 { buy: settings.val(page.type, "BuyHowMuch3", "0"), get: settings.val(page.type, "GetHowMuch3", "0") }, 648 { buy: settings.val(page.type, "BuyHowMuch4", "0"), get: settings.val(page.type, "GetHowMuch4", "0") }, 649 { buy: settings.val(page.type, "BuyHowMuch5", "0"), get: settings.val(page.type, "GetHowMuch5", "0") } 650 ]; 651 tiers.forEach(tier => { 652 if (Number(tier.buy)>0 && amount>=Number(tier.buy)) { 653 awards = Number(tier.get); 654 } 655 }); 656 if (awards>0) { 657 $("#AwardAmount").html(awards.toFixed(2)); 658 $(".awards").show(); 659 } else { 660 $(".awards").hide(); 661 } 662 }, 663 dataLoaded: function (e) { 664 if (settings.val(page.type, "on", "false")=="false") window.location = "/"; 665 var amounts = "$"+settings.val(page.type, "min", "5.00")+" - $"+settings.val(page.type, "max", "500.00"); 666 page.minValue = Number(settings.val(page.type, "min", "5.00")); 667 page.maxValue = Number(settings.val(page.type, "max", "1500.00"));
668 page.desc = settings.val(page.type, "desc", ""); 669 $("#ProductPrice").html(amounts); 670 $("#GiftCardDescription").html(page.desc); 671 if (settings.val(page.type, "physical", "false")=="false") $("#PhysicalToggle").hide(); 672 else $("#PhysicalToggle").show(); 673 }, 674 add: function(e) { 675 var amount = $("#HowMuch").val().split("$").join(""); 676 var name = $("#RecipientName").val().trim(); 677 var senderName = $("#SenderName").val().trim(); 678 var email = $("#RecipientEMail").val().trim(); 679 var message = $("#Message").val().trim(); 680 var phone = $("#SendPhone").val().trim(); 681 var physical = $("#IsPhysical").hasClass("on"); 682 var award = $("#AwardDoWhat").val(); 683 var dateToSend = $("#DateToSend").val().trim(); 684 phone = page.formatPhoneNumber(phone); 685 phone = phone.split('-').join('').split(' ').join('').split('(').join('').split(')').join(''); 686 if (phone.indexOf("+")!=0) phone = "+"+phone; 687 var errorMessage = ""; 688 if (Number(amount)<page.minValue) errorMessage = "You must enter an amount greater than $"+page.minValue.toFixed(2); 689 if (Number(amount)>page.maxValue) errorMessage = "You must enter an amount less than $"+page.maxValue.toFixed(2); 690 if (name.length==0) errorMessage = "Please enter a name for the recipient."; 691 if (!page.validateEmail(email)) errorMessage = "The recipient must be a valid email."; 692 if (errorMessage.length==0) cart.addGiftCard(amount, name, email, message, senderName, phone, physical, award, dateToSend); 693 else growler.error(errorMessage); 694 }, 695 formatPhoneNumber: function(phoneNumberString) { 696 if(phoneNumberString.length === 10 && phoneNumberString.indexOf('+') === -1) { 697 phoneNumberString = '+1' + phoneNumberString; 698 } 699 var cleaned = ('' + phoneNumberString).replace(/\D/g, ''); 700 var match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/); 701 if (match) { 702 var intlCode = (match[1] ? '+1 ' : ''); 703 return [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join(''); 704 } 705 return phoneNumberString; 706 }, 707 validateEmail: function(email) { 708 const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 709 return re.test(email); 710 }, 711 confirmEmail: function(event) { 712 const email = $("#RecipientEMail").val() || ''; 713 const confirmEmail = $("#ConfirmEMail").val() || ''; 714 if (email.toLowerCase() !== confirmEmail.toLowerCase()) { 715 $("#RecipientEMail").addClass('error'); 716 $("#ConfirmEMail").addClass('error'); 717 } else { 718 $("#RecipientEMail").removeClass('error'); 719 $("#ConfirmEMail").removeClass('error'); 720 } 721 } 722 } 723</script>
723<footer class="footer-1 storefooter"> 724 <div id="SocialArea"> 725 <div class="footer-title" style="margin-bottom: 10px; font-weight: 600;">Follow Us, We're Social</div> 726 <div id="SocialLinks" class="list-inline social-list" style="margin-bottom: 8px;"></div> 727 </div> 728 <div class="row"> 729 <div class="col-sm-12 text-center"> 730 <p style="margin-bottom: 0px;"><a href="/terms">Terms</a> ⢠<a href="/privacy">Privacy</a><span class="ecomtrue"> ⢠<a href="/returns">Shipping + Returns</a></span></p> 731 <p style="margin-bottom: 0px;">© Copyright Naperville Running - All Rights Reserved</p> 732 <p style="margin-bottom: 0px;"><a href="https://www.runfreeproject.com" class="proud box-shadow-wide-link bridaloff" style="margin-top: 10px;" target="_blank"><img alt="Background Image" class="background-image" width="200px" height="47px" style="margin-left: -15px;" src="/assets/images/proud.webp"></a></p> 733 </div> 734 </div> 735 <a class="btn btn-sm back-to-top inner-link" href="#top">Top</a> 736</footer> 737<p><meta name="google-site-verification" content="p95OR9FvxmrT4bHAUMAuD5OZ6EvfRse2gyH_JKE3m2E" /></p> 738 739</div> 740<div class="fullLoading"> 741 <div id="progress"> 742 <span class="spinner-icon"></span> 743 </div> 744 <div class="running"> 745 <div class="outer"> 746 <div class="body"> 747 <div class="arm behind"></div> 748 <div class="arm front"></div> 749 <div class="leg behind"></div> 750 <div class="leg front"></div> 751 </div> 752 </div> 753 </div> 754 </div> 755</div> 756<div class="fullLoadingOrders"> 757 <div id="progress"> 758 <span class="spinner-icon"></span> 759 </div> 760 <div class="running"> 761 <div class="outer"> 762 <div class="body"> 763 <div class="arm behind"></div> 764 <div class="arm front"></div> 765 <div class="leg behind"></div> 766 <div class="leg front"></div> 767 </div> 768 </div> 769 </div> 770 <div class="loadMessage"> 771 <span class="header">Processing, Please be patient</span><br/> 772 <span style="color: #ff0072; font-weight: 800;"> 773 Don't Tap Back or Close the Window!<br> 774 This could cause the order to duplicate or fail.<br> 775 </span> 776 <span id="CheckoutStatus"></span> 777 </div> 778</div> 779 780<!-- 3rd Party Includes -->
781<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
vendor: 2 bytes, line 781
781
782<script src="/assets/scripts/flexslider.min.js"></script>
782
783<script src="/assets/scripts/masonry.min.js"></script>
vendor: 2 bytes, line 783
783
784<script src="/assets/scripts/smooth-scroll.min.js"></script>
vendor: 2 bytes, line 784
784
785<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
vendor: 2 bytes, line 785
785
786<script type="text/javascript" src="/assets/admin/scripts/spectrum.js?v=1.2.0"></script>
786 787<!-- Model Objects -->
788<script type="text/javascript" src="/assets/admin/scripts/models/products.js?v=1.2.0"></script>
vendor: 2 bytes, line 788
788
789<script type="text/javascript" src="/assets/admin/scripts/models/category.js?v=1.2.0"></script>
vendor: 2 bytes, line 789
789
790<script type="text/javascript" src="/assets/admin/scripts/models/brand.js?v=1.2.0"></script>
vendor: 2 bytes, line 790
790
791<script type="text/javascript" src="/assets/scripts/collection.js?v=1.2.0"></script>
vendor: 2 bytes, line 791
791
792<script type="text/javascript" src="/assets/admin/scripts/models/discounts.js?v=1.2.0"></script>
vendor: 2 bytes, line 792
792
793<script type="text/javascript" src="/assets/admin/scripts/models/orders.js?v=1.2.0"></script>
vendor: 2 bytes, line 793
793
794<script type="text/javascript" src="/assets/admin/scripts/models/taxes.js?v=1.2.0"></script>
vendor: 2 bytes, line 794
794
795<script type="text/javascript" src="/assets/admin/scripts/models/states.js?v=1.2.0"></script>
vendor: 2 bytes, line 795
795
796<script type="text/javascript" src="/assets/admin/scripts/models/country.js?v=1.2.0"></script>
vendor: 2 bytes, line 796
796
797<script type="text/javascript" src="/assets/admin/scripts/models/homepage.js?v=1.2.0"></script>
vendor: 2 bytes, line 797
797
798<script type="text/javascript" src="/assets/admin/scripts/models/customers.js?v=1.2.0"></script>
vendor: 2 bytes, line 798
798
799<script type="text/javascript" src="/assets/admin/scripts/models/site.js?v=1.2.0"></script>
vendor: 2 bytes, line 799
799
800<script type="text/javascript" src="/assets/admin/scripts/models/user.js?v=1.2.0"></script>
vendor: 2 bytes, line 800
800
801<script type="text/javascript" src="/assets/admin/scripts/models/address.js?v=1.2.0"></script>
vendor: 2 bytes, line 801
801
802<script type="text/javascript" src="/assets/admin/scripts/models/contents.js?v=1.2.0"></script>
vendor: 2 bytes, line 802
802
803<script type="text/javascript" src="/assets/admin/scripts/models/socials.js?v=1.2.0"></script>
vendor: 2 bytes, line 803
803
804<script type="text/javascript" src="/assets/admin/scripts/models/orders.js?v=1.2.0"></script>
vendor: 2 bytes, line 804
804
805<script type="text/javascript" src="/assets/admin/scripts/models/merchant.js?v=1.2.0"></script>
vendor: 2 bytes, line 805
805
806<script type="text/javascript" src="/assets/admin/scripts/models/store.js?v=1.2.0"></script>
806
807<script type="text/javascript" src="/assets/admin/scripts/models/settings.js?v=1.2.0"></script>
807
808<script type="text/javascript" src="/assets/scripts/models/wishlist.js?v=1.2.0"></script>
808 809<!-- Application Core -->
810<script type="text/javascript" src="/assets/admin/scripts/context.js?v=1.2.0"></script>
vendor: 2 bytes, line 810
810
811<script type="text/javascript" src="/assets/admin/scripts/growler.js?v=1.2.0"></script>
vendor: 2 bytes, line 811
811
812<script type="text/javascript" src="/assets/admin/scripts/modal.js?v=1.2.0"></script>
vendor: 2 bytes, line 812
812
813<script type="text/javascript" src="/assets/scripts/jquery.datetimepicker.js"></script>
vendor: 2 bytes, line 813
813
814<script type="text/javascript" src="/assets/admin/scripts/service.js?v=1.2.0"></script>
vendor: 2 bytes, line 814
814
815<script type="text/javascript" src="/assets/admin/scripts/cart.js?v=1.2.0"></script>
815
816<script type="text/javascript" src="/assets/admin/scripts/store.js?v=1.2.0"></script>
816
817<script src="/assets/scripts/scripts.js?v=1.2.0"></script>
817 818 819</body> 820</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.