- Structure
- Liquid Section
- Javascript
- FoxSell JS Object
json
Volume Bundle Settings JSON
Hide fields
Hide fields
string
ID of the bundle within the app
boolean
If Bundle is set
active on the applist of discounts
Add this snippet as a section in your theme to see the values of the metafield
{% liquid
assign namespace = 'foxbundle'
assign volume_bundle_config = product.metafields[namespace].volume_bundle_settings.value
assign bundle_id = volume_bundle_config.id
assign active = volume_bundle_config.active
assign widget_settings = volume_bundle_config.widget_settings
assign discounts = volume_bundle_config.discounts
%}
<p><strong>Bundle ID: </strong>{{ bundle_id }}</p>
<p><strong>Available Variant Ids: </strong>{{ volume_bundle_config.variants }}</p>
<p>
<strong>Active: </strong>
{{ active }}
</p>
<p><strong>Widget Settings:</strong></p>
<p>{{ widget_settings | json }}</p>
<p><strong>Discounts:</strong></p>
{% for discount in discounts %}
<p><strong>Title: </strong>{{ discount.title }}</p>
<p><strong>Quantity: </strong>{{ discount.quantity }}</p>
<p><strong>Percentage: </strong>{{ discount.value }}%</p>
{% endfor %}
{% schema %}
{
"name": "FoxSell VB Snippet",
"tag": "section",
"blocks": [],
"settings": [
],
"presets": [
{
"name": "FoxSell VB Snippet"
}
]
}
{% endschema %}
Below is a simplified example that uses the
fetch API to add a bundle to the cart.A unique bundle identifier is generated using the bundle ID (assumed to be stored in a variable called bundleId) and product ID. This identifier is passed as a line item property, __foxsell:volume_bundle_id.const identifier = `${bundleId}_${productId}`
const formData = {
items: [
{
id: 5642421514254, // variant id
quantity: 5,
properties: {
"__foxsell:volume_bundle_id": identifier
}
}
]
}
fetch(window.Shopify.routes.root + 'cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
return response.json();
})
.catch((error) => {
console.error('Error:', error);
});
Add this snippet in your
liquid file to access bundle config via window.foxsell object{% liquid
assign namespace = 'foxbundle'
assign volume_bundle_config = product.metafields[namespace].volume_bundle_settings.value
assign bundle_id = volume_bundle_config.id
assign active = volume_bundle_config.active
assign widget_settings = volume_bundle_config.widget_settings
assign discounts = volume_bundle_config.discounts
assign selected_variants = volume_bundle_config.variants
%}
<script>
window.foxsell = window.foxsell || {};
window.foxsell.bundleConfig = {
id: "{{ bundle_id }}",
active: {{ active }},
discountTiers: {{ discounts | json }},
product: {{ product | json }},
widgetSettings: {{ widget_settings | json }},
selectedVariantIds: [
{% for selected_variant in selected_variants %}
'{{ selected_variant | replace: "gid://shopify/ProductVariant/", "" }}',
{% endfor %}
]
}
</script>