btaillon-coveo · July 21, 2022 21:10
diff --git a/custom.html b/custom.html
 <!DOCTYPE html>
 <html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
    <title>Coveo Atomic: Custom component example</title>

    <script type="module" src="/build/atomic.esm.js"></script>
    <script nomodule src="/build/atomic.js"></script>
    <link rel="stylesheet" href="/themes/coveo.css" />
    <script>
      (async () => {
        await customElements.whenDefined('atomic-search-interface');
        const searchInterface = document.querySelector('atomic-search-interface');
        await searchInterface.initialize({
          accessToken: 'xx564559b1-0045-48e1-953c-3addd1ee4457',
          organizationId: 'searchuisamples',
        });

        searchInterface.executeFirstSearch();
      })();
    </script>
    <!-- Custom Atomic Component using the initializeBindings method -->
    <script type="module">
      import {initializeBindings} from '/build/index.esm.js';
      import {buildSearchBox} from 'https://staticdev.cloud.coveo.com/headless/latest/headless.esm.js';

      class CustomComponent extends HTMLElement {
        constructor() {
          super();
          this.initialize();
        }

        get template() {
          const template = document.createElement('template');
          template.innerHTML = '<input type="text" placeholder="Search as you type" />';
          return template;
        }

        async initialize() {
          const bindings = await initializeBindings(this);

          const shadowRoot = this.attachShadow({mode: 'closed'});
          shadowRoot.appendChild(this.template.content.cloneNode(true));

          const searchBox = buildSearchBox(bindings.engine);
          const input = shadowRoot.querySelector('input');
          input.addEventListener('input', () => {
            searchBox.updateText(input.value);
            searchBox.submit();
          });
        }
      }

      window.customElements.define('custom-component', CustomComponent);
    </script>

    <!-- Custom Atomic Result Template Component using the resultContext method -->
    <script type="module">
      import {resultContext, initializeBindings} from '/build/index.esm.js';
      import {ResultTemplatesHelpers} from 'https://staticdev.cloud.coveo.com/headless/latest/headless.esm.js';

      class CustomTemplateComponent extends HTMLElement {
        connectedCallback() {
          this.initialize();
        }

        template(bindings, result) {
          const template = document.createElement('template');
          template.innerHTML = `
            <p>
              ${bindings.i18n.t('source')}:\u00a0
              ${ResultTemplatesHelpers.getResultProperty(result, 'source')}
            </p>
          `;
          return template;
        }

        async initialize() {
          const result = await resultContext(this);
          const bindings = await initializeBindings(this);

          const shadowRoot = this.attachShadow({mode: 'closed'});
          shadowRoot.appendChild(this.template(bindings, result).content.cloneNode(true));
        }
      }

      window.customElements.define('custom-template-component', CustomTemplateComponent);
    </script>
  </head>
  <body>
    <atomic-search-interface>
      <custom-component></custom-component>
      <atomic-query-summary></atomic-query-summary>
      <atomic-result-list>
        <atomic-result-template>
          <template>
            <custom-template-component></custom-template-component>
          </template>
        </atomic-result-template>
      </atomic-result-list>
    </atomic-search-interface>
    <script src="../header.js" type="text/javascript"></script>
  </body>
 </html>
	<!DOCTYPE html>
	<html dir="ltr" lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
	<title>Coveo Atomic: Custom component example</title>

	<script type="module" src="/build/atomic.esm.js"></script>
	<script nomodule src="/build/atomic.js"></script>
	<link rel="stylesheet" href="/themes/coveo.css" />
	<script>
	(async () => {
	await customElements.whenDefined('atomic-search-interface');
	const searchInterface = document.querySelector('atomic-search-interface');
	await searchInterface.initialize({
	accessToken: 'xx564559b1-0045-48e1-953c-3addd1ee4457',
	organizationId: 'searchuisamples',
	});

	searchInterface.executeFirstSearch();
	})();
	</script>
	<!-- Custom Atomic Component using the initializeBindings method -->
	<script type="module">
	import {initializeBindings} from '/build/index.esm.js';
	import {buildSearchBox} from 'https://staticdev.cloud.coveo.com/headless/latest/headless.esm.js';

	class CustomComponent extends HTMLElement {
	constructor() {
	super();
	this.initialize();
	}

	get template() {
	const template = document.createElement('template');
	template.innerHTML = '<input type="text" placeholder="Search as you type" />';
	return template;
	}

	async initialize() {
	const bindings = await initializeBindings(this);

	const shadowRoot = this.attachShadow({mode: 'closed'});
	shadowRoot.appendChild(this.template.content.cloneNode(true));

	const searchBox = buildSearchBox(bindings.engine);
	const input = shadowRoot.querySelector('input');
	input.addEventListener('input', () => {
	searchBox.updateText(input.value);
	searchBox.submit();
	});
	}
	}

	window.customElements.define('custom-component', CustomComponent);
	</script>

	<!-- Custom Atomic Result Template Component using the resultContext method -->
	<script type="module">
	import {resultContext, initializeBindings} from '/build/index.esm.js';
	import {ResultTemplatesHelpers} from 'https://staticdev.cloud.coveo.com/headless/latest/headless.esm.js';

	class CustomTemplateComponent extends HTMLElement {
	connectedCallback() {
	this.initialize();
	}

	template(bindings, result) {
	const template = document.createElement('template');
	template.innerHTML = `
	<p>
	${bindings.i18n.t('source')}:\u00a0
	${ResultTemplatesHelpers.getResultProperty(result, 'source')}
	</p>
	`;
	return template;
	}

	async initialize() {
	const result = await resultContext(this);
	const bindings = await initializeBindings(this);

	const shadowRoot = this.attachShadow({mode: 'closed'});
	shadowRoot.appendChild(this.template(bindings, result).content.cloneNode(true));
	}
	}

	window.customElements.define('custom-template-component', CustomTemplateComponent);
	</script>
	</head>
	<body>
	<atomic-search-interface>
	<custom-component></custom-component>
	<atomic-query-summary></atomic-query-summary>
	<atomic-result-list>
	<atomic-result-template>
	<template>
	<custom-template-component></custom-template-component>
	</template>
	</atomic-result-template>
	</atomic-result-list>
	</atomic-search-interface>
	<script src="../header.js" type="text/javascript"></script>
	</body>
	</html>