Partslogic

@partslogic/ui is a library of React components that helps you build e-commerce sites faster and easier.

We have Basic components which can be used with any API and Wrapper components that uses our @partslogic/ui backend API.

Installation

@partslogic/ui is available as an npm package.

// with npm
npm i @partslogic/ui

// with yarn
yarn add @partslogic/ui

Please note that react >= 18 and react-dom >= 18 are peer dependencies. So you need to install those libraries as well.

• If you are using a bundler like webpack you can install react in this way:

// with npm
npm i react react-dom

// with yarn
yarn add react react-dom

You can also use the react CDN to add react to your application if you are not using a bundler:

<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

Usage

ESM modules

As early as possible in your application, require and configure your API_KEY:

import { config } from '@partslogic/ui';
config({APY_KEY: "Your api key"})

Then you can import components and styles:

// Import components using absolute path
import { FitmentSelector, ListWrapper } from '@partslogic/ui';

// Import all styles
import '@partslogic/ui/build/index.css';

Usage with basic components (ESM modules)

When you use our basic components you are responsible to pass the data you want to show.

import React from 'react';
import ReactDOM from 'react-dom';
import {FitmentSelector} from '@partslogic/ui';
function App() {
  return (
    <FitmentSelector
        clearButtonText="Reset"
        labels={[
          { id: 1, name: 'Year' },
          { id: 2, name: 'Make' },
          { id: 3, name: 'Model' },
        ]}
        labelsData={{
          Make: [
            { id: 1, name: 'Make 1' },
            { id: 2, name: 'Make 2' },
            { id: 3, name: 'Make 3' },
          ],
          Model: [
            { id: 1, name: 'Model 1' },
            { id: 2, name: 'Model 2' },
            { id: 3, name: 'Model 3' },
          ],
          Year: [
            { id: 1, name: 2020 },
            { id: 2, name: 2019 },
            { id: 3, name: 2018 },
          ],
        }}
        orientation="horizontal"
        searchButtonText="Search"
        selectedValues={{
          Year: '1',
        }}
    />);
}
const root = ReactDOM.createRoot(document.querySelector('#app'))
root.render(<App />);

Usage with our wrapper components (ESM modules)

When you use our wrapper components you just have to put our component in your JSX and we do all the work to fetch and show data. You can customize these components passing some props and/or overriding css classes.

import React from 'react';
import ReactDOM from 'react-dom';
import {FitmentSelectorWrapper} from '@partslogic/ui';

function App() {
  return (
    <FitmentSelectorWrapper styled orientation="vertical" />);
}
const root = reactDOM.createRoot(document.querySelector('#app');
root.render(<App />));

CDN

Initializing the library

To use our UI components, the site needs 4 things:

• React

• ReactDOM

• The javascript file of the library

• The css file of the library

The following snippet can be inserted into any HTML file, or template that accepts HTML format. You can add @partslogic/ui as a <script> tags:

  <!-- React and ReactDOM -->
  <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js" crossorigin></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

  <!-- Partslogic Library JS and CSS -->
  <script crossorigin src="https://cdn.jsdelivr.net/npm/@partslogic/[email protected]/build/index.umd.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/@partslogic/[email protected]/build/index.css" rel="stylesheet" type="text/css" />

  <!-- Partslogic Initialization -->
  <script>
      const API_KEY = "";
      const GROUP_ID = "";
      const initPL = () => {
          window.PartslogicUi.config({
              API_KEY
          })
          window.PartslogicUi.groupId = GROUP_ID;
          window.PartslogicUi.ready = true;
          // This event will let all the components know that PL is ready,
          // so we can avoid race conditions.
          const readyEvent = new Event("Partslogic Ready");
          window.dispatchEvent(readyEvent);
      }
      // This event will let us know the libraries finished loading
      window.addEventListener("DOMContentLoaded", initPL);
  </script>

Instantiating a component

  <!-- Add a node to the DOM where we can instantiate the component -->
  <div id="pl-searchbar"></div>
  <script>
      const renderSearchbar = () => {
          const searchBarContainer = document.querySelector('#pl-searchbar');
          const root = window.ReactDOM.createRoot(searchBarContainer);
          const SearchBar = window.PartslogicUi.PartslogicSearchBarWrapper;
          const RESULTS_PAGE = "/search";
          const onSubmit = (data) => {
              let params = new URLSearchParams();
              params.set('q', data);
              window.location.href = `${window.location.origin}${RESULTS_PAGE}?${params.toString()}`;
          }
          const element = window.React.createElement(SearchBar, {
              onSubmit: onSubmit,
              styled: true,
          });
          root.render(element);

          // Tip: root.unmount() will unmount the component
      }
      // if the library was already intialized, render the component
      if (window.PartslogicUi && window.PartslogicUi.ready) {
          renderSearchbar();
      }
      // if not, wait until it is, and then render it
      else {
          window.addEventListener("Partslogic Ready", renderSearchbar)
      }
  </script>