Build front end
In this sprint we will utilise Algolia’s libraries to build a front end based on the mock ups we have already created. Once you have completed the tasks below you are able to move onto the next sprint.
Depending on the size of your company, some of these roles may be the same person. This sprint it is important we identify these roles and get in contact with them.
Planning and project oversight
Build application and visual and interactive elements
Shopify setup | Requirements | Recommended integration |
Using Shopify templating | No customisation required (Styling can be customised) | Use the bundled InstantSearch library via the plugin |
Using Shopify templating | Customisation required (Adding and removing widgets) | Use the bundled InstantSearch library via the plugin and edit this in the Shopify theme editor |
Custom Storefront or headless Shopify | Customisation required (Adding and removing widgets) | If you’re using a custom storefront or headless Shopify you can use instantsearch directly in your codebase |
Magento Set up | Requirements | Recommended Integrations |
Standard Magento | No customisation required (Styling can be customised) | You can enable the autocomplete menu, category page and results page directly from the plug in |
Standard Magento | Customisation required (Adding and removing widgets) | To customise the results page, category page or autocomplete you will need to install the customAlgolia extension and override the templates or add front-end events |
Headless Magento | Customisation required (Adding and removing widgets) | If you’re using headless Magento you can use instantsearch directly in your codebase |
SFCC set up | Requirements | Recommended integration |
Standard SFCC | Customisation required (Adding and removing widgets) | You can customize an InstantSearch implementation using the SFCC cartridge. |
SFCC Headless | No customisation required (Styling can be customised) | You can connect your frontend to headless SFCC using Algolia’s boilerplate, a React front-end, or Mobify. |
If you are not using the above integrations, and for any Search Results or Category Page implementation, we recommend to use InstantSearch in conjunction with Autocomplete, as it improves both developer and user experience. InstantSearch is available in the following flavors:
InstantSearch JS
React InstantSearch
Vue InstantSearch
Angular InstantSearch
InstantSearch iOS
InstantSearch Android
InstantSearch is made up of widgets which you can customize the styling. If you want to change the HTML of a widget, we recommend that you use a connector so that the state of the query can be preserved, if a connector does not extend enough, a custom widget can be created. Follow the building the search UI track to learn more.
Autocomplete
For an autocomplete experience and Query Suggestions, the autocomplete.js is the way to go, specially on mobile where real estate is limited. An autocomplete is made of sources and plug-ins, where plug-ins can add a source and react to state changes.
Recommend Library
Recommend is a JavaScript UI library for Algolia Recommend product to display recommendations on your site. Recommend exposes two UI components, one for each Algolia Recommend model: Frequently Bought Together Related Products
You can easily bootstrap an InstantSearch implementation using create-instantsearch-app. If you want to have a play first check out the readme for sandboxes and the getting started guide.
InstantSearch JS
React InstantSearch
Vue InstantSearch
Angular InstantSearch
InstantSearch iOS
InstantSearch Android
Autocomplete
To get started with Autocomplete.js, read about the core concepts to learn more about underlying principles, like sources and state. Then try out the playground where you can fork a basic implementation and play around. Once you are ready you can install the library and get started.
Sending events is required to unlock click and conversion analytics and advanced Algolia. While you are developing your front end, this is an optimal opportunity to implement events. Don’t forget to use your planning documents from the Design UI sprint.
Integrations
Segment
If you are using Algolia’s supported events then you need to add Algolia related information including the queryID, index and the objectID. Then you can add the Algolia destination to the segment dashboard. If you aren’t using the supported events already, you can implement them, or use our insights library as detailed above.
Google Tag Manager
First, Import the official Algolia Search Insights template, then you can setup Tags to send events to Algolia’s insights API. After this, leverage your existing click and conversion Triggers (or create new ones).
mParticle
If you are already tracking events with mParticle, leverage our official Algolia Insights integration available on the mParticle catalog to forward your existing events.
Insights Middleware
If you are using InstantSearch with JS and Vue and want to send events from here the best option is the insights middleware.
Autocomplete
Algolia supports sending events directly from your autocomplete and you can enable this via a plugin.
API Clients
If you implement using API Clients:
- If you aren’t using InstantSearch and want to send events from the front end, the insights library is the best way to go.
- You can use any of the API clients to send events from your back end.