Liquid Tags – Bundle Builder

add_to_bundle_form

Use this tag to add a product variant into the bundle.

The current Section instance has to be used as a parameter to the add_to_bundle_form tag.

Use input or select with name="variant" inside. The value must be a variant id.

Add a button with type="submit" to add a variant to bundle.

Quantity here controls the quantity selector - this will let the customer change how many items will be added to the bundle when "add" is clicked, however, this is optional and can be removed if preferred:

Example:

{% add_to_bundle_form bundle.current_section %}

<select name="variant">

 {% for variant in product.available_variants %}

 <option value="{{ variant.id }}">

 {{ variant.title }}

 </option>

 {% endfor %}

</select>

<input type="number" name="quantity" value="1" min="1" />

<button type="submit">Add</button>

{% end_add_to_bundle_form %}

remove_from_bundle_form

Use this tag to remove a product from a bundle.

The BundleItem instance should be removed as a parameter.

Inside of the tag, a button with type="submit"must be present.

Example:

{% remove_from_bundle_form item %}<br><button type="submit">Remove</button>

{% end_remove_from_bundle_form %}

section_switch_form

You can implement section switching (or just show all the sections at once) by yourself.

You can also use this helper to simplify the process.

Example:

{% if bundle.has_next_section %}

 {% section_switch_form %}

 <input type="hidden" name="section" value="{{ bundle.current_section.index | plus: 1 }}" />

 <button type="submit">Next</button>

 {% end_section_switch_form %}

{% endif %}



{% if bundle.has_prev_section %}

 {% section_switch_form %}

 <input type="hidden" name="section" value="{{ bundle.current_section.index | plus: -1 }}" />

 <button type="submit">Previous</button>

 {% end_section_switch_form %}

{% endif %}

add_to_cart_form

Use this tag to implement adding current bundle configuration as a product to the cart.

Example:

{% add_to_cart_form %}

 <button type="submit"{% unless bundle.can_add_to_cart %} disabled="disabled"{% endunless %}>

 {% if bundle.adding_to_cart %}

 Processing...

 {% else %}

 Add bundle to cart

 {% endif %}

 </button>

{% end_add_to_cart_form %}

change_variant_in_bundle_form

Use this tag to implement changing variant of product that is already added to a bundle.

The BundleItem instance should be passed as a parameter.

Example:

{% change_variant_in_bundle_form item %}

 <select name="variant">

 {% for variant in item.variant.product.variants %}

 <option {% if item.variant.id == variant.id %}selected="selected"{% endif %} value="{{ variant.id }}">{{ variant.title }}</option>

 {% endfor %}

 </select>

{% end_change_variant_in_bundle_form %}

note_field

Use this tag to add a note to a bundle.

Example:

{% if settings.note_enabled %}

 <div class="note-field--container">

 <label>{{ settings.note_label }}{% if settings.note_required %} (required){% endif %}</label>

 {% note_field %}{{ settings.note_text }}{% end_note_field %}

 </div>

 {% if settings.note_prompt_visible %}

 <div className="note-field--error-message">

 <p>Note required before adding to cart.</p>

 </div>

 {% endif %}

{% endif %}

remove_from_bundle_form

Use this tag to remove a product(s) from a bundle.

The BundleItem or UniqueBundleItem instances should be used as a parameter.

add_to_cart_form

Use the following snippet:

{% add_to_cart_form %} 

     <button type="submit"{% unless bundle.can_add_to_cart %} disabled="disabled"

{% endunless %}> 

          {% if bundle.adding_to_cart %} 

              Processing... 

          {% else %} 

              Add bundle to cart 

          {% endif %} 

   </button>

{% end_add_to_cart_form %}

change_quantity_form

Use this snippet to add a quantity selector for each variant after it has been added to bundle:

{% for variant in product.variants_in_bundle %}

 {% change_quantity_form %}

 {{ variant.title }}

 <input type="hidden" name="variant" value="{{ variant.id }}" />

 <input type="hidden" name="section" value="{{ bundle.current_section.index }}" />

 <button type="submit" name="remove">-</button>

 {{ variant.count }}

 <button type="submit" name="add">+</button>

 {% end_change_quantity_form %}

{% endfor %}

Related articles