Volume Bundles - FoxSell Partner Docs

Structure
Liquid Section
Javascript
FoxSell JS Object

volume_bundle_config

json

Volume Bundle Settings JSON

Hide fields

string

ID of the bundle within the app

active

boolean

If Bundle is set active on the app

discounts

list of discounts

Discount Settings configured in the app

Show fields

title

string

Title of the Discount

quantity

number

Quatity to be purchased for this Discount

percentage

decimal

Percentage Off for the Discount

Widget Settings configured in the app.

Show fields

title

string

Heading of the Widget

tag_text

string

Tag Text configured in the app. Ex:

Most Popular
Best Value

show_discount_percentage

boolean

Should the Discout Percentage be Shown

show_compare_at_price

boolean

Should Compare At Price be Shown

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>

Data Structures