@shopify/theme-predictive-search-component

[antoinegrant]

Description

A component that controls the state of a predictive search UI.

Reviews

Reviewers should focus on this commit as this is a branch of predictive-search.

Example

const predictivesearch = new PredictiveSearch({
  selectors: {
    input: '[data-predictive-search-input="header"]',
    reset: '[data-predictive-search-reset="header"]',
    result: '[data-predictive-search-result="header"]'
  },
  resultTemplateFct: data => {
    return `
      <div class="predictive-search">
        <ul class="predictive-search__list">
          ${products.map(
            product => `
            <li>
              <img src="${product.image}" alt="${product.title}" />
              <span>${produtc.title}</span>
            </li>
          `
          )}
        </ul>
      </div>
    `;
  },
  onInputFocus: nodes => {
    // You can get a reference to active target
    console.log(nodes.input.id); //-> input
    console.log(nodes.submit.id); //-> submit
    console.log(nodes.result.id); //-> result
  },
  onInputKeyup: nodes => {
    return true; // This will allow the event callback to execute
  },
  onInputBlur: nodes => {
    return false; // This will prevent the event callback to execute
  },
  onInputClear: nodes => {},
  onBeforeKill: nodes => {},
  onBeforeOpen: nodes => {},
  onOpen: nodes => {},
  onBeforeClose: nodes => {},
  onClose: nodes => {},
  onDestroy: nodes => {}
});

// Public methods
predictivesearch.open();
predictivesearch.close();
predictivesearch.destroy();

CC @NathanPJF @t-kelly @beefchimi

[antoinegrant]

The logic for a reset button is not completely fleshed out atm.

[carolineschnapp]

I will remove this line.

[carolineschnapp]

Can we delete line 11 then?

[huguestennier]

Show somewhere that these are required

[wizardlyhel]

Are these selectors have assumptions that each is only returning 1 DOM element?

[wizardlyhel]

I find this confusing: Does this callback only fires when the input is focused? or does it callback when either input, submit, or result focuses?

What is the purpose to have this event proxy if it's only giving a callback on input focus? Could these be solved by simply having a bindEvent callback so that theme developers can do whatever they need to do, be it focus, keyup, blur, touch, ... etc browser events?

[wizardlyhel]

are these for animation events?

[antoinegrant]

Please feel free to reach out if needed to ship this PR! 🙂

[carolineschnapp]

@antoinegrant A lot of questions and comments have not been addressed on the PR and, although the code here in this PR is used in Debut, and will ship with it within days, there seems to be mistrust in the work here. Also, the Predictive Search API has changed, this PR reflects the changes, and what is on master does not. Either we merge this PR without addressing requested changes, or we create a new PR that just removes the component entirely because what we have on master is misleading. What do you think I should do?

[BrendaSegalShopify]

@chrisberthe @t-kelly my understanding is that there might be some opposition to making this script public. Is this the case? We wanted to use this library to ship the new version of Debut with Predictive Search and to eventually spread it to other themes.

[chrisberthe]

my understanding is that there might be some opposition to making this script public. Is this the case?

Pretty sure there isn't any opposition on our side - where did you hear this? Plus, the script is technically already public.

[BrendaSegalShopify]

Thanks @chrisberthe, good to know. I think I misunderstood.
I'm glad there isn't any opposition to making this public 👍

[BrendaSegalShopify]

Although I can't comment from a coding perspective, I 🎩 and it's working great.

Thanks so much for all your help in getting this out the door! 🥇