Build frontend
In this sprint, you will use Algolia’s libraries to build a frontend based on the mockups you've already created. Once you’ve completed the tasks below, you can move onto the next sprint.
Register for Webinars and view the RecordingDepending 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 customization required (Styling can be customized) | Use the bundled InstantSearch library via the plugin |
Using Shopify templating | Customization 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 | Customization 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 customization required (Styling can be customized) | You can enable the autocomplete menu, category page and results page directly from the plugin |
Standard Magento | Customization required (Adding and removing widgets) | To customize 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 | Customization 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 | Customization required (Adding and removing widgets) | You can customize an InstantSearch implementation using the SFCC cartridge. |
SFCC Headless | No customization required (Styling can be customized) | You can connect your frontend to headless SFCC using Algolia’s boilerplate, a React front-end, or Mobify. |
If you aren't 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 provides widgets whose styling you can customize. If you want to change the HTML of a widget, it’s best to use a connector so that the query state can be preserved.In case you need further customization, you can create a fully custom widget. Follow the building the search UI track to learn more.
Autocomplete
For an autocomplete experience, including a Query Suggestions implementation, the Autocomplete library is the way to go, especially on mobile where real estate is limited. An Autocomplete is made of sources and plugins, where plugins can add a source and react to state changes.
Recommend Library
Recommend is a JavaScript UI library for the Algolia Recommend product to display recommendations on your site. Recommend exposes two UI components, one for each Algolia Recommend model: Frequently Bought Together and Related Products
You can easily bootstrap an InstantSearch implementation using create-instantsearch-app. The InstantSearch.js Readme, ecommerce demo sandbox, and the getting started guide are also great starting points.
InstantSearch JS
React InstantSearch
Vue InstantSearch
Angular InstantSearch
InstantSearch iOS
InstantSearch Android
Autocomplete
To get started with Autocomplete, 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’re ready, you can install the library and get started.
Sending user events is required to unlock click and conversion analytics and advanced Algolia features. It’s best to implement events when you are first developing your frontend. 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 the Algolia nsights library as detailed above.
Google Tag Manager
First, import the official Algolia Search Insights template. Then, you can set up 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 the official Algolia Insights integration available on the mParticle catalog to forward your existing events.
Insights Middleware
If you are using InstantSearch.js or Vue InstantSearch and want to send events from here the best option is the Insights middleware. It is also available with React Hooks, and to send insights events with React InstantSearch, you can follow this guide
Autocomplete
Algolia supports sending events directly from your Autocomplete and you can enable this via a plugin.
API Clients
You should use an API client to send events if:
- If you aren’t using InstantSearch in any other flavor than vanilla Javascript or Vue, and want to send events from the frontend, the Insights library is the best way to go.
- You can use any of the API clients to send events from your backend.