How to add second product to cart in Shopify from product page - shopify

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.

Related

Shopify Liquid: Assign Variant to Quick Add Button

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 %}

Customers also bought section in cart drawer

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 %}

Shopify - Exit for loop through if statement

I am working a shopify shop but not trying to sell products but rather appointments.
I am using a shopify extension called Sesami to do so.
In the customer/account.liquid page I want to show the next coming appointment (or appointments) and a different information to people who don't have any future appointment coming.
I have been trying to do this with the following code :
{% if customer.orders != blank %}
{% for order in customer.orders %}
{%- for line_item in order.line_items -%}
{% for property in line_item.properties limit:1 %}
{% assign today_date = 'now' | date: '%s' %}
{% assign pre_date = property.last | date: '%s' %}
{% if pre_date >= today_date %}
{{ line_item.product.title | link_to: line_item.product.url }}
{% for property in line_item.properties limit:1 %}
{% if property != blank %}
{{ property.last | date: format: 'abbreviated_date' }}
{{ 'customer.orders.at' | t }}
{% endif %}
{%- endfor -%}
{% for property in line_item.properties offset:1 %}
{{ property.last }}
{%- endfor -%}
{{ line_item.image | img_url: 'small' | img_tag }}
{{ order.fulfillment_status_label }}
{% endif %}
{% endfor %}
{%- endfor -%}
{% endfor %}
{% else %}
Content for people with no booking at all
{% endif %}
But the problem is that the forloop stays open and therefore shows the content I am hoping to display to people with no upcoming appointment multiple times based on the total number of past appointments.
I imagine there is a much simpler way to do this and am hoping you can help me find it !
Thanks a lot,
Julien
Consider using {% break %} when you'd like the loop to stop it's current iteration.
https://shopify.github.io/liquid/tags/iteration/#break

Build collection from tag array in shopify

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!

Liquid. Looping through an array with an if condition then want to store the output of that in another array

{% assign leg = {{Predept.legs}} %}
{% for legs in {{leg}} %}
{% if {{leg[forloop.index0].direction}} == 'R' %}
{{leg[forloop.index0].arr_station_name}}
{%endif %}
{%endfor %}
I want to put the output of this for loop into another array. Any ideas?
Welcome, Jeet!
First, you don't ever nest the Liquid tags. Your basic loop should look something like this:
{% assign legs = Predept.legs %}
{% for leg in legs %}
<!-- Cool code & stuff here! -->
{% endfor %}
Now, in Liquid you can only create a new array by using the split filter on a string. We can also create a string by wrapping other commands with the capture tag. Putting that together, we get something like:
{% capture leg_data %}
{% assign legs = Predept.legs %}
{% for leg in legs %}
{% if leg.direction == 'R' %}
{% comment %}Output delimiter if needed {% endcomment %}
{% unless found_one %},{% endunless %}
{% assign found_one = true %}
{{ leg.arr_station_name }}
{% endif %}
{% endfor %}
{% endcapture %}
{% assign leg_data = leg_data | split: ',' %}
That will give us an array of all of our arr_station_name for the desired legs, but you may note that capture is also capturing all of the whitespace in there as well. If we need to prevent that from getting into our nice little array, we can use the whitespace-stripping - character on our tags to control that, giving:
{%- capture leg_data -%}
{%- assign legs = Predept.legs -%}
{%- for leg in legs -%}
{%- if leg.direction == 'R' -%}
{%- comment -%}Output delimiter if needed {%- endcomment -%}
{%- unless found_one -%},{%- endunless -%}
{%- assign found_one = true -%}
{{- leg.arr_station_name -}}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}
{%- assign leg_data = leg_data | split: ',' -%}
Hope this helps!