shopify help 2

{%- doc -%}
  Renders the search action button or custom search bar.
  @param {string} [style] - The style of the search action.
  @param {string} [class] - Additional classes for the search action.
  @param {string} [display_style] - The display style ('icon' or 'text').
{%- enddoc -%}

{% unless style == 'none' %}
  <div class="mgr-custom-search-wrapper" id="mgr-main-search-container">

    <search-button
      class="search-action mobile-only-search {% if class != blank %} {{ class | strip }}{% endif %}"
    >
      <button
        on:click="#search-modal/showDialog"
        class="button-unstyled header-actions__action"
        aria-label="{{ 'content.search_input_label' | t }}"
        aria-haspopup="dialog"
      >
        <span class="svg-wrapper">
          {{ 'icon-search.svg' | inline_asset_content }}
        </span>
      </button>
    </search-button>

    <predictive-search-component
      class="desktop-only-search predictive-search color-{{ settings.popover_color_scheme }}{% if class != blank %} {{ class | strip }}{% endif %}"
      style="--product-corner-radius: {{ settings.product_corner_radius | default: 8 | append: 'px' }}; --card-corner-radius: {{ settings.card_corner_radius | default: 8 | append: 'px' }};{% if settings.card_title_case == 'uppercase' %} --title-case: uppercase;{% endif %}"
      data-section-id="predictive-search"
      data-testid="{{ 'search-component--modal' }}"
      role="search"
      aria-label="{{ 'content.search_input_label' | t }}"
    >
      <form
        action="{{ routes.search_url }}"
        method="get"
        role="search"
        class="predictive-search-form"
        ref="form"
        on:keydown="/onSearchKeyDown"
      >
        <div class="predictive-search-form__header">
          <div class="predictive-search-form__header-inner">
            <label
              for="{{ 'cmdk-input' | default: 'Search' }}"
              class="visually-hidden"
            >
              {{- 'content.search_input_label' | t -}}
            </label>
            <input
              class="search-input"
              id="{{ 'cmdk-input' | default: 'Search' }}"
              type="search"
              name="q"
              role="combobox"
              aria-expanded="false"
              aria-owns="predictive-search-results"
              aria-controls="predictive-search-results"
              aria-haspopup="listbox"
              aria-autocomplete="list"
              autocomplete="off"
              placeholder="Buscar producto, o número de parte..."
              ref="searchInput"
              on:input="/search"
              on:keydown="/onSearchKeyDown"
            >
            <input
              name="options[prefix]"
              type="hidden"
              value="last"
            >
            <span class="svg-wrapper predictive-search__icon search-icon-custom">
              {{ 'icon-search.svg' | inline_asset_content }}
            </span>
          </div>
        </div>

        <div class="predictive-search-form__content-wrapper">
          <div
            class="predictive-search-form__content"
            ref="predictiveSearchResults"
            on:click="/handleModalClick"
          >
            {% render 'predictive-search-empty-state',
              load_empty_state: true,
              shadow_opacity: 0.1,
              products_test_id: 'products-list-default--modal'
            %}
          </div>

          <div class="predictive-search-form__footer">
            <button
              class="button predictive-search__search-button"
              ref="viewAllButton"
            >
              {{ 'content.search_results_view_all' | t }}
            </button>
          </div>
        </div>
      </form>
    </predictive-search-component>
  </div>
{% endunless %}

<style>
.header__column--left .mgr-custom-search-wrapper {
  display: none !important;
}

.mgr-custom-search-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: left !important;
  width: 100%;
}

@media screen and (max-width: 749px) {
  .desktop-only-search {
    display: none !important;
  }
  .mobile-only-search {
    display: flex !important;
  }
}

@media screen and (min-width: 750px) {
  .mobile-only-search {
    display: none !important;
  }

  .desktop-only-search.predictive-search {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 250px !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .mgr-custom-search-wrapper {
    flex: 1 1 auto !important;
    justify-content: center !important;
  }
}

.predictive-search-form {
  width: 100% !important;
}

.predictive-search-form__header-inner {
  position: relative !important;
  background: rgba(88, 89, 91, 1) !important;
  border: 2px solid #c2c2c2ff !important;
  border-radius: var(--product-corner-radius, 8px) !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

input.search-input {
  width: 100% !important;
  padding: 12px 15px 12px 40px !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  font-size: 14px !important;
  color: #FAF9F6 !important;
}

input.search-input::placeholder {
  color: rgba(250, 249, 246, 0.7);
}

.search-icon-custom {
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #FAF9F6 !important;
  pointer-events: none;
}

.predictive-search-form__content.custom-active {
  display: block !important;
  opacity: 1 !important;
  max-height: 50dvh !important;
}

.predictive-search-form__content {
  max-height: 0dvh !important;
  overflow: hidden;
  transition: max-height 0.2s ease;
}
</style>

<script>
document.addEventListener('input', function (e) {
  if (e.target.matches('.search-input')) {
    const wrapper = e.target.closest('.predictive-search');
    const content = wrapper?.querySelector('.predictive-search-form__content');
    if (!content) return;
    const value = e.target.value.trim();
    content.classList.toggle('custom-active', value.length > 0);
  }
});
</script>