How to style the Stock Locator Tool

Modified on Mon, 06 Mar 2023 at 11:22 AM

If you have copied the code over you can fully customize it to your liking by going into the code. It's written using styled-components. At the highest level of the "nexar-stock-locator-tool" directory are the main files for the tool

Alternatively, on the "StockLocatorTool" component there is a "styles" attribute. Here you can change the font, theme, or style with your own custom colors. By default with no styling, the tool will use the light theme and use the "Inter" font as shown in the following screenshot:

Below is the format for the "styles" attribute:

font?: string,
// Global font for all components in the tool. It will fetch the font using webfontloader (optional, default: "Inter").

theme?: "light" | "dark",
// There are two pre-made themes light and dark. (optional, default: "light")

customColors?: IncomingColors,
// If you would prefer to customize the tool further than one of the themes you can use this field to pass in your custom colors. The sub-fields of this field are outlined below.

Below are the fields for "customColors":

background: string,
// Background color of the whole tool (mandatory)

tint: string,
// Color for borders and other tints (mandatory)

text: string,
// Color for all text (mandatory)

button: string,
// Background color for buttons (mandatory)

buttonSecondary: string,
// Color for button text and border (mandatory)

row1: string,
// Color for one row of the offers table (mandatory)

row2: string,
// Color for the other row of the offers table (mandatory)

searchFormBackground?: string,
// Background color of the form containing the search box and dropdown options (optional, default: background)

highlight?: string,
// Color for the mpn match highlighting (optional)

partHeaderBackground?: string,
// Background color for the header of each returned part (optional, default: background)

partHeaderMpn?: string,
// Color for the mpn text in a part's header (optional, default: partHeaderText)

partHeaderText?: string,
// Color for the text in a part's header (optional, default: text)

tableHeaderText?: string,
// Color for the text for an offer table's header (optional, default: text)

keyText?: string,
// Color for the text of prices and stock (optional, default: text)

Note: "customColors" will take priority over a theme if they are both set in the attributes.

Examples

<StockLocatorTool
      searchParameters={{
        token:
          "Your Nexar access token",
      }}
      styles={{ theme: "dark", font: "Poppins" }}
    />

<StockLocatorTool
      searchParameters={{
        token:
          "Your Nexar access token here",
      }}
      styles={{
        font: "Poppins",
        customColors: {
          background: "#F4F2F1",
          button: "#3671B0",
          buttonSecondary: "#FFFFFF",
          keyText: "#2E654D",
          searchFormBackground: "#008375",
          partHeaderBackground: "#003057",
          partHeaderText: "#F4F2F1",
          row1: "#F4F2F1",
          row2: "#FFFFFF",
          tableHeaderText: "#080706",
          text: "#2A241F",
          tint: "#E3DFDA",
        },
      }}
    />