Common changes

Each entry lists the files that must change together. Release every change as described in Releasing a change.

Change a booking form label

No code. Theme settings, ASC - Camp Booking. See Booking form and cart.

Add a field to the booking form

1. Add the field to the Zod schema in src/components/models/ParticipantDetailsSchema.tsx.
2. Add the input to src/components/ParticipantDetails.tsx, with a default in the form's initial values.
3. Add its label and placeholder settings to the ASC - Camp Booking group in theme/config/settings_schema.json, pass them through the config object in theme/layout/theme.product.liquid, and type them in src/components/types.d.ts.
4. Check how finalSubmit in src/components/CampBooking.tsx builds the properties, and add conditional handling if the field depends on a switch.
5. Map the new property to Zoho in asc-api-src-zoho-integration.
6. If saved children should remember it, add it to asc-api-membership-pass and to the mapping in src/components/SavedChildrenDropdown.tsx.
7. Build and commit the bundles in the theme repository.

Release the Zoho integration change first. Orders placed with the new property before then are still processed, but the value is not recorded in Zoho.

Change the cart page

Edit theme/sections/asc-new-cart-layout.liquid, not asc-cart-items.liquid or asc-cart-actions.liquid. Button behaviour is in src/js/custom.js. Styles are in src/css/new-cart-layout.css, which needs a rebuild. See Cart and membership pass.

Add a Tailwind class

Tailwind generates classes it finds in src/**/*.{ts,tsx} and in the theme's sections, snippets and layout folders.

A class used only in src/js/*.js, theme/assets/*.js, a JSON template or a theme setting value is not generated. Add it to safelist in src/tailwind.config.js, rebuild, and commit theme/assets/styles.css.

Change a brand colour

Colours are CSS variables in src/css/tw_in.css, referenced by name in src/tailwind.config.js. Change the variable, rebuild and commit styles.css. Update the matching values in doc-site/content/diagrams/generate.mjs if the diagrams should follow.

Add a theme section

1. Create theme/sections/<name>.liquid with a schema. Include presets if staff should be able to add it from the theme editor.
2. Put section CSS in src/css/<name>.css and import it from src/js/index.js. Put section JavaScript in theme/assets/<name>.js and load it from the section with defer.
3. Add the section to a template, or let staff add it.
4. If its script should wait for user interaction, match it in window.YETT_BLACKLIST in both layouts. If it must run immediately, make sure it does not match.

Add a page template

1. Copy the nearest theme/templates/page.*.json.
2. Connect Hero Video and Thumbnail to the page metafields with dynamic sources, as in page.find-a-camp-sport.json.
3. Keep a camp-finder section on any template with a map, because the map reads its pin images from window.theme.campFinder.
4. Add the template to City and sport pages.

Point the storefront at a different pass service

Change theme setting ASC - Membership Pass, Google Cloud API URL. The value must end with /. No rebuild is needed.

Point club search at a different integration service

Change ZOHO_INTEGRATION_API_ENDPOINT in src/.env, without a trailing /, rebuild and commit camp-booking.bundle.js.

Replace the Google Maps key

1. Set GOOGLE_PLACES_API_KEY in src/.env.
2. Replace the key literal in the loader in src/js/camp-booking.js.
3. Rebuild and commit camp-booking.bundle.js and vendors-booking.bundle.js.
4. Restrict the new key in Google Cloud to the store's domains and the Maps JavaScript and Places APIs.

Change a Zapier hook URL

Theme settings, ASC - Webhooks. The third setting is labelled "Brochure Download Webhook" but is form_submission_webhook, used for general Hulk form submissions.

Record a Zoho function change

Copy the function body from Zoho CRM into the matching file in misc/deluge-scripts/ and commit it with a message naming the Zoho change. The files are a record only. Nothing deploys them.

Update these docs

Edit the Markdown in doc-site/content/. Page order is set by each folder's meta.json.

For diagrams, edit the DIAGRAMS array in doc-site/content/diagrams/generate.mjs and run:

node doc-site/content/diagrams/generate.mjs

It rewrites every .svg beside it and every .excalidraw in diagrams/source/. Relative links between pages must start with ./ or ../.