1262e0f5ab
Some checks failed
CI / Lint, Unit & Integration Tests (push) Has been cancelled
Many themes only expose "Add section" for the cart's checkout area, not "Add block" next to the actual Checkout button — Shopify gives apps no supported way to inject a block into an arbitrary spot in a theme's own section markup, so a manually-placed app block can only ever land as a disconnected standalone section on those themes. Add a JS-based fallback via the app embed (already loaded site-wide, independent of block placement): app-embed.liquid now carries the same config settings as the block plus an "auto-place on cart page" toggle (default on), emitted as an inert <template> with the widget's config as data-* attributes. datetime-widget.ts's maybeAutoPlaceOnCart() finds the theme's own Checkout button by CSS selector (a few common patterns, most specific first) and inserts a live widget immediately before it — skipped entirely if a block-placed widget already exists on the page, or no Checkout button can be found by any known selector. Also fix shopify.app.toml: automatically_update_urls_on_dev was left on after the app got a real, permanent production domain (metatron-delivery.thedomainnest.com) — leaving it on meant a future local `shopify app dev` session would silently overwrite the live app's application_url with a temporary Cloudflare tunnel, breaking the deployed app until someone noticed and redeployed with the real URL. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
109 lines
2.1 KiB
CSS
109 lines
2.1 KiB
CSS
.dd-widget {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
font-family: inherit;
|
|
min-height: 3.5rem; /* reserves space before JS renders content, to avoid layout shift */
|
|
}
|
|
|
|
/* Cart-page auto-injection (datetime-widget.ts's maybeAutoPlaceOnCart) lands
|
|
the widget as a sibling immediately before the theme's own Checkout
|
|
button, which can be inside a narrow flex/inline-sized wrapper — force
|
|
full width and give it breathing room so it doesn't get visually
|
|
squeezed regardless of that wrapper's own layout rules. */
|
|
.dd-widget--cart-injected {
|
|
width: 100%;
|
|
margin-block: 1rem;
|
|
}
|
|
|
|
.dd-widget__heading {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.dd-widget__row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dd-widget__pill {
|
|
border: 1px solid currentColor;
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
padding: 0.4rem 0.9rem;
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
color: inherit;
|
|
}
|
|
|
|
.dd-widget__pill[aria-pressed="true"] {
|
|
background: currentColor;
|
|
color: Canvas;
|
|
}
|
|
|
|
.dd-widget__status {
|
|
font-size: 0.875rem;
|
|
opacity: 0.75;
|
|
margin: 0;
|
|
}
|
|
|
|
.dd-widget__confirmation {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.dd-widget__link {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
.dd-widget__input {
|
|
border: 1px solid currentColor;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
padding: 0.4rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
color: inherit;
|
|
font-family: inherit;
|
|
min-width: 10rem;
|
|
}
|
|
|
|
.dd-widget__map {
|
|
width: 100%;
|
|
height: 220px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dd-order-confirmation {
|
|
border: 1px solid currentColor;
|
|
border-radius: 8px;
|
|
padding: 0.75rem 1rem;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
gap: 0.15rem;
|
|
}
|
|
|
|
.dd-order-confirmation__label {
|
|
font-size: 0.75rem;
|
|
opacity: 0.75;
|
|
margin: 0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.dd-order-confirmation__value {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|