Install the extension using this link: https://chrome.google.com/webstore/detail/findify-devtools/jngfkjbhdmpkaccemaikjomjdfnmedgm
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 are the core of the Merchant JS. Each component consists of 3 type of files:
- Logic (index.ts)
- View (view.tsx)
- 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.
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
E.g. if you want to override the Product card component, you need to create a new component with the name
You can also create custom components and re-use them in other components.
You can omit the file extension in the name.
The 'Styles' tab helps you in modifying the default CSS that we are using. Our CSS compiler uses
autoprefixer and supports having variables and nested CSS rules (you can check the example in our default CSS).
Same as components, you can use libraries that are already included in the MJS by default.
Some of the most helpful are:
recompose- helper library that helps you bring extra logic and lifecycle methods to the components
@findify/react-connect- bindings to remote data
react-spring- some awesome animations