JavaScript (global.js)

Citera ships one deferred, dependency-free JavaScript file. It leans on the native <dialog> element and Shopify’s Section Rendering API so there’s no framework and no full-page reloads for cart actions.

Drawers (native <dialog>)

• openDialog() / closeDialog() helpers
• Click handlers bound to [data-drawer-open] and [data-drawer-close]
• Scroll is locked while open and restored on close; clicking the backdrop closes

AJAX cart

Wraps Shopify’s cart endpoints:

• postCart() — calls /cart/add.js, /cart/update.js, /cart/change.js
• refreshCartDrawer() — re-renders just #cart-drawer-content (drawer stays open, items update in place) via the Section Rendering API
• updateCartCount() — reads /cart.js and updates [data-cart-count] badges
• A form interceptor on [data-cart-form] submits via postCart() and opens the drawer instead of navigating

Cart drawer persistence

• updateCartField() — POSTs cart note and gift attributes to /cart/update.js without re-rendering the drawer

Cart upsell

• loadCartUpsell() — fetches /recommendations/products?...&section_id=cart-upsell and injects results into [data-cart-upsell] (see the cart-upsell section)

Quick view

• Fetches /products/{handle}?section_id=quick-view via the Section Rendering API and injects the markup into the #quick-view modal, so shoppers preview a product without leaving the page.

Countdown

• Drives [data-countdown] elements from a data-countdown-end ISO timestamp, anchored to the store timezone, switching to an “ended” state at the deadline.