PageSourceSearch

https://shop.runningcompany.com/giftcard

html runningcompany.com collected 2026-09-26 05:06:55 UTC 43,452 bytes, 820 lines download raw bytes

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>&lt;meta name=&quot;google-site-verification&quot; content=&quot;p95OR9FvxmrT4bHAUMAuD5OZ6EvfRse2gyH_JKE3m2E&quot; /&gt;</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.