Уникальная идентификация кнопок с помощью javascript в Shopify

Question

Есть ли способ идентифицировать кнопку поиска на веб-сайте shopify с помощью javascript?

Я просмотрел разные магазины и не нашел что-то общее для этих кнопок. Есть ли какой-то api, чтобы я мог идентифицировать эти кнопки, чтобы добавить событие.

Эти две кнопки являются кнопками поиска, но из разных магазинов:

<button class="search-header__submit search__submit btn--link site-header__icon" type="submit">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 37 40"><path d="M35.6 36l-9.8-9.8c4.1-5.4 3.6-13.2-1.3-18.1-5.4-5.4-14.2-5.4-19.7 0-5.4 5.4-5.4 14.2 0 19.7 2.6 2.6 6.1 4.1 9.8 4.1 3 0 5.9-1 8.3-2.8l9.8 9.8c.4.4.9.6 1.4.6s1-.2 1.4-.6c.9-.9.9-2.1.1-2.9zm-20.9-8.2c-2.6 0-5.1-1-7-2.9-3.9-3.9-3.9-10.1 0-14C9.6 9 12.2 8 14.7 8s5.1 1 7 2.9c3.9 3.9 3.9 10.1 0 14-1.9 1.9-4.4 2.9-7 2.9z"></path></svg>
<span class="icon__fallback-text">Submit</span>

<button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top">
        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 37 40"><path d="M35.6 36l-9.8-9.8c4.1-5.4 3.6-13.2-1.3-18.1-5.4-5.4-14.2-5.4-19.7 0-5.4 5.4-5.4 14.2 0 19.7 2.6 2.6 6.1 4.1 9.8 4.1 3 0 5.9-1 8.3-2.8l9.8 9.8c.4.4.9.6 1.4.6s1-.2 1.4-.6c.9-.9.9-2.1.1-2.9zm-20.9-8.2c-2.6 0-5.1-1-7-2.9-3.9-3.9-3.9-10.1 0-14C9.6 9 12.2 8 14.7 8s5.1 1 7 2.9c3.9 3.9 3.9 10.1 0 14-1.9 1.9-4.4 2.9-7 2.9z"></path></svg>
        <span class="icon__fallback-text">Search</span>
      </button>

Answer 1

Поскольку эту часть темы можно полностью настроить, вряд ли найдется вариант, который работал бы во всех случаях. Но, скорее всего, это кнопка поиска будет помещена в форму с action как /search. Исходя из этого, вы можете попробовать использовать следующие селекторы:

onsubmit :

• form[action^='/search']

onclick :

• form[action^=/search] button
• form[action^=/search] input[type='submit']