Quadratec Jeep Configurator

Installation

This npm package works with react version 17.0.2. To downgrade react, just type these commands on the command line:

npm install [email protected]
npm install [email protected]

Need to install an additional package for navigating between pages:

npm install react-router-dom

Install the configurator plugin

npm install @elementalsweb/quadratec-configurator

Components

There are two components:

MainPage - displays a list of jeeps

accepts the following parameters:

• OpenJeep2DoorJL - callback - when you click to go to the configurator this callback is triggered for Jeep2DoorJL
• OpenJeep4DoorJL - callback - when you click to go to configurator, this callback works for Jeep4DoorJL
• OpenJeepGladiator - callback - when you click on the button to go to configurator this callback works for JeepGladiator

ConfiguratorApp - shows the Jeep configurator

accepts the following parameters:

• configSettings - object - primary settings for the output of the configurator

publicToken - the token that is generated in threekit -> Settings -> Tokens

orgId - organization id which is in threekit -> Settings -> Org Profile

assetId - the id of the particular scene, you can get it from the url

threekitEnviroment - environment of the configurator. There are 2 parameters preview & admin

shortId - allows you to recreate a saved configuration using the id

• ReturnToMainPage - callback - when user presses back to select scenes this callback will be triggered
• returnCartInfo - callback - when the user clicks the "Go to Checkout" button, this callback returns all information about the order
• customSettings - object - this object allows you to configure configurator options where the key is the category name and the value is the product name

Full Code

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('app')
);

App.js

import './App.css';
import { ConfiguratorApp, MainPage } from 'quadratec-configurator';
import { Routes, Route, useNavigate } from 'react-router-dom';

function App() {
  let navigate = useNavigate();

  function handleSubmit(path) {
    navigate(path, { replace: true });
  }

  return (
    <div className="App">
      <Routes>
        <Route
          path="/Jeep2DoorJL"
          element={
            <ConfiguratorApp
              configSettings={{
                publicToken: 'e5bbde08-93d9-476f-9e2c-2017bd1f4d9d',
                orgId: '8f670b9f-76f4-4518-8d63-5eb6a728ed7d',
                assetId: 'c19abbb1-1141-4d66-ba89-bd20984a9f54',
                threekitEnviroment: 'preview',
                shortId: 'VmLwhp7r4',
              }}
              ReturnToMainPage={() => {
                window.location = '/';
              }}
              returnCartInfo={(info) => {
                console.log('info: ', info);
              }}
              customSettings={{}}
            />
          }
        />
        <Route
          path="/Jeep4DoorJL"
          element={
            <ConfiguratorApp
              configSettings={{
                publicToken: 'e5bbde08-93d9-476f-9e2c-2017bd1f4d9d',
                orgId: '8f670b9f-76f4-4518-8d63-5eb6a728ed7d',
                assetId: 'bf1ef605-0c1d-459f-9557-738aed1a61b8',
                threekitEnviroment: 'preview',
                shortId: 'xfPCKhjVa',
              }}
              ReturnToMainPage={() => {
                window.location = '/';
              }}
              returnCartInfo={(info) => {
                console.log('info: ', info);
              }}
              customSettings={{}}
            />
          }
        />
        <Route
          path="/JeepGladiator"
          element={
            <ConfiguratorApp
              configSettings={{
                publicToken: 'e5bbde08-93d9-476f-9e2c-2017bd1f4d9d',
                orgId: '8f670b9f-76f4-4518-8d63-5eb6a728ed7d',
                assetId: '1e730ee6-e684-428c-84e7-264675d001c3',
                threekitEnviroment: 'preview',
                shortId: '4k6oVXLsm',
              }}
              ReturnToMainPage={() => {
                window.location = '/';
              }}
              returnCartInfo={(info) => {
                console.log('info: ', info);
              }}
              customSettings={{}}
            />
          }
        />
        <Route
          path="/"
          exact
          element={
            <MainPage
              OpenJeep2DoorJL={() => {
                handleSubmit('/Jeep2DoorJL');
              }}
              OpenJeep4DoorJL={() => {
                handleSubmit('/Jeep4DoorJL');
              }}
              OpenJeepGladiator={() => {
                handleSubmit('/JeepGladiator');
              }}
            />
          }
        />
      </Routes>
    </div>
  );
}

export default App;

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.