[{"data":1,"prerenderedAt":877},["ShallowReactive",2],{"header:help":3,"footer:default":67,"story:navigation\u002Fsearch:help":250,"story:help\u002Fcategories":288,"story:help\u002Farticles\u002Fadd-a-date-picker-field-to-the-checkout":314,"no-guide:add-a-date-picker-field-to-the-checkout":59,"article:\u002Fhelp\u002Farticles\u002Fadd-a-date-picker-field-to-the-checkout":609,"story:contact":633,"help:tree:9dbd3527-1a60-49cd-8a69-e8e7155afc47":822,"_apollo:default":876},{"name":4,"created_at":5,"published_at":6,"updated_at":7,"id":8,"uuid":9,"content":10,"slug":57,"full_slug":58,"sort_by_date":59,"position":60,"tag_list":61,"is_startpage":24,"parent_id":62,"meta_data":59,"group_id":63,"first_published_at":64,"release_id":59,"lang":65,"path":59,"alternates":66,"default_full_slug":59,"translated_slugs":59},"Help Center Header","2024-08-09T18:06:34.939Z","2024-10-21T21:58:39.217Z","2024-10-21T21:58:39.232Z",10082752,"3e9b88f7-c163-4657-a2f2-62532d600fad",{"_uid":11,"link":12,"badge":16,"items":17,"title":13,"buttons":50,"new_tab":24,"submenu":51,"alignment":13,"component":52,"badge_link":53,"top_menu_items":56},"e5645a1a-f991-40e8-8d67-e40ebc082b5a",{"id":13,"url":13,"linktype":14,"fieldtype":15,"cached_url":13},"","story","multilink","Help Center",[18,27,34,39,44],{"_uid":19,"link":20,"title":23,"new_tab":24,"submenu":25,"component":26},"5cbe2861-1f49-4166-97da-a4dddd8105e3",{"id":21,"url":13,"linktype":14,"fieldtype":15,"cached_url":22},"4c0a2d99-ec30-4579-8ef1-6bf5564d4839","help\u002Fcategories\u002F","Articles",false,[],"header___item",{"_uid":28,"link":29,"title":32,"new_tab":33,"component":26},"1c8edeb5-b9e9-4cb8-b1c6-c1f292f7d7cd",{"id":13,"url":30,"linktype":31,"fieldtype":15,"cached_url":30},"https:\u002F\u002Fwiki.foxycart.com\u002F","url","Documentation",true,{"_uid":35,"link":36,"title":38,"new_tab":33,"component":26},"8d7df70e-f087-4da0-b616-6f0e9a5af35c",{"id":13,"url":37,"linktype":31,"fieldtype":15,"cached_url":37},"https:\u002F\u002Fapi.foxycart.com\u002F","API Documentation",{"_uid":40,"link":41,"title":43,"new_tab":33,"component":26},"f76e7944-23d5-4652-87e4-cdae79272762",{"id":13,"url":42,"linktype":31,"fieldtype":15,"cached_url":42},"https:\u002F\u002Fstatus.foxy.io\u002F","System Status",{"_uid":45,"link":46,"title":49,"new_tab":24,"component":26},"0de16771-4c84-466c-a1da-d8568113c71f",{"id":47,"url":13,"linktype":14,"fieldtype":15,"cached_url":48},"01e4e370-f9b9-45af-8fa9-f15540699b0d","contact","Contact Us",[],[],"header",{"id":54,"url":13,"linktype":14,"fieldtype":15,"cached_url":55},"4a679eb7-662d-4ea4-a976-5a2acbf0b663","help\u002F",[],"help-header","navigation\u002Fhelp-header",null,20,[],10082747,"71b81c2e-5e09-48a1-a397-a3c72fcd344a","2022-09-21T14:50:25.655Z","default",[],{"name":68,"created_at":69,"published_at":70,"updated_at":71,"id":72,"uuid":73,"content":74,"slug":243,"full_slug":244,"sort_by_date":59,"position":245,"tag_list":246,"is_startpage":24,"parent_id":62,"meta_data":59,"group_id":247,"first_published_at":248,"release_id":59,"lang":65,"path":59,"alternates":249,"default_full_slug":59,"translated_slugs":59},"Default Footer","2024-08-09T18:06:59.024Z","2025-09-04T06:24:46.223Z","2025-09-04T06:24:46.241Z",10082753,"e59e67ac-248a-482f-84a1-53d4f318186a",{"_uid":75,"about":76,"logos":77,"socials":82,"sections":108,"component":225,"cta_title":226,"bottom_links":227,"cta_subtitle":241,"cta_button_link":242,"cta_button_text":183},"830983f5-c4c4-43c8-b150-86a5e3fa6dc8","Foxy’s hosted cart & payment page allow you to sell anything, using your existing website or platform.",[78],{"id":79,"alt":13,"name":13,"focus":13,"title":13,"filename":80,"copyright":13,"fieldtype":81},14760,"https:\u002F\u002Fa-us.storyblok.com\u002Ff\u002F1001040\u002Fx\u002F3b030847ec\u002Fb-corp.svg","asset",[83,90,96,102],{"_uid":84,"icon":85,"link":86,"name":88,"component":89},"faf0a618-ea94-42ea-9182-03be18c43216","fa-facebook",{"id":13,"url":87,"linktype":31,"fieldtype":15,"cached_url":87},"https:\u002F\u002Fwww.facebook.com\u002Ffoxycart","Facebook","footer___social",{"_uid":91,"icon":92,"link":93,"name":95,"component":89},"14309c18-7e79-423e-b375-34555bac0811","fa-instagram",{"id":13,"url":94,"linktype":31,"fieldtype":15,"cached_url":94},"https:\u002F\u002Fwww.instagram.com\u002Ffoxy_io","Instagram",{"_uid":97,"icon":98,"link":99,"name":101,"component":89},"8f7fe7cf-0dd3-4596-8334-226ea466716a","fa-linkedin",{"id":13,"url":100,"linktype":31,"fieldtype":15,"cached_url":100},"https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Ffoxycart.com","LinkedIn",{"_uid":103,"icon":104,"link":105,"name":107,"component":89},"90a675b4-dd97-40b5-be09-00a87223d4c5","fa-youtube",{"id":13,"url":106,"linktype":31,"fieldtype":15,"cached_url":106},"https:\u002F\u002Fwww.youtube.com\u002Fuser\u002Ffoxycart","Youtube",[109,139,184,206],{"_uid":110,"name":111,"items":112,"component":138},"82849945-282f-488c-b18d-a8d2252f514a","Company",[113,120,126,132],{"_uid":114,"link":115,"title":118,"new_tab":24,"component":119},"1f699ab1-938b-4d9d-9825-aabcbe6f57fe",{"id":116,"url":13,"linktype":14,"fieldtype":15,"cached_url":117},"63634293-a749-4226-9439-9f38ee6dcda0","about-us","About Us","footer___menu_items",{"_uid":121,"link":122,"title":125,"new_tab":24,"component":119},"b26b00f1-a0e7-4be2-8ab3-428b8cc841f8",{"id":123,"url":13,"linktype":14,"fieldtype":15,"cached_url":124},"26cb7c55-faed-4a77-a291-1552d4111b3e","how-foxy-works","How Foxy Works",{"_uid":127,"link":128,"title":131,"new_tab":24,"component":119},"b40c68a0-1ceb-4226-9515-6176534f61fe",{"id":129,"url":13,"linktype":14,"fieldtype":15,"cached_url":130},"dc6657d7-7f4f-4c0d-b781-e971b038ee26","for-good","Foxy For Good",{"_uid":133,"link":134,"title":137,"new_tab":24,"component":119},"3ad0c134-bef9-4fff-b891-e09f16109036",{"id":135,"url":13,"linktype":14,"fieldtype":15,"cached_url":136},"23cae210-baf4-4588-9862-d09f4f52ccd2","brand-assets","Brand Assets","footer___section",{"_uid":140,"name":141,"items":142,"component":138},"a6805fa8-ac60-47f1-b8f0-f27aded0afbe","Product",[143,149,155,161,167,173,179],{"_uid":144,"link":145,"title":148,"new_tab":24,"component":119},"b39c8a4e-2383-486f-b76a-11fbb15d8134",{"id":146,"url":13,"linktype":14,"fieldtype":15,"cached_url":147},"bb04690f-fe98-4ce6-80be-05b950f2364f","features\u002F","Features",{"_uid":150,"link":151,"title":154,"new_tab":24,"component":119},"64f8a41f-c181-433d-bc0a-fc94e71ecbf6",{"id":152,"url":13,"linktype":14,"fieldtype":15,"cached_url":153},"c450c58d-761d-48c0-a9af-0b064611689b","pricing","Pricing",{"_uid":156,"link":157,"title":160,"new_tab":24,"component":119},"6e0b287f-fd8c-4146-9e0e-0ab0b5c9ce3c",{"id":158,"url":13,"linktype":14,"fieldtype":15,"cached_url":159},"fab20ad9-e76a-4947-b709-3a6fdfa88028","blog\u002Fcategories\u002Fproduct-updates","Product Updates",{"_uid":162,"link":163,"title":166,"new_tab":24,"component":119},"47e5a074-a6b5-4f1c-8c2f-89a2ae9f83eb",{"id":164,"url":13,"linktype":14,"fieldtype":15,"cached_url":165},"d2c83612-d611-47f3-a3b4-ca7fe08540b8","changelogs\u002F","Changelogs",{"_uid":168,"link":169,"title":172,"new_tab":24,"component":119},"b5c08774-542f-4ffd-b357-c94d674488b9",{"id":170,"url":13,"linktype":14,"fieldtype":15,"cached_url":171},"08876121-0df3-4ed9-aa11-902b3e41cd02","whats-next","What's Next",{"_uid":174,"link":175,"title":178,"new_tab":24,"component":119},"9c2704ed-6d9f-43e1-9e67-c8d91c083288",{"id":176,"url":13,"linktype":14,"fieldtype":15,"cached_url":177},"056a7857-b18f-4025-8f97-91a38fc19bc8","compare\u002F","Compare",{"_uid":180,"link":181,"title":183,"new_tab":24,"component":119},"5f2db35b-674b-406a-8fa7-d246633af9fe",{"id":13,"url":182,"linktype":31,"fieldtype":15,"cached_url":182},"https:\u002F\u002Fadmin.foxy.io\u002Fsign-up","Try Foxy Free",{"_uid":185,"name":186,"items":187,"component":138},"63fa1f29-4252-4640-9922-fe310e69e54a","Security",[188,194,200],{"_uid":189,"link":190,"title":193,"new_tab":24,"component":119},"1158ddb6-9eb0-466f-8eb6-7ca2ae66c8b8",{"id":191,"url":13,"linktype":14,"fieldtype":15,"cached_url":192},"1f58fb2c-8681-4742-b6e8-09999beae9f6","security-contact","Security Contact",{"_uid":195,"link":196,"title":199,"new_tab":24,"component":119},"9a79c54a-6022-4dfd-854b-766f5e4703ba",{"id":197,"url":13,"linktype":14,"fieldtype":15,"cached_url":198},"55cbfcc3-425a-4261-8037-54e919851d2d","pci","PCI Compliance",{"_uid":201,"link":202,"title":205,"new_tab":24,"component":119},"0b85f5b6-9534-4071-b323-b39d053dd4d7",{"id":203,"url":13,"linktype":14,"fieldtype":15,"cached_url":204},"c3ac0fe3-83e2-4879-afbd-d4c83e1590df","help\u002Farticles\u002Four-official-domains-public-code","Domains & Codebases",{"_uid":207,"name":208,"items":209,"component":138},"998ded67-d107-49f4-8154-ca6be51671ec","Support",[210,213,216,219,222],{"_uid":211,"link":212,"title":16,"new_tab":24,"component":119},"594ffd35-3049-4004-bb08-0db568ebd819",{"id":54,"url":13,"linktype":14,"fieldtype":15,"cached_url":55},{"_uid":214,"link":215,"title":32,"new_tab":33,"component":119},"0a1a55ab-a985-4f9d-8b42-26da714d0c1c",{"id":13,"url":30,"linktype":31,"fieldtype":15,"cached_url":30},{"_uid":217,"link":218,"title":38,"new_tab":33,"component":119},"61e0b7c8-aadf-419b-a339-b3ccabc65bf4",{"id":13,"url":37,"linktype":31,"fieldtype":15,"cached_url":37},{"_uid":220,"link":221,"title":43,"new_tab":33,"component":119},"fd67a89e-1c54-4d31-94b5-64be999062d6",{"id":13,"url":42,"linktype":31,"fieldtype":15,"cached_url":42},{"_uid":223,"link":224,"title":49,"new_tab":24,"component":119},"231a6f71-e996-4ad4-b033-d4d5542f34f0",{"id":47,"url":13,"linktype":14,"fieldtype":15,"cached_url":48},"footer","Get started with our *unlimited free trial*.",[228,235],{"_uid":229,"link":230,"text":233,"component":234},"f0b77210-2632-45a2-8436-e57cad84d01a",{"id":231,"url":13,"linktype":14,"fieldtype":15,"cached_url":232},"60ba16a2-c1f4-485f-b978-8d2eeeafbf5a","terms-of-service","Terms of Service","footer___bottom_links",{"_uid":236,"link":237,"text":240,"component":234},"4bd497b0-993f-4b4d-a5b7-8a49c7c8fec9",{"id":238,"url":13,"linktype":14,"fieldtype":15,"cached_url":239},"332302b9-1d18-4016-b9c8-9b33c72d782b","privacy-policy","Privacy Policy","No credit card required.",{"id":13,"url":182,"linktype":31,"fieldtype":15,"cached_url":182},"default-footer","navigation\u002Fdefault-footer",50,[],"11006268-07f9-41e9-96f3-c51fb723399d","2022-09-21T20:39:02.357Z",[],{"name":251,"created_at":252,"published_at":253,"updated_at":254,"id":255,"uuid":256,"content":257,"slug":279,"full_slug":282,"sort_by_date":59,"position":283,"tag_list":284,"is_startpage":24,"parent_id":62,"meta_data":59,"group_id":285,"first_published_at":286,"release_id":59,"lang":65,"path":59,"alternates":287,"default_full_slug":59,"translated_slugs":59},"Search","2024-10-21T22:08:54.973Z","2025-05-26T09:17:25.790Z","2025-05-26T09:17:25.804Z",13592003,"14cbc359-9ac1-4a7a-a8de-ad4ac8ef26d4",{"_uid":258,"name":251,"indices":259,"summary":13,"component":279,"primary_image":280},"5e4a56e8-76f1-4790-b3a7-70f1be97d042",[260,265,269,274],{"key":261,"_uid":262,"icon":13,"name":263,"component":264},"all","c12a3210-7323-4273-8217-5215e52efe84","All","index",{"key":266,"_uid":267,"icon":268,"name":23,"component":264},"help_center_article","5acff080-95e4-44d3-8dcf-1b19720af382","fa-file-alt",{"key":270,"_uid":271,"icon":272,"name":273,"component":264},"help_center_guide","b8fbc206-c083-471e-a1f0-0ebeb90a669d","fa-book","Guides",{"key":275,"_uid":276,"icon":277,"name":278,"component":264},"blog_post","23419e83-2e56-4c4c-8a05-9fd1b3c9a9bd","fa-file-image","Blog Posts","search",{"id":59,"alt":59,"name":13,"focus":59,"title":59,"source":59,"filename":13,"copyright":59,"fieldtype":81,"meta_data":281},{},"navigation\u002Fsearch",60,[],"11e1fd31-95cd-4fc9-b736-8b8910663e6c","2024-10-21T23:17:05.904Z",[],{"name":23,"created_at":289,"published_at":290,"updated_at":291,"id":292,"uuid":21,"content":293,"slug":307,"full_slug":22,"sort_by_date":59,"position":308,"tag_list":309,"is_startpage":33,"parent_id":310,"meta_data":59,"group_id":311,"first_published_at":312,"release_id":59,"lang":65,"path":59,"alternates":313,"default_full_slug":59,"translated_slugs":59},"2022-09-19T14:42:29.685Z","2024-07-30T18:17:22.506Z","2024-07-30T18:17:22.525Z",2660,{"_uid":294,"icon":13,"name":23,"guides":295,"pinned":24,"summary":296,"category":13,"component":297,"blog_posts":298,"content_hub":24,"icon_custom":299,"case_studies":300,"faq_sections":301,"help_articles":302,"featured_guides":303,"mailbox_category":13,"featured_articles":304,"featured_blog_posts":305,"featured_case_studies":306},"d6dae89a-907a-4bf7-82de-fe2ba875ee6e",[],"Get your questions answered with our browsable knowledge base.","help_center_category",[],{"id":59,"alt":59,"name":13,"focus":59,"title":59,"filename":13,"copyright":59,"fieldtype":81},[],[],[],[],[],[],[],"categories",530,[],2658,"19ebcdd2-027f-47f5-9a5b-a8992c959578","2022-09-19T16:24:39.219Z",[],{"name":315,"created_at":316,"published_at":317,"updated_at":318,"id":319,"uuid":320,"content":321,"slug":602,"full_slug":603,"sort_by_date":59,"position":604,"tag_list":605,"is_startpage":24,"parent_id":606,"meta_data":59,"group_id":607,"first_published_at":317,"release_id":59,"lang":65,"path":59,"alternates":608,"default_full_slug":59,"translated_slugs":59},"Add a date picker field to the checkout","2026-07-21T15:35:11.034Z","2026-07-22T17:45:01.827Z","2026-07-22T17:45:01.845Z",200534061245020,"9dbd3527-1a60-49cd-8a69-e8e7155afc47",{"_uid":322,"body":323,"name":315,"image":597,"pinned":24,"summary":599,"category":600,"component":266,"related_articles":601},"1872f96d-754e-41cc-9c46-95c9d1f57432",{"type":324,"content":325},"doc",[326,333,363,370,375,388,393,398,403,408,414,452,457,462,468,473,478,483,488,498,529,533,543,548,553,561,566,571,587,592],{"type":327,"attrs":328,"content":329},"paragraph",{"textAlign":59},[330],{"text":331,"type":332},"Quite often - it's necessary to capture a date from the customer on the checkout. This could be to allow the customer to specify a preferred delivery date - but there are a number of other uses you might have.","text",{"type":327,"attrs":334,"content":335},{"textAlign":59},[336,338,345,347,353,355,361],{"text":337,"type":332},"There are a plenty of different javascript date pickers available online. We're going to use ",{"text":339,"type":332,"marks":340},"jQuery UI's",[341],{"type":342,"attrs":343},"link",{"href":344,"uuid":59,"anchor":59,"target":59,"linktype":31},"http:\u002F\u002Fjqueryui.com\u002Fdatepicker\u002F",{"text":346,"type":332}," solution here, ",{"text":348,"type":332,"marks":349},"pickadate.js",[350],{"type":342,"attrs":351},{"href":352,"uuid":59,"anchor":59,"target":59,"linktype":31},"http:\u002F\u002Famsul.ca\u002Fpickadate.js\u002Fdate\u002F",{"text":354,"type":332}," could also be a good choice, ",{"text":356,"type":332,"marks":357},"mobiscroll",[358],{"type":342,"attrs":359},{"href":360,"uuid":59,"anchor":59,"target":59,"linktype":31},"https:\u002F\u002Fmobiscroll.com\u002Fdate-time-picker-calendar",{"text":362,"type":332}," is a great but paid option. You can ultimately use whichever date picker you prefer for your needs.",{"type":364,"attrs":365,"content":367},"heading",{"level":366,"textAlign":59},2,[368],{"text":369,"type":332},"Step 1: Add date picker assets",{"type":327,"attrs":371,"content":372},{"textAlign":59},[373],{"text":374,"type":332},"You'll first need to include the necessary assets from your datepicker library.",{"type":327,"attrs":376,"content":377},{"textAlign":59},[378,380,386],{"text":379,"type":332},"For the default example using jQuery UI, that includes a javascript and CSS file. We'll be using Google's CDN versions of the jQuery UI files, ",{"text":381,"type":332,"marks":382},"accessible from here",[383],{"type":342,"attrs":384},{"href":385,"uuid":59,"anchor":59,"target":59,"linktype":31},"https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Flibraries\u002F#jquery-ui",{"text":387,"type":332},". If you're using a different option, get the required javascript and CSS from their documentation.",{"type":327,"attrs":389,"content":390},{"textAlign":59},[391],{"text":392,"type":332},"To include it on your store, head to the \"configuration\" section of your store's Foxy administration. Look for the \"Add custom header and footer code to your templates\" option there, and include the javascript in the \"custom footer\" and CSS in the \"custom header\" textareas.",{"type":327,"attrs":394,"content":395},{"textAlign":59},[396],{"text":397,"type":332},"If you're already specifying a custom checkout template for your store - you can also directly include these assets in your custom checkout template.",{"type":364,"attrs":399,"content":400},{"level":366,"textAlign":59},[401],{"text":402,"type":332},"Step 2: Add custom checkout field",{"type":327,"attrs":404,"content":405},{"textAlign":59},[406],{"text":407,"type":332},"You'll also need to add in your custom field, which can also be achieved from the \"configuration\" section of your store's Foxy administration. Look for the \"Add custom form fields to your checkout\" option and paste the following HTML there. If your store is enabled for multiship - and you need to capture the date for each different address, include it within the \"custom multiship checkout fields\" textarea. Otherwise include it in the \"custom checkout fields\" textarea.",{"type":409,"attrs":410,"content":411},"code_block",{"class":59},[412],{"text":413,"type":332},"\u003Cdiv class=\"fc-form-group\">\n\t\u003Cdiv class=\"col-md-8 col-md-offset-3\" data-fc-error-for=\"date-select\" data-fc-error-class=\"fc-alert-container--error\">\n\t\t\u003Cdiv class=\"fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active\">\n\t\t\t\u003Clabel class=\"fc-input-group-container__title fc-input-group-container__title--forced fc-form-label\">Shipping date\u003C\u002Flabel>\n\t\t\t\u003Cdiv class=\"fc-form-group date-select\">\n\t\t\t\t\u003Cinput class=\"fc-form-control\" placeholder=\"Select a date\" type=\"text\" id=\"date-select\" value=\"\" name=\"ship_date\" aria-required=\"true\" data-fc-required>\n\t\t\t\u003C\u002Fdiv>\n\t\t\u003C\u002Fdiv>\n\t\u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"type":415,"content":416},"blockquote",[417],{"type":327,"attrs":418,"content":419},{"textAlign":59},[420,425,427,432,434,438,440,444,446,450],{"text":421,"type":332,"marks":422},"Tip:",[423],{"type":424},"bold",{"text":426,"type":332}," If you update the name of the input (above as ",{"text":428,"type":332,"marks":429},"ship_date",[430],{"type":431},"code",{"text":433,"type":332},"), you'll also need to update the Twig placeholder within the value to match. Also, avoid having the name start as ",{"text":435,"type":332,"marks":436},"shipping_",[437],{"type":431},{"text":439,"type":332},", ",{"text":441,"type":332,"marks":442},"billing_",[443],{"type":431},{"text":445,"type":332}," or ",{"text":447,"type":332,"marks":448},"shipto_",[449],{"type":431},{"text":451,"type":332}," as it will interfere with storing the value clientside.",{"type":364,"attrs":453,"content":454},{"level":366,"textAlign":59},[455],{"text":456,"type":332},"Step 3: Add javascript",{"type":327,"attrs":458,"content":459},{"textAlign":59},[460],{"text":461,"type":332},"Finally - you need to add some javascript to initialise the date picker library. This will happen within the same \"Add custom header and footer code to your templates\" option on the configuration section - but this time within the \"footer\" textarea.",{"type":364,"attrs":463,"content":465},{"level":464,"textAlign":59},3,[466],{"text":467,"type":332},"jQuery UI",{"type":327,"attrs":469,"content":470},{"textAlign":59},[471],{"text":472,"type":332},"If you included the date picker field within the \"custom checkout fields\" textarea in step 2, you will use javascript like this:",{"type":409,"attrs":474,"content":475},{"class":59},[476],{"text":477,"type":332},"{% if context == \"checkout\" %}\n\u003Cscript>\nFC.client.on(\"render.done\", initDatePicker);\n\nfunction initDatePicker() {\n    var date_params = {\n        minDate: 0,\n        onSelect: function() {\n            $(this).trigger('focusout.fc', {validateNow: true});\n        }\n    };\n    \n    $(\"#date-select\").datepicker(date_params);\n};\n\u003C\u002Fscript>\n{% endif %}",{"type":327,"attrs":479,"content":480},{"textAlign":59},[481],{"text":482,"type":332},"If you're running a multiship store and you included the datepicker field in the \"custom multiship checkout fields\" textarea, you'll use this javascript instead:",{"type":409,"attrs":484,"content":485},{"class":59},[486],{"text":487,"type":332},"{% if context == \"checkout\" %}\n\u003Cscript>\nFC.client.on(\"render.done\", initDatePicker);\n\nfunction initDatePicker() {\n    var date_params = {\n        minDate: 0,\n        onSelect: function() {\n            $(this).trigger('focusout.fc', {validateNow: true});\n        }\n    };\n\n    if (FC.json.has_multiship) {\n        for (var i = 0; i \u003C FC.json.multiship_data.length; i++) {\n            $(\"#shipto_custom_\" + i + \"_date-select']\").datepicker(date_params);\n        }\n    } else {\n        $(\"#date-select\").datepicker(date_params);\n    }\n};\n\u003C\u002Fscript>\n{% endif %}",{"type":415,"content":489},[490],{"type":327,"attrs":491,"content":492},{"textAlign":59},[493,496],{"text":421,"type":332,"marks":494},[495],{"type":424},{"text":497,"type":332}," You'll only use one of the above javascript blocks - depending on which approach you took in step 2.",{"type":327,"attrs":499,"content":500},{"textAlign":59},[501,503,507,509,513,515,519,521,527],{"text":502,"type":332},"In both the blocks above, a ",{"text":504,"type":332,"marks":505},"date_params",[506],{"type":431},{"text":508,"type":332}," object is created to set any custom properties for the date picker. Included in the code is a ",{"text":510,"type":332,"marks":511},"minDate",[512],{"type":431},{"text":514,"type":332}," property to restrict the picker to only dates in the future, and an ",{"text":516,"type":332,"marks":517},"onSelect",[518],{"type":431},{"text":520,"type":332}," event callback to ensure the selected rate is validated on the checkout. You can expand on that object with ",{"text":522,"type":332,"marks":523},"whatever settings you like",[524],{"type":342,"attrs":525},{"href":526,"uuid":59,"anchor":59,"target":59,"linktype":31},"http:\u002F\u002Fapi.jqueryui.com\u002Fdatepicker\u002F",{"text":528,"type":332},".",{"type":364,"attrs":530,"content":531},{"level":464,"textAlign":59},[532],{"text":348,"type":332},{"type":327,"attrs":534,"content":535},{"textAlign":59},[536,538,541],{"text":537,"type":332},"If you're using ",{"text":348,"type":332,"marks":539},[540],{"type":431},{"text":542,"type":332}," for your datepicker, here's an example of the javascript needed to incorporate it into the checkout:",{"type":409,"attrs":544,"content":545},{"class":59},[546],{"text":547,"type":332},"{% if context == \"checkout\" %}\n\u003Cscript>\n    FC.client.on(\"render.done\", initDatePicker);\n     \n    function initDatePicker() {\n        $('#date-select').pickadate({\n            min: true,\n            formatSubmit: 'yyyy-mm-dd',\n            hiddenName: true,\n            onSet: function (context) {\n                var date_input = (this.$node.attr(\"name\")) ? this.$node[0] : this._hidden;\n                FC.json[date_input.name] = date_input.value;\n                this.$node.trigger('focusout.fc', { validateNow: true });\n            }\n        });\n    };\n\u003C\u002Fscript>\n{% endif %}",{"type":364,"attrs":549,"content":550},{"level":464,"textAlign":59},[551],{"text":552,"type":332},"Mobiscroll",{"type":327,"attrs":554,"content":555},{"textAlign":59},[556,557,560],{"text":537,"type":332},{"text":552,"type":332,"marks":558},[559],{"type":431},{"text":542,"type":332},{"type":409,"attrs":562,"content":563},{"class":59},[564],{"text":565,"type":332},"{% if context == \"checkout\" %}\n\u003Cscript>\n    FC.client.on(\"ready.done\", initDatePicker);\n    FC.client.on(\"render.done\", function(params) {\n        if (['checkout', 'additional_fields'].includes(params.block_id)) {\n            initDatePicker();\n        }\n    });\n \n    function initDatePicker() {\n        $('#date-select').mobiscroll().datepicker({ \n            controls: ['date'],\n            min: new Date(),\n            onChange: function (event, inst) {\n                $(inst.props.element).trigger('focusout.fc', { validateNow: true });\n            }\n        });\n    };\n\u003C\u002Fscript>\n{% endif %}",{"type":364,"attrs":567,"content":568},{"level":464,"textAlign":59},[569],{"text":570,"type":332},"A Different Date Picker",{"type":327,"attrs":572,"content":573},{"textAlign":59},[574,576,580,582,585],{"text":575,"type":332},"If you're not using jQuery UI's datepicker, or one of the other options noted above, it should be fairly straight-forward for how you'd customise the relevant javascript there, but it'll basically revolve around updating the ",{"text":577,"type":332,"marks":578},"datepicker()",[579],{"type":431},{"text":581,"type":332}," function call(s). The jQuery UI example code above also includes a callback function for jQuery UI's ",{"text":516,"type":332,"marks":583},[584],{"type":431},{"text":586,"type":332}," event - because the way it handles it, it doesn't trigger the checkout's native validations to clear the error. Depending on the datepicker you use - you may need to also use a callback like that using their respective event that is run on select.",{"type":364,"attrs":588,"content":589},{"level":366,"textAlign":59},[590],{"text":591,"type":332},"Step 4: Test!",{"type":327,"attrs":593,"content":594},{"textAlign":59},[595],{"text":596,"type":332},"At this point - everything should be set up and ready to go! You should be able to now load up your checkout and test out the new field - making sure that it's working as you expect.",{"id":59,"alt":59,"name":13,"focus":59,"title":59,"source":59,"filename":13,"copyright":59,"fieldtype":81,"meta_data":598},{},"How to add a date picker field to the checkout to collect a date such as a preferred delivery date.","3cb122dc-4180-4f38-bd81-4597e4c7dd46",[],"add-a-date-picker-field-to-the-checkout","help\u002Farticles\u002Fadd-a-date-picker-field-to-the-checkout",-4130,[],2659,"5d0bf55d-9afc-4eec-b5a3-9d8f720659a3",[],{"html":610,"sections":611,"segments":629},"\u003Cp>Quite often - it's necessary to capture a date from the customer on the checkout. This could be to allow the customer to specify a preferred delivery date - but there are a number of other uses you might have.\u003C\u002Fp>\u003Cp>There are a plenty of different javascript date pickers available online. We're going to use \u003Ca href=\"http:\u002F\u002Fjqueryui.com\u002Fdatepicker\u002F\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">jQuery UI's\u003C\u002Fa> solution here, \u003Ca href=\"http:\u002F\u002Famsul.ca\u002Fpickadate.js\u002Fdate\u002F\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">pickadate.js\u003C\u002Fa> could also be a good choice, \u003Ca href=\"https:\u002F\u002Fmobiscroll.com\u002Fdate-time-picker-calendar\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">mobiscroll\u003C\u002Fa> is a great but paid option. You can ultimately use whichever date picker you prefer for your needs.\u003C\u002Fp>\u003Csection id=\"step-1-add-date-picker-assets\" data-title=\"Step 1: Add date picker assets\" data-title-node=\"H2\">\u003Chr class=\"my-8\" style=\"margin-left: -48px; margin-right: -40vw\">\u003Ch2 data-anchor-id=\"step-1-add-date-picker-assets\">Step 1: Add date picker assets\u003C\u002Fh2>\u003Cp>You'll first need to include the necessary assets from your datepicker library.\u003C\u002Fp>\u003Cp>For the default example using jQuery UI, that includes a javascript and CSS file. We'll be using Google's CDN versions of the jQuery UI files, \u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Flibraries\u002F#jquery-ui\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">accessible from here\u003C\u002Fa>. If you're using a different option, get the required javascript and CSS from their documentation.\u003C\u002Fp>\u003Cp>To include it on your store, head to the "configuration" section of your store's Foxy administration. Look for the "Add custom header and footer code to your templates" option there, and include the javascript in the "custom footer" and CSS in the "custom header" textareas.\u003C\u002Fp>\u003Cp>If you're already specifying a custom checkout template for your store - you can also directly include these assets in your custom checkout template.\u003C\u002Fp>\u003C\u002Fsection>\u003Csection id=\"step-2-add-custom-checkout-field\" data-title=\"Step 2: Add custom checkout field\" data-title-node=\"H2\">\u003Chr class=\"my-8\" style=\"margin-left: -48px; margin-right: -40vw\">\u003Ch2 data-anchor-id=\"step-2-add-custom-checkout-field\">Step 2: Add custom checkout field\u003C\u002Fh2>\u003Cp>You'll also need to add in your custom field, which can also be achieved from the "configuration" section of your store's Foxy administration. Look for the "Add custom form fields to your checkout" option and paste the following HTML there. If your store is enabled for multiship - and you need to capture the date for each different address, include it within the "custom multiship checkout fields" textarea. Otherwise include it in the "custom checkout fields" textarea.\u003C\u002Fp>\u003Cdiv class=\"position-relative w-100 overflow-hidden rounded-2\" data-code-block>\u003Cdiv class=\"d-flex justify-content-end border-bottom\" style=\"background:#2b2c3b;\">\u003Cbutton type=\"button\" class=\"btn btn-link btn-sm text-light\" title=\"Copy\" data-code-button>\u003Cspan data-code-default style=\"\">\u003Ci class=\"fal fa-copy me-2\">\u003C\u002Fi> Copy \u003C\u002Fspan>\u003Cspan class=\"text-success\" data-code-success style=\"display:none;\">\u003Ci class=\"fal fa-check ms-2\">\u003C\u002Fi> Copied \u003C\u002Fspan>\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv class=\"small\">\u003Cpre class=\"hljs p-2\" data-code-content>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"fc-form-group"\u003C\u002Fspan>>\u003C\u002Fspan>\n\t\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"col-md-8 col-md-offset-3"\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">data-fc-error-for\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"date-select"\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">data-fc-error-class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"fc-alert-container--error"\u003C\u002Fspan>>\u003C\u002Fspan>\n\t\t\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active"\u003C\u002Fspan>>\u003C\u002Fspan>\n\t\t\t\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"fc-input-group-container__title fc-input-group-container__title--forced fc-form-label"\u003C\u002Fspan>>\u003C\u002Fspan>Shipping date\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">label\u003C\u002Fspan>>\u003C\u002Fspan>\n\t\t\t\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"fc-form-group date-select"\u003C\u002Fspan>>\u003C\u002Fspan>\n\t\t\t\t\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"fc-form-control"\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">placeholder\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"Select a date"\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">type\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"text"\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">id\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"date-select"\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">value\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">""\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">name\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"ship_date"\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">aria-required\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"true"\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">data-fc-required\u003C\u002Fspan>>\u003C\u002Fspan>\n\t\t\t\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n\t\t\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n\t\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\u003C\u002Fpre>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cblockquote>\u003Cp>\u003Cstrong>Tip:\u003C\u002Fstrong> If you update the name of the input (above as \u003Ccode class=\"badge bg-soft-danger text-danger\">ship_date\u003C\u002Fcode>), you'll also need to update the Twig placeholder within the value to match. Also, avoid having the name start as \u003Ccode class=\"badge bg-soft-danger text-danger\">shipping_\u003C\u002Fcode>, \u003Ccode class=\"badge bg-soft-danger text-danger\">billing_\u003C\u002Fcode> or \u003Ccode class=\"badge bg-soft-danger text-danger\">shipto_\u003C\u002Fcode> as it will interfere with storing the value clientside.\u003C\u002Fp>\u003C\u002Fblockquote>\u003C\u002Fsection>\u003Csection id=\"step-3-add-javascript\" data-title=\"Step 3: Add javascript\" data-title-node=\"H2\">\u003Chr class=\"my-8\" style=\"margin-left: -48px; margin-right: -40vw\">\u003Ch2 data-anchor-id=\"step-3-add-javascript\">Step 3: Add javascript\u003C\u002Fh2>\u003Cp>Finally - you need to add some javascript to initialise the date picker library. This will happen within the same "Add custom header and footer code to your templates" option on the configuration section - but this time within the "footer" textarea.\u003C\u002Fp>\u003C\u002Fsection>\u003Csection id=\"jquery-ui\" data-title=\"jQuery UI\" data-title-node=\"H3\">\u003Ch3 data-anchor-id=\"jquery-ui\">jQuery UI\u003C\u002Fh3>\u003Cp>If you included the date picker field within the "custom checkout fields" textarea in step 2, you will use javascript like this:\u003C\u002Fp>\u003Cdiv class=\"position-relative w-100 overflow-hidden rounded-2\" data-code-block>\u003Cdiv class=\"d-flex justify-content-end border-bottom\" style=\"background:#2b2c3b;\">\u003Cbutton type=\"button\" class=\"btn btn-link btn-sm text-light\" title=\"Copy\" data-code-button>\u003Cspan data-code-default style=\"\">\u003Ci class=\"fal fa-copy me-2\">\u003C\u002Fi> Copy \u003C\u002Fspan>\u003Cspan class=\"text-success\" data-code-success style=\"display:none;\">\u003Ci class=\"fal fa-check ms-2\">\u003C\u002Fi> Copied \u003C\u002Fspan>\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv class=\"small\">\u003Cpre class=\"hljs p-2\" data-code-content>{% if context == "checkout" %}\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C\u002Fspan>>\u003C\u002Fspan>\u003Cspan class=\"language-javascript\">\n\u003Cspan class=\"hljs-variable constant_\">FC\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">client\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">on\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">"render.done"\u003C\u002Fspan>, initDatePicker);\n\n\u003Cspan class=\"hljs-keyword\">function\u003C\u002Fspan> \u003Cspan class=\"hljs-title function_\">initDatePicker\u003C\u002Fspan>(\u003Cspan class=\"hljs-params\">\u003C\u002Fspan>) {\n    \u003Cspan class=\"hljs-keyword\">var\u003C\u002Fspan> date_params = {\n        \u003Cspan class=\"hljs-attr\">minDate\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">0\u003C\u002Fspan>,\n        \u003Cspan class=\"hljs-attr\">onSelect\u003C\u002Fspan>: \u003Cspan class=\"hljs-keyword\">function\u003C\u002Fspan>(\u003Cspan class=\"hljs-params\">\u003C\u002Fspan>) {\n            $(\u003Cspan class=\"hljs-variable language_\">this\u003C\u002Fspan>).\u003Cspan class=\"hljs-title function_\">trigger\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'focusout.fc'\u003C\u002Fspan>, {\u003Cspan class=\"hljs-attr\">validateNow\u003C\u002Fspan>: \u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>});\n        }\n    };\n    \n    $(\u003Cspan class=\"hljs-string\">"#date-select"\u003C\u002Fspan>).\u003Cspan class=\"hljs-title function_\">datepicker\u003C\u002Fspan>(date_params);\n};\n\u003C\u002Fspan>\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">script\u003C\u002Fspan>>\u003C\u002Fspan>\n{% endif %}\u003C\u002Fpre>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cp>If you're running a multiship store and you included the datepicker field in the "custom multiship checkout fields" textarea, you'll use this javascript instead:\u003C\u002Fp>\u003Cdiv class=\"position-relative w-100 overflow-hidden rounded-2\" data-code-block>\u003Cdiv class=\"d-flex justify-content-end border-bottom\" style=\"background:#2b2c3b;\">\u003Cbutton type=\"button\" class=\"btn btn-link btn-sm text-light\" title=\"Copy\" data-code-button>\u003Cspan data-code-default style=\"\">\u003Ci class=\"fal fa-copy me-2\">\u003C\u002Fi> Copy \u003C\u002Fspan>\u003Cspan class=\"text-success\" data-code-success style=\"display:none;\">\u003Ci class=\"fal fa-check ms-2\">\u003C\u002Fi> Copied \u003C\u002Fspan>\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv class=\"small\">\u003Cpre class=\"hljs p-2\" data-code-content>{% if context == "checkout" %}\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C\u002Fspan>>\u003C\u002Fspan>\u003Cspan class=\"language-javascript\">\n\u003Cspan class=\"hljs-variable constant_\">FC\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">client\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">on\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">"render.done"\u003C\u002Fspan>, initDatePicker);\n\n\u003Cspan class=\"hljs-keyword\">function\u003C\u002Fspan> \u003Cspan class=\"hljs-title function_\">initDatePicker\u003C\u002Fspan>(\u003Cspan class=\"hljs-params\">\u003C\u002Fspan>) {\n    \u003Cspan class=\"hljs-keyword\">var\u003C\u002Fspan> date_params = {\n        \u003Cspan class=\"hljs-attr\">minDate\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">0\u003C\u002Fspan>,\n        \u003Cspan class=\"hljs-attr\">onSelect\u003C\u002Fspan>: \u003Cspan class=\"hljs-keyword\">function\u003C\u002Fspan>(\u003Cspan class=\"hljs-params\">\u003C\u002Fspan>) {\n            $(\u003Cspan class=\"hljs-variable language_\">this\u003C\u002Fspan>).\u003Cspan class=\"hljs-title function_\">trigger\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'focusout.fc'\u003C\u002Fspan>, {\u003Cspan class=\"hljs-attr\">validateNow\u003C\u002Fspan>: \u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>});\n        }\n    };\n\n    \u003Cspan class=\"hljs-keyword\">if\u003C\u002Fspan> (\u003Cspan class=\"hljs-variable constant_\">FC\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">json\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">has_multiship\u003C\u002Fspan>) {\n        \u003Cspan class=\"hljs-keyword\">for\u003C\u002Fspan> (\u003Cspan class=\"hljs-keyword\">var\u003C\u002Fspan> i = \u003Cspan class=\"hljs-number\">0\u003C\u002Fspan>; i < \u003Cspan class=\"hljs-variable constant_\">FC\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">json\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">multiship_data\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">length\u003C\u002Fspan>; i++) {\n            $(\u003Cspan class=\"hljs-string\">"#shipto_custom_"\u003C\u002Fspan> + i + \u003Cspan class=\"hljs-string\">"_date-select']"\u003C\u002Fspan>).\u003Cspan class=\"hljs-title function_\">datepicker\u003C\u002Fspan>(date_params);\n        }\n    } \u003Cspan class=\"hljs-keyword\">else\u003C\u002Fspan> {\n        $(\u003Cspan class=\"hljs-string\">"#date-select"\u003C\u002Fspan>).\u003Cspan class=\"hljs-title function_\">datepicker\u003C\u002Fspan>(date_params);\n    }\n};\n\u003C\u002Fspan>\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">script\u003C\u002Fspan>>\u003C\u002Fspan>\n{% endif %}\u003C\u002Fpre>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cblockquote>\u003Cp>\u003Cstrong>Tip:\u003C\u002Fstrong> You'll only use one of the above javascript blocks - depending on which approach you took in step 2.\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp>In both the blocks above, a \u003Ccode class=\"badge bg-soft-danger text-danger\">date_params\u003C\u002Fcode> object is created to set any custom properties for the date picker. Included in the code is a \u003Ccode class=\"badge bg-soft-danger text-danger\">minDate\u003C\u002Fcode> property to restrict the picker to only dates in the future, and an \u003Ccode class=\"badge bg-soft-danger text-danger\">onSelect\u003C\u002Fcode> event callback to ensure the selected rate is validated on the checkout. You can expand on that object with \u003Ca href=\"http:\u002F\u002Fapi.jqueryui.com\u002Fdatepicker\u002F\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">whatever settings you like\u003C\u002Fa>.\u003C\u002Fp>\u003C\u002Fsection>\u003Csection id=\"pickadatejs\" data-title=\"pickadate.js\" data-title-node=\"H3\">\u003Ch3 data-anchor-id=\"pickadatejs\">pickadate.js\u003C\u002Fh3>\u003Cp>If you're using \u003Ccode class=\"badge bg-soft-danger text-danger\">pickadate.js\u003C\u002Fcode> for your datepicker, here's an example of the javascript needed to incorporate it into the checkout:\u003C\u002Fp>\u003Cdiv class=\"position-relative w-100 overflow-hidden rounded-2\" data-code-block>\u003Cdiv class=\"d-flex justify-content-end border-bottom\" style=\"background:#2b2c3b;\">\u003Cbutton type=\"button\" class=\"btn btn-link btn-sm text-light\" title=\"Copy\" data-code-button>\u003Cspan data-code-default style=\"\">\u003Ci class=\"fal fa-copy me-2\">\u003C\u002Fi> Copy \u003C\u002Fspan>\u003Cspan class=\"text-success\" data-code-success style=\"display:none;\">\u003Ci class=\"fal fa-check ms-2\">\u003C\u002Fi> Copied \u003C\u002Fspan>\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv class=\"small\">\u003Cpre class=\"hljs p-2\" data-code-content>{% if context == "checkout" %}\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C\u002Fspan>>\u003C\u002Fspan>\u003Cspan class=\"language-javascript\">\n    \u003Cspan class=\"hljs-variable constant_\">FC\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">client\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">on\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">"render.done"\u003C\u002Fspan>, initDatePicker);\n     \n    \u003Cspan class=\"hljs-keyword\">function\u003C\u002Fspan> \u003Cspan class=\"hljs-title function_\">initDatePicker\u003C\u002Fspan>(\u003Cspan class=\"hljs-params\">\u003C\u002Fspan>) {\n        $(\u003Cspan class=\"hljs-string\">'#date-select'\u003C\u002Fspan>).\u003Cspan class=\"hljs-title function_\">pickadate\u003C\u002Fspan>({\n            \u003Cspan class=\"hljs-attr\">min\u003C\u002Fspan>: \u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>,\n            \u003Cspan class=\"hljs-attr\">formatSubmit\u003C\u002Fspan>: \u003Cspan class=\"hljs-string\">'yyyy-mm-dd'\u003C\u002Fspan>,\n            \u003Cspan class=\"hljs-attr\">hiddenName\u003C\u002Fspan>: \u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>,\n            \u003Cspan class=\"hljs-attr\">onSet\u003C\u002Fspan>: \u003Cspan class=\"hljs-keyword\">function\u003C\u002Fspan> (\u003Cspan class=\"hljs-params\">context\u003C\u002Fspan>) {\n                \u003Cspan class=\"hljs-keyword\">var\u003C\u002Fspan> date_input = (\u003Cspan class=\"hljs-variable language_\">this\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">$node\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">attr\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">"name"\u003C\u002Fspan>)) ? \u003Cspan class=\"hljs-variable language_\">this\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">$node\u003C\u002Fspan>[\u003Cspan class=\"hljs-number\">0\u003C\u002Fspan>] : \u003Cspan class=\"hljs-variable language_\">this\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">_hidden\u003C\u002Fspan>;\n                \u003Cspan class=\"hljs-variable constant_\">FC\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">json\u003C\u002Fspan>[date_input.\u003Cspan class=\"hljs-property\">name\u003C\u002Fspan>] = date_input.\u003Cspan class=\"hljs-property\">value\u003C\u002Fspan>;\n                \u003Cspan class=\"hljs-variable language_\">this\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">$node\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">trigger\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'focusout.fc'\u003C\u002Fspan>, { \u003Cspan class=\"hljs-attr\">validateNow\u003C\u002Fspan>: \u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan> });\n            }\n        });\n    };\n\u003C\u002Fspan>\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">script\u003C\u002Fspan>>\u003C\u002Fspan>\n{% endif %}\u003C\u002Fpre>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\u003Csection id=\"mobiscroll\" data-title=\"Mobiscroll\" data-title-node=\"H3\">\u003Ch3 data-anchor-id=\"mobiscroll\">Mobiscroll\u003C\u002Fh3>\u003Cp>If you're using \u003Ccode class=\"badge bg-soft-danger text-danger\">Mobiscroll\u003C\u002Fcode> for your datepicker, here's an example of the javascript needed to incorporate it into the checkout:\u003C\u002Fp>\u003Cdiv class=\"position-relative w-100 overflow-hidden rounded-2\" data-code-block>\u003Cdiv class=\"d-flex justify-content-end border-bottom\" style=\"background:#2b2c3b;\">\u003Cbutton type=\"button\" class=\"btn btn-link btn-sm text-light\" title=\"Copy\" data-code-button>\u003Cspan data-code-default style=\"\">\u003Ci class=\"fal fa-copy me-2\">\u003C\u002Fi> Copy \u003C\u002Fspan>\u003Cspan class=\"text-success\" data-code-success style=\"display:none;\">\u003Ci class=\"fal fa-check ms-2\">\u003C\u002Fi> Copied \u003C\u002Fspan>\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv class=\"small\">\u003Cpre class=\"hljs p-2\" data-code-content>{% if context == "checkout" %}\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C\u002Fspan>>\u003C\u002Fspan>\u003Cspan class=\"language-javascript\">\n    \u003Cspan class=\"hljs-variable constant_\">FC\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">client\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">on\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">"ready.done"\u003C\u002Fspan>, initDatePicker);\n    \u003Cspan class=\"hljs-variable constant_\">FC\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">client\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">on\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">"render.done"\u003C\u002Fspan>, \u003Cspan class=\"hljs-keyword\">function\u003C\u002Fspan>(\u003Cspan class=\"hljs-params\">params\u003C\u002Fspan>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C\u002Fspan> ([\u003Cspan class=\"hljs-string\">'checkout'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'additional_fields'\u003C\u002Fspan>].\u003Cspan class=\"hljs-title function_\">includes\u003C\u002Fspan>(params.\u003Cspan class=\"hljs-property\">block_id\u003C\u002Fspan>)) {\n            \u003Cspan class=\"hljs-title function_\">initDatePicker\u003C\u002Fspan>();\n        }\n    });\n \n    \u003Cspan class=\"hljs-keyword\">function\u003C\u002Fspan> \u003Cspan class=\"hljs-title function_\">initDatePicker\u003C\u002Fspan>(\u003Cspan class=\"hljs-params\">\u003C\u002Fspan>) {\n        $(\u003Cspan class=\"hljs-string\">'#date-select'\u003C\u002Fspan>).\u003Cspan class=\"hljs-title function_\">mobiscroll\u003C\u002Fspan>().\u003Cspan class=\"hljs-title function_\">datepicker\u003C\u002Fspan>({ \n            \u003Cspan class=\"hljs-attr\">controls\u003C\u002Fspan>: [\u003Cspan class=\"hljs-string\">'date'\u003C\u002Fspan>],\n            \u003Cspan class=\"hljs-attr\">min\u003C\u002Fspan>: \u003Cspan class=\"hljs-keyword\">new\u003C\u002Fspan> \u003Cspan class=\"hljs-title class_\">Date\u003C\u002Fspan>(),\n            \u003Cspan class=\"hljs-attr\">onChange\u003C\u002Fspan>: \u003Cspan class=\"hljs-keyword\">function\u003C\u002Fspan> (\u003Cspan class=\"hljs-params\">event, inst\u003C\u002Fspan>) {\n                $(inst.\u003Cspan class=\"hljs-property\">props\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">element\u003C\u002Fspan>).\u003Cspan class=\"hljs-title function_\">trigger\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'focusout.fc'\u003C\u002Fspan>, { \u003Cspan class=\"hljs-attr\">validateNow\u003C\u002Fspan>: \u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan> });\n            }\n        });\n    };\n\u003C\u002Fspan>\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">script\u003C\u002Fspan>>\u003C\u002Fspan>\n{% endif %}\u003C\u002Fpre>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\u003Csection id=\"a-different-date-picker\" data-title=\"A Different Date Picker\" data-title-node=\"H3\">\u003Ch3 data-anchor-id=\"a-different-date-picker\">A Different Date Picker\u003C\u002Fh3>\u003Cp>If you're not using jQuery UI's datepicker, or one of the other options noted above, it should be fairly straight-forward for how you'd customise the relevant javascript there, but it'll basically revolve around updating the \u003Ccode class=\"badge bg-soft-danger text-danger\">datepicker()\u003C\u002Fcode> function call(s). The jQuery UI example code above also includes a callback function for jQuery UI's \u003Ccode class=\"badge bg-soft-danger text-danger\">onSelect\u003C\u002Fcode> event - because the way it handles it, it doesn't trigger the checkout's native validations to clear the error. Depending on the datepicker you use - you may need to also use a callback like that using their respective event that is run on select.\u003C\u002Fp>\u003C\u002Fsection>\u003Csection id=\"step-4-test\" data-title=\"Step 4: Test!\" data-title-node=\"H2\">\u003Chr class=\"my-8\" style=\"margin-left: -48px; margin-right: -40vw\">\u003Ch2 data-anchor-id=\"step-4-test\">Step 4: Test!\u003C\u002Fh2>\u003Cp>At this point - everything should be set up and ready to go! You should be able to now load up your checkout and test out the new field - making sure that it's working as you expect.\u003C\u002Fp>\u003C\u002Fsection>",[612,615,617,619,622,624,625,627],{"id":613,"title":369,"level":614},"step-1-add-date-picker-assets","H2",{"id":616,"title":402,"level":614},"step-2-add-custom-checkout-field",{"id":618,"title":456,"level":614},"step-3-add-javascript",{"id":620,"title":467,"level":621},"jquery-ui","H3",{"id":623,"title":348,"level":621},"pickadatejs",{"id":356,"title":552,"level":621},{"id":626,"title":570,"level":621},"a-different-date-picker",{"id":628,"title":591,"level":614},"step-4-test",[630],{"type":631,"content":632},"html","\u003Cp>Quite often - it's necessary to capture a date from the customer on the checkout. This could be to allow the customer to specify a preferred delivery date - but there are a number of other uses you might have.\u003C\u002Fp>\u003Cp>There are a plenty of different javascript date pickers available online. We're going to use \u003Ca href=\"http:\u002F\u002Fjqueryui.com\u002Fdatepicker\u002F\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">jQuery UI's\u003C\u002Fa> solution here, \u003Ca href=\"http:\u002F\u002Famsul.ca\u002Fpickadate.js\u002Fdate\u002F\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">pickadate.js\u003C\u002Fa> could also be a good choice, \u003Ca href=\"https:\u002F\u002Fmobiscroll.com\u002Fdate-time-picker-calendar\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">mobiscroll\u003C\u002Fa> is a great but paid option. You can ultimately use whichever date picker you prefer for your needs.\u003C\u002Fp>\u003Ch2>Step 1: Add date picker assets\u003C\u002Fh2>\u003Cp>You'll first need to include the necessary assets from your datepicker library.\u003C\u002Fp>\u003Cp>For the default example using jQuery UI, that includes a javascript and CSS file. We'll be using Google's CDN versions of the jQuery UI files, \u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Flibraries\u002F#jquery-ui\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">accessible from here\u003C\u002Fa>. If you're using a different option, get the required javascript and CSS from their documentation.\u003C\u002Fp>\u003Cp>To include it on your store, head to the "configuration" section of your store's Foxy administration. Look for the "Add custom header and footer code to your templates" option there, and include the javascript in the "custom footer" and CSS in the "custom header" textareas.\u003C\u002Fp>\u003Cp>If you're already specifying a custom checkout template for your store - you can also directly include these assets in your custom checkout template.\u003C\u002Fp>\u003Ch2>Step 2: Add custom checkout field\u003C\u002Fh2>\u003Cp>You'll also need to add in your custom field, which can also be achieved from the "configuration" section of your store's Foxy administration. Look for the "Add custom form fields to your checkout" option and paste the following HTML there. If your store is enabled for multiship - and you need to capture the date for each different address, include it within the "custom multiship checkout fields" textarea. Otherwise include it in the "custom checkout fields" textarea.\u003C\u002Fp>\u003Cpre>\u003Ccode><div class="fc-form-group">\n\t<div class="col-md-8 col-md-offset-3" data-fc-error-for="date-select" data-fc-error-class="fc-alert-container--error">\n\t\t<div class="fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active">\n\t\t\t<label class="fc-input-group-container__title fc-input-group-container__title--forced fc-form-label">Shipping date<\u002Flabel>\n\t\t\t<div class="fc-form-group date-select">\n\t\t\t\t<input class="fc-form-control" placeholder="Select a date" type="text" id="date-select" value="" name="ship_date" aria-required="true" data-fc-required>\n\t\t\t<\u002Fdiv>\n\t\t<\u002Fdiv>\n\t<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cblockquote>\u003Cp>\u003Cstrong>Tip:\u003C\u002Fstrong> If you update the name of the input (above as \u003Ccode class=\"badge bg-soft-danger text-danger\">ship_date\u003C\u002Fcode>), you'll also need to update the Twig placeholder within the value to match. Also, avoid having the name start as \u003Ccode class=\"badge bg-soft-danger text-danger\">shipping_\u003C\u002Fcode>, \u003Ccode class=\"badge bg-soft-danger text-danger\">billing_\u003C\u002Fcode> or \u003Ccode class=\"badge bg-soft-danger text-danger\">shipto_\u003C\u002Fcode> as it will interfere with storing the value clientside.\u003C\u002Fp>\u003C\u002Fblockquote>\u003Ch2>Step 3: Add javascript\u003C\u002Fh2>\u003Cp>Finally - you need to add some javascript to initialise the date picker library. This will happen within the same "Add custom header and footer code to your templates" option on the configuration section - but this time within the "footer" textarea.\u003C\u002Fp>\u003Ch3>jQuery UI\u003C\u002Fh3>\u003Cp>If you included the date picker field within the "custom checkout fields" textarea in step 2, you will use javascript like this:\u003C\u002Fp>\u003Cpre>\u003Ccode>{% if context == "checkout" %}\n<script>\nFC.client.on("render.done", initDatePicker);\n\nfunction initDatePicker() {\n    var date_params = {\n        minDate: 0,\n        onSelect: function() {\n            $(this).trigger('focusout.fc', {validateNow: true});\n        }\n    };\n    \n    $("#date-select").datepicker(date_params);\n};\n<\u002Fscript>\n{% endif %}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>If you're running a multiship store and you included the datepicker field in the "custom multiship checkout fields" textarea, you'll use this javascript instead:\u003C\u002Fp>\u003Cpre>\u003Ccode>{% if context == "checkout" %}\n<script>\nFC.client.on("render.done", initDatePicker);\n\nfunction initDatePicker() {\n    var date_params = {\n        minDate: 0,\n        onSelect: function() {\n            $(this).trigger('focusout.fc', {validateNow: true});\n        }\n    };\n\n    if (FC.json.has_multiship) {\n        for (var i = 0; i < FC.json.multiship_data.length; i++) {\n            $("#shipto_custom_" + i + "_date-select']").datepicker(date_params);\n        }\n    } else {\n        $("#date-select").datepicker(date_params);\n    }\n};\n<\u002Fscript>\n{% endif %}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cblockquote>\u003Cp>\u003Cstrong>Tip:\u003C\u002Fstrong> You'll only use one of the above javascript blocks - depending on which approach you took in step 2.\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp>In both the blocks above, a \u003Ccode class=\"badge bg-soft-danger text-danger\">date_params\u003C\u002Fcode> object is created to set any custom properties for the date picker. Included in the code is a \u003Ccode class=\"badge bg-soft-danger text-danger\">minDate\u003C\u002Fcode> property to restrict the picker to only dates in the future, and an \u003Ccode class=\"badge bg-soft-danger text-danger\">onSelect\u003C\u002Fcode> event callback to ensure the selected rate is validated on the checkout. You can expand on that object with \u003Ca href=\"http:\u002F\u002Fapi.jqueryui.com\u002Fdatepicker\u002F\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">whatever settings you like\u003C\u002Fa>.\u003C\u002Fp>\u003Ch3>pickadate.js\u003C\u002Fh3>\u003Cp>If you're using \u003Ccode class=\"badge bg-soft-danger text-danger\">pickadate.js\u003C\u002Fcode> for your datepicker, here's an example of the javascript needed to incorporate it into the checkout:\u003C\u002Fp>\u003Cpre>\u003Ccode>{% if context == "checkout" %}\n<script>\n    FC.client.on("render.done", initDatePicker);\n     \n    function initDatePicker() {\n        $('#date-select').pickadate({\n            min: true,\n            formatSubmit: 'yyyy-mm-dd',\n            hiddenName: true,\n            onSet: function (context) {\n                var date_input = (this.$node.attr("name")) ? this.$node[0] : this._hidden;\n                FC.json[date_input.name] = date_input.value;\n                this.$node.trigger('focusout.fc', { validateNow: true });\n            }\n        });\n    };\n<\u002Fscript>\n{% endif %}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Mobiscroll\u003C\u002Fh3>\u003Cp>If you're using \u003Ccode class=\"badge bg-soft-danger text-danger\">Mobiscroll\u003C\u002Fcode> for your datepicker, here's an example of the javascript needed to incorporate it into the checkout:\u003C\u002Fp>\u003Cpre>\u003Ccode>{% if context == "checkout" %}\n<script>\n    FC.client.on("ready.done", initDatePicker);\n    FC.client.on("render.done", function(params) {\n        if (['checkout', 'additional_fields'].includes(params.block_id)) {\n            initDatePicker();\n        }\n    });\n \n    function initDatePicker() {\n        $('#date-select').mobiscroll().datepicker({ \n            controls: ['date'],\n            min: new Date(),\n            onChange: function (event, inst) {\n                $(inst.props.element).trigger('focusout.fc', { validateNow: true });\n            }\n        });\n    };\n<\u002Fscript>\n{% endif %}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>A Different Date Picker\u003C\u002Fh3>\u003Cp>If you're not using jQuery UI's datepicker, or one of the other options noted above, it should be fairly straight-forward for how you'd customise the relevant javascript there, but it'll basically revolve around updating the \u003Ccode class=\"badge bg-soft-danger text-danger\">datepicker()\u003C\u002Fcode> function call(s). The jQuery UI example code above also includes a callback function for jQuery UI's \u003Ccode class=\"badge bg-soft-danger text-danger\">onSelect\u003C\u002Fcode> event - because the way it handles it, it doesn't trigger the checkout's native validations to clear the error. Depending on the datepicker you use - you may need to also use a callback like that using their respective event that is run on select.\u003C\u002Fp>\u003Ch2>Step 4: Test!\u003C\u002Fh2>\u003Cp>At this point - everything should be set up and ready to go! You should be able to now load up your checkout and test out the new field - making sure that it's working as you expect.\u003C\u002Fp>",{"name":634,"created_at":635,"published_at":636,"updated_at":637,"id":638,"uuid":47,"content":639,"slug":48,"full_slug":48,"sort_by_date":59,"position":817,"tag_list":818,"is_startpage":24,"parent_id":59,"meta_data":59,"group_id":819,"first_published_at":820,"release_id":59,"lang":65,"path":59,"alternates":821,"default_full_slug":59,"translated_slugs":59},"Contact","2022-09-23T19:56:58.957Z","2025-05-08T18:24:40.382Z","2025-05-08T18:24:40.392Z",3138,{"seo":640,"_uid":643,"title":644,"action":645,"fields":646,"method":793,"columns":794,"subtitle":808,"component":48,"button_text":814,"submit_title":815,"submit_subtitle":816},{"_uid":641,"title":634,"plugin":642,"description":13},"24ff7574-3bcc-48d2-85b5-e529dfea1cc4","meta-fields","8f54f1da-9d8f-49b2-89e7-840e886491cb","We're here to help.","https:\u002F\u002Fusebasin.com\u002Ff\u002F029f48d65402",[647,652,656,764,767,772,787],{"_uid":648,"name":649,"type":332,"label":650,"options":13,"required":33,"component":651,"placeholder":13},"9a70b226-2036-4f90-a052-b3efa61c5896","name","Name","form___field",{"_uid":653,"name":654,"type":654,"label":655,"options":13,"required":33,"component":651,"placeholder":13},"86ba35be-ff43-4a28-8633-14052a8f6622","email","Email Address",{"_uid":657,"name":658,"type":659,"label":660,"options":661,"required":33,"component":651,"conditions":662,"placeholder":13},"3f827475-492c-4f97-aa1e-2386ac263b6c","topic","select","Topic","Presales, Support, Billing, Partnerships, Order Enquiry, Other",[663,718,728,735,743,751,757],{"_uid":664,"equals":665,"fields":666,"component":717},"e21d97dd-e68e-4fa6-ba97-bc40f3041dde","Order Enquiry",[667],{"_uid":668,"body":669,"type":715,"title":13,"component":716},"b64992bc-6d53-48b8-b7a0-d81e5a062e50",{"type":324,"content":670},[671],{"type":327,"content":672},[673,675,682,684,686,687,691,693,698,706,708,713],{"text":674,"type":332},"We are ",{"text":676,"type":332,"marks":677},"Foxy.io",[678],{"type":342,"attrs":679},{"href":680,"uuid":59,"anchor":59,"custom":681,"target":59,"linktype":31},"http:\u002F\u002FFoxy.io",{},{"text":683,"type":332},", an ecommerce platform powering ecommerce for other merchants. We do not sell products, and are unable to assist with questions about order statuses or refunds for any merchants using our platform. Please contact the merchant you ordered from for assistance. If you’d like to report a store using Foxy for fraudulent practices, please select ‘other’ in the subject.",{"type":685},"hard_break",{"type":685},{"text":688,"type":332,"marks":689},"NOTE:",[690],{"type":424},{"text":692,"type":332}," We are ",{"text":694,"type":332,"marks":695},"not ",[696],{"type":697},"italic",{"text":699,"type":332,"marks":700},"Foxy.in",[701,705],{"type":342,"attrs":702},{"href":703,"uuid":59,"anchor":59,"custom":704,"target":59,"linktype":31},"http:\u002F\u002FFoxy.in",{},{"type":697},{"text":707,"type":332},". We are not in any way affiliated with ",{"text":699,"type":332,"marks":709},[710],{"type":342,"attrs":711},{"href":703,"uuid":59,"anchor":59,"custom":712,"target":59,"linktype":31},{},{"text":714,"type":332},", and cannot help in any way with your order from that website.","danger","global___alert","form___condition",{"_uid":719,"equals":720,"fields":721,"component":717},"8765c3e1-25cf-44aa-b8ea-fc6094acf9c3","Presales",[722],{"_uid":723,"name":724,"type":725,"label":13,"options":13,"required":24,"component":651,"conditions":726,"placeholder":13,"default_value":727},"cf464f8e-d643-4f6e-af29-d3abffaf7380","department_email_address","hidden",[],"hello@foxy.io",{"_uid":729,"equals":208,"fields":730,"component":717},"4007b6d8-77e5-421d-bd1e-6f336dd853fb",[731],{"_uid":732,"name":724,"type":725,"label":13,"options":13,"required":24,"component":651,"conditions":733,"placeholder":13,"default_value":734},"7b4c6aa5-a68c-45e0-9ce1-0a36af10c0c2",[],"help@foxy.io",{"_uid":736,"equals":737,"fields":738,"component":717},"1dbb8f11-613d-43cd-9e09-1b94f6e19219","Billing",[739],{"_uid":740,"name":724,"type":725,"label":13,"options":13,"required":24,"component":651,"conditions":741,"placeholder":13,"default_value":742},"a0ac0d1b-bc4f-4a6c-a682-581d450b0b73",[],"help+billing@foxy.io",{"_uid":744,"equals":745,"fields":746,"component":717},"a0a53a50-7172-4a29-ba58-181e38874e12","Partnerships",[747],{"_uid":748,"name":724,"type":725,"label":13,"options":13,"required":24,"component":651,"conditions":749,"placeholder":13,"default_value":750},"7aa011d9-f374-4aed-b5a5-929b54aaf152",[],"partners@foxy.io",{"_uid":752,"equals":665,"fields":753,"component":717},"a4cd431f-25d5-41c7-bfdc-02c908c8fb47",[754],{"_uid":755,"name":724,"type":725,"label":13,"options":13,"required":24,"component":651,"conditions":756,"placeholder":13,"default_value":727},"f5d52168-d6ae-451b-94ee-2ced1cbd28ad",[],{"_uid":758,"equals":759,"fields":760,"component":717},"25aba1ed-eb41-4bbc-aa89-f7a7167ea86e","Other",[761],{"_uid":762,"name":724,"type":725,"label":13,"options":13,"required":24,"component":651,"conditions":763,"placeholder":13,"default_value":727},"f40dfaef-c203-4b71-bf4e-e1b43cef192b",[],{"_uid":765,"component":766},"e9c53a05-f40a-4510-aaf8-bc072a235a0c","form___subject",{"_uid":768,"name":769,"type":770,"label":771,"options":13,"required":33,"component":651,"placeholder":13},"a4c4d385-fff4-4978-99fb-b68cfea623d6","message","textarea","Message",{"_uid":773,"name":774,"type":659,"label":775,"options":776,"required":33,"component":651,"conditions":777,"placeholder":13},"8a3c9f85-f438-427d-9c7a-d7b295a14b5b","existing_user","Are you an existing user?","No, Yes",[778],{"_uid":779,"equals":780,"fields":781,"component":717},"115933d6-262a-4b59-8fa8-579c5ad73de1","Yes",[782],{"_uid":783,"name":784,"type":332,"label":785,"options":13,"required":33,"component":651,"conditions":786,"placeholder":13},"44b6ff23-98f0-4e95-b7f5-c23e06415c2d","subdomain","Store Subdomain",[],{"_uid":788,"name":789,"type":659,"label":790,"options":791,"required":33,"component":651,"conditions":792,"placeholder":13},"922a5cef-3af2-4113-8855-36c7910e3ee3","user_type","What type of user are you?","Developer, Designer, Merchant",[],"POST",[795],{"_uid":796,"text":797,"title":806,"component":807},"7323b90d-a93a-4bf1-baa9-20d0b7ead61b",{"type":324,"content":798},[799],{"type":327,"content":800},[801,803,804],{"text":802,"type":332},"855.369.9227",{"type":685},{"text":805,"type":332},"9:30am-6pm Central M-F","Pre-sales, Sales, & Partnerships","contact___footer_column",{"type":324,"content":809},[810],{"type":327,"content":811},[812],{"text":813,"type":332},"Get in touch to get help from our friendly support team.","Submit","Success!","Your email has been received. We'll get back to you as soon as we can, but it might take a business day. If you don't hear back from us in a timely manner, please check your spam folder to ensure our reply didn't go there.",-80,[],"2fd9fb7d-a48a-4184-acfd-30022d8d6f08","2022-09-23T20:10:45.360Z",[],[288,823,852],{"name":824,"created_at":825,"published_at":826,"updated_at":827,"id":828,"uuid":829,"content":830,"slug":845,"full_slug":846,"sort_by_date":59,"position":847,"tag_list":848,"is_startpage":24,"parent_id":310,"meta_data":59,"group_id":849,"first_published_at":850,"release_id":59,"lang":65,"path":59,"alternates":851,"default_full_slug":59,"translated_slugs":59},"Checkout","2024-11-06T19:56:29.907Z","2026-07-02T22:04:34.438Z","2026-07-02T22:04:34.451Z",14898631,"60b73dc2-7635-487c-bd1f-fd7fba18ab4d",{"_uid":831,"icon":13,"name":824,"type":832,"guides":833,"pinned":24,"summary":834,"category":13,"component":297,"blog_posts":835,"content_hub":24,"icon_custom":836,"case_studies":838,"faq_sections":839,"help_articles":840,"featured_guides":841,"mailbox_category":13,"featured_articles":842,"featured_blog_posts":843,"featured_case_studies":844},"0a484217-201f-4f60-a813-d8d8bda736e4","simple",[],"How the checkout works, configuration options, customizations, and advanced integrations.",[],{"id":59,"alt":59,"name":13,"focus":59,"title":59,"source":59,"filename":13,"copyright":59,"fieldtype":81,"meta_data":837},{},[],[],[],[],[],[],[],"checkout","help\u002Fcategories\u002Fcheckout",0,[],"b3bfcd1f-8386-4ed8-9218-2f4c2989a1b2","2024-11-06T19:56:44.870Z",[],{"name":853,"created_at":854,"published_at":855,"updated_at":856,"id":857,"uuid":600,"content":858,"slug":870,"full_slug":871,"sort_by_date":59,"position":872,"tag_list":873,"is_startpage":24,"parent_id":310,"meta_data":59,"group_id":874,"first_published_at":855,"release_id":59,"lang":65,"path":59,"alternates":875,"default_full_slug":59,"translated_slugs":59},"Custom Checkout Fields","2026-07-02T20:09:31.264Z","2026-07-02T20:10:29.634Z","2026-07-02T20:10:29.643Z",193877488751878,{"_uid":859,"icon":13,"name":853,"type":832,"pinned":24,"summary":860,"category":829,"component":297,"blog_posts":861,"icon_custom":862,"case_studies":864,"faq_sections":865,"featured_guides":866,"mailbox_category":13,"featured_articles":867,"featured_blog_posts":868,"featured_case_studies":869},"ce0f4c6a-abc9-4e6e-bf6e-74a6e0c769e8","Add, validate, and manage custom input fields on your checkout, from simple text inputs to multilingual and sensitive fields.",[],{"id":59,"alt":59,"name":13,"focus":59,"title":59,"source":59,"filename":13,"copyright":59,"fieldtype":81,"meta_data":863},{},[],[],[],[],[],[],"custom-checkout-fields","help\u002Fcategories\u002Fcustom-checkout-fields",-570,[],"0254bc69-c069-4130-866c-ac97b8f25471",[],{},1784742856535]