Clicking a look opens a drawer showing the products in a look.

Want to display looks for a certain product in a slider or grid? This guide is for you, who have already integrated with @depict-ai/js-ui.

  1. Put together some great looks on app.depict.ai.
  2. Make sure you’re at least on version 4.7.0 of @depict-ai/js-ui.
  3. Add the component to your product detail page like this (don’t forget to pass in your actual product id).
import { onExistsObserver, LooksSliderOrGrid } from "@depict-ai/js-ui";
onExistsObserver(".replace-with-looks", element => {
  const looksDiv = LooksSliderOrGrid({
    merchant: "hope",
    market: "ag",
    backendLocale: "en",
    productId: "46474080649545",
    priceFormatting: {
      pre_: "$",
      post_: "",
      thousands_delimiter_: ",",
      decimal_places_delimiter_: ".",
      places_after_comma_: 2,
    },
  });
  element.append(looksDiv);
});

If you want the looks to be in a grid instead, add gridOptions:

onExistsObserver(".replace-with-looks", element => {
  const looksDiv = LooksSliderOrGrid({
    merchant: "hope",
    market: "ag",
    backendLocale: "en",
    productId: "46474080649545",
    gridOptions: { viewMoreButton: { text: "View more" } }, // see the reference below for more options
    priceFormatting: {
      pre_: "$",
      post_: "",
      thousands_delimiter_: ",",
      decimal_places_delimiter_: ".",
      places_after_comma_: 2,
    },
  });
  element.append(looksDiv);
});

Looking for the reference?