Embed

<div class="dtd-shop" id="dtdShop">
  <div class="dtd-shop-header">
    <h2>Dream Team Divers – T-Shirt Shop</h2>
    <p>Select a design, preview front/back/sides, choose your size, and place your order.</p>
  </div>

  
  <script>
    window.DTD_SHOP_SETTINGS = {
      brandName: "Dream Team Divers",
      currency: "THB",

      // WhatsApp number in Thailand format, digits only, no "+"
      // Example: 66812345678
      whatsappNumber: "66XXXXXXXXX",

      // Optional: used for email ordering button
      orderEmail: "your@email.com",

      shippingNote: "Delivery or pickup in Pattaya (shipping cost confirmed via chat).",
      sizeOptions: ["XS","S","M","L","XL","2XL","3XL"],
      colorOptions: ["Black","White","Navy","Grey"],

      // PRODUCTS (each product uses 4 images: front / back / side / side)
      products: [
        {
          id: "dtd-tee-01",
          name: "Wreck Diver Edition",
          price: 690,
          images: [
            "https://iili.io/f0NdZ0u.png",
            "https://iili.io/f0NdiW7.png",
            "https://iili.io/f0Ndss9.png",
            "https://iili.io/f0Nzv0Q.jpg"
          ],
          description: "Premium cotton tee. Limited run."
        },
        {
          id: "dtd-tee-02",
          name: "Sidemount Edition",
          price: 690,
          images: [
            "https://YOUR-FRONT-IMAGE-LINK.png",
            "https://YOUR-BACK-IMAGE-LINK.png",
            "https://YOUR-SIDE1-IMAGE-LINK.png",
            "https://YOUR-SIDE2-IMAGE-LINK.png"
          ],
          description: "Dive-ready style. Soft feel."
        },
        {
          id: "dtd-tee-03",
          name: "Coral Conservation Edition",
          price: 690,
          images: [
            "https://YOUR-FRONT-IMAGE-LINK.png",
            "https://YOUR-BACK-IMAGE-LINK.png",
            "https://YOUR-SIDE1-IMAGE-LINK.png",
            "https://YOUR-SIDE2-IMAGE-LINK.png"
          ],
          description: "Support reef projects with every shirt."
        }
      ]
    };
  </script>

  
  <div class="dtd-grid" id="dtdGrid"></div>

  
  <div class="dtd-modal" id="dtdModal" aria-hidden="true">
    <div class="dtd-modal-backdrop" data-close="1"></div>

    <div class="dtd-modal-card" role="dialog" aria-modal="true" aria-label="T-shirt preview">
      <button class="dtd-modal-close" type="button" data-close="1" aria-label="Close">✕</button>

      <div class="dtd-modal-body">
        <div class="dtd-modal-imageWrap">
          <img id="dtdModalImg" alt="T-shirt design preview" />
          <div class="dtd-thumbRow" id="dtdThumbRow"></div>
        </div>

        <div class="dtd-modal-info">
          <h3 id="dtdModalTitle"></h3>

          <div class="dtd-priceRow">
            <span class="dtd-price" id="dtdModalPrice"></span>
            <span class="dtd-note" id="dtdModalNote"></span>
          </div>

          <p class="dtd-desc" id="dtdModalDesc"></p>

          <div class="dtd-formRow">
            <label>
              Size
              <select id="dtdSize"></select>
            </label>

            <label>
              Color
              <select id="dtdColor"></select>
            </label>

            <label>
              Qty
              <input id="dtdQty" type="number" min="1" value="1" />
            </label>
          </div>

          <div class="dtd-actions">
            <button class="dtd-btn dtd-btn-primary" id="dtdOrderBtn" type="button">
              Order via WhatsApp
            </button>

            <button class="dtd-btn dtd-btn-ghost" id="dtdEmailBtn" type="button">
              Order via Email
            </button>
          </div>

          <div class="dtd-small">
            <div id="dtdShipping"></div>
            <div class="dtd-smallHint">After you order, we confirm stock + delivery/pickup.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Scoped styles (won't break Durable) */
  .dtd-shop{
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 14px;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
  .dtd-shop-header h2{ margin: 0 0 6px; font-size: 26px; }
  .dtd-shop-header p{ margin: 0 0 18px; opacity: .75; }

  .dtd-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  @media (max-width: 980px){
    .dtd-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 620px){
    .dtd-grid{ grid-template-columns: 1fr; }
  }

  .dtd-card{
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
  }
  .dtd-thumb{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #f2f2f2;
  }
  .dtd-card-body{
    padding: 12px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .dtd-titleRow{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
  }
  .dtd-title{
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
  }
  .dtd-price{
    font-weight: 800;
    white-space: nowrap;
  }
  .dtd-desc{
    margin: 0;
    font-size: 13px;
    opacity: .75;
    line-height: 1.35;
  }
  .dtd-card-actions{
    display:flex;
    gap:10px;
    margin-top: 2px;
  }
  .dtd-btn{
    border: 1px solid rgba(0,0,0,.14);
    background: #fff;
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    transition: transform .06s ease, box-shadow .2s ease;
  }
  .dtd-btn:hover{
    box-shadow: 0 10px 20px rgba(0,0,0,.10);
    transform: translateY(-1px);
  }
  .dtd-btn-primary{
    background:#111;
    color:#fff;
    border-color:#111;
  }
  .dtd-btn-ghost{
    background:#fff;
  }

  /* Modal */
  .dtd-modal{
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
  }
  .dtd-modal[aria-hidden="false"]{ display:block; }
  .dtd-modal-backdrop{
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.55);
  }
  .dtd-modal-card{
    position: relative;
    max-width: 980px;
    margin: 6vh auto;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
  }
  .dtd-modal-close{
    position:absolute;
    right: 10px;
    top: 10px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.12);
    background:#fff;
    cursor:pointer;
    font-weight: 900;
  }
  .dtd-modal-body{
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 0;
  }
  @media (max-width: 900px){
    .dtd-modal-card{ margin: 3vh 12px; }
    .dtd-modal-body{ grid-template-columns: 1fr; }
  }
  .dtd-modal-imageWrap{
    background:#f2f2f2;
    padding: 14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .dtd-modal-imageWrap img#dtdModalImg{
    width: 100%;
    max-width: 520px;
    aspect-ratio: 1/1;
    object-fit: contain;
    border-radius: 14px;
    background:#fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
  }

  /* Thumbnail gallery */
  .dtd-thumbRow{
    display:flex;
    gap:8px;
    margin-top:12px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .dtd-thumbRow img{
    width:64px;
    height:64px;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    border:2px solid transparent;
    background:#fff;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
    transition:border .15s ease, transform .1s ease;
  }
  .dtd-thumbRow img:hover{ transform:translateY(-2px); }
  .dtd-thumbRow img.active{ border-color:#111; }

  .dtd-modal-info{
    padding: 16px 16px 18px;
    display:flex;
    flex-direction:column;
    gap: 10px;
  }
  .dtd-modal-info h3{ margin: 0; font-size: 20px; }
  .dtd-priceRow{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
  }
  .dtd-note{
    font-size: 12px;
    opacity:.7;
    text-align:right;
  }
  .dtd-formRow{
    display:grid;
    grid-template-columns: 1fr 1fr .7fr;
    gap: 10px;
    margin-top: 4px;
  }
  .dtd-formRow label{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size: 12px;
    opacity:.85;
    font-weight: 700;
  }
  .dtd-formRow select,
  .dtd-formRow input{
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 12px;
    padding: 10px 10px;
    font-size: 14px;
    outline: none;
  }
  .dtd-actions{
    display:flex;
    gap:10px;
    margin-top: 6px;
    flex-wrap: wrap;
  }
  .dtd-small{
    margin-top: 4px;
    font-size: 12px;
    opacity: .8;
    line-height: 1.35;
  }
  .dtd-smallHint{ margin-top: 6px; opacity: .85; }
</style>

<script>
  (function(){
    const S = window.DTD_SHOP_SETTINGS || {};
    const grid = document.getElementById("dtdGrid");
    const modal = document.getElementById("dtdModal");

    const modalImg = document.getElementById("dtdModalImg");
    const thumbRow = document.getElementById("dtdThumbRow");

    const modalTitle = document.getElementById("dtdModalTitle");
    const modalPrice = document.getElementById("dtdModalPrice");
    const modalDesc  = document.getElementById("dtdModalDesc");
    const modalNote  = document.getElementById("dtdModalNote");

    const sizeSel = document.getElementById("dtdSize");
    const colorSel = document.getElementById("dtdColor");
    const qtyInp = document.getElementById("dtdQty");

    const orderBtn = document.getElementById("dtdOrderBtn");
    const emailBtn = document.getElementById("dtdEmailBtn");
    const shipping = document.getElementById("dtdShipping");

    let activeProduct = null;

    const fmt = (n) => {
      try { return new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 }).format(n); }
      catch(e){ return String(n); }
    };

    function fillOptions(selectEl, options){
      selectEl.innerHTML = "";
      (options || []).forEach(v => {
        const o = document.createElement("option");
        o.value = v;
        o.textContent = v;
        selectEl.appendChild(o);
      });
    }

    function normalizeImages(p){
      // Safety: if someone still uses "image", convert it.
      if(Array.isArray(p.images) && p.images.length) return p.images.filter(Boolean);
      if(typeof p.image === "string" && p.image) return [p.image];
      return [];
    }

    function openModal(p){
      activeProduct = p;

      const imgs = normalizeImages(p);
      if(!imgs.length){
        alert("Missing images for this product.");
        return;
      }

      // Main image
      modalImg.src = imgs[0];

      // Thumbnails
      thumbRow.innerHTML = "";
      imgs.slice(0, 8).forEach((img, index) => {
        const t = document.createElement("img");
        t.src = img;
        if(index === 0) t.classList.add("active");

        t.addEventListener("click", () => {
          modalImg.src = img;
          [...thumbRow.children].forEach(c => c.classList.remove("active"));
          t.classList.add("active");
        });

        thumbRow.appendChild(t);
      });

      modalTitle.textContent = p.name || "T-shirt";
      modalDesc.textContent = p.description || "";
      modalPrice.textContent = `${fmt(p.price || 0)} ${S.currency || ""}`.trim();
      modalNote.textContent = "Preview: front / back / sides";

      fillOptions(sizeSel, S.sizeOptions || ["S","M","L","XL"]);
      fillOptions(colorSel, S.colorOptions || ["Black","White"]);
      qtyInp.value = 1;

      shipping.textContent = S.shippingNote || "";
      modal.setAttribute("aria-hidden", "false");
      document.body.style.overflow = "hidden";
    }

    function closeModal(){
      modal.setAttribute("aria-hidden", "true");
      document.body.style.overflow = "";
      activeProduct = null;
      thumbRow.innerHTML = "";
    }

    function buildOrderText(){
      const qty = Math.max(1, parseInt(qtyInp.value || "1", 10));
      const size = sizeSel.value || "";
      const color = colorSel.value || "";
      const priceEach = (activeProduct?.price || 0);
      const total = qty * priceEach;

      const msg =
`Hi ${S.brandName || "Dream Team Divers"} 👋
I want to order a T-shirt:

• Design: ${activeProduct?.name || ""}
• Size: ${size}
• Color: ${color}
• Qty: ${qty}
• Price: ${fmt(priceEach)} ${S.currency || ""}
• Total: ${fmt(total)} ${S.currency || ""}

${S.shippingNote || ""}

My name:
Delivery / Pickup:
Phone:`;

      return msg;
    }

    function openWhatsApp(){
      if(!activeProduct) return;
      const number = (S.whatsappNumber || "").replace(/\D/g, "");
      const text = encodeURIComponent(buildOrderText());
      if(number){
        window.open(`https://wa.me/${number}?text=${text}`, "_blank", "noopener");
      } else {
        alert("Set your WhatsApp number in the settings (whatsappNumber).");
      }
    }

    function openEmail(){
      if(!activeProduct) return;
      if(!S.orderEmail){
        alert("Set orderEmail in settings if you want email ordering.");
        return;
      }
      const subject = encodeURIComponent(`T-shirt Order – ${activeProduct.name || ""}`);
      const body = encodeURIComponent(buildOrderText());
      window.location.href = `mailto:${S.orderEmail}?subject=${subject}&body=${body}`;
    }

    // Render product cards
    (S.products || []).forEach(p => {
      const imgs = normalizeImages(p);
      const thumb = imgs[0] || "";

      const card = document.createElement("div");
      card.className = "dtd-card";
      card.innerHTML = `
        <img class="dtd-thumb" src="${thumb}" alt="${(p.name || "T-shirt").replace(/"/g,'&quot;')}">
        <div class="dtd-card-body">
          <div class="dtd-titleRow">
            <h3 class="dtd-title">${p.name || "T-shirt"}</h3>
            <div class="dtd-price">${fmt(p.price || 0)} ${S.currency || ""}</div>
          </div>
          <p class="dtd-desc">${p.description || ""}</p>
          <div class="dtd-card-actions">
            <button class="dtd-btn dtd-btn-primary" type="button">Preview & Order</button>
            <button class="dtd-btn dtd-btn-ghost" type="button">Preview</button>
          </div>
        </div>
      `;

      // open modal on any button click
      card.querySelectorAll("button").forEach(btn => {
        btn.addEventListener("click", () => openModal(p));
      });

      // also open modal when clicking the image
      const imgEl = card.querySelector("img");
      if(imgEl) imgEl.addEventListener("click", () => openModal(p));

      grid.appendChild(card);
    });

    // Modal close (backdrop or X)
    modal.addEventListener("click", (e) => {
      const t = e.target;
      if(t && t.getAttribute && t.getAttribute("data-close") === "1") closeModal();
    });

    document.addEventListener("keydown", (e) => {
      if(e.key === "Escape" && modal.getAttribute("aria-hidden") === "false") closeModal();
    });

    // Order buttons
    orderBtn.addEventListener("click", openWhatsApp);
    emailBtn.addEventListener("click", openEmail);
  })();
</script>

Dream Team Divers

Dream Team Divers is a boutique dive team led by an experienced PADI Instructor, offering personalized scuba adventures, specialty training, and eco-focused dive trips across Southeast Asia. Whether y