Add to cart on collection page? *Solved*!

Taylor_Grendel
Tourist
18 0 2

SOLUTION IN BOTTOM POST

So we are looking to add a "Add To Cart" button on the collection  page under each product.

What I've done on the home page at the bottom is what I'm looking to do for all of our products.

(It's not functional I was just trying to see how it would look.)

We would like it so it doesn't redirect to the cart once added as well.

Any information/comments would be greatly appreciated! The sites still under construction fyi.

Thanks!

-Taylor

Replies 4 (4)
Taylor_Grendel
Tourist
18 0 2

-Bump-

So I've figured out how to get the button added.

My new problem is getting everything working. The home page products are on the back burner however I really need to get our collection page add to cart working. Anyone have any ideas?

The sites daveswarehouse.com

 

Here's what I've got so far:

{% for product in collection.products %}
<li class="product threecol{% cycle ' first', '', '', ' last' %}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">     
    <a href="{{ product.url | within: collection }}">  
        <img src="{{ product.images[0] | product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
    </a>
    {% if product.price < product.compare_at_price %}<div class="sale"></div>{% endif %}
        {% for col in product.collections %}
            {% if col.handle == 'new' %}
                <div class="new"></div>
            {% endif %}
        {% endfor %}  
    <div id="product-info"> 
        <a href="{{ product.url | within: collection }}"> 
            {% if settings.show-vendor %}<p>{{ product.vendor }}</p>{% endif %}
          <h3><center>{{ product.title | truncate: 70 }}</center></h3>
               
        </a>
     <div>
{% for variant in product.variants %}
{{ variant.id }}
{% endfor %}
</div>   
      <center> <div class="price">
          {% if product.price < product.compare_at_price %}
          <span class="onsale">{{ product.price | money }}</span>
          <span class="was">{{ product.compare_at_price | money }}</span>
            {% else %}
          {{ product.price | money }}{% endif %}
         </div>
        <center>
          <form action="http://daveswarehouse.com/cart/add"; method="post">
            <input type="hidden" name="product-info" value="{{ item.variant.id }}" />     
              <input type="submit" value="Add To Cart" />                             
          </form>
        </center>
        
    </div>
</li>
{% endfor %}

This is for our product-loop.liquid

Products look like this:

It displays the item.variant.id in plain text that you need to add to the cart. However i can't get the "Add to Cart" button to "Find" it.

We get this: 

Taylor_Grendel
Tourist
18 0 2

Solved! Thanks to: This

Since I've noticed that people don't seem to update their posts once their problem is solved I'm going to post my solution.

Here's my new code:

{% for product in collection.products %}
<li class="product threecol{% cycle ' first', '', '', ' last' %}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">     
    <a href="{{ product.url | within: collection }}">  
        <img src="{{ product.images[0] | product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
    </a>
    {% if product.price < product.compare_at_price %}<div class="sale"></div>{% endif %}
        {% for col in product.collections %}
            {% if col.handle == 'new' %}
                <div class="new"></div>
            {% endif %}
        {% endfor %}  
    <div id="product-info"> 
        <a href="{{ product.url | within: collection }}"> 
            {% if settings.show-vendor %}<p>{{ product.vendor }}</p>{% endif %}
          <h3><center>{{ product.title | truncate: 70 }}</center></h3>
               
        </a>
     <div>
</div>   
      <center> <div class="price">
          {% if product.price < product.compare_at_price %}
          <span class="onsale">{{ product.price | money }}</span>
          <span class="was">{{ product.compare_at_price | money }}</span>
            {% else %}
          {{ product.price | money }}{% endif %}
         </div>
        <center>
          <form method="post" action="/cart/add">
            <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
            <input type="hidden" name="return_to" value="back" />
            <input type="submit" value="Buy now" class="btn" />
            </form>  
        </center>
        
    </div>
</li>
{% endfor %}

Now everything works! Adds to cart and doesn't redirect! (sorta)

Cosmos_Euwejun
New Member
1 0 0

Hi, 

 

It great that your problem is solved. But i'm encountering the same issue as well. May i ask which template file did you paste the code? 

 

Regards, 

Eugene


@Taylor_Grendel wrote:

Solved! Thanks to: This

Since I've noticed that people don't seem to update their posts once their problem is solved I'm going to post my solution.

Here's my new code:

{% for product in collection.products %}
<li class="product threecol{% cycle ' first', '', '', ' last' %}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">     
    <a href="{{ product.url | within: collection }}">  
        <img src="{{ product.images[0] | product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
    </a>
    {% if product.price < product.compare_at_price %}<div class="sale"></div>{% endif %}
        {% for col in product.collections %}
            {% if col.handle == 'new' %}
                <div class="new"></div>
            {% endif %}
        {% endfor %}  
    <div id="product-info"> 
        <a href="{{ product.url | within: collection }}"> 
            {% if settings.show-vendor %}<p>{{ product.vendor }}</p>{% endif %}
          <h3><center>{{ product.title | truncate: 70 }}</center></h3>
               
        </a>
     <div>
</div>   
      <center> <div class="price">
          {% if product.price < product.compare_at_price %}
          <span class="onsale">{{ product.price | money }}</span>
          <span class="was">{{ product.compare_at_price | money }}</span>
            {% else %}
          {{ product.price | money }}{% endif %}
         </div>
        <center>
          <form method="post" action="/cart/add">
            <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
            <input type="hidden" name="return_to" value="back" />
            <input type="submit" value="Buy now" class="btn" />
            </form>  
        </center>
        
    </div>
</li>
{% endfor %}

Now everything works! Adds to cart and doesn't redirect! (sorta)


Hi, 

 

It's great that you found the solution, but i'm encountering the same issue as well.

May i ask which template file did you place the code?

 

Regards, 

Eugene

miq-cs
Tourist
4 0 1

Hi

I'm trying to do the same but I depend on the 'variation' the user selects. I want to be able to distinguish by size - XS, S, M, L, XL - and send that specific variation to the cart.

In your solution you use {{ product.variants.first.id }} which will take the first variation. But I need to take into account that there could be different colors per sizes as well.

Is this at all possible to do? Anybody has any ideas on how to do it?