Penataan & penempatan | SDK 2.0

Gaya tombol Web SDK

TypeScript

import type { RenderTryOnButtonOptions } from "@spreeai/web-sdk";

export const brandedButton: RenderTryOnButtonOptions = {
  elementId: "spreeai-try-on",
  garments: [{ garmentId: "YOUR_READY_GARMENT_ID" }],
  className: "product-try-on",
  features: {
    tryOnButton: {
      text: "Try it on you",
      backgroundColor: "#171717",
      textColor: "#ffffff",
      borderRadius: "6px",
      padding: "14px 24px",
      fontSize: "16px",
      width: "100%",
    },
  },
};

features.tryOnButton menerapkan gaya sebaris dan mengganti stylesheet default. Ini text nilai juga diutamakan button.text. Gunakan className untuk kelas tombol tambahan Anda.

Bidang gaya yang didukung

text, iconUrl, iconHeight, backgroundColor, textColor, width, height, borderRadius, fontSize, fontWeight, padding, border Dan boxShadow.

Perilaku dialog

Dialog yang dihosting v3 adalah lembar berlabuh di bagian bawah, dengan lebar hingga 1000 piksel dan 95% tinggi area pandang. Pada 744 piksel atau lebih sempit, ini adalah layar penuh. Periksa kembali dialog yang ada yang diganti CSS setelah migrasi.

Aksesibilitas dan perilaku halaman

Gunakan label deskriptif dan kontras yang cukup untuk tombolnya.
Uji akses keyboard, pemulihan fokus, perilaku Escape dan gulir.
Periksa tata letak pada ponsel asli, teks yang diperbesar, dan layar sempit.
Jaga agar informasi produk dan pembayaran dapat digunakan jika SPREEAI tidak dapat dimuat.

Penempatan Shopify

Gunakan pengaturan blok aplikasi di editor tema untuk Shopify. Jangan salin opsi gaya Web SDK ke dalam konfigurasi aplikasi Shopify. Lihat Integrasi Shopify.

Referensi sumber