Upsell products similar to Amazon's

upsell-products.liquid

{% assign current_product_handle = product.handle %}
{% assign upsell_product_col = 'col-xs-4' %}
{% assign sum = product.price %}
{% assign number_of_upsell_products = 0 %}
{% for upsell_product in upsell_collection.products limit: 4 %}
	{% unless upsell_product.handle == current_product_handle %}
		{% assign sum = sum | plus: upsell_product.price %}
	{% endunless %}
	{% assign number_of_upsell_products = forloop.index %}
{% endfor %}

<h4 class="title-coll">Frequently Bought Together</h4>

<form class="upsell-products product-actions" action="/cart/add" method="post" enctype="multipart/form-data">         
	<div class="row">
		<div class="col-sm-24 col-md-16">
			<div class="upsell-products__photos">
				<div class="row">
					{% if product.available %}
					<div class="{{ upsell_product_col }} upsell-product" data-upsell-item-id="product-upsell-{{ product.variants.first.id }}">
						<div class="upsell-product__image">
							<a href="#"><img class="featured-image--secondary" src="{{ product.featured_image | product_img_url: '110x110', format: 'pjpg' }}"></a>
						</div>
					</div>						
					{% endif %}
					{% for upsell_product in upsell_collection.products limit: 4 %}
						{% include 'upsell-product-item' %}
					{% endfor %}			
				</div>				
			</div>
			<div class="hidden-sm hidden-md hidden-lg">
				<h4 class="upsell-products__reveal text-center">
					Buy <span class="upsell-products__count">All {{ number_of_upsell_products | plus: 1 }}</span>:&nbsp;&nbsp;<span class="upsell-products__subtotal-sum price"></span>&nbsp;&nbsp;<i class="fa fa-angle-down"></i>
				</h4>
			</div>

			<div class="upsell-products__labels">
				{% if product.available %}
					<label id="upsell-products__primary-product">
						{% unless product.variants.size > 1 %}
							<input type="checkbox" id="product-upsell-{{ product.variants.first.id }}" name="id[]" value="{{ product.variants.first.id }}" class="product-select-{{product.id}}--bundle" data-upsell-item-price="{{ product.variants.first.price | money_without_currency }}" data-upsell-item-original-price="{{ product.selected_variant.compare_at_price | money_without_currency }}" onclick="return false;" style="opacity: 0.5;" checked>
						{% else %}
							<input type="checkbox" id="product-upsell-{{ product.variants.first.id }}"  value="{{ product.variants.first.id }}" class="product-select-{{product.id}}--bundle" data-upsell-item-price="{{ product.variants.first.price | money_without_currency }}" data-upsell-item-original-price="{{ product.selected_variant.compare_at_price | money_without_currency }}" onclick="return false;" style="opacity: 0.5;" checked>
						{% endunless %}
						<span><strong>This item:</strong> {{ product.title }}</span>
						<span class="price">{{ product.price | money }}</span>
						<del>{{ product.compare_at_price | money }}</del>
					</label>
				{% endif %}

				{% for upsell_product in upsell_collection.products limit: 4 %}
					{% unless upsell_product.handle == current_product_handle %}
					<label>
						<input type="checkbox" id="product-upsell-{{ upsell_product.variants.first.id }}" name="id[]" value="{{ upsell_product.variants.first.id }}" class="product-select-{{upsell_product.id}}--bundle" data-upsell-item-price="{{ upsell_product.variants.first.price | money_without_currency }}" data-upsell-item-original-price="{{ upsell_product.variants.first.compare_at_price | money_without_currency }}" checked>
						<span>{{upsell_product.title}}</span>
						<span class="price">{{ upsell_product.price | money }}</span>
						<del>{{ upsell_product.compare_at_price | money }}</del>
					</label>		
					{% endunless %}	
				{% endfor %}

			</div>

		</div>

		<div class="col-sm-24 col-md-8">

			<div class="upsell-products__subtotal">
				<div>
					<h4>Total price: <span class="upsell-products__subtotal-sum price">{{ sum | money }}</span></h4>
					<h4>You save: <span class="upsell-products__subtotal-saved price"></span></h4>
				</div>
				<button class="add-to-cart--bundle btn btn-primary" type="button" {% if product.available and product.variants.size > 1 %}data-toggle="modal" data-target="#upsell-main-product"{% endif %}>
					Add <span class="upsell-products__count">All {{ number_of_upsell_products | plus: 1 }}</span> to Cart
				</button>
			</div>

		</div>

	</div>

{% if product.available and product.variants.size > 1 %}
<div id="upsell-main-product" class="modal fade" role="dialog">
	<div class="modal-dialog modal-sm">

		<!-- Modal content-->
		<div class="modal-content">
			<div class="modal-header text-center">
				<h5 class="title-coll">Choose Your Options</h5>
				<h4 class="modal-title" style="text-align:center;">{{ product.title }}</h4>
			</div>
			<div class="modal-body">
				<img class="featured-image--secondary" src="{{ featured_image | img_url: 'x180' }}" alt="{{ product.title | escape }}" style="max-height: 180px;" />

				<select id="product-select-{{ product.id }}--bundle" name="id[]">
					{% for variant in product.variants %}
						{% if variant.available %}
							{%unless variant.metafields.secomapp.freegifts %}	
							<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
							{%endunless%}
						{% else %}
							<option disabled="disabled">
								{{ variant.title }} - {{'products.product.sold_out' | t}}
							</option>
						{% endif %}
					{% endfor %}
				</select>

				<button type="button" class="btn btn-primary btn-block add-to-cart--bundle"><span>Add Bundle</span></button>
			</div>

		</div>
	</div>
</div>
{% endif %}

</form>