Styling & τοποθέτηση | SDK 2.0

Δώστε στυλ στο κουμπί 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 εφαρμόζει ενσωματωμένα στυλ και αντικαθιστά το προεπιλεγμένο φύλλο στυλ. Του text η αξία έχει επίσης προτεραιότητα button.text. Χρήση className για την πρόσθετη κατηγορία κουμπιών σας.

Υποστηριζόμενα πεδία στυλ

text, iconUrl, iconHeight, backgroundColor, textColor, width, height, borderRadius, fontSize, fontWeight, padding, border και boxShadow.

Συμπεριφορά διαλόγου

Το παράθυρο διαλόγου που φιλοξενείται στο v3 είναι ένα φύλλο με αγκύρωση στο κάτω μέρος, πλάτους έως 1000 px και 95% του ύψους της θύρας προβολής. Με ανάλυση 744 px ή μικρότερη, είναι πλήρης οθόνη. Ελέγξτε ξανά τυχόν υπάρχουσες παρακάμψεις διαλόγου CSS μετά τη μετεγκατάσταση.

Προσβασιμότητα και συμπεριφορά σελίδας

Χρησιμοποιήστε μια περιγραφική ετικέτα και επαρκή αντίθεση για το κουμπί.
Δοκιμάστε την πρόσβαση στο πληκτρολόγιο, την επαναφορά εστίασης, τη συμπεριφορά διαφυγής και κύλισης.
Ελέγξτε τη διάταξη σε πραγματικά τηλέφωνα, μεγεθυσμένο κείμενο και στενές οθόνες.
Διατηρήστε τις πληροφορίες προϊόντος και την ολοκλήρωση αγοράς σε περίπτωση που το SPREEAI δεν μπορεί να φορτώσει.

Τοποθέτηση Shopify

Χρησιμοποιήστε τις ρυθμίσεις μπλοκ εφαρμογών στο πρόγραμμα επεξεργασίας θεμάτων για το Shopify. Μην αντιγράφετε τις επιλογές στυλ Web SDK στη διαμόρφωση της εφαρμογής Shopify. Βλ Ενσωμάτωση Shopify.

Αναφορές πηγών