[{"data":1,"prerenderedAt":801},["ShallowReactive",2],{"header:help":3,"footer:default":67,"story:navigation\u002Fsearch:help":250,"story:help\u002Fcategories":288,"story:help\u002Farticles\u002Frender-cart-and-checkout-templates-with-twig-js":314,"no-guide:render-cart-and-checkout-templates-with-twig-js":59,"article:\u002Fhelp\u002Farticles\u002Frender-cart-and-checkout-templates-with-twig-js":568,"story:contact":584,"help:tree:7a0c215e-1574-40f0-abae-442bb4d7b3e4":774,"_apollo:default":800},{"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":561,"full_slug":562,"sort_by_date":59,"position":563,"tag_list":564,"is_startpage":24,"parent_id":565,"meta_data":59,"group_id":566,"first_published_at":317,"release_id":59,"lang":65,"path":59,"alternates":567,"default_full_slug":59,"translated_slugs":59},"Render cart and checkout templates with Twig.js","2026-07-20T21:31:19.204Z","2026-07-20T21:42:37.484Z","2026-07-20T21:42:37.501Z",200267690869497,"7a0c215e-1574-40f0-abae-442bb4d7b3e4",{"_uid":322,"body":323,"name":315,"image":556,"pinned":24,"summary":558,"category":559,"component":266,"related_articles":560},"9b21257d-c492-48f0-99c4-21091202e0e1",{"type":324,"content":325},"doc",[326,333,340,417,422,487,492,497,503,508,513],{"type":327,"attrs":328,"content":329},"paragraph",{"textAlign":59},[330],{"text":331,"type":332},"Foxy uses Twig as its template language, and Twig.js to render those same templates client-side. This is what lets the cart and checkout update in place — swapping in new shipping rates, taxes, or totals — without a full page reload.","text",{"type":334,"attrs":335,"content":337},"heading",{"level":336,"textAlign":59},2,[338],{"text":339,"type":332},"Checkout render methods",{"type":341,"content":342},"bullet_list",[343,354,363,372,381,390,399,408],{"type":344,"content":345},"list_item",[346],{"type":327,"attrs":347,"content":348},{"textAlign":59},[349],{"text":350,"type":332,"marks":351},"FC.checkout.render()",[352],{"type":353},"code",{"type":344,"content":355},[356],{"type":327,"attrs":357,"content":358},{"textAlign":59},[359],{"text":360,"type":332,"marks":361},"FC.checkout.renderLoginRegister()",[362],{"type":353},{"type":344,"content":364},[365],{"type":327,"attrs":366,"content":367},{"textAlign":59},[368],{"text":369,"type":332,"marks":370},"FC.checkout.renderCustomerShipping()",[371],{"type":353},{"type":344,"content":373},[374],{"type":327,"attrs":375,"content":376},{"textAlign":59},[377],{"text":378,"type":332,"marks":379},"FC.checkout.renderCustomerBilling()",[380],{"type":353},{"type":344,"content":382},[383],{"type":327,"attrs":384,"content":385},{"textAlign":59},[386],{"text":387,"type":332,"marks":388},"FC.checkout.renderShippingRates()",[389],{"type":353},{"type":344,"content":391},[392],{"type":327,"attrs":393,"content":394},{"textAlign":59},[395],{"text":396,"type":332,"marks":397},"FC.checkout.renderPaymentMethod()",[398],{"type":353},{"type":344,"content":400},[401],{"type":327,"attrs":402,"content":403},{"textAlign":59},[404],{"text":405,"type":332,"marks":406},"FC.checkout.renderAdditionalFields()",[407],{"type":353},{"type":344,"content":409},[410],{"type":327,"attrs":411,"content":412},{"textAlign":59},[413],{"text":414,"type":332,"marks":415},"FC.checkout.renderRequiredHiddenFields()",[416],{"type":353},{"type":334,"attrs":418,"content":419},{"level":336,"textAlign":59},[420],{"text":421,"type":332},"Cart render methods",{"type":341,"content":423},[424,433,442,451,460,469,478],{"type":344,"content":425},[426],{"type":327,"attrs":427,"content":428},{"textAlign":59},[429],{"text":430,"type":332,"marks":431},"FC.cart.render()",[432],{"type":353},{"type":344,"content":434},[435],{"type":327,"attrs":436,"content":437},{"textAlign":59},[438],{"text":439,"type":332,"marks":440},"FC.cart.renderShippingRates()",[441],{"type":353},{"type":344,"content":443},[444],{"type":327,"attrs":445,"content":446},{"textAlign":59},[447],{"text":448,"type":332,"marks":449},"FC.cart.renderTaxes()",[450],{"type":353},{"type":344,"content":452},[453],{"type":327,"attrs":454,"content":455},{"textAlign":59},[456],{"text":457,"type":332,"marks":458},"FC.cart.renderOrderTotals()",[459],{"type":353},{"type":344,"content":461},[462],{"type":327,"attrs":463,"content":464},{"textAlign":59},[465],{"text":466,"type":332,"marks":467},"FC.cart.renderCouponEntry()",[468],{"type":353},{"type":344,"content":470},[471],{"type":327,"attrs":472,"content":473},{"textAlign":59},[474],{"text":475,"type":332,"marks":476},"FC.cart.renderAddressEntry()",[477],{"type":353},{"type":344,"content":479},[480],{"type":327,"attrs":481,"content":482},{"textAlign":59},[483],{"text":484,"type":332,"marks":485},"FC.cart.renderCartItemsDivs()",[486],{"type":353},{"type":334,"attrs":488,"content":489},{"level":336,"textAlign":59},[490],{"text":491,"type":332},"Sequential rendering",{"type":327,"attrs":493,"content":494},{"textAlign":59},[495],{"text":496,"type":332},"You can call as many render methods in sequence as you need — the actual Twig rendering only runs once, and the affected blocks are updated together. For example:",{"type":498,"attrs":499,"content":500},"code_block",{"class":59},[501],{"text":502,"type":332},"FC.cart.renderShippingRates();\nFC.cart.renderTaxes();\nFC.cart.renderOrderTotals();\n",{"type":327,"attrs":504,"content":505},{"textAlign":59},[506],{"text":507,"type":332},"This calls the Twig renderer a single time, then replaces the blocks needed for shipping rates, taxes, and order totals in one pass — rather than re-rendering three times.",{"type":334,"attrs":509,"content":510},{"level":336,"textAlign":59},[511],{"text":512,"type":332},"Notes",{"type":341,"content":514},[515,549],{"type":344,"content":516},[517],{"type":327,"attrs":518,"content":519},{"textAlign":59},[520,522,526,528,535,537,541,543,547],{"text":521,"type":332},"Each render call triggers a ",{"text":523,"type":332,"marks":524},"render.done",[525],{"type":353},{"text":527,"type":332}," event once the block finishes updating — see ",{"text":529,"type":332,"marks":530},"JavaScript events reference",[531],{"type":532,"attrs":533},"link",{"href":534,"uuid":59,"anchor":59,"target":59,"linktype":31},"https:\u002F\u002Ffoxy.io\u002Fhelp\u002Farticles\u002Fjavascript-events-reference",{"text":536,"type":332}," for the ",{"text":538,"type":332,"marks":539},"selector",[540],{"type":353},{"text":542,"type":332}," and ",{"text":544,"type":332,"marks":545},"block_id",[546],{"type":353},{"text":548,"type":332}," parameters it provides.",{"type":344,"content":550},[551],{"type":327,"attrs":552,"content":553},{"textAlign":59},[554],{"text":555,"type":332},"This article covers the JavaScript methods used to trigger re-rendering. It doesn’t cover Twig template syntax itself or customizing template markup.",{"id":59,"alt":59,"name":13,"focus":59,"title":59,"source":59,"filename":13,"copyright":59,"fieldtype":81,"meta_data":557},{},"The JavaScript methods used to re-render cart and checkout templates client-side with Twig.js, and how sequential render calls are batched.","3ec5e2da-c8cb-4271-ab65-8ee88cf158fb",[],"render-cart-and-checkout-templates-with-twig-js","help\u002Farticles\u002Frender-cart-and-checkout-templates-with-twig-js",-4060,[],2659,"7c979eb5-7d1d-491e-b04d-8f5fee364905",[],{"html":569,"sections":570,"segments":580},"\u003Cp>Foxy uses Twig as its template language, and Twig.js to render those same templates client-side. This is what lets the cart and checkout update in place — swapping in new shipping rates, taxes, or totals — without a full page reload.\u003C\u002Fp>\u003Csection id=\"checkout-render-methods\" data-title=\"Checkout render methods\" data-title-node=\"H2\">\u003Chr class=\"my-8\" style=\"margin-left: -48px; margin-right: -40vw\">\u003Ch2 data-anchor-id=\"checkout-render-methods\">Checkout render methods\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.checkout.render()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.checkout.renderLoginRegister()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.checkout.renderCustomerShipping()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.checkout.renderCustomerBilling()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.checkout.renderShippingRates()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.checkout.renderPaymentMethod()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.checkout.renderAdditionalFields()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.checkout.renderRequiredHiddenFields()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fsection>\u003Csection id=\"cart-render-methods\" data-title=\"Cart render methods\" data-title-node=\"H2\">\u003Chr class=\"my-8\" style=\"margin-left: -48px; margin-right: -40vw\">\u003Ch2 data-anchor-id=\"cart-render-methods\">Cart render methods\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.cart.render()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.cart.renderShippingRates()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.cart.renderTaxes()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.cart.renderOrderTotals()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.cart.renderCouponEntry()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.cart.renderAddressEntry()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.cart.renderCartItemsDivs()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fsection>\u003Csection id=\"sequential-rendering\" data-title=\"Sequential rendering\" data-title-node=\"H2\">\u003Chr class=\"my-8\" style=\"margin-left: -48px; margin-right: -40vw\">\u003Ch2 data-anchor-id=\"sequential-rendering\">Sequential rendering\u003C\u002Fh2>\u003Cp>You can call as many render methods in sequence as you need — the actual Twig rendering only runs once, and the affected blocks are updated together. For example:\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>FC.cart.renderShippingRates();\nFC.cart.renderTaxes();\nFC.cart.renderOrderTotals();\n\u003C\u002Fpre>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cp>This calls the Twig renderer a single time, then replaces the blocks needed for shipping rates, taxes, and order totals in one pass — rather than re-rendering three times.\u003C\u002Fp>\u003C\u002Fsection>\u003Csection id=\"notes\" data-title=\"Notes\" data-title-node=\"H2\">\u003Chr class=\"my-8\" style=\"margin-left: -48px; margin-right: -40vw\">\u003Ch2 data-anchor-id=\"notes\">Notes\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cp>Each render call triggers a \u003Ccode class=\"badge bg-soft-danger text-danger\">render.done\u003C\u002Fcode> event once the block finishes updating — see \u003Ca href=\"https:\u002F\u002Ffoxy.io\u002Fhelp\u002Farticles\u002Fjavascript-events-reference\" class=\"\">JavaScript events reference\u003C\u002Fa> for the \u003Ccode class=\"badge bg-soft-danger text-danger\">selector\u003C\u002Fcode> and \u003Ccode class=\"badge bg-soft-danger text-danger\">block_id\u003C\u002Fcode> parameters it provides.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>This article covers the JavaScript methods used to trigger re-rendering. It doesn’t cover Twig template syntax itself or customizing template markup.\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fsection>",[571,574,576,578],{"id":572,"title":339,"level":573},"checkout-render-methods","H2",{"id":575,"title":421,"level":573},"cart-render-methods",{"id":577,"title":491,"level":573},"sequential-rendering",{"id":579,"title":512,"level":573},"notes",[581],{"type":582,"content":583},"html","\u003Cp>Foxy uses Twig as its template language, and Twig.js to render those same templates client-side. This is what lets the cart and checkout update in place — swapping in new shipping rates, taxes, or totals — without a full page reload.\u003C\u002Fp>\u003Ch2>Checkout render methods\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.checkout.render()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.checkout.renderLoginRegister()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.checkout.renderCustomerShipping()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.checkout.renderCustomerBilling()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.checkout.renderShippingRates()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.checkout.renderPaymentMethod()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.checkout.renderAdditionalFields()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.checkout.renderRequiredHiddenFields()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Cart render methods\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.cart.render()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.cart.renderShippingRates()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.cart.renderTaxes()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.cart.renderOrderTotals()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.cart.renderCouponEntry()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.cart.renderAddressEntry()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode class=\"badge bg-soft-danger text-danger\">FC.cart.renderCartItemsDivs()\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>Sequential rendering\u003C\u002Fh2>\u003Cp>You can call as many render methods in sequence as you need — the actual Twig rendering only runs once, and the affected blocks are updated together. For example:\u003C\u002Fp>\u003Cpre>\u003Ccode>FC.cart.renderShippingRates();\nFC.cart.renderTaxes();\nFC.cart.renderOrderTotals();\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>This calls the Twig renderer a single time, then replaces the blocks needed for shipping rates, taxes, and order totals in one pass — rather than re-rendering three times.\u003C\u002Fp>\u003Ch2>Notes\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cp>Each render call triggers a \u003Ccode class=\"badge bg-soft-danger text-danger\">render.done\u003C\u002Fcode> event once the block finishes updating — see \u003Ca href=\"https:\u002F\u002Ffoxy.io\u002Fhelp\u002Farticles\u002Fjavascript-events-reference\" class=\"\">JavaScript events reference\u003C\u002Fa> for the \u003Ccode class=\"badge bg-soft-danger text-danger\">selector\u003C\u002Fcode> and \u003Ccode class=\"badge bg-soft-danger text-danger\">block_id\u003C\u002Fcode> parameters it provides.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>This article covers the JavaScript methods used to trigger re-rendering. It doesn’t cover Twig template syntax itself or customizing template markup.\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>",{"name":585,"created_at":586,"published_at":587,"updated_at":588,"id":589,"uuid":47,"content":590,"slug":48,"full_slug":48,"sort_by_date":59,"position":769,"tag_list":770,"is_startpage":24,"parent_id":59,"meta_data":59,"group_id":771,"first_published_at":772,"release_id":59,"lang":65,"path":59,"alternates":773,"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":591,"_uid":594,"title":595,"action":596,"fields":597,"method":745,"columns":746,"subtitle":760,"component":48,"button_text":766,"submit_title":767,"submit_subtitle":768},{"_uid":592,"title":585,"plugin":593,"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",[598,603,607,716,719,724,739],{"_uid":599,"name":600,"type":332,"label":601,"options":13,"required":33,"component":602,"placeholder":13},"9a70b226-2036-4f90-a052-b3efa61c5896","name","Name","form___field",{"_uid":604,"name":605,"type":605,"label":606,"options":13,"required":33,"component":602,"placeholder":13},"86ba35be-ff43-4a28-8633-14052a8f6622","email","Email Address",{"_uid":608,"name":609,"type":610,"label":611,"options":612,"required":33,"component":602,"conditions":613,"placeholder":13},"3f827475-492c-4f97-aa1e-2386ac263b6c","topic","select","Topic","Presales, Support, Billing, Partnerships, Order Enquiry, Other",[614,670,680,687,695,703,709],{"_uid":615,"equals":616,"fields":617,"component":669},"e21d97dd-e68e-4fa6-ba97-bc40f3041dde","Order Enquiry",[618],{"_uid":619,"body":620,"type":667,"title":13,"component":668},"b64992bc-6d53-48b8-b7a0-d81e5a062e50",{"type":324,"content":621},[622],{"type":327,"content":623},[624,626,633,635,637,638,643,645,650,658,660,665],{"text":625,"type":332},"We are ",{"text":627,"type":332,"marks":628},"Foxy.io",[629],{"type":532,"attrs":630},{"href":631,"uuid":59,"anchor":59,"custom":632,"target":59,"linktype":31},"http:\u002F\u002FFoxy.io",{},{"text":634,"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":636},"hard_break",{"type":636},{"text":639,"type":332,"marks":640},"NOTE:",[641],{"type":642},"bold",{"text":644,"type":332}," We are ",{"text":646,"type":332,"marks":647},"not ",[648],{"type":649},"italic",{"text":651,"type":332,"marks":652},"Foxy.in",[653,657],{"type":532,"attrs":654},{"href":655,"uuid":59,"anchor":59,"custom":656,"target":59,"linktype":31},"http:\u002F\u002FFoxy.in",{},{"type":649},{"text":659,"type":332},". We are not in any way affiliated with ",{"text":651,"type":332,"marks":661},[662],{"type":532,"attrs":663},{"href":655,"uuid":59,"anchor":59,"custom":664,"target":59,"linktype":31},{},{"text":666,"type":332},", and cannot help in any way with your order from that website.","danger","global___alert","form___condition",{"_uid":671,"equals":672,"fields":673,"component":669},"8765c3e1-25cf-44aa-b8ea-fc6094acf9c3","Presales",[674],{"_uid":675,"name":676,"type":677,"label":13,"options":13,"required":24,"component":602,"conditions":678,"placeholder":13,"default_value":679},"cf464f8e-d643-4f6e-af29-d3abffaf7380","department_email_address","hidden",[],"hello@foxy.io",{"_uid":681,"equals":208,"fields":682,"component":669},"4007b6d8-77e5-421d-bd1e-6f336dd853fb",[683],{"_uid":684,"name":676,"type":677,"label":13,"options":13,"required":24,"component":602,"conditions":685,"placeholder":13,"default_value":686},"7b4c6aa5-a68c-45e0-9ce1-0a36af10c0c2",[],"help@foxy.io",{"_uid":688,"equals":689,"fields":690,"component":669},"1dbb8f11-613d-43cd-9e09-1b94f6e19219","Billing",[691],{"_uid":692,"name":676,"type":677,"label":13,"options":13,"required":24,"component":602,"conditions":693,"placeholder":13,"default_value":694},"a0ac0d1b-bc4f-4a6c-a682-581d450b0b73",[],"help+billing@foxy.io",{"_uid":696,"equals":697,"fields":698,"component":669},"a0a53a50-7172-4a29-ba58-181e38874e12","Partnerships",[699],{"_uid":700,"name":676,"type":677,"label":13,"options":13,"required":24,"component":602,"conditions":701,"placeholder":13,"default_value":702},"7aa011d9-f374-4aed-b5a5-929b54aaf152",[],"partners@foxy.io",{"_uid":704,"equals":616,"fields":705,"component":669},"a4cd431f-25d5-41c7-bfdc-02c908c8fb47",[706],{"_uid":707,"name":676,"type":677,"label":13,"options":13,"required":24,"component":602,"conditions":708,"placeholder":13,"default_value":679},"f5d52168-d6ae-451b-94ee-2ced1cbd28ad",[],{"_uid":710,"equals":711,"fields":712,"component":669},"25aba1ed-eb41-4bbc-aa89-f7a7167ea86e","Other",[713],{"_uid":714,"name":676,"type":677,"label":13,"options":13,"required":24,"component":602,"conditions":715,"placeholder":13,"default_value":679},"f40dfaef-c203-4b71-bf4e-e1b43cef192b",[],{"_uid":717,"component":718},"e9c53a05-f40a-4510-aaf8-bc072a235a0c","form___subject",{"_uid":720,"name":721,"type":722,"label":723,"options":13,"required":33,"component":602,"placeholder":13},"a4c4d385-fff4-4978-99fb-b68cfea623d6","message","textarea","Message",{"_uid":725,"name":726,"type":610,"label":727,"options":728,"required":33,"component":602,"conditions":729,"placeholder":13},"8a3c9f85-f438-427d-9c7a-d7b295a14b5b","existing_user","Are you an existing user?","No, Yes",[730],{"_uid":731,"equals":732,"fields":733,"component":669},"115933d6-262a-4b59-8fa8-579c5ad73de1","Yes",[734],{"_uid":735,"name":736,"type":332,"label":737,"options":13,"required":33,"component":602,"conditions":738,"placeholder":13},"44b6ff23-98f0-4e95-b7f5-c23e06415c2d","subdomain","Store Subdomain",[],{"_uid":740,"name":741,"type":610,"label":742,"options":743,"required":33,"component":602,"conditions":744,"placeholder":13},"922a5cef-3af2-4113-8855-36c7910e3ee3","user_type","What type of user are you?","Developer, Designer, Merchant",[],"POST",[747],{"_uid":748,"text":749,"title":758,"component":759},"7323b90d-a93a-4bf1-baa9-20d0b7ead61b",{"type":324,"content":750},[751],{"type":327,"content":752},[753,755,756],{"text":754,"type":332},"855.369.9227",{"type":636},{"text":757,"type":332},"9:30am-6pm Central M-F","Pre-sales, Sales, & Partnerships","contact___footer_column",{"type":324,"content":761},[762],{"type":327,"content":763},[764],{"text":765,"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,775],{"name":776,"created_at":777,"published_at":778,"updated_at":779,"id":780,"uuid":559,"content":781,"slug":794,"full_slug":795,"sort_by_date":59,"position":796,"tag_list":797,"is_startpage":24,"parent_id":310,"meta_data":59,"group_id":798,"first_published_at":778,"release_id":59,"lang":65,"path":59,"alternates":799,"default_full_slug":59,"translated_slugs":59},"JavaScript","2026-07-20T21:14:05.160Z","2026-07-20T21:14:28.313Z","2026-07-20T21:14:28.324Z",200263455421156,{"_uid":782,"icon":13,"name":776,"type":783,"pinned":24,"summary":784,"category":13,"component":297,"blog_posts":785,"icon_custom":786,"case_studies":788,"faq_sections":789,"featured_guides":790,"mailbox_category":13,"featured_articles":791,"featured_blog_posts":792,"featured_case_studies":793},"6ac2aa76-e023-4332-bc33-df367c493314","simple","How Foxy's JavaScript works, including events, configuration, sessions, and template rendering, for custom integrations beyond the default cart and checkout.",[],{"id":59,"alt":59,"name":13,"focus":59,"title":59,"source":59,"filename":13,"copyright":59,"fieldtype":81,"meta_data":787},{},[],[],[],[],[],[],"javascript","help\u002Fcategories\u002Fjavascript",-820,[],"37830f97-9285-4e32-8105-7b383c2b8ec9",[],{},1784651804735]