Skip to content
Search Articles/

less than a minute read • Updated 8 minutes ago

Render cart and checkout templates with Twig.js

The JavaScript methods used to re-render cart and checkout templates client-side with Twig.js, and how sequential render calls are batched.

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.

Checkout render methods

  • FC.checkout.render()

  • FC.checkout.renderLoginRegister()

  • FC.checkout.renderCustomerShipping()

  • FC.checkout.renderCustomerBilling()

  • FC.checkout.renderShippingRates()

  • FC.checkout.renderPaymentMethod()

  • FC.checkout.renderAdditionalFields()

  • FC.checkout.renderRequiredHiddenFields()

Cart render methods

  • FC.cart.render()

  • FC.cart.renderShippingRates()

  • FC.cart.renderTaxes()

  • FC.cart.renderOrderTotals()

  • FC.cart.renderCouponEntry()

  • FC.cart.renderAddressEntry()

  • FC.cart.renderCartItemsDivs()

Sequential rendering

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:

FC.cart.renderShippingRates();
FC.cart.renderTaxes();
FC.cart.renderOrderTotals();

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.

Notes

  • Each render call triggers a render.done event once the block finishes updating — see JavaScript events reference for the selector and block_id parameters it provides.

  • This article covers the JavaScript methods used to trigger re-rendering. It doesn’t cover Twig template syntax itself or customizing template markup.

Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.