Deprecation notice

This library is deprecated, all components and logic was moved to @partslogic/ui repository.

Partslogic

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

This library privides fully functional pages, like a SearchPage.

At this moment we don't support customization via properties, if you want to build your page using our components, please have a look at sunhammer library.

Installation

@partslogic/pages is available as an npm package.

// with npm
npm i @partslogic/pages

// with yarn
yarn add @partslogic/pages

Please note that react >= 17.0.1 and react-dom >= 17.0.1 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://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

Usage

IMPORTANT: To use the SearchPage component, you will need a FitmentSelector groupId.

ESM modules

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

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

Then you can import pages and styles:

// Import pages using absolute path
import { SearchPage } from @partslogic/pages;
// Using relative path per page
import SearchPage from @partslogic/pages/build/SearchPage';

// Import all styles
import '@partslogic/pages/build/index.css';
// Import styles per page
import '@partslogic/pages/build/SearchPage/index.css';

import React from 'react';
import ReactDOM from 'react-dom';
import SearchPage from '@partslogic/pages/build/SearchPage';

function App() {
  return (
    <SearchPage groupId="{FITMENT_SELECTOR_GROUP_ID}" />);
}

ReactDOM.render(<App />, document.querySelector('#app'));

CDN

You can add @partslogic/pages as a <script> tags:

<!-- All pages and all styles -->
<script crossorigin src="https://unpkg.com/@partslogic/[email protected]/build/index.umd.js" />
<link href="https://unpkg.com/@partslogic/[email protected]/build/index.css" rel="stylesheet" type="text/css" />
<!--  Add a specific page -->
<script crossorigin src="https://unpkg.com/@partslogic/[email protected]/build/[COMPONENT]/index.umd.js" />
<link href="https://unpkg.com/@partslogic/[email protected]/build/[COMPONENT]/index.css" rel="stylesheet" type="text/css" />

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

window.PartslogicPages.config({ API_KEY: 'YOUR_API_KEY' });

Add a div with the id you want to use as container for your component, in this example is #search-page.

const searchPageContainer = document.querySelector('#search-page');
const SearchPage = window.PartslogicPages.SearchPage;
ReactDOM.render(
React.createElement(SearchPage, {
  groupId: "{FITMENT_SELECTOR_GROUP_ID}"
}),
searchPageContainer
);

Styles (css)

You can customize styles using classes with the prefix Pl- and Sui-. Example:

.Pl-SearchPage--container
.Pl-filter-results--button
.Sui-ListControls--container

List of pages

• SearchBar

• SearchPage

Customization

You can customize components using CSS.