slt-release v3.17.1

Adept Shop React

This project contains all of the components, containers, redux store and services that you will need to get a store up and running with Adeptshop. Currently this library is being used in any store on Shopify, any demos, the internal tools and the client portal whenever connection to Adeptsearch and a need to display a product or filters is needed.

All containers will fetch info from the redux store by default and the components will expect that data to be passed into them to display the data correctly.

Table of Contents

1. Dependencies
2. Environment Variables
3. Setup
   • 2.1 Javascript
   • 2.2 CSS

Dependencies

• node version 9.4.0 (with npm version bundled with it in nvm) is required to run and build the project
• Your project will need to used sass for its style or be able to compile sass files. (If you are using any of the Adeptmind boilerplates, they will be able to compile the sass)

Environment Variables

• REACT_APP_ADEPT_ENV ( production ) - Since we are unable to set NODE_ENV when using create-react-app, this is needed to specify the environment to the adept shop code.
  • If this is set to production, the debug panel will not render or be bundled into the code.
  • If this is set to development, you can turn logging and the debug panel by setting REACT_APP_DEBUG_LOGGING and REACT_APP_DEBUG_PANEL environment variables to true
• REACT_APP_APP_URL ( http://localhost:3000 ) - The url of where this app is running.
• REACT_APP_DOMAIN ( decathlon ) - The domain that should be sent along with an adept search call.
• REACT_APP_AUTOCOMPLETE_SOURCES ( ' "product", "collection" ' ) - A JSON string that should be sent to the autocomplete service when requesting values. These are the sections that you want to return.
• REACT_APP_FILTER_ORDER ( '"PRODUCT_TYPE", "GENDER", "STORE_COLOR", "SIZES", "PRICE", "FEATURES"' ) - A JSON array of segment names in the order you want them to appear in the search filter.
• REACT_APP_DEBUG_LOGGING (false) - Enable logging of events that are being fired from within. Can only be used if REACT_APP_ADEPT_ENV is set to development.
• REACT_APP_DEBUG_PANEL (true) - Used to show the debug panel on development stores so the user is able to modify config values from within their browser. Can only be used if REACT_APP_ADEPT_ENV is set to development.
• REACT_APP_ADEPT_SEARCH_HOST The default adept search endpoint for use in product labeler. The user has the ability to change it through app settings.
• REACT_APP_SEARCH_ENDPOINT_AUTOCOMPLETE ('/autocomplete-search') - The endpoint of where to query when requesting info for autocomplete.
• REACT_APP_SEARCH_ENDPOINT_QUERY ( '/query' ) - The endpoint of where to query when communicating with the query understanding service (QU).
• REACT_APP_SEARCH_ENDPOINT_SEARCH ( '/search' ) - The endpoint of where to query when communicating with the regular search.
• REACT_APP_SEARCH_ENDPOINT_TAG ( '/tag' ) - The endpoint of where to query when using the free form filter and need to fetch segments.
• REACT_APP_ADEPT_SESSION_ENABLE ( false ) - Whether the store should listen to adept search on whether or not to send the query to HiM.
• REACT_APP_ADEPT_SESSION_URL ( ws://34.217.41.11:4000 ) - The websocket url to connect to HiM. Will only be used if REACT_APP_ADEPT_SESSION_ENABLE is set to true
• REACT_APP_ADEPT_TRACKING_GA ( 'UA-109671163-2' ) - The Google Analytics tracking code that will be used for tracking. When this is set to something, it will automatically inject the GA tracking snippet if not already on the page.
• REACT_APP_ADEPT_TRACKING_MIXPANEL ( 'dd8f91c5e00ddcf69e2ef23c32206f1c' ) - The Mixpanel tracking code that will be used for tracking. When this is set to something, it will automatically inject the Mixpanel tracking snippet if not already on the page.

Setup

Add this to any project from a computer which has a ssh key connected to Adeptmind's private github repo

npm install --save git+ssh://git@github.com/AdeptMind/adept-shop-react.git

This will install the javascript library and allow you to import modules into your project but in most cases you'll need to initialize the scripts and include the css for anything to work.

Javascript

import { Adeptshop } from 'adept-shop-react';
const INITIAL_STATE = {
  search : {}
};
const AdeptShopComponent = AdeptShop( INITIAL_STATE );

Calling AdeptShop() will setup all the necessary script and the redux store that the store needs to run. AdeptShop returns a wrapper React component that you can use to wrap your existing app.

Once you have the AdeptShopComponent you can render it on your root component with your app as the child:

import React from 'react';
import { render } from 'react-dom';
import AppContainer from './containers/App';
const target = document.getElementById('root');

render(
  <AdeptShopComponent>
    <AppContainer />
  </AdeptShopComponent>,
  target
);

CSS

This project uses sass to customize and compile the css for the project. All you need to do to get things working is include the scss files into your project and override the variable to customize the colors, fonts, sizing and more.

@import 'variables';
@import 'adept-shop-react/src/styles/all';

The @import 'variables'; is optional but it is good practice to store all of your variable overrides.

Below are a list of all the variables

// Global color
$brand-primary : #A53455 !default;
$brand-secondary : #304940 !default;

$brand-primary-opposite : #fff !default;
$brand-secondary-opposite: #fff !default;

$background-color : #fff;

$outline-color: $brand-primary;
$outline-color-opposite: $brand-primary-opposite;
$element-outline: solid 1px $brand-primary;
$element-outline-opposite: solid 1px $brand-primary-opposite;

// Type
$primary-font-family: 'Roboto', sans-serif !default;
$body-copy-color : #333 !default;

// Layout dimensions
$filter-list-width : 300px !default;
$gutter : 30px !default;

// Buttons
$button-font-size : 1rem !default;

$sm-breakpoint : 768px !default;


  // Sidebar
$sidebar-item-title-color : #292b2c !default;
$sidebar-item-title-background : transparent !default;
$sidebar-item-color : #666 !default;
$sidebar-item-background : transparent !default;
$sidebar-item-border-color : #dedede !default;
$sidebar-item-hover-color : #000 !default;
$sidebar-item-hover-background : #f9f9f9 !default;
$sidebar-item-active-color : #000 !default;
$sidebar-item-active-background : darken($sidebar-item-hover-background, 1%) !default;

// Sort
$sort-item-title-color : $sidebar-item-title-color !default;
$sort-item-title-background : $sidebar-item-title-background !default;
$sort-item-color : $sidebar-item-color !default;
$sort-item-background : $sidebar-item-background !default;
$sort-item-hover-color : $sidebar-item-hover-color !default;
$sort-item-hover-background : $sidebar-item-hover-background !default;
$sort-item-active-color : $sidebar-item-active-color !default;
$sort-item-active-background : $sidebar-item-active-background !default;

// Filters
$filter-item-title-color : $sidebar-item-title-color !default;
$filter-item-title-background : $sidebar-item-title-background !default;
$filter-item-color : $sidebar-item-color !default;
$filter-item-background : $sidebar-item-background !default;
$filter-item-hover-color : $sidebar-item-hover-color !default;
$filter-item-hover-background : $sidebar-item-hover-background !default;
$filter-item-active-color : $sidebar-item-active-color !default;
$filter-item-active-background : $sidebar-item-active-background !default;
$filter-item-border-color:#e5e5e5 !default;

$filter-color-item-selected-color: $brand-primary !default;

$filter-checkbox-list-max-height:170px !default;


// Form elements

// input
$input-color: #333 !default;
$input-background: #fff !default;
$input-border-color: #dedede !default;
$input-placeholder-color: lighten($input-color, 10%) !default;

// Checkbox
$checkbox-width:20px !default;
$checkbox-height:$checkbox-width !default;
$checkbox-border:solid 1px #ccc !default;
$checkbox-check-color: $brand-primary !default;
$checkbox-check-background:transparent !default;
$checkbox-check-svg: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23#{str_slice(ie-hex-str($checkbox-check-color), 4)}' d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E" !default;

// Autocomplete
$autocomplete-background:#fff !default;
$autocomplete-border-top:solid 3px $brand-primary !default;
$autocomplete-width:450px !default;
$autocomplete-shadow-color:rgba(0,0,0,0.65) !default;
$autocomplete-shadow-blur:10px !default;
$autocomplete-section-title-color:#333 !default;
$autocomplete-section-title-background:#ddd !default;

$autocomplete-item-color:#333 !default;
$autocomplete-item-background:transparent !default;
$autocomplete-item-hover-color:#333 !default;
$autocomplete-item-hover-background:#EEE !default;
$autocomplete-item-title-color:#000;
$autocomplete-item-title-hover-color:#000;

$autocomplete-search-link-border:solid 1px $brand-primary !default;
$autocomplete-search-link-color:$brand-primary-opposite !default;
$autocomplete-search-link-background:$brand-primary !default;
$autocomplete-search-link-hover-color:$brand-primary !default;
$autocomplete-search-link-hover-background:transparent !default;


// Filters

// Range
$filter-range-progess-color:$brand-primary !default;
$filter-range-background-color:transparent !default;


// Animations
$transition-prop : all !default;
$transition-duration : 0.3s !default;
$transition-ease : ease-out !default;


// Pagination
$pagination-item-color : $brand-primary !default;
$pagination-item-background : transparent !default;
$pagination-item-hover-color : $brand-primary-opposite !default;
$pagination-item-hover-background : $brand-primary !default;

$pagination-item-active-color : $brand-secondary-opposite !default;
$pagination-item-active-background : $brand-secondary !default;
$pagination-item-active-hover-color : $brand-secondary-opposite !default;
$pagination-item-active-hover-background : $brand-secondary !default;

// Products
// Color swatches
$product-color-selected-border-type: solid !default;
$product-color-selected-border-size: 1px !default;
$product-color-selected-border-color: #000 !default;

// Common
// Square loader
$square-loader-overlay-background: rgba(255,255,255,0.9) !default;