在shopify中使用javascript唯一标识按钮

Question

有没有一种方法可以使用javascript来识别shopify网站上的搜索按钮？

我看过各家商店，找不到这些按钮的共同点。是否有某种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']