1. Help Center
  2. PartsLogic
  3. Installation for BigCommerce

Installing PartsLogic on BigCommerce

Learn how to install the PartsLogic search components onto your BigCommerce Website

๐Ÿ“† Last Updated: 3/11/2022

In this article


Requirements to Implement

  • You have completed setting up an API Account in your BigCommerce store
  • Your PartsLogic implementation specialist has provided to the PartsLogic  API Key and optional Fitment GroupID
  • You must have User Role > Admin access to your BigCommerce store
  • A basic to intermediate knowledge of scripting in HTML, CSS, and Javascript
  • Your BigCommerce store uses the Stencil framework

โš ๏ธIf your BigCommerce website uses the legacy Blueprint framework, PartsLogic can be installed on your site. Contact your PartsLogic service rep to inform him/her to start the installation process.

 


Obtain PartsLogic API Key & Fitment GroupID

Your PartsLogic implementation specialist will provide your unique API key and if applicable, your Fitment GroupID (often known as Year, Make, Model fitment group).

Your API Key

The API Key is a required parameter for the PartsLogic search components. 

Your API key will be a series of letters and numbers and appear like this example API key: 

Example API Key: 887cd971-c5e7-4223-b1a2e37f78ce

Your Fitment GroupID

Not all stores have Fitment Group, often known as Vehicle Fitment, Vehicle Applications, or "Year, Make, Model". However, if you store does have a Fitment Group, the numerical ID of the fitment group will be provided to you.

โšกIf you are unable to locate your API Key and/or Fitment GroupID, contact partslogic@webshopmanager.com to ask for it.

 


Install PartsLogic Scripts & CSS Library

Install Javascript files via Scripts Manager

The first step is to include the required PartsLogic scripts into your BigCommerce website using the Scripts Manager.

  1. Login into your BigCommerce store's admin panel
  2. Once logged in, using the left sidebar, navigate to Storefront > Scripts Manager
  3. Click the [ Create Scripts ] button near the top left of the page.
  4. Once on the Edit Script page, enter in the following:
    1. Name of Script: PartsLogic Library Scripts
    2. Description: Required scripts for PartsLogic service
    3. Location on Page: Head
    4. Select pages where script will be added: All Pages
    5. Select Category: Functional
    6. Script Type: Script
    7. Script contents:
      enter in the following code and include your unique API_KEY acquired from the PartsLogic team
    8. <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>
      <script src="https://unpkg.com/@partslogic/ui@0.0.3-alpha.0/build/index.umd.js"  crossorigin></script>
      <script>window.PartslogicUi.config({API_KEY: 'ADD_YOUR_UNIQUE_API_KEY_HERE'});</script>

       

    9. Click the [ SAVE ] button, once saved you can move onto the next step.

      Image: Installing PartsLogic scripts with the Script Manager
      bigcommerce_install_scripts

 

Install CSS Scripts via Theme Editor

For this step you will install the code to deliver the PartsLogic CSS files.

  1. Navigate to Storefront > Themes
  2. For the Current Theme, click on the [ Advanced ] button, and select from the dropdown "Edit Theme Files"
    1. โš ๏ธIf an alert titled "Edit your theme files", click on the button [ Edit Theme Files]
  3. Once on the theme editor, use the left sidebar to navigate the folders and files and click on ๐Ÿ“assets / ๐Ÿ“ scss / ๐Ÿ“„ theme.scss
  4. A new tab will open up titled "theme.scss", scroll to the very bottom of the file and enter in the following code:
    1. // PartsLogic CSS Library - add this to the bottom of the theme.scss file
      // -----------------------------------------------------------------------------
      //
      // 1. Required PartsLogic CSS library files
      @import url("https://unpkg.com/@partslogic/ui@0.0.3-alpha.0/build/index.css")

       

  5. Once the code is added, save the changes but clicking on the [ Save & apply file ] button in the lower left corner of the page.

 


Create a Search Results Web Page

