> ## Documentation Index
> Fetch the complete documentation index at: https://partner-docs.foxsell.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Volume Bundles

> Metafields and Metaobject Structure for Volume Bundles

<Tabs>
  <Tab title="Structure">
    <ResponseField name="volume_bundle_config" type="json">
      Volume Bundle Settings JSON

      <Expandable title="fields" defaultOpen>
        <ResponseField name="id" type="string">
          ID of the bundle within the app
        </ResponseField>

        <ResponseField name="active" type="boolean">
          If Bundle is set `active` on the app
        </ResponseField>

        <ResponseField name="discounts" type="list of discounts">
          Discount Settings configured in the app

          <Expandable title="fields">
            <ResponseField name="title" type="string">
              Title of the Discount
            </ResponseField>

            <ResponseField name="quantity" type="number">
              Quatity to be purchased for this Discount
            </ResponseField>

            <ResponseField name="percentage" type="decimal">
              Percentage Off for the Discount
            </ResponseField>
          </Expandable>
        </ResponseField>

        <ResponseField name="widget_settings" type="json">
          Widget Settings configured in the app.

          <Expandable title="fields">
            <ResponseField name="title" type="string">
              Heading of the Widget
            </ResponseField>

            <ResponseField name="tag_text" type="string">
              Tag Text configured in the app. Ex:

              * Most Popular
              * Best Value
            </ResponseField>

            <ResponseField name="show_discount_percentage" type="boolean">
              Should the Discout Percentage be Shown
            </ResponseField>

            <ResponseField name="show_compare_at_price" type="boolean">
              Should Compare At Price be Shown
            </ResponseField>
          </Expandable>
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Tab>

  <Tab title="Liquid Section">
    <Tip>
      Add this snippet as a section in your theme to see the values of the metafield
    </Tip>

    ```liquid theme={null}
    {% 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 %}
    ```
  </Tab>

  <Tab title="Javascript">
    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`.

    ```javascript theme={null}
    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);
    });
    ```
  </Tab>

  <Tab title="FoxSell JS Object">
    <Tip>
      Add this snippet in your `liquid` file to access bundle config via `window.foxsell` object
    </Tip>

    ```liquid theme={null}
    {% 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>
    ```
  </Tab>
</Tabs>