Add "add to cart" button onto search results page

Highlighted
New Member
3 0 0

I am seeking an easy code to input into search.liquid that will generate an "add to cart" feature when a customer searches for a particular item. 

 

We have thousands upon thousands of items in our store and believe this would make it easy for one to search for "galaxy s7", view our results and choose to add an item to their cart without having to click on the product link.

 

Thanks in advance!

0 Likes
Highlighted
New Member
3 0 0

Hello, did you figure out how to do that? 

 

I'm trying to with no luck..

0 Likes
Highlighted
New Member
1 0 1

Hey Sarah,

you need to take the cart/add form function from the product-template.liquid and save it as a snippet (eg. add-to-cart.liquid) to use elsewhere.

<div class="product-template__container page-width"
  id="ProductSection-{{ section.id }}"
  data-section-id="{{ section.id }}"
  data-section-type="product"
  data-enable-history-state="true"
  data-ajax-enabled="{{ settings.enable_ajax }}">

  {% comment %}
    Get first variant, or deep linked one
  {% endcomment %}
  
  {% capture "form_classes" -%}
  product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}{% if section.settings.enable_payment_button and product.has_only_default_variant%} product-form--payment-button-no-variants{% endif %}
  {%- endcapture %}

  {% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}

    <form class="addtocart" method="post" action="/cart/add" >
      <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
      <input type="submit" name="add" value="Add to cart" class="btn btn--secondary-accent" data-add-to-cart/>
    </form>
  {% endform %}
</div>

then include the snippet in your product-card-list.liquid

    {% include 'add-to-cart' %}
Highlighted
Excursionist
20 0 1

SOLVED! Thank you.

Highlighted
Excursionist
35 4 2

Hi 

I've tried what you suggested and was struggling to insert the snippet directly into my code, somehow it doesn't load the snippet correctly I've tried combining it with the snippet that was already in there, but it doesn't seem to load because that snippet has a different function I think, I will post my original code below, 

 

Full code from search.liquid:

 

{% paginate search.results by 10 %}

<div class="page-width">
  {% if search.performed == false %}
    <div class="text-center">
      <h1 class="h2">{{ 'general.search.title' | t }}</h1>
  {% else %}
    <div class="section-header text-center">
      <h1 class="h2">
        <span class="visually-hidden">{{ 'general.search.heading' | t: count: search.results_count }}:</span>
        {{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
      </h1>
  {% endif %}
      <div class="grid">
        <div class="grid__item medium-up--two-fifths medium-up--push-three-tenths">
          <form action="{{ routes.search_url }}" method="get" role="search" class="search">
            <div aria-live="polite" class="form-message form-message--error search-result-error-message hide" data-search-error-message>
              <ul id="error-search-form">
                <li>{{ 'general.search.empty_search_message' | t }}</li>
              </ul>
            </div>

            <div class="input-group">
              <input type="search"
                id="SearchInput"
                class="input-group__field search__input"
                name="q"
                value="{{ search.terms | escape }}"
                placeholder="{{ 'general.search.placeholder' | t }}"
                aria-label="{{ 'general.search.placeholder' | t }}"
                >
              <span class="input-group__btn">
                <button id="SearchResultSubmit" class="btn search__submit" type="submit">{{ 'general.search.submit' | t }}</button>
              </span>
            </div>
          </form>
        </div>
      </div>

      {% if search.performed and search.results_count == 0 %}
        <hr class="hr--small hr--invisible" aria-hidden="true" />
        <div class="rte">
          <p><a href="https://slimmebaby.nl/collections/all" class="hoverable"> {{ 'general.search.no_results_html' | t: link: }}</p>
        </div>
      {% endif %}
  </div>
</div>


{% if search.performed %}
  {% if search.results_count > 0 %}
    <hr aria-hidden="true" />
  {% endif %}
  <h2 class="visually-hidden">{{ 'general.search.heading' | t: count: search.results_count }}</h2>
  <ul class="page-width list-view-items">
    {% for item in search.results %}
      <li class="list-view-item">
          {% if item.object_type == 'product' %}
            {% include 'product-card-list', product: item % and } 
          {% else %}
            <div class="product-card product-card--list">
              <a href="{{ item.url }}" id="paginanuis" class="full-width-link">
                <span class="visually-hidden"> {{ item.title }}</span>
              </a>
              <div class="list-view-item__link">
                {% if item.image %}
                  <div class="list-view-item__image-column">
                    <div class="list-view-item__image-wrapper product-card__image-wrapper">
                      <img class="list-view-item__image" src="{{ item.image.src | img_url: '600x600' }}" alt="{{ item.image.alt | escape }}">
                  </div>
                  </div>
                {% endif %}

                <div class="list-view-item__title-column">
                  <div class="list-view-item__title" aria-hidden="true">
                    <span class="product-card__title">{{ item.title }}</span>
                  </div>
                  <div>
                    {% if item.published_at %}{{ item.published_at | date: format: "date" }} &#8212; {% endif %}
                    {{ item.content | strip_html | truncate: 200 }}
                  </div>
                </div>
              </div>
            </div>
          {% endif %}
      </li>
    {% endfor %}
  </ul>

  {%- if paginate.pages > 1 -%}
    {% include 'pagination', paginate: paginate %}
  {%- endif -%}
{% endif %}

{% endpaginate %}

 

 

Thanks for reading this!

0 Likes