In this step you will create a new page to be the PartsLogic search results page on your website.

  1. Navigate to Storefront > Web Pages
  2. At the top left of the page, click on the [ Create a Web Page ] to create a new page and open up the web page editor
  3. On the "Edit a Web Page" screen enter in the following:
    1. Page Type
      1. This Page Will: Contain content created using the WYSIWYG editor below
    2. Web Page Details
      1. Page Name: PartsLogic Search
      2. Page URL: /search.html
      3. Page Content:
        1. Using the WYSIWYG Editor, in the bar filled with actions, click on the last icon to the right labeled "HTML"

          Image: WYSIWYG Editor and clicking the HTML action
          bigcommerce_install_webpage_action_htmlbutton
        2. A popup labeled HTML Source Editor will open. Enter in the following code and, if applicable, include your unique fitment groupId numeric value.
          <div id="pl-search-page-container">&nbsp;</div>
          <script type="text/javascript">// <![CDATA[
            window.addEventListener('DOMContentLoaded', function () {
              const searchPageContainer = document.querySelector(
                '#pl-search-page-container'
              );               
              
              const SearchPage = window.PartslogicUi.WsmSearchPage;
              
              window.ReactDOM.render(
              window.React.createElement(SearchPage,{groupId:ENTER_YOUR_FITMENT_GROUP_ID___OR___DELETE_THIS_PARAMETER}),
                searchPageContainer
              );
            });
            /*Hide some elements*/
            document.querySelector("nav[aria-label='Breadcrumb']").style.display = "none";
            document.querySelector("h1.page-heading").style.display = "none";
          // ]]></script>

          To save this code entry, in the HTML Source Editor popup click on the [ Update ] button.bigcommerce_install_webpage_action_plCode

    1. Navigation Menu Options

      1. Navigation Menu: ๐Ÿ”ฒunchecked
      2. Parent Page: -- No Parent Page --
    2. Advanced Options
      1. Page Title: Search ENTER_Your_Website_Name_Here
      2. Meta Description: Search ENTER_Your_Website_Name_Here to find ENTER_Your_Market_Niche_of_Products
      3. Template Layout File: default
    3. When you are finished, to save the page, click on the [ Save & Exit ] button located in the lower right corner of the page.

Once you have this new webpage created, move onto the next step!

 


Install Search Bar to Header of Website

In this step, you will use the BigCommerce Theme editor to edit Stencil files and install replace the native search bar with the PartsLogic search bar component.

  1. Navigate to Storefront > Themes
  2. Navigate to Storefront > Themes
  3. For the Current Theme, click on the [ Advanced ] button, and select from the dropdown "Edit Theme Files"
    1. โš ๏ธIf an alert titled "Edit your theme files", click on the button [ Edit Theme Files]
  4. Once on the theme editor, use the left sidebar to navigate the folders and files and click on ๐Ÿ“templates / ๐Ÿ“components / ๐Ÿ“common / ๐Ÿ“„ header.html
  5. A new tab will open up titled [ header.html ], find the section in the file's code the line  . 

    Highlight this line of code and replace it with:
    1. <!-- > components/common/quick-search -->
      <!-- PARTSLOGIC COMPONENT: Search Bar -->
      <script type="text/javascript">
          window.addEventListener('DOMContentLoaded', function () {
            const searchBarContainer = document.querySelector('#quickSearch');
            const SearchBar = window.PartslogicUi.WsmSearchBarWithWrapperModal;
            function onSubmit(data) {
              let params = new URLSearchParams();
              params.set('q', data);
              window.location.href = `${
                window.location.origin
              }/search.html?${params.toString()}`;
            }
          
            window.ReactDOM.render(
              window.React.createElement(SearchBar, {
                onSubmit: onSubmit
              }),
              searchBarContainer
            );
          });
      </script>

       

  6. Once the code is added, save the changes but clicking on the [ Save & apply file ] button in the lower left corner of the page.

    Image: Installing search bar in header.html file
    bigcommerce_install_comp_searchBar

 


For Advanced Only - Customizing using CSS/SCSS

The following is intended for those that know and understand CSS/SCSS to customize the look and feel of the PartsLogic components.

๐Ÿ“† March 11, 2022: It is planned in the near future to allow you to customize components using the PartsLogic Admin Application.

At this time, the only available option to customize things like color, visibility, and size of the PartsLogic components' User Interface (UI) is via CSS. 

In this step, you will understand the "best place" to place your custom CSS within the BigCommerce Stencil files.

What File to Place Your Custom CSS

  1. Navigate to Storefront > Themes
  2. For the Current Theme, click on the [ Advanced ] button, and select from the dropdown "Edit Theme Files"
    1. โš ๏ธIf an alert titled "Edit your theme files", click on the button [ Edit Theme Files]
  3. Once on the theme editor, use the left sidebar to navigate the folders and files and click on ๐Ÿ“assets / ๐Ÿ“ scss / ๐Ÿ“ components / ๐Ÿ“ stencil / ๐Ÿ“ search / ๐Ÿ“„ search.scss
  4. A new tab will open up titled "search.scss", scroll to the very bottom of the file and place in your custom CSS code. The following is an example starting with a comment.
    1. // PartsLogic Overrides //
      // Enter in your custom CSS code below here //

      header .quickSearchWrap {padding:5px;}
  5. Once the code is added, save the changes but clicking on the [ Save & apply file ] button in the lower left corner of the page.