oxil-net1/hugo/layouts/shortcodes/content/billing/billing.html

Oxford Information Labs Netistrar Theme

<div class="grid px1 px2l pb3 pt2">

  <div class="flex flex-wrap ">
    <div class="w-75 ">
      <div class="grid pb1 ">
        <h1 class="f3 ">{{.Site.Title}}</h1>
        <p class=" ">Please provide your billing details</p>

        <div class="bort3 ge pt2l pt1 pb2 px1 px2l mb125">
          <ka-contact data-success-url="/checkout" data-contact-type="BILLING">

            <form >
              <h4 class=" thin">Billing name</h4>
              <div class="pb2 pb1l flex-grid ">
                <div class="w-40">
                  <label class="text-right-lg blk pr4l bold pb050 pb025l" for="name">Enter your name
                    or
                    business name</label>
                  <p class="vsmall g8-text pr4l text-right-lg ">This is the name registered with your
                    bank
                    for payments.</p>
                </div>
                <div class="flex1">
                  <input id="name" type="text" class="name-field bor1 py050 px050 w mb0"
                         data-name-field
                         placeholder="e.g. Acme Limited" autocomplete="false"
                         >
                  <div class="red-text pb1" data-state="hide" data-name-error></div>
                </div>
              </div>
              <h4 class=" thin">Billing address</h4>

              <div class="pb2 pb1l flex-grid ">
                <div class="w-40">
                  <label class="text-right-lg blk pr4l bold pb050 pb025l"
                         for="address1">Address</label>

                </div>
                <div class="flex1">
                  <input id="address1" type="text" class="name-field bor1 borb0 py050 px050 w mb0"
                         data-street1-field
                         placeholder="e.g. 1 My Street" autocomplete="false"
                        >
                  <div class="red-text pb1" data-state="hide" data-street1-error></div>
                  <input id="address2" type="text" class="name-field bor1 borb0 py050 px050 mb0 w"
                         data-street2-field
                         autocomplete="false"
                         >

                </div>
              </div>
              <div class="pb2 pb1l flex-grid ">
                <div class="w-40">
                  <label class="text-right-lg blk pr4l bold pb050 pb025l" for="city">City</label>

                </div>
                <div class="flex1">
                  <input id="city" type="text" class="name-field bor1 py050 px050 mb0 w"
                         data-city-field
                         autocomplete="false"
                         >
                  <div class="red-text pb1" data-state="hide" data-city-error></div>
                </div>
              </div>
              <div class="pb2 pb1l flex-grid ">
                <div class="w-40">
                  <label class="text-right-lg blk pr4l bold pb050 pb025l" for="county">County</label>

                </div>
                <div class="flex1">
                  <input id="county" type="text" class="name-field bor1 py050 px050 mb0 w"
                         data-county-field
                         autocomplete="false"
                         >
                  <div class="red-text pb1" data-state="hide" data-county-error></div>
                </div>
              </div>
              <div class="pb2 pb1l flex-grid ">
                <div class="w-40">
                  <label class="text-right-lg blk pr4l bold pb050 pb025l"
                         for="postcode">Postcode</label>

                </div>
                <div class="flex1">
                  <input id="postcode" type="text" class="name-field bor1 py050 px050 mb0 w"
                         data-postcode-field
                         autocomplete="false"
                         >
                  <div class="red-text pb1" data-state="hide" data-postcode-error></div>
                </div>
              </div>
              <div class="pb2 pb1l flex-grid ">
                <div class="w-40">
                  <label class="text-right-lg blk pr4l bold pb050 pb025l"
                         for="country">Country</label>

                </div>
                <div class="flex1 vue-wrapper">
                  <select data-country-code-field id="country" class="name-field bor1 py050 px050 w">
                    <option kb-each-country="countries" kb-value="country.code" >
                      {country.name}
                    </option>
                  </select>

                  <div class="red-text pb1" data-state="hide" data-country-code-error></div>
                </div>
              </div>
              <div class="pt1 pb2 pb1l flex-grid ">
                <div class="w-40">

                </div>
                <div class="flex1">
                  <button type="submit" class="but butgn">
                    Save Contact
                    <i class="net-chevron-right"></i>
                  </button>
                </div>
              </div>
            </form>
          </ka-contact>

        </div>


      </div>

    </div>
    <div class="w-25 pl2l ">
      <kc-cart>
        <div class="bort3 bortbk vue-wrapper">
          <div class="flex justify-end"><a class="inv small flex align-center normal ib py050"
                                           href="/cart/">edit
            cart <i class="net-launch-out"></i></a></div>
          <div class="p050 flex thin align-center small ge mb1">
            <i class="net-cart-hollow f4"></i> <span class="f4">{cartItems}</span> item in your cart
          </div>
          <div class="bort1 borb1 py050 ">
            <div class="pb1 small">
              <div class="flex" v-for="item in cart.items">
                <div class="flex1">
                  <b>{item.title}</b>
                </div>
                <div class="w-30 text-right">{item.total}</div>
              </div>
            </div>
          </div>
          <div class="borb1 small py1">
            <div class="flex">
              <div class="w-66 text-right">Total (ex VAT)</div>
              <div class="w-33 text-right">{cart.subtotal}</div>
            </div>
            <div class="flex py075">
              <div class="w-66 text-right">VAT</div>
              <div class="w-33 text-right">{cart.taxes}</div>
            </div>
            <div class="flex">
              <div class="w-66 text-right bold">Total</div>
              <div class="w-33 text-right bold">{cart.total}</div>
            </div>
          </div>

        </div>
      </kc-cart>
    </div>

  </div>

</div>