Adding add to cart button on grid view and using a different button for a specific collection

Solved
Highlighted
Tourist
9 1 0

Hi,

So I was able to add the add to cart button on grid view by using this code on product-grid-item.liquid, which I guess fixes hiding it when it's out of stock too:

<form align="center" method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input align="center" type="submit" value="{% if product.variants.first.available%}Add to cart
	{% else %}
	Sold Out
	{% endif%}" class="btn" 
	{% unless product.variants.first.available %}disabled{% endunless %} />
                                          
       <input type="hidden" name="return_to" value="back" />
</form>

 

But I also want to use a different button to target specific catalogs and to show 'Contact us for pricing'. How do I add that?

Please help.

Thanks in advance!

0 Likes
Highlighted
Shopify Partner
931 135 152

Hi There!

What you need to do is have an unless followed by an if statement above this that identifies the collection's handle, anything that does not relate to the special category would display the code you wrote, anything else would show as the updated code based on this:

 

{% unless collection handle == "test" or collection.handle =="test2" %}
YOUR CODE
{%endunless%}

{% if collection handle == "test" or collection.handle =="test2" %}
CONTACT US FOR PRICING CODE
{%endif%}

 

Now if you have a lot of collections that will use this I suggest adding a Metafield to the Collection with a choice between "Add To Cart" & "Contact Us For Pricing", you would then check this field only instead of manually adding collections everytime you have a new one.

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
Tourist
9 1 0

Hi JHKC!

Thanks for the quick reply!

By 'YOUR CODE', do I insert the code that I pasted within the unless condition?

0 Likes
Highlighted
Shopify Partner
931 135 152

Indeed! Let me know

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
Tourist
9 1 0

I think I'm missing something 'cos the code didn't work. Can you please check?

 

  {% unless collection handle == "elementary-books" or collection.handle =="k-to-12-junior-high-school" %}
 <form align="center" method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input align="center" type="submit" value="{% if product.variants.first.available%}Add to cart
	{% else %}
	Sold Out
	{% endif%}" class="btn" 
	{% unless product.variants.first.available %}disabled{% endunless %} />
  <input type="hidden" name="return_to" value="back" />
</form>
{%endunless%}

{% if collection handle == "elementary-books" or collection.handle =="k-to-12-junior-high-school" %}
 <form align="center" method="post" action="/pages/contact-us">
    <input align="center" type="submit" target="_blank" value="Contact us for pricing" class="btn"/>
  </form>
{%endif%}  

 

0 Likes
Highlighted
Shopify Partner
931 135 152

Syntax issues corrected:

  {% unless collection.handle == "elementary-books" or collection.handle =="k-to-12-junior-high-school" %}
 <form align="center" method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input align="center" type="submit" value="{% if product.variants.first.available%}Add to cart
	{% else %}
	Sold Out
	{% endif%}" class="btn" 
	{% unless product.variants.first.available %}disabled{% endunless %} />
  <input type="hidden" name="return_to" value="back" />
</form>
{%endunless%}

{% if collection.handle == "elementary-books" or collection.handle =="k-to-12-junior-high-school" %}
 <form align="center" method="post" action="/pages/contact-us">
    <input align="center" type="submit" target="_blank" value="Contact us for pricing" class="btn"/>
  </form>
{%endif%}  
- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
Tourist
9 1 0

Hey it worked but it still didn't show the alternate button.

 

<edit>

The alternate button work for the individual catalog pages but when I click on it, it goes to a 404 page even if it's the correct url.

 

On the homepage with the grid it doesn't show. 

0 Likes
Highlighted
Shopify Partner
931 135 152

That should do it:

  {% unless collection.handle == "elementary-books" and collection.handle =="k-to-12-junior-high-school" %}
 <form align="center" method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input align="center" type="submit" value="{% if product.variants.first.available%}Add to cart
	{% else %}
	Sold Out
	{% endif%}" class="btn" 
	{% unless product.variants.first.available %}disabled{% endunless %} />
  <input type="hidden" name="return_to" value="back" />
</form>
{%endunless%}

{% if collection.handle == "elementary-books" or collection.handle =="k-to-12-junior-high-school" %}
 <form align="center" method="post" action="/pages/contact-us">
    <input align="center" type="submit" target="_blank" value="Contact us for pricing" class="btn"/>
  </form>
{%endif%}  
- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
Tourist
9 1 0

I edited the code to reflect both or with both unless and if conditions but I still can't get it to connect to the contact page.

If I want this code to reflect on the homepage, which liquid file do I add it to?

Just realized that I also have a collection that has a mix of products with prices that needs the add to cart function and the contact us for pricing.

Is there an easier work around for this? I set up a product.no-cart-button.liquid file that doesn't have an add to cart button. Is there a function that can call for that instead to use the contact us for pricing instead?

Thank you so much for your time!

 

 

{% unless collection.handle == "elementary-books" or collection.handle =="k-to-12-junior-high-school" %}
 <form align="center" method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input align="center" type="submit" value="{% if product.variants.first.available%}Add to cart
	{% else %}
	Sold Out
	{% endif%}" class="btn" 
	{% unless product.variants.first.available %}disabled{% endunless %} />
  <input type="hidden" name="return_to" value="back" />
</form>
{%endunless%}

{% if collection.handle == "elementary-books" or collection.handle =="k-to-12-junior-high-school" %}
 <form align="center" method="post" action="/pages/contact-us">
    <input align="center" type="submit" target="_blank" value="Contact us for pricing" class="btn"/>
  </form>
{%endif%}  

 

 

0 Likes
Highlighted
Shopify Partner
931 135 152

To help you better, can you please share your store's URL as well as an example for each collection? Just to visualize things better.

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes