checkout-kit/platforms/web/sample/shell.ts at main · Shopify/checkout-kit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
export const SAMPLE_SHELL = `
  <main id="layout">
    <section class="panel settings-panel"></section>
    <section class="panel runtime-panel"></section>
    <div class="col-resizer" id="resize-left" tabindex="0"></div>
    <div class="col-resizer" id="resize-right" tabindex="0"></div>
    <form id="options-form" autocomplete="off">
      <label><input type="radio" name="source-mode" value="build" checked /></label>
      <label><input type="radio" name="source-mode" value="manual" /></label>
      <fieldset id="storefront-source-fields">
        <input id="storefront-domain" type="text" name="storefront-domain" />
      </fieldset>
      <select id="checkout-target" name="target">
        <option value="popup" selected>popup</option>
        <option value="auto">auto</option>
      </select>
      <select id="checkout-appearance" name="appearance">
        <option value="" selected></option>
        <option value="app:light">app:light</option>
        <option value="app:dark">app:dark</option>
        <option value="app:automatic">app:automatic</option>
        <option value="storefront">storefront</option>
      </select>
      <select id="checkout-log-level" name="log-level">
        <option value="debug">debug</option>
        <option value="warn" selected>warn</option>
        <option value="error">error</option>
        <option value="none">none</option>
      </select>
    </form>
    <button type="button" id="toggle-settings" class="panel-collapse-toggle" aria-expanded="true"></button>
    <button type="button" id="toggle-events" class="panel-collapse-toggle" aria-expanded="true"></button>

    <div id="build-workspace">
      <p id="cart-summary-text"></p>
      <span id="cart-count">0 items</span>
      <ol id="selected-lines"></ol>
      <a id="generated-src">Add products to derive a cart permalink</a>
      <button type="button" id="cart-checkout" disabled>Open checkout</button>
      <p id="cart-checkout-hint"></p>
      <span id="load-state">Waiting for domain</span>
      <p id="cart-status" role="status"></p>
      <div id="product-empty"></div>
      <ul id="product-list"></ul>
    </div>

    <div id="manual-workspace" hidden>
      <input id="manual-src" type="url" name="manual-src" />
      <button type="button" id="manual-checkout" disabled>Open checkout</button>
    </div>

    <dl>
      <dd id="state-checkout">—</dd>
      <dd id="state-error">—</dd>
      <dd id="state-target">—</dd>
      <dd id="state-appearance">—</dd>
      <dd id="state-log-level">—</dd>
    </dl>
    <button type="button" id="clear-log">Clear</button>
    <ul id="event-log"></ul>
  </main>
`;