Images

https://user-generated-content.komerza.com

const CDN_BASE = "https://user-generated-content.komerza.com";

function getImageUrl(filename) {
  return `${CDN_BASE}/${filename}`;
}

const response = await komerza.getProduct("product-slug");
const product = response.data;

// Get full URLs for all product images
const imageUrls = product.imageNames.map(
  (filename) => `https://user-generated-content.komerza.com/${filename}`
);

// Display first image
const primaryImage = imageUrls[0];
document.getElementById("product-image").src = primaryImage;

const variant = product.variants[0];

// Get variant-specific images
const variantImages = variant.imageNames.map(
  (filename) => `https://user-generated-content.komerza.com/${filename}`
);

const logoUrl = komerza.getStoreLogoUrl();
const bannerUrl = komerza.getStoreBannerUrl();

const kz = {
  cdn: "https://user-generated-content.komerza.com",

  imageUrl(filename) {
    if (!filename) return null;
    return `${this.cdn}/${filename}`;
  },

  imageUrls(filenames) {
    if (!filenames) return [];
    return filenames.map((f) => this.imageUrl(f));
  },
};

// Usage
const product = response.data;
const images = kz.imageUrls(product.imageNames);
const thumbnail = kz.imageUrl(product.imageNames[0]);

<div class="product-gallery">
  <img id="main-image" class="main-image" />
  <div id="thumbnails" class="thumbnails"></div>
</div>

<script>
  const CDN = "https://user-generated-content.komerza.com";

  async function loadProductGallery(productId) {
    const response = await komerza.getProduct(productId);
    if (!response.success) return;

    const product = response.data;
    const mainImage = document.getElementById("main-image");
    const thumbnails = document.getElementById("thumbnails");

    // Set main image
    if (product.imageNames.length > 0) {
      mainImage.src = `${CDN}/${product.imageNames[0]}`;
      mainImage.alt = product.name;
    }

    // Create thumbnails
    product.imageNames.forEach((filename, index) => {
      const thumb = document.createElement("img");
      thumb.src = `${CDN}/${filename}`;
      thumb.alt = `${product.name} - Image ${index + 1}`;
      thumb.onclick = () => {
        mainImage.src = thumb.src;
      };
      thumbnails.appendChild(thumb);
    });
  }
</script>

function createProductCard(product) {
  const imageUrl = product.imageNames[0]
    ? `https://user-generated-content.komerza.com/${product.imageNames[0]}`
    : "/placeholder.png";

  return `
    <div class="product-card">
      <img src="${imageUrl}" alt="${product.name}" />
      <h3>${product.name}</h3>
      <p>${product.variants[0].cost}</p>
    </div>
  `;
}

function getImageUrl(filename, fallback = "/placeholder.png") {
  if (!filename) return fallback;
  return `https://user-generated-content.komerza.com/${filename}`;
}

// With error handling in HTML
<img
  src="${getImageUrl(product.imageNames[0])}"
  onerror="this.src='/placeholder.png'"
  alt="${product.name}"
/>;