Build your Pip Decks bundle
Get 50% off the entire library when you buy The Ultimate Collection, or build your bundle below.
Not sure which Pip Decks are for you? Take the quiz to find out!
×
Bundle Debug Methods
Bundle Product Debug Methods
Select a product below to test different cart addition methods.
Storyteller Tactics
£125.00
Bundle Product Variant: storyteller-tactics-complete-package, ID: 7877054595161
Method 1: Standard Form with Hidden Input
<form action="/cart/add" method="post" class="standard-form">
<input type="hidden" name="id" value="7877054595161">
<input type="hidden" name="quantity" value="1">
<button type="submit">Add Bundle to Cart</button>
</form>
Method 2: Ajax POST with fetch API
const addToCart = (variantId) => {
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: variantId, quantity: 1 }] })
})
.then(response => response.json())
.then(data => {
console.log('Added to cart:', data);
// Show result
document.getElementById('result-2-6906984923225').textContent = JSON.stringify(data, null, 2);
document.getElementById('result-2-6906984923225').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result-2-6906984923225').textContent = 'Error: ' + error;
document.getElementById('result-2-6906984923225').style.display = 'block';
});
};
Method 3: Direct URL Approach
Add Bundle to Cart
<a href="/cart/add?id=7877054595161&quantity=1">Add Bundle to Cart</a>
Method 4: jQuery AJAX
$('.jquery-ajax-button').click(function() {
var variantId = $(this).data('variant-id');
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: { id: variantId, quantity: 1 },
dataType: 'json',
success: function(data) {
console.log('Added to cart:', data);
$('#result-4-6906984923225').text(JSON.stringify(data, null, 2)).show();
},
error: function(error) {
console.error('Error:', error);
$('#result-4-6906984923225').text('Error: ' + JSON.stringify(error)).show();
}
});
});
Method 5: Form with Select Element
<form action="/cart/add" method="post">
<select name="id">
<option value="42030344798297">Storyteller Tactics</option>
<option value="7877054595161" selected>Bundle Option</option>
</select>
<button type="submit">Add to Cart</button>
</form>
Method 6: FormData API
document.querySelector('.formdata-form').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData();
formData.append('id', this.dataset.variantId);
formData.append('quantity', 1);
fetch('/cart/add.js', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('Added to cart:', data);
document.getElementById('result-6-6906984923225').textContent = JSON.stringify(data, null, 2);
document.getElementById('result-6-6906984923225').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result-6-6906984923225').textContent = 'Error: ' + error;
document.getElementById('result-6-6906984923225').style.display = 'block';
});
});
Method 7: Window Location Redirect
document.querySelector('.redirect-button').addEventListener('click', function() {
const variantId = this.dataset.variantId;
window.location.href = `/cart/add?id=${variantId}&quantity=1&return_to=${encodeURIComponent(window.location.pathname)}`;
});
Method 8: Shopify Javascript API
document.querySelector('.shopify-api-button').addEventListener('click', function() {
const variantId = this.dataset.variantId;
const item = { id: variantId, quantity: 1 };
if (typeof ShopifyAPI !== 'undefined' && ShopifyAPI.addItemFromForm) {
ShopifyAPI.addItemFromForm('bundle-form', item, function() {
// Success callback
console.log('Added to cart');
document.getElementById('result-8-6906984923225').textContent = 'Added successfully using ShopifyAPI';
document.getElementById('result-8-6906984923225').style.display = 'block';
});
} else {
// Fallback to standard fetch
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [item] })
})
.then(response => response.json())
.then(data => {
console.log('Added to cart:', data);
document.getElementById('result-8-6906984923225').textContent = 'Fallback: ' + JSON.stringify(data, null, 2);
document.getElementById('result-8-6906984923225').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result-8-6906984923225').textContent = 'Error: ' + error;
document.getElementById('result-8-6906984923225').style.display = 'block';
});
}
});
Method 9: Using XMLHttpRequest
function addBundleToCart(bundleId, resultElement) {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/cart/add.js', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('Added to cart:', JSON.parse(xhr.responseText));
resultElement.textContent = xhr.responseText;
resultElement.style.display = 'block';
} else {
console.error('Error:', xhr.statusText);
resultElement.textContent = 'Error: ' + xhr.statusText;
resultElement.style.display = 'block';
}
}
};
xhr.send(JSON.stringify({ items: [{ id: bundleId, quantity: 1 }] }));
}
document.querySelector('.xhr-button').addEventListener('click', function() {
const resultElement = document.getElementById('result-9-6906984923225');
addBundleToCart(this.dataset.variantId, resultElement);
});
Method 10: Shopify Cart API with Line Items
function addBundleToCart(bundleId, resultElement) {
fetch('/cart.js')
.then(response => response.json())
.then(cart => {
// Get current cart
console.log('Current cart:', cart);
// Add bundle item
return fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: bundleId, quantity: 1 }] })
});
})
.then(response => response.json())
.then(updatedCart => {
console.log('Cart updated:', updatedCart);
resultElement.textContent = JSON.stringify(updatedCart, null, 2);
resultElement.style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
resultElement.textContent = 'Error: ' + error;
resultElement.style.display = 'block';
});
}
document.querySelector('.cart-api-button').addEventListener('click', function() {
const resultElement = document.getElementById('result-10-6906984923225');
addBundleToCart(this.dataset.variantId, resultElement);
});
Method 11: Product ID → Variant ID Conversion
function addProductToCart(productId, resultElement) {
console.log('Starting to add product to cart, with Product ID:', productId);
resultElement.textContent = 'Fetching product data...';
resultElement.style.display = 'block';
// First fetch the product data to get the default variant ID
fetch(`/products/${productId}.js`)
.then(response => response.json())
.then(productData => {
console.log('Product data fetched:', productData);
resultElement.textContent += '\nProduct data fetched. Variants: ' + productData.variants.length;
// Find the first available variant, or default to the first one
const variant = productData.variants.find(v => v.available) || productData.variants[0];
if (!variant) {
throw new Error('No variants found for this product');
}
console.log('Selected variant ID:', variant.id);
resultElement.textContent += '\nSelected variant ID: ' + variant.id;
// Now add the variant to cart
return fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: variant.id, quantity: 1 }] })
});
})
.then(response => response.json())
.then(data => {
console.log('Successfully added to cart:', data);
resultElement.textContent += '\nSuccessfully added to cart: ' + JSON.stringify(data, null, 2);
// Trigger cart update event that your cart drawer might listen for
document.dispatchEvent(new CustomEvent('cart:refresh'));
document.dispatchEvent(new CustomEvent('cart:added'));
// Try to open cart drawer if functions exist
if (typeof window.UpcartShopify !== 'undefined' && typeof window.UpcartShopify.openCart === 'function') {
window.UpcartShopify.openCart();
} else if (typeof window.openCartDrawer === 'function') {
window.openCartDrawer();
}
})
.catch(error => {
console.error('Error adding to cart:', error);
resultElement.textContent += '\nError: ' + error;
});
}
document.querySelector('.product-id-button').addEventListener('click', function() {
const resultElement = document.getElementById('result-11-6906984923225');
addProductToCart(this.dataset.productId, resultElement);
});
Team Tactics
£125.00
Bundle Product Variant: team-tactics-complete-package, ID: 7877056233561
Method 1: Standard Form with Hidden Input
<form action="/cart/add" method="post" class="standard-form">
<input type="hidden" name="id" value="7877056233561">
<input type="hidden" name="quantity" value="1">
<button type="submit">Add Bundle to Cart</button>
</form>
Method 2: Ajax POST with fetch API
const addToCart = (variantId) => {
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: variantId, quantity: 1 }] })
})
.then(response => response.json())
.then(data => {
console.log('Added to cart:', data);
// Show result
document.getElementById('result-2-7005753507929').textContent = JSON.stringify(data, null, 2);
document.getElementById('result-2-7005753507929').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result-2-7005753507929').textContent = 'Error: ' + error;
document.getElementById('result-2-7005753507929').style.display = 'block';
});
};
Method 3: Direct URL Approach
Add Bundle to Cart
<a href="/cart/add?id=7877056233561&quantity=1">Add Bundle to Cart</a>
Method 4: jQuery AJAX
$('.jquery-ajax-button').click(function() {
var variantId = $(this).data('variant-id');
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: { id: variantId, quantity: 1 },
dataType: 'json',
success: function(data) {
console.log('Added to cart:', data);
$('#result-4-7005753507929').text(JSON.stringify(data, null, 2)).show();
},
error: function(error) {
console.error('Error:', error);
$('#result-4-7005753507929').text('Error: ' + JSON.stringify(error)).show();
}
});
});
Method 5: Form with Select Element
<form action="/cart/add" method="post">
<select name="id">
<option value="42030345224281">Team Tactics</option>
<option value="7877056233561" selected>Bundle Option</option>
</select>
<button type="submit">Add to Cart</button>
</form>
Method 6: FormData API
document.querySelector('.formdata-form').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData();
formData.append('id', this.dataset.variantId);
formData.append('quantity', 1);
fetch('/cart/add.js', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('Added to cart:', data);
document.getElementById('result-6-7005753507929').textContent = JSON.stringify(data, null, 2);
document.getElementById('result-6-7005753507929').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result-6-7005753507929').textContent = 'Error: ' + error;
document.getElementById('result-6-7005753507929').style.display = 'block';
});
});
Method 7: Window Location Redirect
document.querySelector('.redirect-button').addEventListener('click', function() {
const variantId = this.dataset.variantId;
window.location.href = `/cart/add?id=${variantId}&quantity=1&return_to=${encodeURIComponent(window.location.pathname)}`;
});
Method 8: Shopify Javascript API
document.querySelector('.shopify-api-button').addEventListener('click', function() {
const variantId = this.dataset.variantId;
const item = { id: variantId, quantity: 1 };
if (typeof ShopifyAPI !== 'undefined' && ShopifyAPI.addItemFromForm) {
ShopifyAPI.addItemFromForm('bundle-form', item, function() {
// Success callback
console.log('Added to cart');
document.getElementById('result-8-7005753507929').textContent = 'Added successfully using ShopifyAPI';
document.getElementById('result-8-7005753507929').style.display = 'block';
});
} else {
// Fallback to standard fetch
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [item] })
})
.then(response => response.json())
.then(data => {
console.log('Added to cart:', data);
document.getElementById('result-8-7005753507929').textContent = 'Fallback: ' + JSON.stringify(data, null, 2);
document.getElementById('result-8-7005753507929').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result-8-7005753507929').textContent = 'Error: ' + error;
document.getElementById('result-8-7005753507929').style.display = 'block';
});
}
});
Method 9: Using XMLHttpRequest
function addBundleToCart(bundleId, resultElement) {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/cart/add.js', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('Added to cart:', JSON.parse(xhr.responseText));
resultElement.textContent = xhr.responseText;
resultElement.style.display = 'block';
} else {
console.error('Error:', xhr.statusText);
resultElement.textContent = 'Error: ' + xhr.statusText;
resultElement.style.display = 'block';
}
}
};
xhr.send(JSON.stringify({ items: [{ id: bundleId, quantity: 1 }] }));
}
document.querySelector('.xhr-button').addEventListener('click', function() {
const resultElement = document.getElementById('result-9-7005753507929');
addBundleToCart(this.dataset.variantId, resultElement);
});
Method 10: Shopify Cart API with Line Items
function addBundleToCart(bundleId, resultElement) {
fetch('/cart.js')
.then(response => response.json())
.then(cart => {
// Get current cart
console.log('Current cart:', cart);
// Add bundle item
return fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: bundleId, quantity: 1 }] })
});
})
.then(response => response.json())
.then(updatedCart => {
console.log('Cart updated:', updatedCart);
resultElement.textContent = JSON.stringify(updatedCart, null, 2);
resultElement.style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
resultElement.textContent = 'Error: ' + error;
resultElement.style.display = 'block';
});
}
document.querySelector('.cart-api-button').addEventListener('click', function() {
const resultElement = document.getElementById('result-10-7005753507929');
addBundleToCart(this.dataset.variantId, resultElement);
});
Method 11: Product ID → Variant ID Conversion
function addProductToCart(productId, resultElement) {
console.log('Starting to add product to cart, with Product ID:', productId);
resultElement.textContent = 'Fetching product data...';
resultElement.style.display = 'block';
// First fetch the product data to get the default variant ID
fetch(`/products/${productId}.js`)
.then(response => response.json())
.then(productData => {
console.log('Product data fetched:', productData);
resultElement.textContent += '\nProduct data fetched. Variants: ' + productData.variants.length;
// Find the first available variant, or default to the first one
const variant = productData.variants.find(v => v.available) || productData.variants[0];
if (!variant) {
throw new Error('No variants found for this product');
}
console.log('Selected variant ID:', variant.id);
resultElement.textContent += '\nSelected variant ID: ' + variant.id;
// Now add the variant to cart
return fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: variant.id, quantity: 1 }] })
});
})
.then(response => response.json())
.then(data => {
console.log('Successfully added to cart:', data);
resultElement.textContent += '\nSuccessfully added to cart: ' + JSON.stringify(data, null, 2);
// Trigger cart update event that your cart drawer might listen for
document.dispatchEvent(new CustomEvent('cart:refresh'));
document.dispatchEvent(new CustomEvent('cart:added'));
// Try to open cart drawer if functions exist
if (typeof window.UpcartShopify !== 'undefined' && typeof window.UpcartShopify.openCart === 'function') {
window.UpcartShopify.openCart();
} else if (typeof window.openCartDrawer === 'function') {
window.openCartDrawer();
}
})
.catch(error => {
console.error('Error adding to cart:', error);
resultElement.textContent += '\nError: ' + error;
});
}
document.querySelector('.product-id-button').addEventListener('click', function() {
const resultElement = document.getElementById('result-11-7005753507929');
addProductToCart(this.dataset.productId, resultElement);
});
Workshop Tactics
£125.00
Bundle Product Variant: workshop-tactics-complete-package, ID: 7877056987225
Method 1: Standard Form with Hidden Input
<form action="/cart/add" method="post" class="standard-form">
<input type="hidden" name="id" value="7877056987225">
<input type="hidden" name="quantity" value="1">
<button type="submit">Add Bundle to Cart</button>
</form>
Method 2: Ajax POST with fetch API
const addToCart = (variantId) => {
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: variantId, quantity: 1 }] })
})
.then(response => response.json())
.then(data => {
console.log('Added to cart:', data);
// Show result
document.getElementById('result-2-2196114145331').textContent = JSON.stringify(data, null, 2);
document.getElementById('result-2-2196114145331').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result-2-2196114145331').textContent = 'Error: ' + error;
document.getElementById('result-2-2196114145331').style.display = 'block';
});
};
Method 3: Direct URL Approach
Add Bundle to Cart
<a href="/cart/add?id=7877056987225&quantity=1">Add Bundle to Cart</a>
Method 4: jQuery AJAX
$('.jquery-ajax-button').click(function() {
var variantId = $(this).data('variant-id');
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: { id: variantId, quantity: 1 },
dataType: 'json',
success: function(data) {
console.log('Added to cart:', data);
$('#result-4-2196114145331').text(JSON.stringify(data, null, 2)).show();
},
error: function(error) {
console.error('Error:', error);
$('#result-4-2196114145331').text('Error: ' + JSON.stringify(error)).show();
}
});
});
Method 5: Form with Select Element
<form action="/cart/add" method="post">
<select name="id">
<option value="42030344732761">Workshop Tactics</option>
<option value="7877056987225" selected>Bundle Option</option>
</select>
<button type="submit">Add to Cart</button>
</form>
Method 6: FormData API
document.querySelector('.formdata-form').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData();
formData.append('id', this.dataset.variantId);
formData.append('quantity', 1);
fetch('/cart/add.js', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('Added to cart:', data);
document.getElementById('result-6-2196114145331').textContent = JSON.stringify(data, null, 2);
document.getElementById('result-6-2196114145331').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result-6-2196114145331').textContent = 'Error: ' + error;
document.getElementById('result-6-2196114145331').style.display = 'block';
});
});
Method 7: Window Location Redirect
document.querySelector('.redirect-button').addEventListener('click', function() {
const variantId = this.dataset.variantId;
window.location.href = `/cart/add?id=${variantId}&quantity=1&return_to=${encodeURIComponent(window.location.pathname)}`;
});
Method 8: Shopify Javascript API
document.querySelector('.shopify-api-button').addEventListener('click', function() {
const variantId = this.dataset.variantId;
const item = { id: variantId, quantity: 1 };
if (typeof ShopifyAPI !== 'undefined' && ShopifyAPI.addItemFromForm) {
ShopifyAPI.addItemFromForm('bundle-form', item, function() {
// Success callback
console.log('Added to cart');
document.getElementById('result-8-2196114145331').textContent = 'Added successfully using ShopifyAPI';
document.getElementById('result-8-2196114145331').style.display = 'block';
});
} else {
// Fallback to standard fetch
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [item] })
})
.then(response => response.json())
.then(data => {
console.log('Added to cart:', data);
document.getElementById('result-8-2196114145331').textContent = 'Fallback: ' + JSON.stringify(data, null, 2);
document.getElementById('result-8-2196114145331').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result-8-2196114145331').textContent = 'Error: ' + error;
document.getElementById('result-8-2196114145331').style.display = 'block';
});
}
});
Method 9: Using XMLHttpRequest
function addBundleToCart(bundleId, resultElement) {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/cart/add.js', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('Added to cart:', JSON.parse(xhr.responseText));
resultElement.textContent = xhr.responseText;
resultElement.style.display = 'block';
} else {
console.error('Error:', xhr.statusText);
resultElement.textContent = 'Error: ' + xhr.statusText;
resultElement.style.display = 'block';
}
}
};
xhr.send(JSON.stringify({ items: [{ id: bundleId, quantity: 1 }] }));
}
document.querySelector('.xhr-button').addEventListener('click', function() {
const resultElement = document.getElementById('result-9-2196114145331');
addBundleToCart(this.dataset.variantId, resultElement);
});
Method 10: Shopify Cart API with Line Items
function addBundleToCart(bundleId, resultElement) {
fetch('/cart.js')
.then(response => response.json())
.then(cart => {
// Get current cart
console.log('Current cart:', cart);
// Add bundle item
return fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: bundleId, quantity: 1 }] })
});
})
.then(response => response.json())
.then(updatedCart => {
console.log('Cart updated:', updatedCart);
resultElement.textContent = JSON.stringify(updatedCart, null, 2);
resultElement.style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
resultElement.textContent = 'Error: ' + error;
resultElement.style.display = 'block';
});
}
document.querySelector('.cart-api-button').addEventListener('click', function() {
const resultElement = document.getElementById('result-10-2196114145331');
addBundleToCart(this.dataset.variantId, resultElement);
});
Method 11: Product ID → Variant ID Conversion
function addProductToCart(productId, resultElement) {
console.log('Starting to add product to cart, with Product ID:', productId);
resultElement.textContent = 'Fetching product data...';
resultElement.style.display = 'block';
// First fetch the product data to get the default variant ID
fetch(`/products/${productId}.js`)
.then(response => response.json())
.then(productData => {
console.log('Product data fetched:', productData);
resultElement.textContent += '\nProduct data fetched. Variants: ' + productData.variants.length;
// Find the first available variant, or default to the first one
const variant = productData.variants.find(v => v.available) || productData.variants[0];
if (!variant) {
throw new Error('No variants found for this product');
}
console.log('Selected variant ID:', variant.id);
resultElement.textContent += '\nSelected variant ID: ' + variant.id;
// Now add the variant to cart
return fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: variant.id, quantity: 1 }] })
});
})
.then(response => response.json())
.then(data => {
console.log('Successfully added to cart:', data);
resultElement.textContent += '\nSuccessfully added to cart: ' + JSON.stringify(data, null, 2);
// Trigger cart update event that your cart drawer might listen for
document.dispatchEvent(new CustomEvent('cart:refresh'));
document.dispatchEvent(new CustomEvent('cart:added'));
// Try to open cart drawer if functions exist
if (typeof window.UpcartShopify !== 'undefined' && typeof window.UpcartShopify.openCart === 'function') {
window.UpcartShopify.openCart();
} else if (typeof window.openCartDrawer === 'function') {
window.openCartDrawer();
}
})
.catch(error => {
console.error('Error adding to cart:', error);
resultElement.textContent += '\nError: ' + error;
});
}
document.querySelector('.product-id-button').addEventListener('click', function() {
const resultElement = document.getElementById('result-11-2196114145331');
addProductToCart(this.dataset.productId, resultElement);
});
Idea Tactics
£125.00
Bundle Product Variant: idea-tactics-complete-package, ID: 7877048041561
Method 1: Standard Form with Hidden Input
<form action="/cart/add" method="post" class="standard-form">
<input type="hidden" name="id" value="7877048041561">
<input type="hidden" name="quantity" value="1">
<button type="submit">Add Bundle to Cart</button>
</form>
Method 2: Ajax POST with fetch API
const addToCart = (variantId) => {
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: variantId, quantity: 1 }] })
})
.then(response => response.json())
.then(data => {
console.log('Added to cart:', data);
// Show result
document.getElementById('result-2-7005753213017').textContent = JSON.stringify(data, null, 2);
document.getElementById('result-2-7005753213017').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result-2-7005753213017').textContent = 'Error: ' + error;
document.getElementById('result-2-7005753213017').style.display = 'block';
});
};
Method 3: Direct URL Approach
Add Bundle to Cart
<a href="/cart/add?id=7877048041561&quantity=1">Add Bundle to Cart</a>
Method 4: jQuery AJAX
$('.jquery-ajax-button').click(function() {
var variantId = $(this).data('variant-id');
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: { id: variantId, quantity: 1 },
dataType: 'json',
success: function(data) {
console.log('Added to cart:', data);
$('#result-4-7005753213017').text(JSON.stringify(data, null, 2)).show();
},
error: function(error) {
console.error('Error:', error);
$('#result-4-7005753213017').text('Error: ' + JSON.stringify(error)).show();
}
});
});
Method 5: Form with Select Element
<form action="/cart/add" method="post">
<select name="id">
<option value="42030345158745">Idea Tactics</option>
<option value="7877048041561" selected>Bundle Option</option>
</select>
<button type="submit">Add to Cart</button>
</form>
Method 6: FormData API
document.querySelector('.formdata-form').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData();
formData.append('id', this.dataset.variantId);
formData.append('quantity', 1);
fetch('/cart/add.js', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('Added to cart:', data);
document.getElementById('result-6-7005753213017').textContent = JSON.stringify(data, null, 2);
document.getElementById('result-6-7005753213017').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result-6-7005753213017').textContent = 'Error: ' + error;
document.getElementById('result-6-7005753213017').style.display = 'block';
});
});
Method 7: Window Location Redirect
document.querySelector('.redirect-button').addEventListener('click', function() {
const variantId = this.dataset.variantId;
window.location.href = `/cart/add?id=${variantId}&quantity=1&return_to=${encodeURIComponent(window.location.pathname)}`;
});
Method 8: Shopify Javascript API
document.querySelector('.shopify-api-button').addEventListener('click', function() {
const variantId = this.dataset.variantId;
const item = { id: variantId, quantity: 1 };
if (typeof ShopifyAPI !== 'undefined' && ShopifyAPI.addItemFromForm) {
ShopifyAPI.addItemFromForm('bundle-form', item, function() {
// Success callback
console.log('Added to cart');
document.getElementById('result-8-7005753213017').textContent = 'Added successfully using ShopifyAPI';
document.getElementById('result-8-7005753213017').style.display = 'block';
});
} else {
// Fallback to standard fetch
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [item] })
})
.then(response => response.json())
.then(data => {
console.log('Added to cart:', data);
document.getElementById('result-8-7005753213017').textContent = 'Fallback: ' + JSON.stringify(data, null, 2);
document.getElementById('result-8-7005753213017').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result-8-7005753213017').textContent = 'Error: ' + error;
document.getElementById('result-8-7005753213017').style.display = 'block';
});
}
});
Method 9: Using XMLHttpRequest
function addBundleToCart(bundleId, resultElement) {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/cart/add.js', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('Added to cart:', JSON.parse(xhr.responseText));
resultElement.textContent = xhr.responseText;
resultElement.style.display = 'block';
} else {
console.error('Error:', xhr.statusText);
resultElement.textContent = 'Error: ' + xhr.statusText;
resultElement.style.display = 'block';
}
}
};
xhr.send(JSON.stringify({ items: [{ id: bundleId, quantity: 1 }] }));
}
document.querySelector('.xhr-button').addEventListener('click', function() {
const resultElement = document.getElementById('result-9-7005753213017');
addBundleToCart(this.dataset.variantId, resultElement);
});
Method 10: Shopify Cart API with Line Items
function addBundleToCart(bundleId, resultElement) {
fetch('/cart.js')
.then(response => response.json())
.then(cart => {
// Get current cart
console.log('Current cart:', cart);
// Add bundle item
return fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: bundleId, quantity: 1 }] })
});
})
.then(response => response.json())
.then(updatedCart => {
console.log('Cart updated:', updatedCart);
resultElement.textContent = JSON.stringify(updatedCart, null, 2);
resultElement.style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
resultElement.textContent = 'Error: ' + error;
resultElement.style.display = 'block';
});
}
document.querySelector('.cart-api-button').addEventListener('click', function() {
const resultElement = document.getElementById('result-10-7005753213017');
addBundleToCart(this.dataset.variantId, resultElement);
});
Method 11: Product ID → Variant ID Conversion
function addProductToCart(productId, resultElement) {
console.log('Starting to add product to cart, with Product ID:', productId);
resultElement.textContent = 'Fetching product data...';
resultElement.style.display = 'block';
// First fetch the product data to get the default variant ID
fetch(`/products/${productId}.js`)
.then(response => response.json())
.then(productData => {
console.log('Product data fetched:', productData);
resultElement.textContent += '\nProduct data fetched. Variants: ' + productData.variants.length;
// Find the first available variant, or default to the first one
const variant = productData.variants.find(v => v.available) || productData.variants[0];
if (!variant) {
throw new Error('No variants found for this product');
}
console.log('Selected variant ID:', variant.id);
resultElement.textContent += '\nSelected variant ID: ' + variant.id;
// Now add the variant to cart
return fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: variant.id, quantity: 1 }] })
});
})
.then(response => response.json())
.then(data => {
console.log('Successfully added to cart:', data);
resultElement.textContent += '\nSuccessfully added to cart: ' + JSON.stringify(data, null, 2);
// Trigger cart update event that your cart drawer might listen for
document.dispatchEvent(new CustomEvent('cart:refresh'));
document.dispatchEvent(new CustomEvent('cart:added'));
// Try to open cart drawer if functions exist
if (typeof window.UpcartShopify !== 'undefined' && typeof window.UpcartShopify.openCart === 'function') {
window.UpcartShopify.openCart();
} else if (typeof window.openCartDrawer === 'function') {
window.openCartDrawer();
}
})
.catch(error => {
console.error('Error adding to cart:', error);
resultElement.textContent += '\nError: ' + error;
});
}
document.querySelector('.product-id-button').addEventListener('click', function() {
const resultElement = document.getElementById('result-11-7005753213017');
addProductToCart(this.dataset.productId, resultElement);
});
Productivity Tactics
£125.00
Bundle Product Variant: productivity-tactics-complete-package, ID: 7877054005337
Method 1: Standard Form with Hidden Input
<form action="/cart/add" method="post" class="standard-form">
<input type="hidden" name="id" value="7877054005337">
<input type="hidden" name="quantity" value="1">
<button type="submit">Add Bundle to Cart</button>
</form>
Method 2: Ajax POST with fetch API
const addToCart = (variantId) => {
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: variantId, quantity: 1 }] })
})
.then(response => response.json())
.then(data => {
console.log('Added to cart:', data);
// Show result
document.getElementById('result-2-7140257366105').textContent = JSON.stringify(data, null, 2);
document.getElementById('result-2-7140257366105').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result-2-7140257366105').textContent = 'Error: ' + error;
document.getElementById('result-2-7140257366105').style.display = 'block';
});
};
Method 3: Direct URL Approach
Add Bundle to Cart
<a href="/cart/add?id=7877054005337&quantity=1">Add Bundle to Cart</a>
Method 4: jQuery AJAX
$('.jquery-ajax-button').click(function() {
var variantId = $(this).data('variant-id');
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: { id: variantId, quantity: 1 },
dataType: 'json',
success: function(data) {
console.log('Added to cart:', data);
$('#result-4-7140257366105').text(JSON.stringify(data, null, 2)).show();
},
error: function(error) {
console.error('Error:', error);
$('#result-4-7140257366105').text('Error: ' + JSON.stringify(error)).show();
}
});
});
Method 5: Form with Select Element
<form action="/cart/add" method="post">
<select name="id">
<option value="42030345322585">Productivity Tactics</option>
<option value="7877054005337" selected>Bundle Option</option>
</select>
<button type="submit">Add to Cart</button>
</form>
Method 6: FormData API
document.querySelector('.formdata-form').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData();
formData.append('id', this.dataset.variantId);
formData.append('quantity', 1);
fetch('/cart/add.js', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('Added to cart:', data);
document.getElementById('result-6-7140257366105').textContent = JSON.stringify(data, null, 2);
document.getElementById('result-6-7140257366105').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result-6-7140257366105').textContent = 'Error: ' + error;
document.getElementById('result-6-7140257366105').style.display = 'block';
});
});
Method 7: Window Location Redirect
document.querySelector('.redirect-button').addEventListener('click', function() {
const variantId = this.dataset.variantId;
window.location.href = `/cart/add?id=${variantId}&quantity=1&return_to=${encodeURIComponent(window.location.pathname)}`;
});
Method 8: Shopify Javascript API
document.querySelector('.shopify-api-button').addEventListener('click', function() {
const variantId = this.dataset.variantId;
const item = { id: variantId, quantity: 1 };
if (typeof ShopifyAPI !== 'undefined' && ShopifyAPI.addItemFromForm) {
ShopifyAPI.addItemFromForm('bundle-form', item, function() {
// Success callback
console.log('Added to cart');
document.getElementById('result-8-7140257366105').textContent = 'Added successfully using ShopifyAPI';
document.getElementById('result-8-7140257366105').style.display = 'block';
});
} else {
// Fallback to standard fetch
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [item] })
})
.then(response => response.json())
.then(data => {
console.log('Added to cart:', data);
document.getElementById('result-8-7140257366105').textContent = 'Fallback: ' + JSON.stringify(data, null, 2);
document.getElementById('result-8-7140257366105').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result-8-7140257366105').textContent = 'Error: ' + error;
document.getElementById('result-8-7140257366105').style.display = 'block';
});
}
});
Method 9: Using XMLHttpRequest
function addBundleToCart(bundleId, resultElement) {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/cart/add.js', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('Added to cart:', JSON.parse(xhr.responseText));
resultElement.textContent = xhr.responseText;
resultElement.style.display = 'block';
} else {
console.error('Error:', xhr.statusText);
resultElement.textContent = 'Error: ' + xhr.statusText;
resultElement.style.display = 'block';
}
}
};
xhr.send(JSON.stringify({ items: [{ id: bundleId, quantity: 1 }] }));
}
document.querySelector('.xhr-button').addEventListener('click', function() {
const resultElement = document.getElementById('result-9-7140257366105');
addBundleToCart(this.dataset.variantId, resultElement);
});
Method 10: Shopify Cart API with Line Items
function addBundleToCart(bundleId, resultElement) {
fetch('/cart.js')
.then(response => response.json())
.then(cart => {
// Get current cart
console.log('Current cart:', cart);
// Add bundle item
return fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: bundleId, quantity: 1 }] })
});
})
.then(response => response.json())
.then(updatedCart => {
console.log('Cart updated:', updatedCart);
resultElement.textContent = JSON.stringify(updatedCart, null, 2);
resultElement.style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
resultElement.textContent = 'Error: ' + error;
resultElement.style.display = 'block';
});
}
document.querySelector('.cart-api-button').addEventListener('click', function() {
const resultElement = document.getElementById('result-10-7140257366105');
addBundleToCart(this.dataset.variantId, resultElement);
});
Method 11: Product ID → Variant ID Conversion
function addProductToCart(productId, resultElement) {
console.log('Starting to add product to cart, with Product ID:', productId);
resultElement.textContent = 'Fetching product data...';
resultElement.style.display = 'block';
// First fetch the product data to get the default variant ID
fetch(`/products/${productId}.js`)
.then(response => response.json())
.then(productData => {
console.log('Product data fetched:', productData);
resultElement.textContent += '\nProduct data fetched. Variants: ' + productData.variants.length;
// Find the first available variant, or default to the first one
const variant = productData.variants.find(v => v.available) || productData.variants[0];
if (!variant) {
throw new Error('No variants found for this product');
}
console.log('Selected variant ID:', variant.id);
resultElement.textContent += '\nSelected variant ID: ' + variant.id;
// Now add the variant to cart
return fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: variant.id, quantity: 1 }] })
});
})
.then(response => response.json())
.then(data => {
console.log('Successfully added to cart:', data);
resultElement.textContent += '\nSuccessfully added to cart: ' + JSON.stringify(data, null, 2);
// Trigger cart update event that your cart drawer might listen for
document.dispatchEvent(new CustomEvent('cart:refresh'));
document.dispatchEvent(new CustomEvent('cart:added'));
// Try to open cart drawer if functions exist
if (typeof window.UpcartShopify !== 'undefined' && typeof window.UpcartShopify.openCart === 'function') {
window.UpcartShopify.openCart();
} else if (typeof window.openCartDrawer === 'function') {
window.openCartDrawer();
}
})
.catch(error => {
console.error('Error adding to cart:', error);
resultElement.textContent += '\nError: ' + error;
});
}
document.querySelector('.product-id-button').addEventListener('click', function() {
const resultElement = document.getElementById('result-11-7140257366105');
addProductToCart(this.dataset.productId, resultElement);
});
Strategy Tactics
£125.00
Bundle Product Variant: strategy-tactics-complete-package, ID: 7877054955609
Method 1: Standard Form with Hidden Input
<form action="/cart/add" method="post" class="standard-form">
<input type="hidden" name="id" value="7877054955609">
<input type="hidden" name="quantity" value="1">
<button type="submit">Add Bundle to Cart</button>
</form>
Method 2: Ajax POST with fetch API
const addToCart = (variantId) => {
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: variantId, quantity: 1 }] })
})
.then(response => response.json())
.then(data => {
console.log('Added to cart:', data);
// Show result
document.getElementById('result-2-7005749543001').textContent = JSON.stringify(data, null, 2);
document.getElementById('result-2-7005749543001').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result-2-7005749543001').textContent = 'Error: ' + error;
document.getElementById('result-2-7005749543001').style.display = 'block';
});
};
Method 3: Direct URL Approach
Add Bundle to Cart
<a href="/cart/add?id=7877054955609&quantity=1">Add Bundle to Cart</a>
Method 4: jQuery AJAX
$('.jquery-ajax-button').click(function() {
var variantId = $(this).data('variant-id');
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: { id: variantId, quantity: 1 },
dataType: 'json',
success: function(data) {
console.log('Added to cart:', data);
$('#result-4-7005749543001').text(JSON.stringify(data, null, 2)).show();
},
error: function(error) {
console.error('Error:', error);
$('#result-4-7005749543001').text('Error: ' + JSON.stringify(error)).show();
}
});
});
Method 5: Form with Select Element
<form action="/cart/add" method="post">
<select name="id">
<option value="42030345027673">Strategy Tactics</option>
<option value="7877054955609" selected>Bundle Option</option>
</select>
<button type="submit">Add to Cart</button>
</form>
Method 6: FormData API
document.querySelector('.formdata-form').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData();
formData.append('id', this.dataset.variantId);
formData.append('quantity', 1);
fetch('/cart/add.js', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('Added to cart:', data);
document.getElementById('result-6-7005749543001').textContent = JSON.stringify(data, null, 2);
document.getElementById('result-6-7005749543001').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result-6-7005749543001').textContent = 'Error: ' + error;
document.getElementById('result-6-7005749543001').style.display = 'block';
});
});
Method 7: Window Location Redirect
document.querySelector('.redirect-button').addEventListener('click', function() {
const variantId = this.dataset.variantId;
window.location.href = `/cart/add?id=${variantId}&quantity=1&return_to=${encodeURIComponent(window.location.pathname)}`;
});
Method 8: Shopify Javascript API
document.querySelector('.shopify-api-button').addEventListener('click', function() {
const variantId = this.dataset.variantId;
const item = { id: variantId, quantity: 1 };
if (typeof ShopifyAPI !== 'undefined' && ShopifyAPI.addItemFromForm) {
ShopifyAPI.addItemFromForm('bundle-form', item, function() {
// Success callback
console.log('Added to cart');
document.getElementById('result-8-7005749543001').textContent = 'Added successfully using ShopifyAPI';
document.getElementById('result-8-7005749543001').style.display = 'block';
});
} else {
// Fallback to standard fetch
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [item] })
})
.then(response => response.json())
.then(data => {
console.log('Added to cart:', data);
document.getElementById('result-8-7005749543001').textContent = 'Fallback: ' + JSON.stringify(data, null, 2);
document.getElementById('result-8-7005749543001').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result-8-7005749543001').textContent = 'Error: ' + error;
document.getElementById('result-8-7005749543001').style.display = 'block';
});
}
});
Method 9: Using XMLHttpRequest
function addBundleToCart(bundleId, resultElement) {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/cart/add.js', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('Added to cart:', JSON.parse(xhr.responseText));
resultElement.textContent = xhr.responseText;
resultElement.style.display = 'block';
} else {
console.error('Error:', xhr.statusText);
resultElement.textContent = 'Error: ' + xhr.statusText;
resultElement.style.display = 'block';
}
}
};
xhr.send(JSON.stringify({ items: [{ id: bundleId, quantity: 1 }] }));
}
document.querySelector('.xhr-button').addEventListener('click', function() {
const resultElement = document.getElementById('result-9-7005749543001');
addBundleToCart(this.dataset.variantId, resultElement);
});
Method 10: Shopify Cart API with Line Items
function addBundleToCart(bundleId, resultElement) {
fetch('/cart.js')
.then(response => response.json())
.then(cart => {
// Get current cart
console.log('Current cart:', cart);
// Add bundle item
return fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: bundleId, quantity: 1 }] })
});
})
.then(response => response.json())
.then(updatedCart => {
console.log('Cart updated:', updatedCart);
resultElement.textContent = JSON.stringify(updatedCart, null, 2);
resultElement.style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
resultElement.textContent = 'Error: ' + error;
resultElement.style.display = 'block';
});
}
document.querySelector('.cart-api-button').addEventListener('click', function() {
const resultElement = document.getElementById('result-10-7005749543001');
addBundleToCart(this.dataset.variantId, resultElement);
});
Method 11: Product ID → Variant ID Conversion
function addProductToCart(productId, resultElement) {
console.log('Starting to add product to cart, with Product ID:', productId);
resultElement.textContent = 'Fetching product data...';
resultElement.style.display = 'block';
// First fetch the product data to get the default variant ID
fetch(`/products/${productId}.js`)
.then(response => response.json())
.then(productData => {
console.log('Product data fetched:', productData);
resultElement.textContent += '\nProduct data fetched. Variants: ' + productData.variants.length;
// Find the first available variant, or default to the first one
const variant = productData.variants.find(v => v.available) || productData.variants[0];
if (!variant) {
throw new Error('No variants found for this product');
}
console.log('Selected variant ID:', variant.id);
resultElement.textContent += '\nSelected variant ID: ' + variant.id;
// Now add the variant to cart
return fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: variant.id, quantity: 1 }] })
});
})
.then(response => response.json())
.then(data => {
console.log('Successfully added to cart:', data);
resultElement.textContent += '\nSuccessfully added to cart: ' + JSON.stringify(data, null, 2);
// Trigger cart update event that your cart drawer might listen for
document.dispatchEvent(new CustomEvent('cart:refresh'));
document.dispatchEvent(new CustomEvent('cart:added'));
// Try to open cart drawer if functions exist
if (typeof window.UpcartShopify !== 'undefined' && typeof window.UpcartShopify.openCart === 'function') {
window.UpcartShopify.openCart();
} else if (typeof window.openCartDrawer === 'function') {
window.openCartDrawer();
}
})
.catch(error => {
console.error('Error adding to cart:', error);
resultElement.textContent += '\nError: ' + error;
});
}
document.querySelector('.product-id-button').addEventListener('click', function() {
const resultElement = document.getElementById('result-11-7005749543001');
addProductToCart(this.dataset.productId, resultElement);
});
Featured collection
Storyteller Tactics®
£125.00
Team Tactics™
£125.00
Workshop Tactics®
£125.00
Idea Tactics®
£125.00
Productivity Tactics®
£125.00
Strategy Tactics®
£125.00
Brand Tactics®
£125.00
Innovation Tactics®
£125.00
Negotiation Tactics
£125.00
Copywriting Tactics
£149.00