# 📟 Template Editing Wiki

Template customization examples for [Wayfront.com](https://wayfront.com/).

## Technology used in the Wayfront Client Portal

* Client-facing templates are written in HTML and Twig 3 ([docs](https://twig.symfony.com/doc/3.x/templates.html))
* Design framework we're using is Tailwind 4 ([docs](https://tailwindcss.com/docs/styling-with-utility-classes))
* For navigation we use Turbo ([docs](https://turbo.hotwired.dev/))
* Portal can be customized using CSS and vanilla Javascript
* Webhooks are available
* A versioned REST API is available ([docs](https://wayfront.com/docs/api))

## Tips and guidelines

* Store custom js and css code in Github and reference in the header. E.g. `<script src="https://raw.githubusercontent.com/...">`
* You can also compile and deploy custom assets on a CloudFlare Worker.
* Avoid targeting non-editable parts of the app layout such as form fields. Unlike Twig templates which are locked in, these can change as we deploy updates.
* Avoid saving templates with no modifications because that will lock in the current version of the template.
* To make global style changes use CSS variables that are already available.
* Most of the Tailwind framework is in the app's CSS bundle, however some more obscure classes may not be available. You can add those utilities manually.
* If custom javascript stops working after navigation, trigger it on `turbo:load` instead of `document.ready`. For example: `document.addEventListener("turbo:load", () => {console.log("test")})`
* Extract reusable code blocks into custom pages, then use `{% include "custom.xyz" %}` in your templates.
* Use only the variables that are available in the view originally. E.g. `{{ ticket.id }}` is only going to be available in the ticket view. Custom pages will only have the `user` variable.
* The `user` variable is available on all pages where the user is signed in. This variable also contains onboarding forms and CRM fields.
* If you're not sure what properties a variable has you can output them using `<pre>{{ user|json_encode }}</pre>`
* If a page throws an exception after template changes you can disable the template to load the default template instead.
* When building automations you can use Zapier or Make. A cheaper and more maintainable approach is to code those automations using node.js and deploy them on a CloudFlare Workers.

Below you'll find code examples for some common things you can do using templates.

---

**Documents**

- [Portal Redesign Upgrade Guide](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/portal-redesign-upgrade-guide-DnCoYzblIt)
- [Exit Intent Popup](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/exit-intent-popup-THivvycReO)
- [Custom iframes](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/custom-iframes-Kj0JeNWVwQ)
- [Clickable Images on Option Groups](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/clickable-images-on-option-groups-vDYxKs9PMl)
- [Custom Payment Method](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/custom-payment-method-KiKBJqjgL3)
- [Authenticating With External Tools](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/authenticating-with-external-tools-pQxczyjIY2)
- [Showing service description on invoices](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/showing-service-description-on-invoices-VxaFRWVUTI)
- [Setting up user-specific signatures](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/setting-up-user-specific-signatures-1OcMvlMlZu)
- [Pulling information from onboarding forms](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/pulling-information-from-onboarding-forms-POnrbwT2Qw)
- [Adding a time limit for revision requests](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/adding-a-time-limit-for-revision-requests-rAFguF4fCH)
- [Hiding Tax ID field](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/hiding-tax-id-field-SU7mYvGrlO)
- [Displaying info messages in dashboard](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/displaying-info-messages-in-dashboard-KTsBBWUEbG)
- [Hide card option based on total value](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/hide-card-option-based-on-total-value-MiWhWmtg31)
- [Creating a custom country dropdown](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/creating-a-custom-country-dropdown-GL26O85x0d)
- [How to hide "add rows" for spreadsheet input](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/how-to-hide-add-rows-for-spreadsheet-input-U9RsOks4RW)
- [Setting up a minimum order value for order forms](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/setting-up-a-minimum-order-value-for-order-forms-NGYiH3MmmX)
- [Using a custom field value in the sidebar](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/using-a-custom-field-value-in-the-sidebar-UKhLuS1Tjs)
- [Adding a Visible Scrollbar to Side Menu](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/adding-a-visible-scrollbar-to-side-menu-ZcV5aqIQwC)
- [Tasks Checklist](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/tasks-checklist-XIytkKQ8nh)
- [Adding Secure Checkout Logos to Order Forms](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/adding-secure-checkout-logos-to-order-forms-QkLRP18AX7)
- [Showing order title in invoices](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/showing-order-title-in-invoices-YUYPpGdkGr)
- [Creating a custom video page for clients](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/creating-a-custom-video-page-for-clients-ttLzyrVoEj)
- [Show prices inclusive of tax](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/show-prices-inclusive-of-tax-ORRDFVqEaK)
- [Setting up an Upsell Form](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/setting-up-an-upsell-form-pr5OqY4lC1)
- [Accepting only ACH via Stripe](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/accepting-only-ach-via-stripe-51chofQi4U)
- [Adding a filter for services based on location](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/adding-a-filter-for-services-based-on-location-7hfZdabwBe)
- [Integrating live chat scripts for logged in users](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/integrating-live-chat-scripts-for-logged-in-users-cOvIknt3nH)
- [Enabling opt-in checkbox on signup page](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/enabling-opt-in-checkbox-on-signup-page-MPN5sKo8LR)
- [Adding a phone number/company name field to the signup page](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/adding-a-phone-numbercompany-name-field-to-the-signup-page-1xt4p4YbFR)
- [Adding a terms field to the signup page](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/adding-a-terms-field-to-the-signup-page-ZBJVshyTre)
- [Setting up a spreadsheet-style service library](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/setting-up-a-spreadsheet-style-service-library-Xo1YNduTXt)
- [Censor domain services](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/censor-domain-services-bYD6hV2paC)
- [Removing the drop-down from quantity](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/removing-the-drop-down-from-quantity-nQD9MWxI9g)
- [Limiting the quantity input in forms](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/limiting-the-quantity-input-in-forms-WRiRBPFsXG)
- [Enabling multi-line sidebar menu items](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/enabling-multi-line-sidebar-menu-items-8ifAYqDSeY)
- [Adding Services as a column in Orders](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/adding-services-as-a-column-in-orders-0jTrJnoJpq)
- [Display the number of requests in client portal](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/display-the-number-of-requests-in-client-portal-1AEAtMzdBl)
- [Embedding testimonials in order forms](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/embedding-testimonials-in-order-forms-9BALVU394c)
- [Displaying the due date in client view](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/displaying-the-due-date-in-client-view-OIORp60Xmt)
- [Preventing invoice footer from overlapping notes](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/preventing-invoice-footer-from-overlapping-notes-YxUOl8nClC)
- [Hiding specific categories from clients based on CRM Field value](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/hiding-specific-categories-from-clients-based-on-crm-field-value-MkOa3XbFsY)
- [Making “Purchasing for a company” the default option](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/making-purchasing-for-a-company-the-default-option-H0lS90btpB)
- [Modifying the sidebar width](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/modifying-the-sidebar-width-TaQzBptA51)
- [Adding a character limit to a field](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/adding-a-character-limit-to-a-field-168KW829Hf)
- [Check if user has filled an onboarding form](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/check-if-user-has-filled-an-onboarding-form-6vxIQYQ98l)
- [Checking if user is subscribed to a service](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/checking-if-user-is-subscribed-to-a-service-VOlTqSxbFt)
- [Setting up further Klaviyo tracking](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/setting-up-further-klaviyo-tracking-5hskn0ln5f)
- [Redirecting to  intake form immediately](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/redirecting-to-intake-form-immediately-xvsv2UBjV1)
- [Redirecting to a custom page](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/redirecting-to-a-custom-page-2Le1kIdwhT)
- [Using a hidden field to save an image selection](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/using-a-hidden-field-to-save-an-image-selection-RICY8QHSP4)
- [Using the Hidden Field in Forms to Charge a Setup Fee to New Clients Only](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/using-the-hidden-field-in-forms-to-charge-a-setup-fee-to-new-clients-only-93hpCLOT31)
- [Adjust add-on service quantity to match parent service](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/adjust-add-on-service-quantity-to-match-parent-service-P6KAzjgyRD)
- [Running code on navigation](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/running-code-on-navigation-96cu5xx5cH)
- [Displaying specific services to specific subscriptions only](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/displaying-specific-services-to-specific-subscriptions-only-UX0Vy3x61L)
- [Google Ads Conversion Event Snippet](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/google-ads-conversion-event-snippet-JCBlbnYqLy)
- [Changing the button link on the receipt page](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/changing-the-button-link-on-the-receipt-page-MqSdRp2i80)
- [Adding TrustPilot’s JavaScript integration](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/adding-trustpilots-javascript-integration-NLAfhqWADA)
- [Cancelling subscriptions on the spot](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/cancelling-subscriptions-on-the-spot-2O31lWq7no)
- [Translating the sidebar](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/translating-the-sidebar-cKAuoPZGiz)
- [Tagging contacts with hidden contact form field](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/tagging-contacts-with-hidden-contact-form-field-P98h74FhfC)
- [Personalizing emails based on user's country](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/personalizing-emails-based-on-users-country-PRCaFoXQa8)
- [Display address field for all checkouts](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/display-address-field-for-all-checkouts-egCvrN3s7P)
- [[Zapier] Updating order due date with a date from form](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/zapier-updating-order-due-date-with-a-date-from-form-6t7dxPrgTb)
- [Redirect clients after login/signup](https://wayfront.getoutline.com/s/5b543dee-b2f8-495e-941f-1becdf9b3942/doc/redirect-clients-after-loginsignup-ycee4fdtuJ)