MAGE-1061 Sample mixins

composer.json

@@ -5,9 +5,9 @@
   "license": [
     "MIT"
   ],
-  "version": "1.3.0",
+  "version": "1.4.0",
   "require": {
-    "algolia/algoliasearch-magento-2": "^3.14.0",
+    "algolia/algoliasearch-magento-2": "^3.15.0",
     "magento/magento-composer-installer": "*"
   },
   "extra": {

etc/module.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
-    <module name="Algolia_CustomAlgolia" setup_version="1.2.2">
+    <module name="Algolia_CustomAlgolia" setup_version="1.4.0">
         <sequence>
             <module name="Algolia_AlgoliaSearch"/>
             <module name="Magento_Theme"/>

view/frontend/requirejs-config.js

@@ -5,21 +5,33 @@
 /**
  * This starter file provides a means to override the Algolia search experience using RequireJS.
  *
- *
- *
- * You can customize Autocomplete in 2 ways:
- *   1. Via a complete override of the underlying functional template
- *   2. Via a JavaScript mixin (recommended)
+ * You can customize Algolia's JavaScript in one of 3 ways:
+ *   1. Via a complete override of the underlying dependency
+ *   2. Via a JavaScript mixin (recommended especially for templates)
+ *   3. Via front end custom events (hooks.js is included to demonstrate how to handle custom front end events)
  */
-
 const config = {
     map: {
         "*": {
             // Include your own hooks to handle front end events - see https://www.algolia.com/doc/integration/magento-2/customize/custom-front-end-events/
             algoliaHooks: 'Algolia_CustomAlgolia/js/hooks',
 
-            // Additional lib for recent searches plugin - OPTIONAL
-            algoliaRecentSearches: 'Algolia_CustomAlgolia/js/internals/autocomplete-plugin-recent-searches'
+            // Add any dependencies you might need for your own customizations
+            // For instance, this lib supplies the "recent searches" plugin
+            // How this might be used is demonstrated in hooks.js using the `afterAutocompletePlugins` event
+            algoliaRecentSearchesPluginLib: 'Algolia_CustomAlgolia/js/lib/autocomplete-plugin-recent-searches',
+
+            ////////////////////////////////////
+            // ALGOLIA FRONTEND LIB OVERRIDE  //
+            ////////////////////////////////////
+
+            // Uncomment to load your own specific version of InstantSearch e.g. 4.65.0
+            // algoliaInstantSearchLib: 'Algolia_CustomAlgolia/js/lib/algolia-instantsearch.local.min',
+
+            /**
+             * This can be done for other libraries as well such as Autocomplete, Recommend etc.
+             * Check the `lib` directory in the core module for versioned dependency source files
+             */
 
             ////////////////////////////////////
             // AUTOCOMPLETE TEMPLATE OVERRIDE //
@@ -30,21 +42,23 @@ const config = {
         },
     },
 
-    ////////////////////////
-    // AUTOCOMPLETE MIXIN //
-    ////////////////////////
-
-    /**
-     *  You can add a mixin to customize only a single portion of a template based on the corresponding function.
-     *  Use the `html` tagged template literal supplied via the function arguments to return your custom content as HTML.
-     */
-
     config: {
+        // Use mixins where possible to only override *specific functions* within the Algolia implementation
+        // This makes upgrades easier in the future since you will not have to merge all changes into your template overrides
         mixins: {
+            //////////////////////////////////
+            // AUTOCOMPLETE TEMPLATE MIXINS //
+            //////////////////////////////////
+
+            /**
+             *  You can add a mixin to customize only a single portion of a template based on the corresponding function.
+             *  Use the `html` tagged template literal supplied via the function arguments to return your custom content as HTML.
+             */
+
             // Uncomment the following mixins to override the hit template via a JavaScript mixin for a given source
-            "Algolia_AlgoliaSearch/js/template/autocomplete/products": {
-              "Algolia_CustomAlgolia/js/template/autocomplete/products-mixin": true,
-            }
+            // "Algolia_AlgoliaSearch/js/template/autocomplete/products": {
+            //   "Algolia_CustomAlgolia/js/template/autocomplete/products-mixin": true,
+            // },
             // "Algolia_AlgoliaSearch/js/template/autocomplete/categories": {
             //   "Algolia_CustomAlgolia/js/template/autocomplete/categories-mixin": true,
             // },
@@ -57,6 +71,39 @@ const config = {
             // "Algolia_AlgoliaSearch/js/template/autocomplete/suggestions": {
             //   "Algolia_CustomAlgolia/js/template/autocomplete/suggestions-mixin": true,
             // },
+
+            //////////////////////////////////
+            //  OTHER AUTOCOMPLETE MIXINS   //
+            //////////////////////////////////
+
+            // Uncomment the following mixin to see a demonstration of how you can modify the logic behind how Autocomplete functions
+            // "Algolia_AlgoliaSearch/js/autocomplete": {
+            //     "Algolia_CustomAlgolia/js/autocomplete-mixin": true,
+            // },
+
+            //////////////////////////////////
+            //     INSTANTSEARCH MIXINS     //
+            //////////////////////////////////
+
+            // Uncomment the following mixin to see a demonstration of how you can modify the logic behind how InstantSearch functions
+            // Some examples include: Changing runtime behaviors and adding libraries to the algoliaBundle used in legacy front end hooks
+            // "Algolia_AlgoliaSearch/js/instantsearch": {
+            //     "Algolia_CustomAlgolia/js/instantsearch-mixin": true,
+            // },
+
+            //////////////////////////////////
+            //     INTERNAL LIB MIXINS      //
+            //////////////////////////////////
+
+            // Uncomment the following mixin to change the template parsing engine from Mustache to Hogan
+            // "Algolia_AlgoliaSearch/js/internals/template-engine": {
+            //     "Algolia_CustomAlgolia/js/internals/template-engine-mixin": true,
+            // },
+
+            // Uncomment the following mixin to change the behavior of common util functions
+            // "Algolia_AlgoliaSearch/js/internals/common": {
+            //     "Algolia_CustomAlgolia/js/internals/common-mixin": true,
+            // },
         },
-    },
+    }
 };

view/frontend/web/js/autocomplete-mixin.js

@@ -0,0 +1,30 @@
+// SAMPLE AUTOCOMPLETE MIXIN
+// These mixins demonstrate ways that you can override behaviors and configurations in the core Autocomplete implementation
+
+define(['uiComponent'], function (Component) {
+    "use strict";
+
+    return function (target) {
+        const mixin = {
+            initialize: function () {
+                this._super();
+                console.log("The original debounce was:", target.prototype.DEBOUNCE_MS);
+                console.log("The updated debounce is:", this.DEBOUNCE_MS);
+
+                console.log("The original minimum characters before search was:", target.prototype.MIN_SEARCH_LENGTH_CHARS);
+                console.log("The updated minimum characters before search is:", this.MIN_SEARCH_LENGTH_CHARS);
+
+            },
+            // Set debounce to 600ms
+            DEBOUNCE_MS: 600,
+            // Set minimum number of characters before search to 5
+            MIN_SEARCH_LENGTH_CHARS: 5,
+
+            handleAutocompleteStateChange: function(state) {
+                console.log("In mixin to listen to changes to Autocomplete state:", state);
+            }
+        };
+
+        return target.extend(mixin);
+    };
+});