Last active
August 15, 2023 02:21
-
-
Save zoerooney/156af5751fa2580fa2b5 to your computer and use it in GitHub Desktop.
Shopify minicart on non-Shopify site
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
jQuery.ajax({ | |
type: 'GET', | |
url: 'http://mysite.myshopify.com/cart.json', | |
dataType: 'jsonp', | |
success: function(data) { | |
var item_count = data['item_count']; | |
var total_price = data['total_price']/100; | |
//If there are items in cart | |
if ( item_count > 0 ) { | |
// cart count | |
jQuery('.cart-count').text(item_count); | |
// mini cart data | |
jQuery('.mini-cart').attr('id','mini-cart'); | |
jQuery('.mini-cart-subtotal .price').text( '$' + total_price.toFixed(2) ); | |
var cart_list = []; | |
for( var i = 0; i < item_count; i++ ){ | |
if ( data['items'][i]['id'] != null ) { | |
var item_id = data['items'][i]['id']; | |
var product_title = data['items'][i]['product_title']; | |
// var product_title = data['items'][i]['title']; | |
var product_handle = data['items'][i]['handle']; | |
var quantity = data['items'][i]['quantity']; | |
var line_price = data['items'][i]['price']/100; | |
var url = data['items'][i]['url']; | |
var image_url = data['items'][i]['image']; | |
var variants = data['items'][i]['variant_options']; | |
if ( product_title == 'Gift Wrap' ) { | |
var product_url = product_title; | |
} else { | |
var product_url = '<a href="http://mysite.myshopify.com' + url + '">' + product_title + '</a>'; | |
} | |
var options = []; | |
for ( var o = 0; o < variants.length; o++ ) { | |
var selected = data['items'][i]['variant_options'][o]; | |
if ( selected !== 'Default Title' ) { | |
options.push( selected + '<br>' ); | |
} | |
} | |
var selected_options = options.join(''); | |
cart_list.push('<div class="row mini-cart-product"><div class="col span_3 mini-image"><div class="product_image"><img src="' + image_url + '" alt="' + product_title + '" /></div></div><div class="col span_6">' + product_url + '<br>' + selected_options + '</div><div class="col span_3 text-right">$'+ line_price.toFixed(2) +'<br>x ' + quantity + '<input type="hidden" id="updates_' + item_id + '" value="' + quantity + '" /></div></div>'); | |
} //endif | |
} // endfor | |
jQuery('.mini-cart-items').append( cart_list.join('') ); | |
} | |
} | |
}); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="mini-cart"> | |
<form action="//mysite.myshopify.com/cart" method="post"> | |
<div class="mini-cart-items"> | |
</div> | |
<div class="mini-cart-subtotal"> | |
<div class="col span_7 pull-left"> | |
<h3>SUBTOTAL</h3> | |
</div> | |
<div class="col span_5 text-right"> | |
<span class="price"></span> | |
</div> | |
</div> | |
<div class="row text-right cart-buttons-row"> | |
<a href="//mysite.myshopify.com/cart">View cart</a> | |
<input type="submit" id="checkout" name="checkout" value="Check Out"> | |
</div> | |
</form> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment