Findify

Findify Developer Hub

Welcome to the Findify developer hub. You'll find comprehensive guides and documentation to help you start working with Findify as quickly as possible, as well as support if you get stuck. Let's jump right in!

Findify Devtools

Installation

Install the extension using this link: https://chrome.google.com/webstore/detail/findify-devtools/jngfkjbhdmpkaccemaikjomjdfnmedgm

Authentication

The extension automatically binds to the store you're currently viewing. When it activates, the extension button becomes activated.

Before going to the store, you need to select the store that you will be modifying in the Merchant Dashboard, then go to your store and reload the page. The button will become activated after that.

Components

Components are the core of the Merchant JS. Each component consists of 3 type of files:

  1. Logic (index.ts)
  2. View (view.tsx)
  3. Styles (styles.css)

Logic piece describes the view-logic of the component that mostly consists of the high order component which modifies properties, provides theme and connects to remote data (@findify/react-connect). Overriding the Logic file can have unexpected results, so treat it carefully.

Styles file cannot be changed at the moment, if you want to modify the CSS, use the 'Styles' tab in the Devtool, where you have access to the whole compiled CSS file.

The View file is a JSX markup file that you can safely change the way you need in order to override the default view logic. This file is babel-compiled, so you can also use TSX dialect.

Extending components

Each component has a unique name, which is a sha256 of its location path. So, in order to verride a default component by the one of your own, you need to create a new component in the Devtool with the name, which is the path of the component you want to override.

All components are described in @findify/findify-js/packages/react-components and the path starts from the src location.

E.g. if you want to override the Product card component, you need to create a new component with the name components/Cards/Product/view.

You can also create custom components and re-use them in other components.

You can omit the file extension in the name.

Modifying the CSS

The 'Styles' tab helps you in modifying the default CSS that we are using. Our CSS compiler uses cssnano and autoprefixer and supports having variables and nested CSS rules (you can check the example in our default CSS).

External libraries

Same as components, you can use libraries that are already included in the MJS by default.
Some of the most helpful are:

  1. recompose - helper library that helps you bring extra logic and lifecycle methods to the components
  2. @findify/react-connect - bindings to remote data
  3. react-spring - some awesome animations

Findify Devtools