Brooklyn theme : How can I prevent certain combination of items to be in the cart?

[Johkid]

The homepage is still under construction, so I will leave a prototype link 

https://ww7afogzt3f1u917-51704823974.shopifypreview.com

I was wondering, are there anyways to not to be able to select items with a certain item?

For example, on the homepage, there is a section called "group buys". This item takes time to be made and be delivered (about 6 months)

In the other section, we have something called "shop". This section is for the items which are "in-stock".

So, What I want to do is to prevent in-stock items and the group buy items to be mixed. In other words, if the customer selects the group to buy the item, he/she won't be able to select the "in-stock" item. Vice versa as well.

Could you help me out with this?

[SumanSaurabh · Accepted solution]

Hi @Johkid 

This solution requires editing of your theme code. Most of the files that make up a theme contain Liquid, Shopify's templating language. Theme files also contain HTML, CSS, and JavaScript. Edit the code for a theme only if you know HTML and CSS, and have a basic understanding of Liquid. To know more what is theme editing, please visit:

https://help.shopify.com/en/manual/online-store/os/using-themes/managing-themes/duplicating-themes

Before you customize your theme, it's a good idea to duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.

Steps to duplicate a theme:

1. From your Shopify admin, go to Online Store > Themes.

2. For the theme that you want to duplicate, click Actions > Duplicate.

Solution of your specific issue:

This solution has two parts. After full implementation, if anyone has already added items of Group Buys in the cart then the product page of Shop items will display a warning message as below in place of Add to cart buttons:

This is a regular Shop item which can not be ordered together with Group Buys. You already have some Group Buys in your cart.

Similarly, if anyone has already added a Shop item in the cart then the product page of Group buys will display a warning message as below in place of Add to cart buttons:

This is a Group Buy which can not be ordered together with regular Shop items. You already have some regular Shop items in your cart.

Thus preventing buyers to accidentally order both type of items. The code only checks first item of the cart to determine what type of items is already in the cart for speed purpose. Assuming, buyer has started with a empty cart. While testing, if you already have added any items to cart, please empty your cart first then begin testing.

Part - I:

You will first need to add certain tag to each product so they can be distinguished by theme code.

> Add the tag 'Shop Item' to all your in-stock 'Shop' items.

> Add the tag 'Group Buy' to all items of 'Group Buys'.

Example screenshot:

In order to know more about how to add product tags, please visit:

https://help.shopify.com/en/manual/shopify-admin/productivity-tools/using-tags#add-a-tag

Part - II:

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

3. In the Snippets directory, click Add a new snippet.

4. Name your snippet cart-check, and click Create snippet.

5. In cart-check.liquid file, copy and paste the following code snippet then save the file:

{%- assign cart_type = '' -%}
{%- if cart.items[0].product.tags contains 'Shop Item' -%}
  {%- assign cart_type = 'Shop Item' -%}
{%- elsif cart.items[0].product.tags contains 'Group Buy' -%}
  {%- assign cart_type = 'Group Buy' -%}
{%- endif -%}
{% if product.tags contains 'Shop Item' and cart_type == 'Group Buy' %}
  <p style="color:red">This is a regular Shop item which can not be ordered together with Group Buys. You already have some Group Buys in <a href="/cart">your cart</a>.</p>
  <style>.product-single__add-to-cart {display: none;}</style>
{% elsif product.tags contains 'Group Buy' and cart_type == 'Shop Item' %}
  <p style="color:red">This is a Group Buy which can not be ordered together with regular Shop items. You already have some regular Shop items in <a href="/cart">your cart</a>.</p>
  <style>.product-single__add-to-cart {display: none;}</style>
{% endif %}

6. In the Sections directory, click to open your product-template.liquid file.

7. In the product-template.liquid file, find the code line that begins with <div class="product-single__add-to-cart 

8. Then copy and paste the following code just above/before this line <div class="product-single__add-to-cart 

{% include 'cart-check'%}

 9. Save the changes.

I hope this helps.

Thanks!

[BennysBread]

This is incredible! I would love to use this but i need help making some modification as my code does not include <div class="product-single__add-to-cart 

Would you be able to tell me where I should put in the cart-check?

And also how to change the colour of the "your cart" text in the cart-check html?

I would truly appreciate your help! I am going to paste my product-templat.liquid below. You can see where i have inserted the cart-check, however i still have the add to cart text on the button. 

<div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}"
data-error-message-wrapper
role="alert"
>
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
</div>

<div class="product-form__controls-group product-form__controls-group--submit">
<div class="product-form__item product-form__item--submit
{%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
{%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
>
<button type="submit" name="add"
{% unless current_variant.available %} aria-disabled="true"{% endunless %}
aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
{% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
data-add-to-cart>
{% include 'cart-check'%}
<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
<span class="hide" data-loader>
{% include 'icon-spinner' %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
</div>
{% endform %}
</div>

Thanks,

Amber