To add a Buy button for each product in debut theme and disable it when then the item is sold out

Solved
Firefly1
Tourist
12 0 1

Hi,

I used this code to add the button.

<form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input min="1" type="number" id="quantity" name="quantity" value="1" style="width:65px; padding: 9px 10px; vertical-align: top; margin-top:-30px;"/>
  <input type="submit" value="Add to cart" class="btn" style="padding: 10px 10px; vertical-align: top; margin-top:-30px;"/>
</form>

I am trying to find a solution for the button to disable automatically when the product is sold out. Any help is appreciated.

Thanks.

0 Likes
Akibhusen
Excursionist
196 37 68

This is an accepted solution.

HI @Firefly1 ,

Update your code with below given code:

 

<form method="post" action="/cart/add">
{% if variant.available %}
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input min="1" type="number" id="quantity" name="quantity" value="1" style="width:65px; padding: 9px 10px; vertical-align: top; margin-top:-30px;"/>
<input type="submit" value="Add to cart" class="btn" style="padding: 10px 10px; vertical-align: top; margin-top:-30px;"/>
{% else %}
<input type="submit" value="Sold Out" class="btn" disabled/>
{% endif %}
</form>

 

Please update CSS for the 'Sold Out' button as per your requirement.

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
0 Likes
Firefly1
Tourist
12 0 1

Hi Akib,

Thank you very much for the solution. It helps. In this case, it gets disabled but the button goes missing leaving a blank space. Instead can we make it just showing sold out with no-action when clicked?

Thank you.

0 Likes
Akibhusen
Excursionist
196 37 68

This is an accepted solution.

Yes, sure.

Just change the condition. keep the form in if condition & sold out button in else condition like below:

{% if variant.available %}

<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input min="1" type="number" id="quantity" name="quantity" value="1" style="width:65px; padding: 9px 10px; vertical-align: top; margin-top:-30px;"/>
<input type="submit" value="Add to cart" class="btn" style="padding: 10px 10px; vertical-align: top; margin-top:-30px;"/>
</form>

{% else %}


<input type="submit" value="Sold Out" class="btn" disabled/>


{% endif %}

 

I think I got your question & get the right solution. if not then ping me again

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
0 Likes
Firefly1
Tourist
12 0 1

Yes!!!! It Works.

Thanks Akib.

0 Likes
Akibhusen
Excursionist
196 37 68

You are welcome.

 

Feel free to ask anything.

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Firefly1
Tourist
12 0 1

Hi Akib,

Is there a way to add More blocks to the collection list. Please guide me if this is possible.

Thanks.

0 Likes
Akibhusen
Excursionist
196 37 68

Hi,

Can you please explain detail? Where exactly you want to add?

Everything is possible

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
0 Likes
Firefly1
Tourist
12 0 1

OK. When we add a section for collection list, the max number of collection to view in one list is 12. Need to add more Can this be increased to 20?

Thanks.

coll.png

0 Likes
Akibhusen
Excursionist
196 37 68

This is an accepted solution.

HI @Firefly1 ,

 

Go to shopify admin -> Online store -> Themes -> Action -> Edit code.

 

From your theme code open the 'collection-list.liquid' section file from the Sections  folder. 

After that search for the 'max_blocks' word. You can find this word in {%  schema %}.  Update this from "max_blocks": 12, to "max_blocks": 20 .

 

Hope you understand.

'

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution