diff --git a/.gitignore b/.gitignore index d8a7996..a7b6463 100755 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ composer.lock vendor/ +.vscode diff --git a/README.md b/README.md index c7ef262..ada29c3 100755 --- 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 index fe19171..4eedf47 100755 --- 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" + ] + ] } -} \ No newline at end of file +} diff --git a/view/frontend/layout/algolia_search_handle.xml b/view/frontend/layout/algolia_search_handle.xml index f1efb17..e7a8dd7 100755 --- a/view/frontend/layout/algolia_search_handle.xml +++ b/view/frontend/layout/algolia_search_handle.xml @@ -1,9 +1,6 @@ - - - @@ -12,11 +9,23 @@ - - + + + + + - - + \ No newline at end of file diff --git a/view/frontend/requirejs-config.js b/view/frontend/requirejs-config.js new file mode 100644 index 0000000..4e3db08 --- /dev/null +++ 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 deleted file mode 100644 index d2df848..0000000 --- a/view/frontend/templates/autocomplete/custom.phtml +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/view/frontend/templates/autocomplete/page.phtml b/view/frontend/templates/autocomplete/page.phtml deleted file mode 100644 index 1f61e0d..0000000 --- a/view/frontend/templates/autocomplete/page.phtml +++ /dev/null @@ -1,14 +0,0 @@ - - \ No newline at end of file diff --git a/view/frontend/templates/instant/facet.phtml b/view/frontend/templates/instant/facet.phtml new file mode 100644 index 0000000..1281fb0 --- /dev/null +++ b/view/frontend/templates/instant/facet.phtml @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/view/frontend/web/hooks.js b/view/frontend/web/hooks.js index 551382e..64f2a15 100644 --- 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 new file mode 100644 index 0000000..19fa390 --- /dev/null +++ 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 new file mode 100644 index 0000000..a9156cd --- /dev/null +++ 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 new file mode 100644 index 0000000..2886124 --- /dev/null +++ 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 }; + }; +}); diff --git a/view/frontend/web/template/autocomplete/products-mixin.js b/view/frontend/web/template/autocomplete/products-mixin.js new file mode 100644 index 0000000..b589929 --- /dev/null +++ b/view/frontend/web/template/autocomplete/products-mixin.js @@ -0,0 +1,42 @@ +// SAMPLE PRODUCT MIXIN +define(function () { + "use strict"; + + const mixin = { + getHeaderHtml: function () { + return "This product template was customized!"; + }, + + getItemHtml: function ({ item, components, html }) { + return html` +
+ ${item.name || +
+
+ ${components.Highlight({ hit: item, attribute: "name" })} + + + +
${item.sku}
+ + +
+ ${this.getColorHtml(item, components, html)} + ${this.getCategoriesHtml(item, components, html)} +
+ + ${this.getPricingHtml(item, html)} +
+ `; + }, + }; + + return function (target) { + return { ...target, ...mixin }; + }; +}); diff --git a/view/frontend/web/template/autocomplete/suggestions-mixin.js b/view/frontend/web/template/autocomplete/suggestions-mixin.js new file mode 100644 index 0000000..c103232 --- /dev/null +++ b/view/frontend/web/template/autocomplete/suggestions-mixin.js @@ -0,0 +1,14 @@ +// SAMPLE SUGGESTIONS MIXIN +define(function () { + "use strict"; + + const mixin = { + getHeaderHtml: function () { + return "This suggestions template was customized!"; + }, + }; + + return function (target) { + return { ...target, ...mixin }; + }; +});