Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Shopify jQuery selectors.
/*
To test things out, in your JavaScript console, use selector followed by
.css('outline','1px solid red');
to see what you get.
A sandbox to test all this:
https://shopify-selectors.myshopify.com/admin/themes
*/
/*====================================
Product Page and Quick View
====================================== */
// Add to cart form(s)
jQuery('form[action="/cart/add"]')
// Add to cart button(s)
jQuery('form[action="/cart/add"]')
.find('input[type="submit"], button, input[type="image"]')
// Quantity box(es)
jQuery('[name="quantity"]')
// Product thumbnails
// Covers: Editions, Launchpad Star, Lookbook, Kickstand, Startup, Simple, Radiance, Minimal, Supply, New Standard
jQuery('img[src*="/products/"]') /* All product images */
.not('#related-products img') /* Except related products, thumbnails not clickable */
.not('a[href^="/collections/"] img') /* Except related products */
.not('a[href^="/products/"] img') /* Except mini-cart products */
.not('header img') /* Except mini-cart products, thumbnails not clickable */
.not('#drawer img') /* Except mini-cart products, thumbnails not clickable, in Simple theme. */
.not(':first') /* Except first one, i.e the main image */
// Main image
// Covers: Editions, Launchpad Star, Lookbook, Kickstand, Startup, Simple, Radiance, Minimal, Supply, New Standard
jQuery('img[src*="/products/"]') /* All product images */
.not('a[href^="/collections/"] img') /* Except related products */
.not('a[href^="/products/"] img') /* Except mini-cart products */
.not('header img') /* Except mini-cart products, thumbnails not clickable */
.not('#drawer img') /* Except mini-cart products, thumbnails not clickable, in Simple theme. */
.first()
// Quick View.
// In selectCallback function.
// How to access the associated add to Cart form:
jQuery('#' + selector.domIdPrefix).closest('form');
// How to access the associated quantity:
jQuery('#' + selector.domIdPrefix).closest('form').find('[name="quantity"]');
// How to access the variant id (just checking if your paying attention):
variant.id
/*====================================
Cart and Cart Page
====================================== */
// Cart count selector
// Covers: Editions, Launchpad Star, Lookbook, Kickstand, Startup, Retina, Simple, Radiance, Minimal, Supply, New Standard
jQuery('#cart-item-count-wrap, #cart-count, .cart-count, #cart-target, .cart-target, #item_count, .num-items-in-cart span, .toolbar .cart, #cartCount')
/* The selected element may contain more than just a number, so if you update its content only update the number,
see example below. Run it in your console. */
var cartCount = jQuery('#cart-item-count-wrap, #cart-count, .cart-count, #cart-target, .cart-target, #item_count, .num-items-in-cart span, .toolbar .cart, #cartCount');
var newCartItemCount = 3;
if (cartCount.size()) {
cartCount.html(cartCount.html().replace(/[0-9]+/, newCartItemCount));
}
// Cart Total selector
/* Covers: Editions, New Standard. Other tested themes don't show a total. */
jQuery('#cart-amount-wrap, cart-price')
// Cart form
jQuery('form[action="/cart"]')
// Cart form quantity field by variant ID
jQuery('#updates_' + variantId)
// All quantity fields
jQuery('[name^=updates]')
// Checkout buttons
// Good for regular checkout button, Paypal button, and Google Wallet button.
jQuery('[name="checkout"], [name="goto_pp"], [name="goto_gc"]')
@lulessa

This comment has been minimized.

Copy link

lulessa commented Apr 7, 2015

// How to access the variant id (just checking if your paying attention):
variant.id

Nice try! It's more like:

// Accessing the variant id
jQuery('form[action="/cart/add"]').find("[name=id]").eq(0).not(":disabled").val();

Note: when selected options do not correspond to an existing variant (i.e., unavailable), then above will return undefined. Sold out variants w/ backordering disallowed may return [] - empty Array

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.