algolia · mohitalgolia · Nov 30, 2022 · Nov 7, 2022 · Nov 7, 2022 · Nov 7, 2022
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 composer.lock
 vendor/
+.vscode
diff --git a/README.md b/README.md
@@ -4,17 +4,17 @@
 
 ## Guides
 
-* [Backend custom events](https://community.algolia.com/magento/doc/m2/backend/)
-* [Frontend custom events](https://community.algolia.com/magento/doc/m2/frontend-events/)
+- [Backend custom events](https://community.algolia.com/magento/doc/m2/backend/)
+- [Frontend custom events](https://community.algolia.com/magento/doc/m2/frontend-events/)
 
 ## Installation
 
-The template module can be installed Manually:
+The template module can be installed via [Composer](https://getcomposer.org/):
 
 ```sh
-$ cd /path/to/your/magento2/directory/app/code
-$ Create a directory in app/code as Algolia/CustomAlgolia 
-$ Download the file from https://github.com/algolia/algoliasearch-custom-algolia-magento-2/ and unzip 
-$ Copy the unzip files in to app/code/Algolia/CustomAlgolia
+$ cd /path/to/your/magento2/directory
+$ composer require algolia/algoliasearch-custom-algolia-magento-2
 $ php bin/magento setup:upgrade
 ```
+
+> Please note that this is a starter module. Composer will install this code to your local `app/code` directory where you can make further modifications to the implementation and commit to your own project repository.
diff --git a/composer.json b/composer.json
@@ -2,15 +2,20 @@
   "name": "algolia/algoliasearch-custom-algolia-magento-2",
   "description": "Custom boilerplate module to extend Algolia Magento 2 extension",
   "type": "magento2-module",
-  "license": ["MIT"],
-  "version": "1.1.0",
+  "license": [
+    "MIT"
+  ],
+  "version": "1.2.0",
   "require": {
-    "algolia/algoliasearch-magento-2": ">=1.13.3"
+    "algolia/algoliasearch-magento-2": "^3.9.1",
+    "magento/magento-composer-installer": "*"
   },
-  "autoload": {
-    "files": [ "registration.php" ],
-    "psr-4": {
-      "Algolia\\CustomAlgolia\\": ""
-    }
+  "extra": {
+    "map": [
+      [
+        "*",
+        "Algolia/CustomAlgolia"
+      ]
+    ]
   }
-}
+}
diff --git a/view/frontend/layout/algolia_search_handle.xml b/view/frontend/layout/algolia_search_handle.xml
@@ -1,9 +1,6 @@
 <?xml version="1.0"?>
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <head>
-        <!-- Uncomment the following line to include files with front-end hook methods -->
-        <!-- <script src="Algolia_CustomAlgolia::hooks.js" /> -->
-
         <!-- Uncomment the following line to remove the main algolia CSS file -->
         <!-- <remove src="Algolia_AlgoliaSearch::internals/algoliasearch.css" /> -->
 
@@ -12,11 +9,23 @@
     </head>
     <body>
         <referenceBlock name="before.body.end">
-            <!-- Uncomment the following line to declare a new template -->
-            <!-- <block class="Magento\Framework\View\Element\Template" name="custom.autocomplete.template" template="Algolia_CustomAlgolia::autocomplete/custom.phtml"/> -->
+            <!-- 
+                Uncomment the following lines to override the default InstantSearch widget templates.
+
+                NOTE: Only a sample facet.phtml file is supplied in this starter kit.
+                      If you wish to override other templates be sure to implement your template based on 
+                      vendor/algolia/algoliasearch-magento-2/view/frontend/templates/instant 
+            -->
+            <!-- <referenceBlock name="algolia.instant.facet" template="Algolia_CustomAlgolia::instant/facet.phtml"/> -->
+            <!-- <referenceBlock name="algolia.instant.refinements" template="Algolia_CustomAlgolia::instant/refinements.phtml"/> -->
+            <!-- <referenceBlock name="algolia.instant.hit" template="Algolia_CustomAlgolia::instant/hit.phtml"/> -->
+            <!-- <referenceBlock name="algolia.instant.stats" template="Algolia_CustomAlgolia::instant/stats.phtml"/> -->
 
-            <!-- Uncomment the following line to override the autocomplete/page template -->
-            <!-- <referenceBlock name="algolia.autocomplete.page" template="Algolia_CustomAlgolia::autocomplete/page.phtml" /> -->
+            <!-- 
+                IMPORTANT!
+                If you are looking to customize Autocomplete this functionality has moved as of v3.9.1! 
+                (See requirejs-config.js for details) 
+            -->
         </referenceBlock>
     </body>
 </page>
diff --git a/view/frontend/requirejs-config.js b/view/frontend/requirejs-config.js
@@ -0,0 +1,67 @@
+/**
+ * Documentation: https://www.algolia.com/doc/integration/magento-2/customize/autocomplete-menu
+ **/
+
+/**
+ * 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)
+ */
+
+var config = {
+  map: {
+    "*": {
+      algoliaHooks: "Algolia_CustomAlgolia/hooks",
+
+      ////////////////////////////////////
+      // AUTOCOMPLETE TEMPLATE OVERRIDE //
+      ////////////////////////////////////
+
+      // Uncomment the following line to override the products.js functional template
+      // productsHtml': 'Algolia_CustomAlgolia/internals/template/autocomplete/products'
+    },
+  },
+
+  /////////////////////
+  // FRONT END HOOKS //
+  /////////////////////
+
+  // Uncomment the following line to include front-end hook methods - see https://www.algolia.com/doc/integration/magento-2/customize/custom-front-end-events/
+  // deps: ["algoliaHooks"],
+
+  //,
+
+  ////////////////////////
+  // 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: {
+    mixins: {
+      // Uncomment the following mixins to override the hit template via a JavaScript mixin for a given source
+      // "Algolia_AlgoliaSearch/internals/template/autocomplete/products": {
+      //   "Algolia_CustomAlgolia/template/autocomplete/products-mixin": true,
+      // },
+      // "Algolia_AlgoliaSearch/internals/template/autocomplete/categories": {
+      //   "Algolia_CustomAlgolia/template/autocomplete/categories-mixin": true,
+      // },
+      // "Algolia_AlgoliaSearch/internals/template/autocomplete/pages": {
+      //   "Algolia_CustomAlgolia/template/autocomplete/pages-mixin": true,
+      // },
+      // "Algolia_AlgoliaSearch/internals/template/autocomplete/additional-section": {
+      //   "Algolia_CustomAlgolia/template/autocomplete/additional-section-mixin": true,
+      // },
+      // "Algolia_AlgoliaSearch/internals/template/autocomplete/suggestions": {
+      //   "Algolia_CustomAlgolia/template/autocomplete/suggestions-mixin": true,
+      // },
+    },
+  },
+};
diff --git a/view/frontend/templates/autocomplete/custom.phtml b/view/frontend/templates/autocomplete/custom.phtml
diff --git a/view/frontend/templates/autocomplete/page.phtml b/view/frontend/templates/autocomplete/page.phtml
diff --git a/view/frontend/templates/instant/facet.phtml b/view/frontend/templates/instant/facet.phtml
@@ -0,0 +1,7 @@
+<script type="text/template" id="refinements-lists-item-template">
+    <label class="{{cssClasses.label}} {{#isRefined}}checked{{/isRefined}}">
+        <input class="{{cssClasses.checkbox}}" {{#isRefined}}checked{{/isRefined}} type="checkbox" value="{{value}}" />
+        {{value}}
+        <span class="{{cssClasses.count}}">{{count}}</span>
+    </label>
+</script>
diff --git a/view/frontend/web/hooks.js b/view/frontend/web/hooks.js
@@ -7,59 +7,84 @@
  * autocomplete.js documentation: https://github.com/algolia/autocomplete.js
  **/
 
-algolia.registerHook('beforeAutocompleteSources', function(sources, algolia_client, algoliaBundle) {
-	console.log('In hook method to modify autocomplete data sources');
+define(["jquery", "algoliaAnalytics", "algoliaBundle"], function (
+  $,
+  algoliaAnalyticsWrapper,
+  algoliaBundle
+) {
+  algolia.registerHook(
+    "beforeAutocompleteSources",
+    function (sources, algolia_client, algoliaBundle) {
+      console.log("In hook method to modify autocomplete data sources");
 
-	// use the global window variable `algoliaConfig` to see what has been configured in the system configuration
-	console.log(algoliaConfig);
+      // use the global window variable `algoliaConfig` to see what has been configured in the system configuration
+      console.log(algoliaConfig);
 
-	// Modify autocomplete data sources
-
-	return sources;
-});
+      // Modify autocomplete data sources
 
-algolia.registerHook('beforeAutocompleteOptions', function(options) {
-	console.log('In hook method to modify autocomplete options');
-
-	// Modify autocomplete options
-
-	return options;
-});
+      return sources;
+    }
+  );
 
-/**
- * InstantSearch hook methods
- * IS.js v2 documentation: https://community.algolia.com/instantsearch.js/
- * IS.js v4 documentation: https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/
- **/
+  algolia.registerHook("beforeAutocompleteOptions", function (options) {
+    console.log("In hook method to modify autocomplete options");
 
-algolia.registerHook('beforeInstantsearchInit', function(instantsearchOptions, algoliaBundle) {
-	console.log('In method to modify instantsearch options');
-
-	// Modify instant search options
-
-	return instantsearchOptions;
-});
+    // Modify autocomplete options
 
-algolia.registerHook('beforeWidgetInitialization', function(allWidgetConfiguration, algoliaBundle) {
-	console.log('In hook method to modify instant search widgets');
-
-	// Modify instant search widgets
-
-	return allWidgetConfiguration;
-});
+    return options;
+  });
 
-algolia.registerHook('beforeInstantsearchStart', function(search, algoliaBundle) {
-	console.log('In hook method to modify instant search instance before search started');
-
-	// Modify instant search instance before search started
-
-	return search;
-});
+  /**
+   * InstantSearch hook methods
+   * IS.js v2 documentation: https://community.algolia.com/instantsearch.js/
+   * IS.js v4 documentation: https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/
+   **/
+
+  algolia.registerHook(
+    "beforeInstantsearchInit",
+    function (instantsearchOptions, algoliaBundle) {
+      console.log("In method to modify instantsearch options");
+
+      // Modify instant search options
+
+      return instantsearchOptions;
+    }
+  );
+
+  algolia.registerHook(
+    "beforeWidgetInitialization",
+    function (allWidgetConfiguration, algoliaBundle) {
+      console.log("In hook method to modify instant search widgets");
+
+      // Modify instant search widgets
+
+      return allWidgetConfiguration;
+    }
+  );
+
+  algolia.registerHook(
+    "beforeInstantsearchStart",
+    function (search, algoliaBundle) {
+      console.log(
+        "In hook method to modify instant search instance before search started"
+      );
+
+      // Modify instant search instance before search started
+
+      return search;
+    }
+  );
+
+  algolia.registerHook(
+    "afterInstantsearchStart",
+    function (search, algoliaBundle) {
+      console.log(
+        "In hook method to modify instant search instance after search started"
+      );
+
+      // Modify instant search instance after search started
 
-algolia.registerHook('afterInstantsearchStart', function(search, algoliaBundle) {
-	console.log('In hook method to modify instant search instance after search started');
-
-	// Modify instant search instance after search started
-
-	return search;
+      return search;
+    }
+  );
 });
diff --git a/view/frontend/web/template/autocomplete/additional-section-mixin.js b/view/frontend/web/template/autocomplete/additional-section-mixin.js
@@ -0,0 +1,14 @@
+// SAMPLE ADDITIONAL SECTION MIXIN
+define(function () {
+  "use strict";
+
+  const mixin = {
+    getHeaderHtml: function ({ section }) {
+      return `This ${section.name} template was customized!`;
+    },
+  };
+
+  return function (target) {
+    return { ...target, ...mixin };
+  };
+});
diff --git a/view/frontend/web/template/autocomplete/categories-mixin.js b/view/frontend/web/template/autocomplete/categories-mixin.js
@@ -0,0 +1,14 @@
+// SAMPLE CATEGORIES MIXIN
+define(function () {
+  "use strict";
+
+  const mixin = {
+    getHeaderHtml: function () {
+      return "This category template was customized!";
+    },
+  };
+
+  return function (target) {
+    return { ...target, ...mixin };
+  };
+});
diff --git a/view/frontend/web/template/autocomplete/pages-mixin.js b/view/frontend/web/template/autocomplete/pages-mixin.js
@@ -0,0 +1,14 @@
+// SAMPLE PAGES MIXIN
+define(function () {
+  "use strict";
+
+  const mixin = {
+    getHeaderHtml: function () {
+      return "This page template was customized!";
+    },
+  };
+
+  return function (target) {
+    return { ...target, ...mixin };
+  };
+});