<div class="acl-example__promotion-group-wrapper">
<div style="width: 622px; margin-bottom: 25px">
<div class="acl-promotion-configuration-group">
<div class="acl-promotion-configuration-group__detail">
<div class="acl-promotion-configuration-group__item-details">
<div class="acl-promotion-configuration-group__name">
Buy four ice creams
</div>
<div class="acl-promotion-configuration-group__description">
Select four of either icecream flavour to receive a discounted rate as part of this promotion.
</div>
</div>
<i class="aforza-icons animated fadeIn acl-promotion-configuration-group__detail-cheveron acl-promotion-configuration-group__detail-cheveron--up">acl_arrow_left</i>
</div>
<div class="acl-promotion-configuration-group__row animated">
<div class="acl-promotion-configuration-group__content">
<div class="acl-promotion-configuration-group__product-details">
<img class="acl-promotion-configuration-group__product-image" src="/assets/img/product-ex-1.png" />
<div class="acl-promotion-configuration-group__product-info">
<div class="acl-promotion-configuration-group__product-name">Ben & Jerry’s Icecream
Flavour
2
</div>
<div class="acl-promotion-configuration-group__code">
B&J-34671
</div>
</div>
</div>
<div>
<div class="acl-forms__quantity">
<div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
</div>
<input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400" value="0">
<div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>
</div>
<div class="acl-promotion-configuration-group__cost">
<del class="acl-table-list__sub-total--strikeout">
<span class="acl-table-list__sub-total--original-cost">£233.04</span>
</del>
<div class="acl-promotion-configuration-group__sub-total acl-promotion-configuration-group__sub-total--teal">
<span class="acl-promotion-configuration-group__sub-total--currency">£</span>
<span class="acl-promotion-configuration-group__sub-total--integer">0.</span>
<span class="acl-promotion-configuration-group__sub-total--fraction">00</span>
</div>
</div>
<div class="acl-promotion-configuration-group__remove">Remove</div>
</div>
</div>
<div class="acl-promotion-configuration-group__row animated">
<div class="acl-promotion-configuration-group__content">
<div class="acl-promotion-configuration-group__product-details">
<img class="acl-promotion-configuration-group__product-image" src="/assets/img/product-ex-1.png" />
<div class="acl-promotion-configuration-group__product-info">
<div class="acl-promotion-configuration-group__product-name">Ben & Jerry’s Icecream
Flavour
2
</div>
<div class="acl-promotion-configuration-group__code">
B&J-34671
</div>
</div>
</div>
<div>
<div class="acl-forms__quantity">
<div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
</div>
<input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400" value="0">
<div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>
</div>
<div class="acl-promotion-configuration-group__cost">
<del class="acl-table-list__sub-total--strikeout">
<span class="acl-table-list__sub-total--original-cost">£233.04</span>
</del>
<div class="acl-promotion-configuration-group__sub-total acl-promotion-configuration-group__sub-total--teal">
<span class="acl-promotion-configuration-group__sub-total--currency">£</span>
<span class="acl-promotion-configuration-group__sub-total--integer">0.</span>
<span class="acl-promotion-configuration-group__sub-total--fraction">00</span>
</div>
</div>
<div class="acl-promotion-configuration-group__remove">Remove</div>
</div>
</div>
<div class="acl-promotion-configuration-group__row animated ">
<div class="acl-promotion-configuration-group__content">
<div class="acl-promotion-configuration-group__product-details">
<img class="acl-promotion-configuration-group__product-image" src="/assets/img/product-ex-1.png" />
<div class="acl-promotion-configuration-group__product-info">
<div class="acl-promotion-configuration-group__product-name">Ben & Jerry’s Icecream
Flavour
2
</div>
<div class="acl-promotion-configuration-group__code">
B&J-34671
</div>
</div>
</div>
<div>
<div class="acl-forms__quantity">
<div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
</div>
<input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400" value="0">
<div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>
</div>
<div class="acl-promotion-configuration-group__cost">
<del class="acl-table-list__sub-total--strikeout">
<span class="acl-table-list__sub-total--original-cost">£233.04</span>
</del>
<div class="acl-promotion-configuration-group__sub-total acl-promotion-configuration-group__sub-total--teal">
<span class="acl-promotion-configuration-group__sub-total--currency">£</span>
<span class="acl-promotion-configuration-group__sub-total--integer">0.</span>
<span class="acl-promotion-configuration-group__sub-total--fraction">00</span>
</div>
</div>
<div class="acl-promotion-configuration-group__remove">Remove</div>
</div>
</div>
<div class="acl-promotion-configuration-group__info-message">
You have selected one of the options in this section
to validate your promotion
</div>
</div>
</div>
<div style="width: 622px; margin-bottom: 25px">
<div class="acl-promotion-configuration-group acl-promotion-configuration-group--invalid">
<div class="acl-promotion-configuration-group__detail">
<div class="acl-promotion-configuration-group__item-details">
<div class="acl-promotion-configuration-group__name">
Choose a second free flavour
</div>
<div class="acl-promotion-configuration-group__description">
Group not valid. You need to adjust the options in this section to validate your promotion
</div>
</div>
<i class="aforza-icons animated fadeIn acl-promotion-configuration-group__detail-cheveron acl-promotion-configuration-group__detail-cheveron--up">acl_arrow_left</i>
</div>
<div class="acl-promotion-configuration-group__row animated">
<div class="acl-promotion-configuration-group__content">
<div class="acl-promotion-configuration-group__product-details">
<img class="acl-promotion-configuration-group__product-image" src="/assets/img/product-ex-1.png" />
<div class="acl-promotion-configuration-group__product-info">
<div class="acl-promotion-configuration-group__product-name">Ben & Jerry’s Icecream
Flavour
2
</div>
<div class="acl-promotion-configuration-group__code">
B&J-34671
</div>
</div>
</div>
<div>
<div class="acl-forms__quantity">
<div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
</div>
<input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400" value="0">
<div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>
</div>
<div class="acl-promotion-configuration-group__cost">
<del class="acl-table-list__sub-total--strikeout">
<span class="acl-table-list__sub-total--original-cost">£233.04</span>
</del>
<div class="acl-promotion-configuration-group__sub-total acl-promotion-configuration-group__sub-total--teal">
<span class="acl-promotion-configuration-group__sub-total--currency">£</span>
<span class="acl-promotion-configuration-group__sub-total--integer">0.</span>
<span class="acl-promotion-configuration-group__sub-total--fraction">00</span>
</div>
</div>
<div class="acl-promotion-configuration-group__remove">Remove</div>
</div>
</div>
<div class="acl-promotion-configuration-group__row animated">
<div class="acl-promotion-configuration-group__content">
<div class="acl-promotion-configuration-group__product-details">
<img class="acl-promotion-configuration-group__product-image" src="/assets/img/product-ex-1.png" />
<div class="acl-promotion-configuration-group__product-info">
<div class="acl-promotion-configuration-group__product-name">Ben & Jerry’s Icecream
Flavour
2
</div>
<div class="acl-promotion-configuration-group__code">
B&J-34671
</div>
</div>
</div>
<div>
<div class="acl-forms__quantity">
<div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
</div>
<input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400" value="0">
<div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>
</div>
<div class="acl-promotion-configuration-group__cost">
<del class="acl-table-list__sub-total--strikeout">
<span class="acl-table-list__sub-total--original-cost">£233.04</span>
</del>
<div class="acl-promotion-configuration-group__sub-total acl-promotion-configuration-group__sub-total--teal">
<span class="acl-promotion-configuration-group__sub-total--currency">£</span>
<span class="acl-promotion-configuration-group__sub-total--integer">0.</span>
<span class="acl-promotion-configuration-group__sub-total--fraction">00</span>
</div>
</div>
<div class="acl-promotion-configuration-group__remove">Remove</div>
</div>
</div>
<div class="acl-promotion-configuration-group__row animated">
<div class="acl-promotion-configuration-group__content">
<div class="acl-promotion-configuration-group__product-details">
<img class="acl-promotion-configuration-group__product-image" src="/assets/img/product-ex-1.png" />
<div class="acl-promotion-configuration-group__product-info">
<div class="acl-promotion-configuration-group__product-name">Ben & Jerry’s Icecream
Flavour
2
</div>
<div class="acl-promotion-configuration-group__code">
B&J-34671
</div>
</div>
</div>
<div>
<div class="acl-forms__quantity">
<div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
</div>
<input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400" value="0">
<div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>
</div>
<div class="acl-promotion-configuration-group__cost">
<del class="acl-table-list__sub-total--strikeout">
<span class="acl-table-list__sub-total--original-cost">£233.04</span>
</del>
<div class="acl-promotion-configuration-group__sub-total acl-promotion-configuration-group__sub-total--teal">
<span class="acl-promotion-configuration-group__sub-total--currency">£</span>
<span class="acl-promotion-configuration-group__sub-total--integer">0.</span>
<span class="acl-promotion-configuration-group__sub-total--fraction">00</span>
</div>
</div>
<div class="acl-promotion-configuration-group__remove">Remove</div>
</div>
</div>
<div class="acl-promotion-configuration-group__info-message">
Group not valid. You need to adjust the options in this section to validate your promotion
</div>
</div>
</div>
<div style="width: 622px; margin-bottom: 25px">
<div class="acl-promotion-configuration-group acl-promotion-configuration-group--valid">
<div class="acl-promotion-configuration-group__detail">
<div class="acl-promotion-configuration-group__item-details">
<div class="acl-promotion-configuration-group__name">
Choose a second free flavour
</div>
<div class="acl-promotion-configuration-group__description">
Group not valid. You need to adjust the options in this section to validate your promotion
</div>
</div>
<i class="aforza-icons animated fadeIn acl-promotion-configuration-group__detail-cheveron acl-promotion-configuration-group__detail-cheveron--up">acl_arrow_left</i>
</div>
<div class="acl-promotion-configuration-group__row animated">
<div class="acl-promotion-configuration-group__content">
<div class="acl-promotion-configuration-group__product-details">
<img class="acl-promotion-configuration-group__product-image" src="/assets/img/product-ex-1.png" />
<div class="acl-promotion-configuration-group__product-info">
<div class="acl-promotion-configuration-group__product-name">Ben & Jerry’s Icecream
Flavour
2
</div>
<div class="acl-promotion-configuration-group__code">
B&J-34671
</div>
</div>
</div>
<div>
<div class="acl-forms__quantity">
<div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
</div>
<input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400" value="0">
<div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>
</div>
<div class="acl-promotion-configuration-group__cost">
<del class="acl-table-list__sub-total--strikeout">
<span class="acl-table-list__sub-total--original-cost">£233.04</span>
</del>
<div class="acl-promotion-configuration-group__sub-total acl-promotion-configuration-group__sub-total--teal">
<span class="acl-promotion-configuration-group__sub-total--currency">£</span>
<span class="acl-promotion-configuration-group__sub-total--integer">0.</span>
<span class="acl-promotion-configuration-group__sub-total--fraction">00</span>
</div>
</div>
<div class="acl-promotion-configuration-group__remove">Remove</div>
</div>
</div>
<div class="acl-promotion-configuration-group__row animated">
<div class="acl-promotion-configuration-group__content">
<div class="acl-promotion-configuration-group__product-details">
<img class="acl-promotion-configuration-group__product-image" src="/assets/img/product-ex-1.png" />
<div class="acl-promotion-configuration-group__product-info">
<div class="acl-promotion-configuration-group__product-name">Ben & Jerry’s Icecream
Flavour
2
</div>
<div class="acl-promotion-configuration-group__code">
B&J-34671
</div>
</div>
</div>
<div>
<div class="acl-forms__quantity">
<div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
</div>
<input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400" value="0">
<div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>
</div>
<div class="acl-promotion-configuration-group__cost">
<del class="acl-table-list__sub-total--strikeout">
<span class="acl-table-list__sub-total--original-cost">£233.04</span>
</del>
<div class="acl-promotion-configuration-group__sub-total acl-promotion-configuration-group__sub-total--teal">
<span class="acl-promotion-configuration-group__sub-total--currency">£</span>
<span class="acl-promotion-configuration-group__sub-total--integer">0.</span>
<span class="acl-promotion-configuration-group__sub-total--fraction">00</span>
</div>
</div>
<div class="acl-promotion-configuration-group__remove">Remove</div>
</div>
</div>
<div class="acl-promotion-configuration-group__row animated">
<div class="acl-promotion-configuration-group__content">
<div class="acl-promotion-configuration-group__product-details">
<img class="acl-promotion-configuration-group__product-image" src="/assets/img/product-ex-1.png" />
<div class="acl-promotion-configuration-group__product-info">
<div class="acl-promotion-configuration-group__product-name">Ben & Jerry’s Icecream
Flavour
2
</div>
<div class="acl-promotion-configuration-group__code">
B&J-34671
</div>
</div>
</div>
<div>
<div class="acl-forms__quantity">
<div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
</div>
<input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400" value="0">
<div class="acl-forms__quantity-button" onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>
</div>
<div class="acl-promotion-configuration-group__cost">
<del class="acl-table-list__sub-total--strikeout">
<span class="acl-table-list__sub-total--original-cost">£233.04</span>
</del>
<div class="acl-promotion-configuration-group__sub-total acl-promotion-configuration-group__sub-total--teal">
<span class="acl-promotion-configuration-group__sub-total--currency">£</span>
<span class="acl-promotion-configuration-group__sub-total--integer">0.</span>
<span class="acl-promotion-configuration-group__sub-total--fraction">00</span>
</div>
</div>
<div class="acl-promotion-configuration-group__remove">Remove</div>
</div>
</div>
<div class="acl-promotion-configuration-group__info-message">
You have selected one of the options in this section to validate your promotion
</div>
</div>
</div>
</div>
<script>
const groupWrapperEl = document.querySelector('.acl-example__promotion-group-wrapper');
const quantityField = new acl.ACLQuantityField();
new acl.ACLPromotionGroupAccordion(groupWrapperEl);
</script>
<div class="acl-example__promotion-group-wrapper">
<div style="width: 622px; margin-bottom: 25px">
<div class="acl-promotion-configuration-group">
<div class="acl-promotion-configuration-group__detail">
<div class="acl-promotion-configuration-group__item-details">
<div class="acl-promotion-configuration-group__name">
Buy four ice creams
</div>
<div class="acl-promotion-configuration-group__description">
Select four of either icecream flavour to receive a discounted rate as part of this promotion.
</div>
</div>
<i
class="aforza-icons animated fadeIn acl-promotion-configuration-group__detail-cheveron acl-promotion-configuration-group__detail-cheveron--up">acl_arrow_left</i>
</div>
<div class="acl-promotion-configuration-group__row animated">
<div class="acl-promotion-configuration-group__content">
<div class="acl-promotion-configuration-group__product-details">
<img class="acl-promotion-configuration-group__product-image"
src="/assets/img/product-ex-1.png" />
<div class="acl-promotion-configuration-group__product-info">
<div class="acl-promotion-configuration-group__product-name">Ben & Jerry’s Icecream
Flavour
2
</div>
<div class="acl-promotion-configuration-group__code">
B&J-34671
</div>
</div>
</div>
<div>
<div class="acl-forms__quantity">
<div class="acl-forms__quantity-button"
onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
</div>
<input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400"
value="0">
<div class="acl-forms__quantity-button"
onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>
</div>
<div class="acl-promotion-configuration-group__cost">
<del class="acl-table-list__sub-total--strikeout">
<span class="acl-table-list__sub-total--original-cost">£233.04</span>
</del>
<div
class="acl-promotion-configuration-group__sub-total acl-promotion-configuration-group__sub-total--teal">
<span class="acl-promotion-configuration-group__sub-total--currency">£</span>
<span class="acl-promotion-configuration-group__sub-total--integer">0.</span>
<span class="acl-promotion-configuration-group__sub-total--fraction">00</span>
</div>
</div>
<div class="acl-promotion-configuration-group__remove">Remove</div>
</div>
</div>
<div class="acl-promotion-configuration-group__row animated">
<div class="acl-promotion-configuration-group__content">
<div class="acl-promotion-configuration-group__product-details">
<img class="acl-promotion-configuration-group__product-image"
src="/assets/img/product-ex-1.png" />
<div class="acl-promotion-configuration-group__product-info">
<div class="acl-promotion-configuration-group__product-name">Ben & Jerry’s Icecream
Flavour
2
</div>
<div class="acl-promotion-configuration-group__code">
B&J-34671
</div>
</div>
</div>
<div>
<div class="acl-forms__quantity">
<div class="acl-forms__quantity-button"
onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
</div>
<input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400"
value="0">
<div class="acl-forms__quantity-button"
onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>
</div>
<div class="acl-promotion-configuration-group__cost">
<del class="acl-table-list__sub-total--strikeout">
<span class="acl-table-list__sub-total--original-cost">£233.04</span>
</del>
<div
class="acl-promotion-configuration-group__sub-total acl-promotion-configuration-group__sub-total--teal">
<span class="acl-promotion-configuration-group__sub-total--currency">£</span>
<span class="acl-promotion-configuration-group__sub-total--integer">0.</span>
<span class="acl-promotion-configuration-group__sub-total--fraction">00</span>
</div>
</div>
<div class="acl-promotion-configuration-group__remove">Remove</div>
</div>
</div>
<div class="acl-promotion-configuration-group__row animated ">
<div class="acl-promotion-configuration-group__content">
<div class="acl-promotion-configuration-group__product-details">
<img class="acl-promotion-configuration-group__product-image"
src="/assets/img/product-ex-1.png" />
<div class="acl-promotion-configuration-group__product-info">
<div class="acl-promotion-configuration-group__product-name">Ben & Jerry’s Icecream
Flavour
2
</div>
<div class="acl-promotion-configuration-group__code">
B&J-34671
</div>
</div>
</div>
<div>
<div class="acl-forms__quantity">
<div class="acl-forms__quantity-button"
onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
</div>
<input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400"
value="0">
<div class="acl-forms__quantity-button"
onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>
</div>
<div class="acl-promotion-configuration-group__cost">
<del class="acl-table-list__sub-total--strikeout">
<span class="acl-table-list__sub-total--original-cost">£233.04</span>
</del>
<div
class="acl-promotion-configuration-group__sub-total acl-promotion-configuration-group__sub-total--teal">
<span class="acl-promotion-configuration-group__sub-total--currency">£</span>
<span class="acl-promotion-configuration-group__sub-total--integer">0.</span>
<span class="acl-promotion-configuration-group__sub-total--fraction">00</span>
</div>
</div>
<div class="acl-promotion-configuration-group__remove">Remove</div>
</div>
</div>
<div class="acl-promotion-configuration-group__info-message">
You have selected one of the options in this section
to validate your promotion
</div>
</div>
</div>
<div style="width: 622px; margin-bottom: 25px">
<div class="acl-promotion-configuration-group acl-promotion-configuration-group--invalid">
<div class="acl-promotion-configuration-group__detail">
<div class="acl-promotion-configuration-group__item-details">
<div class="acl-promotion-configuration-group__name">
Choose a second free flavour
</div>
<div class="acl-promotion-configuration-group__description">
Group not valid. You need to adjust the options in this section to validate your promotion
</div>
</div>
<i
class="aforza-icons animated fadeIn acl-promotion-configuration-group__detail-cheveron acl-promotion-configuration-group__detail-cheveron--up">acl_arrow_left</i>
</div>
<div class="acl-promotion-configuration-group__row animated">
<div class="acl-promotion-configuration-group__content">
<div class="acl-promotion-configuration-group__product-details">
<img class="acl-promotion-configuration-group__product-image"
src="/assets/img/product-ex-1.png" />
<div class="acl-promotion-configuration-group__product-info">
<div class="acl-promotion-configuration-group__product-name">Ben & Jerry’s Icecream
Flavour
2
</div>
<div class="acl-promotion-configuration-group__code">
B&J-34671
</div>
</div>
</div>
<div>
<div class="acl-forms__quantity">
<div class="acl-forms__quantity-button"
onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
</div>
<input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400"
value="0">
<div class="acl-forms__quantity-button"
onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>
</div>
<div class="acl-promotion-configuration-group__cost">
<del class="acl-table-list__sub-total--strikeout">
<span class="acl-table-list__sub-total--original-cost">£233.04</span>
</del>
<div
class="acl-promotion-configuration-group__sub-total acl-promotion-configuration-group__sub-total--teal">
<span class="acl-promotion-configuration-group__sub-total--currency">£</span>
<span class="acl-promotion-configuration-group__sub-total--integer">0.</span>
<span class="acl-promotion-configuration-group__sub-total--fraction">00</span>
</div>
</div>
<div class="acl-promotion-configuration-group__remove">Remove</div>
</div>
</div>
<div class="acl-promotion-configuration-group__row animated">
<div class="acl-promotion-configuration-group__content">
<div class="acl-promotion-configuration-group__product-details">
<img class="acl-promotion-configuration-group__product-image"
src="/assets/img/product-ex-1.png" />
<div class="acl-promotion-configuration-group__product-info">
<div class="acl-promotion-configuration-group__product-name">Ben & Jerry’s Icecream
Flavour
2
</div>
<div class="acl-promotion-configuration-group__code">
B&J-34671
</div>
</div>
</div>
<div>
<div class="acl-forms__quantity">
<div class="acl-forms__quantity-button"
onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
</div>
<input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400"
value="0">
<div class="acl-forms__quantity-button"
onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>
</div>
<div class="acl-promotion-configuration-group__cost">
<del class="acl-table-list__sub-total--strikeout">
<span class="acl-table-list__sub-total--original-cost">£233.04</span>
</del>
<div
class="acl-promotion-configuration-group__sub-total acl-promotion-configuration-group__sub-total--teal">
<span class="acl-promotion-configuration-group__sub-total--currency">£</span>
<span class="acl-promotion-configuration-group__sub-total--integer">0.</span>
<span class="acl-promotion-configuration-group__sub-total--fraction">00</span>
</div>
</div>
<div class="acl-promotion-configuration-group__remove">Remove</div>
</div>
</div>
<div class="acl-promotion-configuration-group__row animated">
<div class="acl-promotion-configuration-group__content">
<div class="acl-promotion-configuration-group__product-details">
<img class="acl-promotion-configuration-group__product-image"
src="/assets/img/product-ex-1.png" />
<div class="acl-promotion-configuration-group__product-info">
<div class="acl-promotion-configuration-group__product-name">Ben & Jerry’s Icecream
Flavour
2
</div>
<div class="acl-promotion-configuration-group__code">
B&J-34671
</div>
</div>
</div>
<div>
<div class="acl-forms__quantity">
<div class="acl-forms__quantity-button"
onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
</div>
<input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400"
value="0">
<div class="acl-forms__quantity-button"
onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>
</div>
<div class="acl-promotion-configuration-group__cost">
<del class="acl-table-list__sub-total--strikeout">
<span class="acl-table-list__sub-total--original-cost">£233.04</span>
</del>
<div
class="acl-promotion-configuration-group__sub-total acl-promotion-configuration-group__sub-total--teal">
<span class="acl-promotion-configuration-group__sub-total--currency">£</span>
<span class="acl-promotion-configuration-group__sub-total--integer">0.</span>
<span class="acl-promotion-configuration-group__sub-total--fraction">00</span>
</div>
</div>
<div class="acl-promotion-configuration-group__remove">Remove</div>
</div>
</div>
<div class="acl-promotion-configuration-group__info-message">
Group not valid. You need to adjust the options in this section to validate your promotion
</div>
</div>
</div>
<div style="width: 622px; margin-bottom: 25px">
<div class="acl-promotion-configuration-group acl-promotion-configuration-group--valid">
<div class="acl-promotion-configuration-group__detail">
<div class="acl-promotion-configuration-group__item-details">
<div class="acl-promotion-configuration-group__name">
Choose a second free flavour
</div>
<div class="acl-promotion-configuration-group__description">
Group not valid. You need to adjust the options in this section to validate your promotion
</div>
</div>
<i
class="aforza-icons animated fadeIn acl-promotion-configuration-group__detail-cheveron acl-promotion-configuration-group__detail-cheveron--up">acl_arrow_left</i>
</div>
<div class="acl-promotion-configuration-group__row animated">
<div class="acl-promotion-configuration-group__content">
<div class="acl-promotion-configuration-group__product-details">
<img class="acl-promotion-configuration-group__product-image"
src="/assets/img/product-ex-1.png" />
<div class="acl-promotion-configuration-group__product-info">
<div class="acl-promotion-configuration-group__product-name">Ben & Jerry’s Icecream
Flavour
2
</div>
<div class="acl-promotion-configuration-group__code">
B&J-34671
</div>
</div>
</div>
<div>
<div class="acl-forms__quantity">
<div class="acl-forms__quantity-button"
onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
</div>
<input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400"
value="0">
<div class="acl-forms__quantity-button"
onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>
</div>
<div class="acl-promotion-configuration-group__cost">
<del class="acl-table-list__sub-total--strikeout">
<span class="acl-table-list__sub-total--original-cost">£233.04</span>
</del>
<div
class="acl-promotion-configuration-group__sub-total acl-promotion-configuration-group__sub-total--teal">
<span class="acl-promotion-configuration-group__sub-total--currency">£</span>
<span class="acl-promotion-configuration-group__sub-total--integer">0.</span>
<span class="acl-promotion-configuration-group__sub-total--fraction">00</span>
</div>
</div>
<div class="acl-promotion-configuration-group__remove">Remove</div>
</div>
</div>
<div class="acl-promotion-configuration-group__row animated">
<div class="acl-promotion-configuration-group__content">
<div class="acl-promotion-configuration-group__product-details">
<img class="acl-promotion-configuration-group__product-image"
src="/assets/img/product-ex-1.png" />
<div class="acl-promotion-configuration-group__product-info">
<div class="acl-promotion-configuration-group__product-name">Ben & Jerry’s Icecream
Flavour
2
</div>
<div class="acl-promotion-configuration-group__code">
B&J-34671
</div>
</div>
</div>
<div>
<div class="acl-forms__quantity">
<div class="acl-forms__quantity-button"
onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
</div>
<input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400"
value="0">
<div class="acl-forms__quantity-button"
onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>
</div>
<div class="acl-promotion-configuration-group__cost">
<del class="acl-table-list__sub-total--strikeout">
<span class="acl-table-list__sub-total--original-cost">£233.04</span>
</del>
<div
class="acl-promotion-configuration-group__sub-total acl-promotion-configuration-group__sub-total--teal">
<span class="acl-promotion-configuration-group__sub-total--currency">£</span>
<span class="acl-promotion-configuration-group__sub-total--integer">0.</span>
<span class="acl-promotion-configuration-group__sub-total--fraction">00</span>
</div>
</div>
<div class="acl-promotion-configuration-group__remove">Remove</div>
</div>
</div>
<div class="acl-promotion-configuration-group__row animated">
<div class="acl-promotion-configuration-group__content">
<div class="acl-promotion-configuration-group__product-details">
<img class="acl-promotion-configuration-group__product-image"
src="/assets/img/product-ex-1.png" />
<div class="acl-promotion-configuration-group__product-info">
<div class="acl-promotion-configuration-group__product-name">Ben & Jerry’s Icecream
Flavour
2
</div>
<div class="acl-promotion-configuration-group__code">
B&J-34671
</div>
</div>
</div>
<div>
<div class="acl-forms__quantity">
<div class="acl-forms__quantity-button"
onclick="quantityField.changeQuantity(this,'decrease')" value="Decrease Value">-
</div>
<input class="acl-forms__quantity-input" type="number" id="number" min="0" max="400"
value="0">
<div class="acl-forms__quantity-button"
onclick="quantityField.changeQuantity(this,'increase')" value="Increase Value">+</div>
</div>
</div>
<div class="acl-promotion-configuration-group__cost">
<del class="acl-table-list__sub-total--strikeout">
<span class="acl-table-list__sub-total--original-cost">£233.04</span>
</del>
<div
class="acl-promotion-configuration-group__sub-total acl-promotion-configuration-group__sub-total--teal">
<span class="acl-promotion-configuration-group__sub-total--currency">£</span>
<span class="acl-promotion-configuration-group__sub-total--integer">0.</span>
<span class="acl-promotion-configuration-group__sub-total--fraction">00</span>
</div>
</div>
<div class="acl-promotion-configuration-group__remove">Remove</div>
</div>
</div>
<div class="acl-promotion-configuration-group__info-message">
You have selected one of the options in this section to validate your promotion
</div>
</div>
</div>
</div>
<script>
const groupWrapperEl = document.querySelector('.acl-example__promotion-group-wrapper');
const quantityField = new acl.ACLQuantityField();
new acl.ACLPromotionGroupAccordion(groupWrapperEl);
</script>
/* No context defined. */
No notes defined.