I'm trying to add "Customers also bought" section under the added items in the cart drawer. I'm doing that by checking for the tags that start with '__with', then getting their handle Now some tag products are duplicates of the ones already in the cart. How to remove duplicates?
I added this logic inside the cart-drawer.liquid.
<div class="CartAddons">
<div class="CartAddons__Heading">Customers also bought</div>
{%- for item in cart.items -%}
{%- assign tags = item.product.tags | join ' ' -%}
{%- assign product_handle = tags | split: '__with:' | last -%}
{%- assign associated_product = all_products[product_handle] -%}
{%- if tags contains '__with' -%}
<div class="CartAddons__Section">
<div class="CartAddons__Item">
{% render 'product-item', product: associated_product, use_horizontal: true, show_labels: false, show_product_info: true, show_vendor: false, show_price_on_hover: true %}
</div>
</div>
{%- endif -%}
{%- endfor -%}
</div>
Need to develop such logic to check if a product is already in the cart.
{% assign productsInCart = cart.items | map: 'product_id' %}
and then make sure the tagged product is not into the cart items array
{% untill productsInCart contains associated_product.id %}{% endunless %}
Related
I am attempting to create a quick add button to a product on a custom page template using Shopify liquid. The product has several variants and I would like to assign a specific variant to this product; Namely the second variant.
For the sake of example, let's say my variant ID would be 456. So, basically, I want to be able to display the product with an id of 123, shown below. And I want the quick add to be assigned to the variant id 456. Is there a way to do this using the variant ID? Below is a sample of my loop.
Any help would be appreciated!
{%- assign my_products = collections['collection-handle'] -%}
{%- for product in my_products.products -%}
{%- if product.id == 123 -%}
{%- assign product_form_id = 'quick-add-' | append: section_id | append: product.id -%}
{%- if product.variants.size > 1 -%}
{%- form 'product', product, id: product_form_id, class: 'actions__form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled />
<button
id="{{ product_form_id }}-submit"
type="submit"
name="add"
class="add__button"
data-variant_id="{{ product.selected_or_first_available_variant.id }}"
aria-label="Add to cart - {{ product.title | escape }}"
>
<span>Add</span>
</button>
{%- endform -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
inside your product loop you can get variant like this and filter variant according to their variant id or tags.
{% for variant in product.variants %}
{% if variant.id == 456 %}
{% else %}
{% endif %}
{% endfor %}
I'm trying to change the page title for my "all products" page but i don't manage to get it work. I want to set the page title for this page only.
Here is my code which I put in the theme.liquid file in the <title> tag:
{%- if page_title == "Products" -%}
{% assign page_title = "Paintings" }
{%- endif -%}
If this is the default "All products collection", this should work:
{%- if collection.handle == 'all' -%}
{% assign page_title = "Paintings" }
{%- endif -%}
I'm aware you can't filter collections via "OR" condition, but is there a way to pass an array of tags you want to build a collection out of? I'd like to build a giftfinder that allows the customer to select multiple options and it would show products that match ANY those tags - not products that contain ALL those tags.
I've tried doing this on an all products collection, but it only limits the results on the page you're currently on and it still seems to paginate for all the products in the collection
{% assign tagcategories = "Animals, Sloths" | split: ',' %}
{%- for product in collection.products -%}
{% for tagcat in tagcategories %}
{%- for tag in product.tags -%}
{% if tag == tagcat %}
{% include 'collection-product' with collection.handle %}
{% endif %}
{%- endfor -%}
{%- endfor -%}
{%- endfor -%}
Are there any other methods or workarounds to do what I'm trying to achieve? Thanks!
The best approach when it comes to product by tag is to use the default collection/handle/tag and request is via AJAX.
If you create a custom template only for the ajax logic so that it doesn't including the header and footer it will be easier on you.
The custom template will be something like so collection.ajax.liquid:
{% layout none %}
{%- for product in collection.products -%}
{% include 'collection-product' with collection.handle %}
{%- endfor -%}
So in your case you will have something like so.
(async () => {
const handels = ['animals', 'sloths'];
for (let index = 0; index < handels.length; index++) {
const handle = handels[index];
const response = await fetch(`/collections/all/${handle}`).then(res => res.text());
// do something with the response
}
})
If you still wanted to use just liquid you can wrap your current code with a paginate tag:
{% paginate colection.products by 99999 %}
{% assign tagcategories = "Animals, Sloths" | split: ',' %}
{%- for product in collection.products -%}
{% for tagcat in tagcategories %}
{%- for tag in product.tags -%}
{% if tag == tagcat %}
{% include 'collection-product' with collection.handle %}
{% endif %}
{%- endfor -%}
{%- endfor -%}
{%- endfor -%}
{% endpaginate %}
Please note that the liquid way will increase the load speed of the site depending on how many products you have!
I'm using Shopify and am trying to add the options to add gift wrap and a carry case to products being bought.
I can use the item.properties to ask the user for the choice and show that in the cart.
I now want to add an additional product to the cart if item.properties is set to "gift wrap" or "carry case".
This code is placed in the product-template.liquid but does not work:
{% for property in item.properties %}
{% if property.last == "Gift Wrap" %}
<p>This would add gift wrap.</p>
<script>
jQuery.post('/cart/update.js', {
updates: {
32005672697928: 1
}
});
</script>
{% endif %}
{% if property.last == "Carry Strap" %}
<p>This would add carry strap.</p>
{% endif %}
{% endfor %}
{% endunless %}
Doesn't seem the code you have was intended to be used on the product page. It looks like it should be placed on the cart page within the {% for item in cart.items %} ... {% endfor %} loop.
Also, this code will add only 1 wrap product, even if customers add 2+ wrapped items. I would change the code to something like the below:
{%- assign numWrappedItems = 0 -%}
{%- for item in cart.items -%}
{%- for property in item.properties -%}
{%- if property.last == "Gift Wrap" -%}
{%- assign numWrappedItems = numWrappedItems | plus: item.quantity -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
...
{%- endfor -%}
{%- if numWrappedItems > 0 -%}
<script>
jQuery.post('/cart/update.js', {
updates: {
32005672697928: {{ numWrappedItems }}
}
});
</script>
I hope the above makes sense.
I'm trying to iterate over items in the shopping cart and generate an upsell div with products NOT in the cart. Below is the code I have so far, but I run into issues when adding two items to cart running the loop twice generating the html twice. Any ideas on how to resolve it? I'm stumped.
{% for item in cart.items %} // iterates over items in cart
{% if item.product.id == 4456879040188 %} // checks if product id matches in item in cart
<div class="upsell-pop" style="text-align:center; width: 100%;">
<h4>Frequently bought together</h4>
{% for prod in collections.upsell.products %} // iterates products in collection upsell
{% unless prod.handle contains "product-name" %} // shows only prods that do not contain url handle
<div>
<span class="upsell-title">{{ prod.title }}</span>
<span class="upsell-price">{{ prod.metafields["meta"]["promo"] }} {{ prod.price | money }}</span>
<img src="{{ prod.featured_image | img_url: '200x' }}" />
<a class="btn-product" href="{{prod.url}}">View Product</a>
</div>
{% endunless %}
{% endfor %}
</div>
{% endif %}
{% endfor %}
Another thought is to somehow check to see if product is NOT in cart items inside to replace the existing "unless" statement, but not sure how to code it.
{% unless cart.items exist then %} // I know this is not correct syntax
<div>
<span class="upsell-title">{{ prod.title }}</span>
<span class="upsell-price">{{ prod.metafields["meta"]["promo"] }} {{ prod.price | money }}</span>
<img src="{{ prod.featured_image | img_url: '200x' }}" />
<a class="btn-product" href="{{prod.url}}">View Product</a>
</div>
{% endunless %}
On my mind, there are two steps here.
First, capture your cart content to get string to compare to when you loop through your upsell collection. This could be something like that:
{%- capture cart_items -%}
{% for item in cart.items %}
{{ item.product.handle }}{% unless forloop.last %} , {% endunless %}
{% endfor %}
{%- endcapture -%}
Then loop through your collection while checking your string does not contain the handle of the current product at each iteration:
{% for product in collections['upsell'].products %}
{% unless cart_items contains product.handle %}
{{ product.title }}
{% endunless %}
{% endfor %}
Remarks:
Snippet 1 => In line_item (here called item because it's shorter to write) object you may access product object attributes: item.product.product_attr_needed
Snippet 2 => To access directly a collection object using its handle you must use collections + square brackets containing collection handle + attribute. Here 'upsell' is the handle of your upsell collection.
Not tested but this should work.
HTH