metatrondelivery/extensions/datetime-widget/blocks/app-embed.liquid

{{ 'datetime-widget.css' | asset_url | stylesheet_tag }}
<script src="{{ 'datetime-widget.js' | asset_url }}" defer="defer"></script>

{% comment %}
  Cross-theme cart placement (PRODUCT_STRATEGY.md competitive parity item):
  a manually-placed app BLOCK only ever lands wherever the active theme's
  own section schema declares an `@app` slot — many themes don't expose one
  next to the cart's Checkout button at all, only "Add section" at the top
  level, which is what was showing up as a disconnected block. Shopify
  gives apps no supported way to inject a block into an arbitrary spot in a
  theme's own section markup, so this app embed (always loaded site-wide,
  independent of any block placement) instead emits an inert <template>
  carrying the widget's config as data-* attributes; datetime-widget.js
  finds the theme's own Checkout button by CSS selector at runtime and
  inserts a live widget immediately before it. Best-effort — it depends on
  the theme's Checkout button being findable by one of a few common
  selectors (see datetime-widget.ts's CHECKOUT_BUTTON_SELECTOR) — but it's
  the only way to get placement that isn't at the mercy of whether a given
  theme's cart section happens to support app blocks.
{% endcomment %}
{% if block.settings.auto_place_cart %}
  <template
    id="dd-widget-cart-template"
    data-heading="{{ block.settings.heading | escape }}"
    data-show-shipping="{{ block.settings.show_shipping }}"
    data-show-local-delivery="{{ block.settings.show_local_delivery }}"
    data-show-pickup="{{ block.settings.show_pickup }}"
    data-label-shipping="{{ 'widget.method_shipping' | t | escape }}"
    data-label-local-delivery="{{ 'widget.method_local_delivery' | t | escape }}"
    data-label-pickup="{{ 'widget.method_pickup' | t | escape }}"
    data-attr-label-shipping="{{ 'widget.date_label_shipping' | t | escape }}"
    data-attr-label-local-delivery="{{ 'widget.date_label_local_delivery' | t | escape }}"
    data-attr-label-pickup="{{ 'widget.date_label_pickup' | t | escape }}"
    data-label-choose-date="{{ 'widget.choose_date' | t | escape }}"
    data-label-choose-time="{{ 'widget.choose_time' | t | escape }}"
    data-label-no-dates="{{ 'widget.no_dates' | t | escape }}"
    data-label-confirmed="{{ 'widget.confirmed' | t | escape }}"
    data-label-change="{{ 'widget.change' | t | escape }}"
    data-label-loading="{{ 'widget.loading' | t | escape }}"
    data-label-error="{{ 'widget.error' | t | escape }}"
    data-label-postal-code="{{ 'widget.postal_code' | t | escape }}"
    data-label-postal-code-submit="{{ 'widget.postal_code_submit' | t | escape }}"
    data-label-out-of-area="{{ 'widget.out_of_area' | t | escape }}"
    data-label-choose-pickup-location="{{ 'widget.choose_pickup_location' | t | escape }}"
    {% if block.settings.location_id != blank %}data-location-id="{{ block.settings.location_id | escape }}"{% endif %}
    {% if block.settings.google_maps_api_key != blank %}data-google-maps-api-key="{{ block.settings.google_maps_api_key | escape }}"{% endif %}
  ></template>
{% endif %}

{% schema %}
{
  "name": "t:app_embed.name",
  "target": "body",
  "settings": [
    {
      "type": "checkbox",
      "id": "auto_place_cart",
      "label": "t:app_embed.auto_place_cart_label",
      "info": "t:app_embed.auto_place_cart_info",
      "default": true
    },
    {
      "type": "text",
      "id": "heading",
      "label": "t:app_embed.heading_label",
      "default": "Choose your delivery date"
    },
    {
      "type": "checkbox",
      "id": "show_shipping",
      "label": "t:app_embed.show_shipping_label",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_local_delivery",
      "label": "t:app_embed.show_local_delivery_label",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_pickup",
      "label": "t:app_embed.show_pickup_label",
      "default": true
    },
    {
      "type": "text",
      "id": "location_id",
      "label": "t:app_embed.location_id_label",
      "info": "t:app_embed.location_id_info"
    },
    {
      "type": "text",
      "id": "google_maps_api_key",
      "label": "t:app_embed.google_maps_api_key_label",
      "info": "t:app_embed.google_maps_api_key_info"
    }
  ]
}
{% endschema %}