{"id":99609,"date":"2024-08-23T12:45:48","date_gmt":"2024-08-23T12:45:48","guid":{"rendered":"https:\/\/trucentive.com\/stage\/?page_id=99609"},"modified":"2026-05-12T18:41:48","modified_gmt":"2026-05-12T18:41:48","slug":"swag-and-logo-wear","status":"publish","type":"page","link":"https:\/\/trucentive.com\/stage\/swag-and-logo-wear","title":{"rendered":"Swag and Logo Wear"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Adding SWAG and logo wear to your account<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Building a strong brand identity is crucial in today’s competitive business landscape.\u00a0Branded swag and logo wear are an effective way to enhance your brand\u2019s visibility and create a positive association. <\/span><\/p>

Branded items, from apparel to everyday accessories, are powerful tools to engage employees, delight customers, and strengthen partnerships.<\/span><\/p>

Take a look at TruCentive\u2019s SWAG and Logo Wear catalog, create your custom selection – and order samples.\u00a0<\/p>

Schedule a design session<\/a> with a TruCentive representative, and you\u2019ll have samples in just a few days!\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tSchedule a Free Design Session<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

We\u2019ll walk you through SWAG and logo wear options and create the perfect selections for your organization.\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"TruCentive\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Adding SWAG and Logo Wear to your account<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Create customized branded items for employees, customers, and partners, enhancing engagement and appreciation programs.\u00a0\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

View the our catalog below and select desired items<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Please note the items you would like to review and schedule a design session. We’ll help you create your logo for print and embroidery.\u00a0 Design Session<\/a><\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Popular items...<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"swag\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"coffee\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"coffee\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Large\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"logowear\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Once you have selected items, a review order will be sent via email for you to review color, size, embroidery vs. print, etc. options. Once your selections have been finalized, we will\u00a0place your sample order to allow you to review and approve each item.\u00a0Because all items are on-demand, your review order usually arrives in approximately 10 days.\u00a0<\/span><\/p>

Once you have approved your selections, they will be added to your account and ready to add to projects along with gift cards, payments, and merchandise!\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

The origin of \"SWAG\" <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The term “swag” has an interesting history and has evolved in its meaning over time. Here’s a breakdown:<\/p>

Origins: The word “swag” is believed to have originated from the Scandinavian word “svagga,” which means “to sway” or “to rock.” The term was used in the 18th century to describe a bag or bundle of belongings carried by a person, often referred to as a “swagman” in Australia, who would carry their belongings in a swag (a portable sleeping unit) while traveling.<\/p>

Here is another view of the word’s history<\/a>.<\/p>

Promotional Merchandise: In more recent times, particularly in the business and entertainment industries, “swag” began to be used to refer to promotional merchandise given away at events. This could include items like t-shirts, hats, pens, or bags with a company’s logo or brand. The idea was that these items would help promote the brand, and “swag” became a colloquial term for these giveaways.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

SWAG fun facts <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Swag Bags at Hollywood Events:<\/b> The term “swag” is famously associated with the high-end gift bags given to celebrities at major award shows like the Oscars and the Grammys. These swag bags often contain luxury items, designer products, and even vacation packages, sometimes worth tens of thousands of dollars.<\/p>

Swag as Secret Code:<\/b> Some people believe that “swag” was once an acronym for “Stuff We All Get,” referring to the promotional items or freebies given out at events. However, this is more of an urban legend and not a true origin of the word.<\/p>

Pirate Connection<\/strong>: The word “swag” was also used in the 19th century as slang for stolen goods or booty, often associated with pirates and thieves. This usage likely contributed to the idea of “swag” as something valuable or worth having.<\/p>

Swag in Literature:<\/b> The term “swag” appeared in literature as early as the 19th century. In Charles Dickens’ 1837 novel The Pickwick Papers, the character Alfred Jingle uses the word to describe stolen goods: “Reg’larly done up in the swag.”<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t


Browse, sort, and explore thousands of options, and easily customize them by adding your organization’s logo or branding for special events or programs.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Swag Catalog<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --bg-primary: #ffffff;\r\n --bg-secondary: #f8fafc;\r\n --bg-card: #ffffff;\r\n --accent: #f37021;\r\n --accent-hover: #e05a10;\r\n --accent-light: #fff7ed;\r\n --text-primary: #1e293b;\r\n --text-secondary: #64748b;\r\n --text-muted: #94a3b8;\r\n --border: #e2e8f0;\r\n --border-hover: #cbd5e1;\r\n --success: #10b981;\r\n --success-light: #d1fae5;\r\n --info: #f37021;\r\n --info-light: #ffedd5;\r\n --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\r\n --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\r\n --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\r\n background: var(--bg-secondary);\r\n color: var(--text-primary);\r\n min-height: 100vh;\r\n line-height: 1.6;\r\n }\r\n\r\n \/* Header *\/\r\n .header {\r\n background: var(--bg-primary);\r\n padding: 1.5rem 2rem;\r\n border-bottom: 1px solid var(--border);\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n box-shadow: var(--shadow-sm);\r\n }\r\n\r\n .header-content {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n\r\n .title-row {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n margin-bottom: 1.5rem;\r\n flex-wrap: wrap;\r\n gap: 1rem;\r\n }\r\n\r\n .title-section {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n h1 {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: var(--accent);\r\n margin-bottom: 0.25rem;\r\n }\r\n\r\n .subtitle {\r\n font-size: 0.8rem;\r\n color: var(--text-secondary);\r\n margin-bottom: 0;\r\n }\r\n\r\n .stats {\r\n display: flex;\r\n gap: 2rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .stat {\r\n text-align: center;\r\n padding: 0.5rem 1rem;\r\n background: var(--bg-secondary);\r\n border-radius: 8px;\r\n }\r\n\r\n .stat-value {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: var(--accent);\r\n }\r\n\r\n .stat-label {\r\n font-size: 0.7rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n color: var(--text-secondary);\r\n font-weight: 500;\r\n }\r\n\r\n \/* Search & Filters *\/\r\n .controls {\r\n display: flex;\r\n gap: 0.75rem;\r\n flex-wrap: wrap;\r\n align-items: stretch;\r\n }\r\n\r\n .search-container {\r\n width: 220px;\r\n min-width: 150px;\r\n position: relative;\r\n }\r\n\r\n .search-input {\r\n width: 100%;\r\n padding: 0.875rem 0.875rem;\r\n font-size: 0.85rem;\r\n font-family: inherit;\r\n background: var(--bg-primary);\r\n border: 1px solid var(--border);\r\n border-radius: 8px;\r\n color: var(--text-primary);\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .search-input:focus {\r\n outline: none;\r\n border-color: var(--accent);\r\n box-shadow: 0 0 0 3px rgba(243, 112, 33, 0.1);\r\n }\r\n\r\n .search-input::placeholder {\r\n color: var(--text-muted);\r\n }\r\n\r\n .filter-group {\r\n display: flex;\r\n gap: 0.5rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n select {\r\n padding: 0.875rem 2rem 0.875rem 0.875rem;\r\n font-size: 0.85rem;\r\n font-family: inherit;\r\n background: var(--bg-primary);\r\n border: 1px solid var(--border);\r\n border-radius: 8px;\r\n color: var(--text-primary);\r\n cursor: pointer;\r\n appearance: none;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'\/%3E%3C\/svg%3E\");\r\n background-repeat: no-repeat;\r\n background-position: right 0.6rem center;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n select:focus {\r\n outline: none;\r\n border-color: var(--accent);\r\n box-shadow: 0 0 0 3px rgba(243, 112, 33, 0.1);\r\n }\r\n\r\n select:hover {\r\n border-color: var(--border-hover);\r\n }\r\n\r\n .clear-filters {\r\n background: transparent;\r\n border: 1px solid var(--border);\r\n color: var(--text-secondary);\r\n padding: 0.5rem 1rem;\r\n border-radius: 6px;\r\n font-size: 0.85rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .clear-filters:hover {\r\n border-color: var(--accent);\r\n color: var(--accent);\r\n background: var(--accent-light);\r\n }\r\n\r\n \/* Main Content *\/\r\n .main {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 1.5rem 2rem 3rem;\r\n }\r\n\r\n .results-info {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 1.25rem;\r\n flex-wrap: wrap;\r\n gap: 1rem;\r\n }\r\n\r\n .results-count {\r\n color: var(--text-secondary);\r\n font-size: 0.9rem;\r\n }\r\n\r\n .results-count strong {\r\n color: var(--accent);\r\n font-weight: 600;\r\n }\r\n\r\n \/* Card Grid *\/\r\n .grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\r\n gap: 1.25rem;\r\n }\r\n\r\n .card {\r\n background: var(--bg-card);\r\n border-radius: 12px;\r\n overflow: hidden;\r\n border: 1px solid var(--border);\r\n transition: all 0.2s ease;\r\n animation: fadeIn 0.3s ease forwards;\r\n opacity: 0;\r\n }\r\n\r\n @keyframes fadeIn {\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n from {\r\n opacity: 0;\r\n transform: translateY(8px);\r\n }\r\n }\r\n\r\n .card:hover {\r\n transform: translateY(-2px);\r\n border-color: var(--accent);\r\n box-shadow: var(--shadow-lg);\r\n }\r\n\r\n .card-image {\r\n width: 100%;\r\n aspect-ratio: 1\/1;\r\n object-fit: contain;\r\n background: var(--bg-secondary);\r\n display: block;\r\n padding: 1rem;\r\n }\r\n\r\n .card-content {\r\n padding: 1rem 1.25rem 1.25rem;\r\n }\r\n\r\n .card-name {\r\n font-weight: 600;\r\n font-size: 0.95rem;\r\n margin-bottom: 0.5rem;\r\n color: var(--text-primary);\r\n line-height: 1.4;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n }\r\n\r\n .card-price {\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n color: var(--accent);\r\n margin-bottom: 0.75rem;\r\n }\r\n\r\n .card-meta {\r\n display: flex;\r\n gap: 0.5rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.3rem;\r\n padding: 0.3rem 0.65rem;\r\n border-radius: 6px;\r\n font-size: 0.7rem;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.02em;\r\n }\r\n\r\n .badge-type {\r\n background: var(--info-light);\r\n color: var(--accent);\r\n }\r\n\r\n .badge-category {\r\n background: var(--bg-secondary);\r\n color: var(--text-secondary);\r\n max-width: 140px;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n border: 1px solid var(--border);\r\n }\r\n\r\n \/* Loading & Empty States *\/\r\n .loading, .empty-state {\r\n text-align: center;\r\n padding: 4rem 2rem;\r\n color: var(--text-secondary);\r\n }\r\n\r\n .empty-state h3 {\r\n font-size: 1.25rem;\r\n color: var(--text-primary);\r\n margin-bottom: 0.5rem;\r\n font-weight: 600;\r\n }\r\n\r\n .spinner {\r\n width: 40px;\r\n height: 40px;\r\n border: 3px solid var(--border);\r\n border-top-color: var(--accent);\r\n border-radius: 50%;\r\n animation: spin 0.8s linear infinite;\r\n margin: 0 auto 1rem;\r\n }\r\n\r\n @keyframes spin {\r\n to { transform: rotate(360deg); }\r\n }\r\n\r\n \/* Pagination *\/\r\n .pagination {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.4rem;\r\n margin-top: 2.5rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .page-btn {\r\n min-width: 40px;\r\n height: 40px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: var(--bg-primary);\r\n border: 1px solid var(--border);\r\n border-radius: 8px;\r\n color: var(--text-secondary);\r\n font-weight: 500;\r\n font-size: 0.9rem;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .page-btn:hover:not(:disabled) {\r\n border-color: var(--accent);\r\n color: var(--accent);\r\n background: var(--accent-light);\r\n }\r\n\r\n .page-btn.active {\r\n background: var(--accent);\r\n border-color: var(--accent);\r\n color: white;\r\n }\r\n\r\n .page-btn:disabled {\r\n opacity: 0.4;\r\n cursor: not-allowed;\r\n }\r\n\r\n .page-ellipsis {\r\n color: var(--text-muted);\r\n padding: 0 0.4rem;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 768px) {\r\n .header {\r\n padding: 1rem;\r\n }\r\n\r\n h1 {\r\n font-size: 1.25rem;\r\n }\r\n\r\n .stats {\r\n gap: 1rem;\r\n }\r\n\r\n .stat {\r\n padding: 0.4rem 0.75rem;\r\n }\r\n\r\n .stat-value {\r\n font-size: 1.25rem;\r\n }\r\n\r\n .main {\r\n padding: 1rem;\r\n }\r\n\r\n .grid {\r\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\r\n gap: 1rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <header class=\"header\">\r\n <div class=\"header-content\">\r\n <div class=\"title-row\">\r\n <div class=\"title-section\">\r\n <h1>Swag Catalog<\/h1>\r\n <p class=\"subtitle\">Browse our selection of customizable branded merchandise. All items can be personalized with your logo.<\/p>\r\n <\/div>\r\n <div class=\"stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\" id=\"totalItems\">-<\/div>\r\n <div class=\"stat-label\">Total Items<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\" id=\"totalCategories\">-<\/div>\r\n <div class=\"stat-label\">Categories<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\" id=\"totalTypes\">-<\/div>\r\n <div class=\"stat-label\">Product Types<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"controls\">\r\n <button class=\"clear-filters\" id=\"clearFilters\" style=\"display: none;\">Clear Filters<\/button>\r\n <div class=\"search-container\">\r\n <input type=\"text\" class=\"search-input\" id=\"searchInput\" placeholder=\"Search products...\">\r\n <\/div>\r\n <div class=\"filter-group\">\r\n <select id=\"categoryFilter\">\r\n <option value=\"\">All Categories<\/option>\r\n <\/select>\r\n <select id=\"typeFilter\">\r\n <option value=\"\">All Types<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <main class=\"main\">\r\n <div class=\"results-info\">\r\n <div class=\"results-count\">\r\n Showing <strong id=\"showingCount\">0<\/strong> of <strong id=\"filteredCount\">0<\/strong> products\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid\" id=\"cardGrid\">\r\n <div class=\"loading\" style=\"grid-column: 1\/-1;\">\r\n <div class=\"spinner\"><\/div>\r\n <p>Loading swag catalog...<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"pagination\" id=\"pagination\"><\/div>\r\n <\/main>\r\n\r\n <script>\r\n let allItems = [];\r\n let filteredItems = [];\r\n let currentPage = 1;\r\n const itemsPerPage = 24;\r\n\r\n \/\/ Parse CSV\r\n function parseCSV(csv) {\r\n const lines = csv.trim().split('\\n');\r\n const data = [];\r\n \r\n for (let i = 1; i < lines.length; i++) {\r\n const values = parseCSVLine(lines[i]);\r\n if (values.length >= 5 && values[0] && values[1]) {\r\n \/\/ Get primary category (first one if multiple)\r\n let categories = (values[2] || '').replace(\/[\\r\\n\"]\/g, '').trim();\r\n let primaryCategory = categories.split(',')[0].trim();\r\n \r\n data.push({\r\n image: values[0].replace(\/[\\r\\n\"]\/g, '').trim(),\r\n name: values[1].replace(\/[\\r\\n\"]\/g, '').trim(),\r\n category: primaryCategory,\r\n allCategories: categories,\r\n type: (values[3] || '').replace(\/[\\r\\n\"]\/g, '').trim(),\r\n price: (values[4] || '').replace(\/[\\r\\n\"]\/g, '').trim()\r\n });\r\n }\r\n }\r\n return data;\r\n }\r\n\r\n function parseCSVLine(line) {\r\n const result = [];\r\n let current = '';\r\n let inQuotes = false;\r\n \r\n for (let i = 0; i < line.length; i++) {\r\n const char = line[i];\r\n \r\n if (char === '\"') {\r\n if (inQuotes && line[i + 1] === '\"') {\r\n current += '\"';\r\n i++;\r\n } else {\r\n inQuotes = !inQuotes;\r\n }\r\n } else if (char === ',' && !inQuotes) {\r\n result.push(current);\r\n current = '';\r\n } else {\r\n current += char;\r\n }\r\n }\r\n result.push(current);\r\n return result.map(v => v.trim());\r\n }\r\n\r\n \/\/ Load data from file\r\n async function loadData() {\r\n try {\r\n const response = await fetch('https:\/\/trucentive.com\/stage\/incentives\/trucentive_swag_catalog.csv');\r\n if (response.ok) {\r\n const text = await response.text();\r\n allItems = parseCSV(text);\r\n console.log('Loaded ' + allItems.length + ' items from CSV file');\r\n } else {\r\n throw new Error('CSV file not found');\r\n }\r\n } catch (e) {\r\n console.error('Error loading CSV:', e);\r\n document.getElementById('cardGrid').innerHTML = `\r\n <div class=\"empty-state\" style=\"grid-column: 1\/-1;\">\r\n <h3>Could not load swag catalog<\/h3>\r\n <p>Unable to load the swag catalog. Please try again later.<\/p>\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n \r\n initializeApp();\r\n }\r\n\r\n function initializeApp() {\r\n populateFilters();\r\n updateStats();\r\n filterItems();\r\n setupEventListeners();\r\n }\r\n\r\n function populateFilters() {\r\n \/\/ Get unique categories\r\n const categories = [...new Set(allItems.map(item => item.category))].filter(c => c && c.length > 0).sort();\r\n const categorySelect = document.getElementById('categoryFilter');\r\n categorySelect.innerHTML = '<option value=\"\">All Categories<\/option>';\r\n categories.forEach(category => {\r\n const option = document.createElement('option');\r\n option.value = category;\r\n option.textContent = category;\r\n categorySelect.appendChild(option);\r\n });\r\n\r\n \/\/ Populate type filter based on all items initially\r\n updateTypeFilter();\r\n }\r\n\r\n function updateTypeFilter() {\r\n const selectedCategory = document.getElementById('categoryFilter').value;\r\n const typeSelect = document.getElementById('typeFilter');\r\n const currentType = typeSelect.value;\r\n \r\n \/\/ Filter items based on selected category\r\n let itemsToConsider = allItems;\r\n if (selectedCategory) {\r\n itemsToConsider = allItems.filter(item => item.category === selectedCategory);\r\n }\r\n \r\n \/\/ Get unique types from filtered items\r\n const types = [...new Set(itemsToConsider.map(item => item.type))].filter(t => t && t.length > 0).sort();\r\n \r\n typeSelect.innerHTML = '<option value=\"\">All Types<\/option>';\r\n types.forEach(type => {\r\n const option = document.createElement('option');\r\n option.value = type;\r\n option.textContent = type;\r\n typeSelect.appendChild(option);\r\n });\r\n \r\n \/\/ Restore selected type if it's still available, otherwise reset\r\n if (types.includes(currentType)) {\r\n typeSelect.value = currentType;\r\n } else {\r\n typeSelect.value = '';\r\n }\r\n }\r\n\r\n function updateStats() {\r\n document.getElementById('totalItems').textContent = allItems.length.toLocaleString();\r\n document.getElementById('totalCategories').textContent = new Set(allItems.map(item => item.category)).size.toLocaleString();\r\n document.getElementById('totalTypes').textContent = new Set(allItems.map(item => item.type)).size.toLocaleString();\r\n }\r\n\r\n function filterItems() {\r\n const search = document.getElementById('searchInput').value.toLowerCase();\r\n const category = document.getElementById('categoryFilter').value;\r\n const type = document.getElementById('typeFilter').value;\r\n \r\n filteredItems = allItems.filter(item => {\r\n const matchesSearch = !search || item.name.toLowerCase().includes(search) || item.allCategories.toLowerCase().includes(search);\r\n const matchesCategory = !category || item.category === category;\r\n const matchesType = !type || item.type === type;\r\n return matchesSearch && matchesCategory && matchesType;\r\n });\r\n \r\n currentPage = 1;\r\n renderItems();\r\n renderPagination();\r\n updateResultsInfo();\r\n \r\n const hasFilters = search || category || type;\r\n document.getElementById('clearFilters').style.display = hasFilters ? 'block' : 'none';\r\n }\r\n\r\n function renderItems() {\r\n const grid = document.getElementById('cardGrid');\r\n const start = (currentPage - 1) * itemsPerPage;\r\n const end = start + itemsPerPage;\r\n const pageItems = filteredItems.slice(start, end);\r\n \r\n if (pageItems.length === 0) {\r\n grid.innerHTML = `\r\n <div class=\"empty-state\" style=\"grid-column: 1\/-1;\">\r\n <h3>No products found<\/h3>\r\n <p>Try adjusting your search or filters<\/p>\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n \r\n grid.innerHTML = pageItems.map((item, index) => `\r\n <div class=\"card\" style=\"animation-delay: ${index * 25}ms\">\r\n <img decoding=\"async\" class=\"card-image\" \r\n src=\"${item.image}\" \r\n alt=\"${escapeHtml(item.name)}\"\r\n loading=\"lazy\"\r\n onerror=\"this.src='data:image\/svg+xml,<svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 300 300%22><rect fill=%22%23f1f5f9%22 width=%22300%22 height=%22300%22\/><text x=%2250%%22 y=%2250%%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%2394a3b8%22 font-family=%22sans-serif%22 font-size=%2214%22>Image unavailable<\/text><\/svg>'\">\r\n <div class=\"card-content\">\r\n <div class=\"card-name\">${escapeHtml(item.name)}<\/div>\r\n <div class=\"card-price\">${escapeHtml(item.price)}<\/div>\r\n <div class=\"card-meta\">\r\n <span class=\"badge badge-type\">${escapeHtml(item.type)}<\/span>\r\n <span class=\"badge badge-category\" title=\"${escapeHtml(item.category)}\">${escapeHtml(item.category)}<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n }\r\n\r\n function escapeHtml(text) {\r\n const div = document.createElement('div');\r\n div.textContent = text;\r\n return div.innerHTML;\r\n }\r\n\r\n function renderPagination() {\r\n const totalPages = Math.ceil(filteredItems.length \/ itemsPerPage);\r\n const pagination = document.getElementById('pagination');\r\n \r\n if (totalPages <= 1) {\r\n pagination.innerHTML = '';\r\n return;\r\n }\r\n \r\n let html = '';\r\n \r\n html += `<button class=\"page-btn\" ${currentPage === 1 ? 'disabled' : ''} onclick=\"goToPage(${currentPage - 1})\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M15 18l-6-6 6-6\"\/>\r\n <\/svg>\r\n <\/button>`;\r\n \r\n const pages = getPageNumbers(currentPage, totalPages);\r\n pages.forEach((page, index) => {\r\n if (page === '...') {\r\n html += `<span class=\"page-ellipsis\">...<\/span>`;\r\n } else {\r\n html += `<button class=\"page-btn ${page === currentPage ? 'active' : ''}\" onclick=\"goToPage(${page})\">${page}<\/button>`;\r\n }\r\n });\r\n \r\n html += `<button class=\"page-btn\" ${currentPage === totalPages ? 'disabled' : ''} onclick=\"goToPage(${currentPage + 1})\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M9 18l6-6-6-6\"\/>\r\n <\/svg>\r\n <\/button>`;\r\n \r\n pagination.innerHTML = html;\r\n }\r\n\r\n function getPageNumbers(current, total) {\r\n if (total <= 7) {\r\n return Array.from({length: total}, (_, i) => i + 1);\r\n }\r\n \r\n if (current <= 3) {\r\n return [1, 2, 3, 4, '...', total];\r\n }\r\n \r\n if (current >= total - 2) {\r\n return [1, '...', total - 3, total - 2, total - 1, total];\r\n }\r\n \r\n return [1, '...', current - 1, current, current + 1, '...', total];\r\n }\r\n\r\n function goToPage(page) {\r\n const totalPages = Math.ceil(filteredItems.length \/ itemsPerPage);\r\n if (page >= 1 && page <= totalPages) {\r\n currentPage = page;\r\n renderItems();\r\n renderPagination();\r\n updateResultsInfo();\r\n \/\/ Scroll to top of main content, just below the sticky header\r\n const mainContent = document.querySelector('.main');\r\n const headerHeight = document.querySelector('.header').offsetHeight;\r\n window.scrollTo({ top: mainContent.offsetTop - headerHeight - 10, behavior: 'smooth' });\r\n }\r\n }\r\n\r\n function updateResultsInfo() {\r\n const start = (currentPage - 1) * itemsPerPage + 1;\r\n const end = Math.min(currentPage * itemsPerPage, filteredItems.length);\r\n document.getElementById('showingCount').textContent = filteredItems.length === 0 ? '0' : `${start}-${end}`;\r\n document.getElementById('filteredCount').textContent = filteredItems.length.toLocaleString();\r\n }\r\n\r\n function clearFilters() {\r\n document.getElementById('searchInput').value = '';\r\n document.getElementById('categoryFilter').value = '';\r\n document.getElementById('typeFilter').value = '';\r\n filterItems();\r\n }\r\n\r\n function setupEventListeners() {\r\n let debounceTimer;\r\n document.getElementById('searchInput').addEventListener('input', () => {\r\n clearTimeout(debounceTimer);\r\n debounceTimer = setTimeout(filterItems, 200);\r\n });\r\n \r\n document.getElementById('categoryFilter').addEventListener('change', () => {\r\n updateTypeFilter();\r\n filterItems();\r\n });\r\n document.getElementById('typeFilter').addEventListener('change', filterItems);\r\n document.getElementById('clearFilters').addEventListener('click', clearFilters);\r\n }\r\n\r\n \/\/ Initialize\r\n loadData();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>One effective way to enhance your brand’s visibility and create a positive association is through swag and logo wear.<\/p>\n","protected":false},"author":1,"featured_media":99437,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"categories":[],"tags":[],"media_tag":[],"class_list":["post-99609","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/trucentive.com\/stage\/wp-json\/wp\/v2\/pages\/99609","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trucentive.com\/stage\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/trucentive.com\/stage\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/trucentive.com\/stage\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trucentive.com\/stage\/wp-json\/wp\/v2\/comments?post=99609"}],"version-history":[{"count":0,"href":"https:\/\/trucentive.com\/stage\/wp-json\/wp\/v2\/pages\/99609\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/trucentive.com\/stage\/wp-json\/wp\/v2\/media\/99437"}],"wp:attachment":[{"href":"https:\/\/trucentive.com\/stage\/wp-json\/wp\/v2\/media?parent=99609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trucentive.com\/stage\/wp-json\/wp\/v2\/categories?post=99609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trucentive.com\/stage\/wp-json\/wp\/v2\/tags?post=99609"},{"taxonomy":"media_tag","embeddable":true,"href":"https:\/\/trucentive.com\/stage\/wp-json\/wp\/v2\/media_tag?post=99609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}