{"id":28,"date":"2026-04-21T17:22:29","date_gmt":"2026-04-21T17:22:29","guid":{"rendered":"https:\/\/ssl.bitsmitra.com\/?page_id=28"},"modified":"2026-04-21T17:22:29","modified_gmt":"2026-04-21T17:22:29","slug":"ecommerce","status":"publish","type":"page","link":"https:\/\/ssl.bitsmitra.com\/index.php\/ecommerce\/","title":{"rendered":"ecommerce"},"content":{"rendered":"<div id=\"cccDesigner\" class=\"ccc-container\">\r\n\r\n    <!-- HERO -->\r\n    <div class=\"ccc-hero\">\r\n        <div class=\"ccc-tagline\">Handcrafted Wedding Favors<\/div>\r\n        <h1>Custom Can Coolers<br>for your special day<\/h1>\r\n        <p>Personalize every detail \u2014 from the design to the font. Perfect for weddings, showers, and celebrations.<\/p>\r\n        \r\n        <div class=\"ccc-badges\">\r\n            <div class=\"ccc-badge\">\u2726 Full-color print<\/div>\r\n            <div class=\"ccc-badge\">Min. 25 pieces<\/div>\r\n            <div class=\"ccc-badge\">7\u201310 day turnaround<\/div>\r\n            <div class=\"ccc-badge\">Mix & match sizes<\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ccc-order-layout\">\r\n\r\n        <!-- MAIN CONFIGURATOR -->\r\n        <div class=\"ccc-panel\">\r\n\r\n            <!-- STEP 1: Sizes -->\r\n            <div id=\"step1\" class=\"ccc-step-panel active\">\r\n                <h3 class=\"ccc-panel-title\">Choose your sizes<\/h3>\r\n                <div class=\"ccc-size-grid\">\r\n                    <!-- Slim -->\r\n                    <div class=\"ccc-size-card\" data-size=\"slim\">\r\n                        <div class=\"ccc-size-name\">SLIM<\/div>\r\n                        <div class=\"ccc-size-desc\">12 oz Slim<\/div>\r\n                        <div class=\"ccc-qty-row\">\r\n                            <button class=\"ccc-qty-btn\" data-size=\"slim\" data-delta=\"-1\">\u2212<\/button>\r\n                            <input type=\"number\" id=\"qty-slim\" class=\"ccc-qty-input\" value=\"0\" data-size=\"slim\">\r\n                            <button class=\"ccc-qty-btn\" data-size=\"slim\" data-delta=\"1\">+<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <!-- Regular -->\r\n                    <div class=\"ccc-size-card selected\" data-size=\"regular\">\r\n                        <div class=\"ccc-size-name\">REGULAR<\/div>\r\n                        <div class=\"ccc-size-desc\">12 oz Regular<\/div>\r\n                        <div class=\"ccc-qty-row\">\r\n                            <button class=\"ccc-qty-btn\" data-size=\"regular\" data-delta=\"-1\">\u2212<\/button>\r\n                            <input type=\"number\" id=\"qty-regular\" class=\"ccc-qty-input\" value=\"50\" data-size=\"regular\">\r\n                            <button class=\"ccc-qty-btn\" data-size=\"regular\" data-delta=\"1\">+<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <!-- Tall -->\r\n                    <div class=\"ccc-size-card\" data-size=\"tall\">\r\n                        <div class=\"ccc-size-name\">TALL<\/div>\r\n                        <div class=\"ccc-size-desc\">16 oz Tall<\/div>\r\n                        <div class=\"ccc-qty-row\">\r\n                            <button class=\"ccc-qty-btn\" data-size=\"tall\" data-delta=\"-1\">\u2212<\/button>\r\n                            <input type=\"number\" id=\"qty-tall\" class=\"ccc-qty-input\" value=\"0\" data-size=\"tall\">\r\n                            <button class=\"ccc-qty-btn\" data-size=\"tall\" data-delta=\"1\">+<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <p class=\"ccc-min-qty-note\">\u2726 Minimum 25 pcs total \u2022 Price breaks at 50, 100, 200<\/p>\r\n                <button onclick=\"cccGoStep(2)\" class=\"ccc-btn-primary\">Continue to Color \u2192<\/button>\r\n            <\/div>\r\n\r\n            <!-- STEP 2: Color -->\r\n            <div id=\"step2\" class=\"ccc-step-panel\">\r\n                <h3 class=\"ccc-panel-title\">Choose your cooler color<\/h3>\r\n                <div id=\"cccColorGrid\" class=\"ccc-color-grid\"><\/div>\r\n                <button onclick=\"cccGoStep(3)\" class=\"ccc-btn-primary\">Continue to Design \u2192<\/button>\r\n                <button onclick=\"cccGoStep(1)\" class=\"ccc-btn-secondary\">\u2190 Back<\/button>\r\n            <\/div>\r\n\r\n            <!-- STEP 3: Design -->\r\n            <div id=\"step3\" class=\"ccc-step-panel\">\r\n                <h3 class=\"ccc-panel-title\">Choose your design<\/h3>\r\n                <div class=\"ccc-design-tabs\">\r\n                    <button class=\"ccc-tab-btn active\" data-tab=\"templates\">Pre-made Templates<\/button>\r\n                    <button class=\"ccc-tab-btn\" data-tab=\"scratch\">Design from Scratch<\/button>\r\n                    <button class=\"ccc-tab-btn\" data-tab=\"upload\">Upload Artwork<\/button>\r\n                <\/div>\r\n\r\n                <!-- Templates Tab -->\r\n                <div id=\"ccc-tab-templates\" class=\"ccc-tab-content\">\r\n                    <div id=\"cccTemplateGrid\" class=\"ccc-template-grid\"><\/div>\r\n                <\/div>\r\n\r\n                <!-- Scratch Tab -->\r\n                <div id=\"ccc-tab-scratch\" class=\"ccc-tab-content ccc-hidden\">\r\n                    <div class=\"ccc-notice-box\">\r\n                        <strong>\u270f\ufe0f Design your own from scratch<\/strong>\r\n                        <textarea id=\"scratchDesc\" class=\"ccc-field-textarea\" placeholder=\"Describe your design idea...\"><\/textarea>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Upload Tab -->\r\n                <!-- Upload Tab -->\r\n                <div id=\"ccc-tab-upload\" class=\"ccc-tab-content ccc-hidden\">\r\n                    <div id=\"uploadZone\" class=\"ccc-upload-zone\">\r\n                        <div class=\"ccc-upload-icon\">\ud83d\udcc1<\/div>\r\n                        <div class=\"ccc-upload-text\">Click to upload artwork<\/div>\r\n                        <div class=\"ccc-upload-sub\">JPG, PNG, PDF, AI, EPS, <strong>SVG<\/strong> \u2022 Max 50MB<\/div>\r\n                    <\/div>\r\n                    <input type=\"file\" id=\"fileInput\" style=\"display:none\" accept=\".jpg,.jpeg,.png,.pdf,.ai,.eps,.svg\">\r\n                    \r\n                    <div id=\"uploadProgress\" class=\"ccc-hidden\">Uploading...<\/div>\r\n                    <div id=\"uploadedFileInfo\" class=\"ccc-hidden\">\r\n                        <strong>\u2713 Uploaded:<\/strong> <span id=\"uploadedFileName\"><\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"ccc-personalize-box\">\r\n                    <div class=\"ccc-personalize-title\">Personalize your design<\/div>\r\n                    <div class=\"ccc-field-row\">\r\n                        <label class=\"ccc-field-label\">Names<\/label>\r\n                        <input type=\"text\" id=\"f-names\" class=\"ccc-field-input\" value=\"Sarah & James\">\r\n                    <\/div>\r\n                    <div class=\"ccc-field-row\">\r\n                        <label class=\"ccc-field-label\">Date<\/label>\r\n                        <input type=\"text\" id=\"f-date\" class=\"ccc-field-input\" value=\"June 14, 2025\">\r\n                    <\/div>\r\n                    <div class=\"ccc-field-row\">\r\n                        <label class=\"ccc-field-label\">Location<\/label>\r\n                        <input type=\"text\" id=\"f-location\" class=\"ccc-field-input\" value=\"Napa Valley, CA\">\r\n                    <\/div>\n                    <div class=\"ccc-field-row\">\n                        <label class=\"ccc-field-label\">Short Message<\/label>\n                        <input type=\"text\" id=\"f-message\" class=\"ccc-field-input\" value=\"Cheers to love!\">\n                    <\/div>\r\n                <\/div>\r\n\r\n                <button id=\"cccAddToCartBtn\" class=\"ccc-btn-primary\">Add to Cart \u2192<\/button>\r\n                <button onclick=\"cccGoStep(2)\" class=\"ccc-btn-secondary\">\u2190 Back<\/button>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n        <!-- PREVIEW SIDEBAR -->\r\n        <div class=\"ccc-preview-panel\">\r\n            <h3 class=\"ccc-preview-title\">Live Preview<\/h3>\r\n            <div class=\"ccc-can-preview-wrap\">\r\n                <!-- Your SVG preview goes here -->\r\n                <svg id=\"canPreview\" width=\"140\" height=\"220\" viewBox=\"0 0 140 220\">\r\n            <defs>\r\n                <pattern id=\"templatePattern\" x=\"0\" y=\"0\" width=\"140\" height=\"220\" patternUnits=\"userSpaceOnUse\">\r\n                    <image id=\"templateImage\" x=\"0\" y=\"0\" width=\"140\" height=\"220\" preserveAspectRatio=\"xMidYMid slice\"\/>\r\n                <\/pattern>\r\n            <\/defs>\r\n            <rect id=\"canBody\" x=\"20\" y=\"20\" width=\"100\" height=\"180\" rx=\"18\" fill=\"#C97B5A\"\/>\r\n            <rect x=\"28\" y=\"28\" width=\"84\" height=\"164\" rx=\"14\" fill=\"rgba(255,255,255,0.15)\"\/>\r\n            <!--<rect id=\"designBackground\" x=\"32\" y=\"45\" width=\"76\" height=\"130\" rx=\"8\" fill=\"rgba(255,255,255,0.1)\"\/>-->\r\n            <g id=\"designGroup\">\r\n                <g id=\"templateDisplay\" transform=\"translate(70, 65)\">\r\n                    <text id=\"previewTemplateIcon\" x=\"0\" y=\"0\" text-anchor=\"middle\" font-size=\"14\" fill=\"rgba(255,255,255,0.8)\">\ud83c\udf38<\/text>\r\n                    <text id=\"previewTemplateText\" x=\"0\" y=\"14\" text-anchor=\"middle\" font-size=\"6\" fill=\"rgba(255,255,255,0.6)\" font-family=\"Jost,sans-serif\">Floral Wreath<\/text>\r\n                <\/g>\r\n                <text id=\"previewNames\" x=\"70\" y=\"105\" text-anchor=\"middle\" font-size=\"11\" fill=\"white\" font-family=\"Playfair Display,serif\" font-weight=\"500\">Sarah & James<\/text>\r\n                <text id=\"previewDate\" x=\"70\" y=\"122\" text-anchor=\"middle\" font-size=\"7\" fill=\"rgba(255,255,255,0.85)\" font-family=\"Jost,sans-serif\">June 14, 2025<\/text>\r\n                <text id=\"previewLocation\" x=\"70\" y=\"135\" text-anchor=\"middle\" font-size=\"6\" fill=\"rgba(255,255,255,0.75)\" font-family=\"Jost,sans-serif\">Napa Valley, CA<\/text>\r\n                <text id=\"previewMsg\" x=\"70\" y=\"152\" text-anchor=\"middle\" font-size=\"6\" fill=\"rgba(255,255,255,0.7)\" font-family=\"Jost,sans-serif\" font-style=\"italic\">Cheers to love!<\/text>\r\n            <\/g>\r\n            <ellipse cx=\"70\" cy=\"20\" rx=\"50\" ry=\"8\" fill=\"#D4C0AD\"\/>\r\n            <ellipse cx=\"70\" cy=\"200\" rx=\"50\" ry=\"8\" fill=\"#D4C0AD\"\/>\r\n        <\/svg>\r\n            <\/div>\r\n\r\n            <div class=\"ccc-order-summary\"><\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-28","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ssl.bitsmitra.com\/index.php\/wp-json\/wp\/v2\/pages\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ssl.bitsmitra.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ssl.bitsmitra.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ssl.bitsmitra.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ssl.bitsmitra.com\/index.php\/wp-json\/wp\/v2\/comments?post=28"}],"version-history":[{"count":1,"href":"https:\/\/ssl.bitsmitra.com\/index.php\/wp-json\/wp\/v2\/pages\/28\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/ssl.bitsmitra.com\/index.php\/wp-json\/wp\/v2\/pages\/28\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/ssl.bitsmitra.com\/index.php\/wp-json\/wp\/v2\/media?parent=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}