Skip to content

Commit f40befb

Browse files
mohitalgoliamohitalgolia
authored
Merge pull request #5 from algolia/feature/INTEG-382
Feature/integ 382
2 parents e511760 + 0a53bab commit f40befb

File tree

14 files changed

+282
-85
lines changed

14 files changed

+282
-85
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
composer.lock
22
vendor/
3+
.vscode

‎README.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44

55
## Guides
66

7-
* [Backend custom events](https://community.algolia.com/magento/doc/m2/backend/)
8-
* [Frontend custom events](https://community.algolia.com/magento/doc/m2/frontend-events/)
7+
- [Backend custom events](https://community.algolia.com/magento/doc/m2/backend/)
8+
- [Frontend custom events](https://community.algolia.com/magento/doc/m2/frontend-events/)
99

1010
## Installation
1111

12-
The template module can be installed Manually:
12+
The template module can be installed via [Composer](https://getcomposer.org/):
1313

1414
```sh
15-
$ cd /path/to/your/magento2/directory/app/code
16-
$ Create a directory in app/code as Algolia/CustomAlgolia
17-
$ Download the file from https://github.com/algolia/algoliasearch-custom-algolia-magento-2/ and unzip
18-
$ Copy the unzip files in to app/code/Algolia/CustomAlgolia
15+
$ cd /path/to/your/magento2/directory
16+
$ composer require algolia/algoliasearch-custom-algolia-magento-2
1917
$ php bin/magento setup:upgrade
2018
```
19+
20+
> 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.

‎composer.json‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,20 @@
22
"name": "algolia/algoliasearch-custom-algolia-magento-2",
33
"description": "Custom boilerplate module to extend Algolia Magento 2 extension",
44
"type": "magento2-module",
5-
"license": ["MIT"],
6-
"version": "1.1.0",
5+
"license": [
6+
"MIT"
7+
],
8+
"version": "1.2.0",
79
"require": {
8-
"algolia/algoliasearch-magento-2": ">=1.13.3"
10+
"algolia/algoliasearch-magento-2": "^3.9.1",
11+
"magento/magento-composer-installer": "*"
912
},
10-
"autoload": {
11-
"files": [ "registration.php" ],
12-
"psr-4": {
13-
"Algolia\\CustomAlgolia\\": ""
14-
}
13+
"extra": {
14+
"map": [
15+
[
16+
"*",
17+
"Algolia/CustomAlgolia"
18+
]
19+
]
1520
}
16-
}
21+
}

‎view/frontend/layout/algolia_search_handle.xml‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<?xml version="1.0"?>
22
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
33
<head>
4-
<!-- Uncomment the following line to include files with front-end hook methods -->
5-
<!-- <script src="Algolia_CustomAlgolia::hooks.js" /> -->
6-
74
<!-- Uncomment the following line to remove the main algolia CSS file -->
85
<!-- <remove src="Algolia_AlgoliaSearch::internals/algoliasearch.css" /> -->
96

@@ -12,11 +9,23 @@
129
</head>
1310
<body>
1411
<referenceBlock name="before.body.end">
15-
<!-- Uncomment the following line to declare a new template -->
16-
<!-- <block class="Magento\Framework\View\Element\Template" name="custom.autocomplete.template" template="Algolia_CustomAlgolia::autocomplete/custom.phtml"/> -->
12+
<!--
13+
Uncomment the following lines to override the default InstantSearch widget templates.
14+
15+
NOTE: Only a sample facet.phtml file is supplied in this starter kit.
16+
If you wish to override other templates be sure to implement your template based on
17+
vendor/algolia/algoliasearch-magento-2/view/frontend/templates/instant
18+
-->
19+
<!-- <referenceBlock name="algolia.instant.facet" template="Algolia_CustomAlgolia::instant/facet.phtml"/> -->
20+
<!-- <referenceBlock name="algolia.instant.refinements" template="Algolia_CustomAlgolia::instant/refinements.phtml"/> -->
21+
<!-- <referenceBlock name="algolia.instant.hit" template="Algolia_CustomAlgolia::instant/hit.phtml"/> -->
22+
<!-- <referenceBlock name="algolia.instant.stats" template="Algolia_CustomAlgolia::instant/stats.phtml"/> -->
1723

18-
<!-- Uncomment the following line to override the autocomplete/page template -->
19-
<!-- <referenceBlock name="algolia.autocomplete.page" template="Algolia_CustomAlgolia::autocomplete/page.phtml" /> -->
24+
<!--
25+
IMPORTANT!
26+
If you are looking to customize Autocomplete this functionality has moved as of v3.9.1!
27+
(See requirejs-config.js for details)
28+
-->
2029
</referenceBlock>
2130
</body>
2231
</page>

‎view/frontend/requirejs-config.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/**
2+
* Documentation: https://www.algolia.com/doc/integration/magento-2/customize/autocomplete-menu
3+
**/
4+
5+
/**
6+
* This starter file provides a means to override the Algolia search experience using RequireJS.
7+
*
8+
*
9+
*
10+
* You can customize Autocomplete in 2 ways:
11+
* 1. Via a complete override of the underlying functional template
12+
* 2. Via a JavaScript mixin (recommended)
13+
*/
14+
15+
var config = {
16+
map: {
17+
"*": {
18+
algoliaHooks: "Algolia_CustomAlgolia/hooks",
19+
20+
////////////////////////////////////
21+
// AUTOCOMPLETE TEMPLATE OVERRIDE //
22+
////////////////////////////////////
23+
24+
// Uncomment the following line to override the products.js functional template
25+
// productsHtml': 'Algolia_CustomAlgolia/internals/template/autocomplete/products'
26+
},
27+
},
28+
29+
/////////////////////
30+
// FRONT END HOOKS //
31+
/////////////////////
32+
33+
// Uncomment the following line to include front-end hook methods - see https://www.algolia.com/doc/integration/magento-2/customize/custom-front-end-events/
34+
// deps: ["algoliaHooks"],
35+
36+
//,
37+
38+
////////////////////////
39+
// AUTOCOMPLETE MIXIN //
40+
////////////////////////
41+
42+
/**
43+
* You can add a mixin to customize only a single portion of a template based on the corresponding function.
44+
* Use the `html` tagged template literal supplied via the function arguments to return your custom content as HTML.
45+
*/
46+
47+
config: {
48+
mixins: {
49+
// Uncomment the following mixins to override the hit template via a JavaScript mixin for a given source
50+
// "Algolia_AlgoliaSearch/internals/template/autocomplete/products": {
51+
// "Algolia_CustomAlgolia/template/autocomplete/products-mixin": true,
52+
// },
53+
// "Algolia_AlgoliaSearch/internals/template/autocomplete/categories": {
54+
// "Algolia_CustomAlgolia/template/autocomplete/categories-mixin": true,
55+
// },
56+
// "Algolia_AlgoliaSearch/internals/template/autocomplete/pages": {
57+
// "Algolia_CustomAlgolia/template/autocomplete/pages-mixin": true,
58+
// },
59+
// "Algolia_AlgoliaSearch/internals/template/autocomplete/additional-section": {
60+
// "Algolia_CustomAlgolia/template/autocomplete/additional-section-mixin": true,
61+
// },
62+
// "Algolia_AlgoliaSearch/internals/template/autocomplete/suggestions": {
63+
// "Algolia_CustomAlgolia/template/autocomplete/suggestions-mixin": true,
64+
// },
65+
},
66+
},
67+
};

‎view/frontend/templates/autocomplete/custom.phtml‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎view/frontend/templates/autocomplete/page.phtml‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎view/frontend/templates/instant/facet.phtml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script type="text/template" id="refinements-lists-item-template">
2+
<label class="{{cssClasses.label}} {{#isRefined}}checked{{/isRefined}}">
3+
<input class="{{cssClasses.checkbox}}" {{#isRefined}}checked{{/isRefined}} type="checkbox" value="{{value}}" />
4+
{{value}}
5+
<span class="{{cssClasses.count}}">{{count}}</span>
6+
</label>
7+
</script>

‎view/frontend/web/hooks.js‎

Lines changed: 72 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -7,59 +7,84 @@
77
* autocomplete.js documentation: https://github.com/algolia/autocomplete.js
88
**/
99

10-
algolia.registerHook('beforeAutocompleteSources', function(sources, algolia_client, algoliaBundle) {
11-
console.log('In hook method to modify autocomplete data sources');
10+
define(["jquery", "algoliaAnalytics", "algoliaBundle"], function (
11+
$,
12+
algoliaAnalyticsWrapper,
13+
algoliaBundle
14+
) {
15+
algolia.registerHook(
16+
"beforeAutocompleteSources",
17+
function (sources, algolia_client, algoliaBundle) {
18+
console.log("In hook method to modify autocomplete data sources");
1219

13-
// use the global window variable `algoliaConfig` to see what has been configured in the system configuration
14-
console.log(algoliaConfig);
20+
// use the global window variable `algoliaConfig` to see what has been configured in the system configuration
21+
console.log(algoliaConfig);
1522

16-
// Modify autocomplete data sources
17-
18-
return sources;
19-
});
23+
// Modify autocomplete data sources
2024

21-
algolia.registerHook('beforeAutocompleteOptions', function(options) {
22-
console.log('In hook method to modify autocomplete options');
23-
24-
// Modify autocomplete options
25-
26-
return options;
27-
});
25+
return sources;
26+
}
27+
);
2828

29-
/**
30-
* InstantSearch hook methods
31-
* IS.js v2 documentation: https://community.algolia.com/instantsearch.js/
32-
* IS.js v4 documentation: https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/
33-
**/
29+
algolia.registerHook("beforeAutocompleteOptions", function (options) {
30+
console.log("In hook method to modify autocomplete options");
3431

35-
algolia.registerHook('beforeInstantsearchInit', function(instantsearchOptions, algoliaBundle) {
36-
console.log('In method to modify instantsearch options');
37-
38-
// Modify instant search options
39-
40-
return instantsearchOptions;
41-
});
32+
// Modify autocomplete options
4233

43-
algolia.registerHook('beforeWidgetInitialization', function(allWidgetConfiguration, algoliaBundle) {
44-
console.log('In hook method to modify instant search widgets');
45-
46-
// Modify instant search widgets
47-
48-
return allWidgetConfiguration;
49-
});
34+
return options;
35+
});
5036

51-
algolia.registerHook('beforeInstantsearchStart', function(search, algoliaBundle) {
52-
console.log('In hook method to modify instant search instance before search started');
53-
54-
// Modify instant search instance before search started
55-
56-
return search;
57-
});
37+
/**
38+
* InstantSearch hook methods
39+
* IS.js v2 documentation: https://community.algolia.com/instantsearch.js/
40+
* IS.js v4 documentation: https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/
41+
**/
42+
43+
algolia.registerHook(
44+
"beforeInstantsearchInit",
45+
function (instantsearchOptions, algoliaBundle) {
46+
console.log("In method to modify instantsearch options");
47+
48+
// Modify instant search options
49+
50+
return instantsearchOptions;
51+
}
52+
);
53+
54+
algolia.registerHook(
55+
"beforeWidgetInitialization",
56+
function (allWidgetConfiguration, algoliaBundle) {
57+
console.log("In hook method to modify instant search widgets");
58+
59+
// Modify instant search widgets
60+
61+
return allWidgetConfiguration;
62+
}
63+
);
64+
65+
algolia.registerHook(
66+
"beforeInstantsearchStart",
67+
function (search, algoliaBundle) {
68+
console.log(
69+
"In hook method to modify instant search instance before search started"
70+
);
71+
72+
// Modify instant search instance before search started
73+
74+
return search;
75+
}
76+
);
77+
78+
algolia.registerHook(
79+
"afterInstantsearchStart",
80+
function (search, algoliaBundle) {
81+
console.log(
82+
"In hook method to modify instant search instance after search started"
83+
);
84+
85+
// Modify instant search instance after search started
5886

59-
algolia.registerHook('afterInstantsearchStart', function(search, algoliaBundle) {
60-
console.log('In hook method to modify instant search instance after search started');
61-
62-
// Modify instant search instance after search started
63-
64-
return search;
87+
return search;
88+
}
89+
);
6590
});

‎view/frontend/web/template/autocomplete/additional-section-mixin.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// SAMPLE ADDITIONAL SECTION MIXIN
2+
define(function () {
3+
"use strict";
4+
5+
const mixin = {
6+
getHeaderHtml: function ({ section }) {
7+
return `This ${section.name} template was customized!`;
8+
},
9+
};
10+
11+
return function (target) {
12+
return { ...target, ...mixin };
13+
};
14+
});

0 commit comments

Comments
 (0)