BASK: Edit Basket Attributes [UPDATED: 04/29/2022]

bask-basket.html

<script>
	function continueShopping(link) {
		if (sessionStorage.getItem('continue_url')) {
			link.href = sessionStorage.getItem('continue_url');
		}
	}
</script>
<mvt:if expr="g.Action EQ 'RGRP' AND g.quote_item NE '1'">
	<mvt:assign name="g.Quantity" value="miva_variable_value('Quantity' $ g.Restore_Counter)" />
	<mvt:assign name="g.Restore_Name" value="miva_variable_value('Restore_Name' $ g.Restore_Counter)" />
	<mvt:assign name="g.Restore_Link" value="miva_variable_value('Restore_Link' $ g.Restore_Counter)" />
	<script>
		function clickAndDisable(link) {
			// disable subsequent clicks
			link.onclick = function (event) {
				event.preventDefault();
			}
		}
	</script>
	<div class="x-messages x-messages--info">
		<strong>&mvte:global:Restore_Name;</strong> has been removed from your cart. <a href="&mvte:global:Restore_Link;" onclick="clickAndDisable(this);">Undo?</a>
	</div>
	<mvt:assign name="g.Restore_Counter" value="g.Restore_Counter + 1" />
</mvt:if>
<mvt:if expr="l.settings:basket:empty">
	<div class="x-messages x-messages--info">
		<strong>Your shopping cart is currently empty.</strong> <a href="&mvte:urls:SFNT:auto;" onclick="continueShopping(this);">Start Shopping</a>
	</div>
	<mvt:exit />
</mvt:if>

<section class="o-layout o-layout--wide t-basket" data-hook="basket" data-item-count="&mvt:global_minibasket:basket_count;" data-subtotal="&mvt:global_minibasket:formatted_total;">
	<div class="o-layout__item u-width-12 u-width-8--l">
		<table class="c-table-responsive t-basket__product-summary" data-basket-table>
			<caption class="u-text-left">
				<h1 class="c-heading-delta u-text-bold u-text-uppercase">
					<mvt:if expr="l.settings:global_minibasket:basket_count GT 1">
						Your Cart: &mvte:global_minibasket:basket_count; Items
					<mvt:else>
						Your Cart: &mvte:global_minibasket:basket_count; Item
					</mvt:if>
				</h1>
			</caption>
			<thead class="c-table-responsive_thead u-text-left">
				<tr class="c-table-responsive__row u-text-uppercase u-font-tiny u-color-gray-30">
					<th class="c-table-responsive__cell" scope="col">Product</th>
					<th class="c-table-responsive__cell" scope="col">Quantity</th>
					<th class="c-table-responsive__cell u-text-right" scope="col">Subtotal</th>
					<th class="c-table-responsive__cell u-text-right" scope="col">&nbsp;</th>
				</tr>
			</thead>
			<tbody>
				<mvt:assign name="g.basket_subtotal" value="0" />
				<mvt:assign name="l.settings:should_show_dialog" value="0" />
				<mvt:foreach iterator="group" array="basket:groups">
					<mvt:assign name="l.settings:group:restore:link" value="l.settings:urls:BASK:auto_sep $ 'Action=ADPR&Product_Code=' $ l.settings:group:product:code $ '&Quantity=' $ l.settings:group:quantity" />
					<mvt:assign name="l.settings:loaded_product_attributes" value="''" />
					<mvt:do file="g.Module_Library_DB" name="l.success" value="AttributeList_Load_Product(l.settings:group:product:id, l.settings:loaded_product_attributes)"/>
					<mvt:if expr="NOT l.settings:should_show_dialog">
						<mvt:if expr="l.settings:group:product:productsubscriptionsettings:enabled">
							<mvt:assign name="l.settings:should_show_dialog" value="1" />
						<mvt:elseif expr="miva_array_elements(l.settings:loaded_product_attributes) GT 0">
							<mvt:assign name="l.settings:should_show_dialog" value="1" />
						</mvt:if>
					</mvt:if>
					<tr class="c-table-responsive__row">
						<td class="c-table-responsive__cell" data-label="">
							<div class="o-layout">
								<div class="o-layout__item u-width-12 u-width-4--m u-width-3--l u-text-center">
									<p><img src="&mvte:group:imagetypes:main;" alt="&mvte:group:name;" loading="lazy" width="&mvte:basket:b_width;" height="&mvte:basket:b_height;"></p>
								</div>
								<div class="o-layout__item u-width-12 u-width-8--m u-width-9--l t-basket__product-details">
									<a class="u-text-bold u-color-black" href="&mvte:group:link;" rel="nofollow">&mvt:group:name;</a><br>
									<mvt:if expr="l.settings:group:upsold">
										<br><span class="c-heading--subheading">(Special Offer)</span><br>
									</mvt:if>
									<p class="u-color-gray-30">
										<span class="u-font-small">SKU: &mvt:group:code;</span><br>
										<mvt:foreach iterator="discount" array="group:discounts">
											<mvt:if expr="l.settings:discount:display">
												<mvt:if expr="'sale' CIN l.settings:discount:descrip">
													<mvt:assign name="l.settings:discount:descrip" value="'Savings'"/>
												<mvt:else>
													<mvt:assign name="l.settings:discount:descrip" value="l.settings:discount:descrip"/>
												</mvt:if>
												<span class="u-font-small u-flex u-color-red">
													<span class="o-layout--grow">&mvt:discount:descrip;</span>
													<span>&mvt:discount:formatted_discount;</span>
												</span>
											</mvt:if>
										</mvt:foreach>
										<mvt:assign name="l.settings:attr_ref" value="''" />
										<mvt:assign name="l.settings:group:selectedAttributes" value="asciichar(123)"/>
										<mvt:assign name="g.quote_item" value="'0'" />
										<mvt:foreach iterator="option" array="group:options">
											<mvt:if expr="l.settings:option:attr_code EQ 'Part of Quote'">
												<mvt:assign name="l.settings:option:attr_prompt" value="l.settings:option:attr_code" />
												<mvt:assign name="g.quote_item" value="'1'" />
											<mvt:else>
												<mvt:assign name="l.settings:option:attr_prompt" value="l.settings:option:attr_prompt" />
											</mvt:if>
											<mvt:assign name="l.settings:group:option_counter" value="l.settings:group:option_counter + 1" />
											<span class="u-font-small u-flex">
												<mvt:if expr="l.settings:option:attmpat_id">
													<mvt:assign name="l.settings:group:restore:link" value="l.settings:group:restore:link $ '&Product_Attributes[' $ l.settings:group:option_counter $ ']:template_code=' $ l.settings:option:attr_code" />
													<mvt:assign name="l.settings:attr_ref" value="l.settings:option:attr_prompt" />
												<mvt:else>
													<mvt:assign name="l.settings:attr_ref" value="l.settings:option:attr_code" />
												</mvt:if>
												<mvt:if expr="l.settings:option:option_id">
													<mvt:assign name="l.settings:group:restore:link" value="l.settings:group:restore:link $ '&Product_Attributes[' $ l.settings:group:option_counter $ ']:code=' $ l.settings:attr_ref $ '&Product_Attributes[' $ l.settings:group:option_counter $ ']:value=' $ l.settings:option:opt_code" />
													<span class="o-layout--grow">&mvt:option:attr_prompt;: &mvt:option:opt_prompt;</span>
													<mvt:if expr="l.settings:option:subtotal GT 0">
														<span>&mvt:option:formatted_subtotal;</span>
													</mvt:if>
													<mvt:assign name="l.settings:group:selectedAttributes" value="l.settings:group:selectedAttributes $ asciichar(34) $ l.settings:attr_ref $ asciichar(34) $ ':' $ asciichar(34) $ l.settings:option:opt_code $ asciichar(34) $ ', '" />
												<mvt:elseif expr="NOT ISNULL l.settings:option:data">
													<mvt:assign name="l.settings:group:restore:link" value="l.settings:group:restore:link $ '&Product_Attributes[' $ l.settings:group:option_counter $ ']:code=' $ l.settings:attr_ref $ '&Product_Attributes[' $ l.settings:group:option_counter $ ']:value=' $ l.settings:option:data" />
													<span class="o-layout--grow">&mvt:option:attr_prompt;: &mvt:option:data;</span>
													<mvt:if expr="l.settings:option:subtotal GT 0">
														<span>&mvt:option:formatted_subtotal;</span>
													</mvt:if>
													<mvt:assign name="l.settings:group:selectedAttributes" value="l.settings:group:selectedAttributes $ asciichar(34) $ l.settings:attr_ref $ asciichar(34) $ ':' $ asciichar(34) $ l.settings:option:data $ asciichar(34) $ ', '" />
												<mvt:elseif expr="NOT ISNULL l.settings:option:data_long">
													<mvt:assign name="l.settings:group:restore:link" value="l.settings:group:restore:link $ '&Product_Attributes[' $ l.settings:group:option_counter $ ']:code=' $ l.settings:attr_ref $ '&Product_Attributes[' $ l.settings:group:option_counter $ ']:value=' $ l.settings:option:data_long" />
													<span class="o-layout--grow">&mvt:option:attr_prompt;: &mvt:option:data_long;</span>
													<mvt:if expr="l.settings:option:subtotal GT 0">
														<span>&mvt:option:formatted_subtotal;</span>
													</mvt:if>
													<mvt:assign name="l.settings:group:selectedAttributes" value="l.settings:group:selectedAttributes $ asciichar(34) $ l.settings:attr_ref $ asciichar(34) $ ':' $ asciichar(34) $ l.settings:option:data_long $ asciichar(34) $ ', '" />
												<mvt:else>
													<mvt:assign name="l.settings:group:restore:link" value="l.settings:group:restore:link $ '&Product_Attributes[' $ l.settings:group:option_counter $ ']:code=' $ l.settings:attr_ref $ '&Product_Attributes[' $ l.settings:group:option_counter $ ']:value=' $ l.settings:option:attr_prompt" />
													<span class="o-layout--grow">&mvt:option:attr_prompt;</span>
													<mvt:if expr="l.settings:option:subtotal GT 0">
														<span>&mvt:option:formatted_subtotal;</span>
													</mvt:if>
													<mvt:assign name="l.settings:group:selectedAttributes" value="l.settings:group:selectedAttributes $ asciichar(34) $ l.settings:attr_ref $ asciichar(34) $ ':' $ asciichar(34) $ l.settings:option:attr_prompt $ asciichar(34) $ ', '" />
												</mvt:if>
											</span>
											<mvt:foreach iterator="discount" array="option:discounts">
												<mvt:if expr="l.settings:discount:display">
													<span class="u-color-red o-layout--grow">&mvt:discount:descrip;</span>
													<span class="u-color-red">&mvt:discount:formatted_discount;</span>
												</mvt:if>
											</mvt:foreach>
										</mvt:foreach>
										<mvt:assign name="l.settings:group:selectedAttributes" value="l.settings:group:selectedAttributes $ asciichar(125)" />
										<mvt:assign name="l.settings:group:selectedAttributes" value="glosub(l.settings:group:selectedAttributes, ', ' $ asciichar(125), asciichar(125))" />
										
										<mvt:if expr="l.settings:group:product:productsubscriptionsettings:enabled OR miva_array_elements(l.settings:loaded_product_attributes) GT 0">
											<button class="x-edit-basket-item" data-edit-basket-item data-basket-group="&mvte:group:group_id;" data-product-code="&mvte:group:code;" data-product-image="&mvte:group:imagetypes:main;" data-product-name="&mvte:group:name;" data-product-quantity="&mvte:group:quantity;" data-product-price="&mvte:group:formatted_subtotal_comprehensive;" data-selected-attributes="&mvte:group:selectedAttributes;" data-selected-subscription="&mvte:group:productsubscriptionterm:descrip;" aria-label="Edit &mvte:group:name; Options">Edit</button>
											<template>
												<mvt:item name="product_attributes" param="group:product_id" />
											</template>
										</mvt:if>
										
									</p>
									<mvt:if expr="l.settings:group:subterm_id">
										<p>Subscription: &mvte:group:productsubscriptionterm:descrip;</p>
									</mvt:if>
									<mvt:if expr="l.settings:group:product:id AND (NOT l.settings:group:product:productsubscriptionsettings:enabled OR NOT l.settings:group:product:productsubscriptionsettings:mandatory)">
										<p><a class="u-color-gray-50 u-font-small u-text-bold u-text-uppercase" href="&mvte:urls:WISH:secure_sep;Action=MPWL&Group_ID=&mvta:group:group_id;">&#8942; Save to Wish List</a></p>
									</mvt:if>
								</div>
							</div>
						</td>
						
						<td class="c-table-responsive__cell" data-label="Quantity">
							<mvt:if expr="l.settings:group:upsold">
								<p>&mvt:group:quantity;</p>
							<mvt:else>
								<form class="t-basket-update" method="post" action="&mvte:urls:BASK:auto;" data-hook="group-&mvte:group:group_id;">
									<fieldset>
										<legend>&mvt:group:name; Quantity</legend>
										<input type="hidden" name="Action" value="QTYG" />
										<input type="hidden" name="Basket_Group" value="&mvte:group:group_id;" />
										<input type="hidden" name="Old_Screen" value="BASK" />
										<input type="hidden" name="Offset" value="&mvte:global:Offset;" />
										<input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" />
										<input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" />
										<input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" />
										<input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" />
										<input type="hidden" name="quote_item" value="&mvt:global:quote_item;">
										<input type="hidden" name="Restore_Name" value="&mvt:group:name;">
										<input type="hidden" name="Restore_Link" value="&mvte:group:restore:link;">
										<div class="c-form-list">
											<div class="c-form-list__item">
												<label class="u-hide-visually" for="l-quantity-&mvte:group:group_id;">Quantity</label>
												<div class="x-quantify c-control-group" data-hook="quantify">
													<button class="c-button c-control-group__button u-bg-white u-color-gray-30" data-action="decrement">
														<span class="u-icon-subtract" aria-hidden="true"></span>
														<span class="u-hide-visually">Decrease Quantity/Remove</span>
													</button>
													<input id="l-quantity-&mvte:group:group_id;" class="c-form-input c-control-group__field u-text-bold u-text-center" data-group="group-&mvte:group:group_id;" data-hook="group-quantity" type="text" inputmode="decimal" name="Quantity" value="&mvt:group:quantity;" required>
													<button class="c-button c-control-group__button u-bg-white u-color-gray-30" data-action="increment">
														<span class="u-icon-add" aria-hidden="true"></span>
														<span class="u-hide-visually">Increase Quantity</span>
													</button>
												</div>
											</div>
										</div>
									</fieldset>
								</form>
							</mvt:if>
						</td>
						
						<td class="c-table-responsive__cell u-text-right" data-label="Subtotal">
							<p class="c-heading-echo">
								<span class="u-text-bold u-block">&mvt:group:formatted_subtotal_comprehensive;</span>
								<mvt:assign name="g.basket_subtotal" value="g.basket_subtotal + l.settings:group:subtotal_comprehensive" />
								<mvt:if expr="l.settings:group:subtotal_base_price GT l.settings:group:subtotal">
									<s class="c-heading--subheading u-block">&mvt:group:formatted_subtotal_base_price;</s>
								</mvt:if>
								<mvt:if expr="l.settings:group:upsold">
									<span class="c-heading--subheading u-block">&nbsp;</span>
								</mvt:if>
							</p>
						</td>
						
						<td class="c-table-responsive__cell u-font-small u-text-right">
							<p>
								<a class="c-button c-button--hollow c-button--small u-bg-white u-color-gray-30 t-basket__product-remove" href="&mvte:urls:BASK:auto_sep;Action=RGRP&Basket_Group=&mvta:group:group_id;&Restore_Name=&mvta:group:name;&Restore_Link=&mvta:group:restore:link;&quote_item=&mvta:global:quote_item;">
									<span class="u-icon-cross" aria-hidden="true"></span>
									<span class="u-hide-visually">Remove &mvt:group:name;</span>
								</a>
							</p>
						</td>
					</tr>
				</mvt:foreach>
			</tbody>
		</table>
		
		<p class="o-list-inline u-text-bold u-text-uppercase">
			<a class="u-color-gray-30" href="&mvte:urls:WISH:secure_sep;Action=MAWL" title="Save Cart for Later"><span class="u-font-small u-icon-history" aria-hidden="true"></span>&nbsp;<span class="u-font-tiny">Save Cart for Later</span></a>
		</p>
		<br>

		<p class="u-text-bold u-font-small u-text-uppercase">
			<a class="u-color-black" href="&mvte:urls:SFNT:auto;" onclick="continueShopping(this);" title="Continue Shopping"><span class="u-icon-arrow-left" aria-hidden="true"></span>&nbsp;Continue Shopping</a>
		</p>
		
		<hr class="c-keyline">
	</div>
	
	<aside class="o-layout__item u-width-12 u-width-4--l">
		<mvt:do file="g.Module_Store_Module_Currency" name="l.settings:basket:formatted_subtotal" value="CurrencyModule_AddFormatting(g.Store:currncy_mod, g.basket_subtotal)" />
		<table class="c-table-simple t-basket__order-summary">
			<thead>
				<tr class="c-table-simple__row">
					<td class="c-table-simple__cell">
						<span class="c-heading-echo u-text-bold u-text-uppercase">Order Summary</span>
					</td>
				</tr>
			</thead>
			<tbody class="u-font-small u-text-uppercase u-text-bold">
				<tr class="c-table-simple__row">
					<td class="c-table-simple__cell c-table-simple__cell--standard u-flex o-layout--justify-between">
						<span>
							<mvt:if expr="l.settings:global_minibasket:basket_count GT 1">
								<span class="u-color-gray-30">Subtotal:</span> &mvte:global_minibasket:basket_count; Items
							<mvt:else>
								<span class="u-color-gray-30">Subtotal:</span> &mvte:global_minibasket:basket_count; Item
							</mvt:if>
						</span>
						<span>&mvt:basket:formatted_subtotal;</span>
					</td>
				</tr>
				
				<mvt:foreach iterator="charge" array="basket:charges">
					<tr class="c-table-simple__row u-color-gray-30">
						<td class="c-table-simple__cell c-table-simple__cell--standard u-flex o-layout--justify-between">
							<span>&mvt:charge:descrip;</span>
							<span>&mvt:charge:formatted_disp_amt;</span>
						</td>
					</tr>
				</mvt:foreach>

				<tr class="c-table-simple__row u-color-gray-30">
					<td class="c-table-simple__cell c-table-simple__cell--standard u-flex o-layout--justify-between">
						<span>Shipping</span>
						<span>
							<button class="c-button c-button--clear u-color-gray-50 u-text-uppercase" data-dialog-trigger="shipping-estimator">Estimate</button>
						</span>
					</td>
				</tr>
				
				<mvt:foreach iterator="coupon" array="basket:coupons">
					<tr class="c-table-simple__row">
						<td class="c-table-simple__cell c-table-simple__cell--standard u-flex o-layout--justify-between">
							<form method="post" action="&mvte:urls:BASK:auto;">
								<fieldset>
									<legend>Remove Promo Code &mvt:coupon:code;</legend>
									<div class="c-form-list">
										<div class="c-form-list__item c-form-list__item--full">
											<input type="hidden" name="Action" value="RCPN"/>
											<input type="hidden" name="Coupon_Code" value="&mvte:coupon:code;"/>
											<button class="c-button c-button--clear u-bg-transparent u-color-red" type="submit">&mvt:coupon:code; <span class="u-icon-remove" aria-hidden="true"></span></button>
										</div>
									</div>
								</fieldset>
							</form>
							<mvt:if expr="NOT ISNULL l.settings:coupon:descrip">
								<span>&mvt:coupon:descrip;</span>
							</mvt:if>
						</td>
					</tr>
				</mvt:foreach>
				
				<tr class="c-table-simple__row">
					<td class="c-table-simple__cell c-table-simple__cell--standard x-collapsible-content">
						<button class="u-flex o-layout--justify-between o-layout--align-center u-text-bold u-text-uppercase x-collapsible-content__toggle" data-a11y-toggle="basket-coupon-form-toggle" type="button">
							<span>Add Promo Code</span>
							<span class="u-icon-add u-font-tiny" data-toggle="<" aria-hidden="true"></span>
						</button>
						<form id="basket-coupon-form-toggle" class="t-basket_coupon-form x-collapsible-content__item" method="post" action="&mvte:urls:_self:auto;">
							<fieldset>
								<legend>Add Promo Code</legend>
								<input type="hidden" name="Action" value="ACPN" />
								<div class="c-form-list">
									<div class="c-form-list__item c-form-list__item--full c-control-group u-flex">
										<label class="u-hide-visually" for="Coupon_Code">Add Promo Code</label>
										<input id="Coupon_Code" class="c-form-input c-control-group__field u-text-regular" type="text" name="Coupon_Code" placeholder="Enter Promo Code" required>
										<input class="c-button c-control-group__button c-button--large u-bg-gray-40 u-border-none u-text-uppercase" type="submit" value="Apply">
									</div>
								</div>
							</fieldset>
						</form>
					</td>
				</tr>
				
				<tr>
					<td class="c-table-simple__cell">
						<br>
						<div class="u-flex o-layout--align-center o-layout--justify-between c-heading-delta u-text-bold u-text-uppercase">
							<span class="u-font-tiny">Current Total</span>
							<span>&mvt:basket:formatted_total;</span>
						</div>
					</td>
				</tr>
			
				<tr>
					<td>
						<br>
						<a class="c-button c-button--full c-button--huge u-bg-black u-color-white u-text-bold" href="&mvte:urls:OINF:auto;">Secure Checkout</a>
						<br>
						<hr class="c-keyline">
						<mvt:item name="readytheme" param="contentsection( 'paypalcp_configuration' )" />
						<mvt:item name="readytheme" param="contentsection( 'amazonpay_configuration' )" />
						<mvt:item name="readytheme" param="contentsection( 'mvaffirm_configuration' )" />
					</td>
				</tr>
			
				<tr>
					<td>
						<mvt:item name="readytheme" param="contentsection( 'helpful_info' )" />
					</td>
				</tr>
			</tbody>
		</table>
		
		<mvt:item name="shipestimate" />
	</aside>
</section>
<mvt:item name="content" />

bask-content.html

<mvt:if expr="l.settings:should_show_dialog">
	<div class="c-dialog x-edit-basket-attributes" data-dialog="edit-basket-attributes" aria-hidden="true">
		<div class="c-dialog__overlay" tabindex="-1">
			<div class="c-dialog__container" aria-labelledby="edit-basket-attributes__title" aria-modal="true" role="dialog">
				<header class="c-dialog__header">
					<p id="edit-basket-attributes__title" class="c-dialog__title c-heading-charlie">Update Item</p>
					<button class="c-dialog__close" aria-label="Close Dialog" data-dialog-close></button>
				</header>
				<div class="c-dialog__content" data-dialog-content>
					<form class="x-edit-basket-attributes__form" autocomplete="off" data-basket-update method="post" name="add">
						<picture>
							<img data-product-image alt="" src=""/>
						</picture>
						<div class="x-edit-basket-attributes__product-info">
							<p class="c-heading-delta">
								<span class="u-font-tiny" data-product-code></span><br>
								<span data-product-name></span>
							</p>
							<p class="c-heading-charlie">
								<strong id="price-value" class="x-edit-basket-attributes__product-price"></strong> <span class="c-heading--subheading">ea.</span>&nbsp;&nbsp;<span class="c-heading--subheading u-text-strike" id="price-value-additional"></span>
							</p>
						</div>
						<fieldset>
							<input name="Action" type="hidden" value="ADPR"/>
							<input name="Basket_Group" type="hidden" value=""/>
							<input name="Product_Code" type="hidden" value=""/>
							<hr class="c-keyline"/>
							<legend>Update Item Attributes</legend>
							<div class="c-form-list">
								<div class="c-form-list__item c-form-list__item--full" data-product-attributes></div>
								<div class="c-form-list__item">
									<label class="u-hide-visually" for="l-quantity">Quantity</label>
									<div class="x-quantify c-control-group" data-hook="quantify">
										<button aria-label="Decrease Quantity" class="c-button c-control-group__button u-bg-white u-color-gray-40 u-icon-subtract" data-action="decrement"></button>
										<input class="c-form-input c-control-group__field u-text-center u-color-gray-40" id="l-quantity" data-max="" data-min="0" data-step="1" inputmode="decimal" name="Quantity" type="text" value="">
										<button aria-label="Increase Quantity" class="c-button c-control-group__button u-bg-white u-color-gray-40 u-icon-add" data-action="increment"></button>
									</div>
								</div>
								<div class="c-form-list__item c-form-list__item--full">
									<div class="x-messages x-messages--info x-product-layout-purchase__inventory-message" data-hook="response-messages"></div>
								</div>
								<div class="c-form-list__item c-form-list__item--full">
									<input class="c-button c-button--full c-button--large u-bg-gray-50 u-font-small u-text-medium u-text-uppercase" type="submit" value="Update Item">
								</div>
							</div>
						</fieldset>
					</form>
				</div>
			</div>
		</div>
	</div>
</mvt:if>

edit-basket-attributes.js

(() => {
	'use strict';

	const dialog = 'edit-basket-attributes';
	const dialogElement = document.querySelector('[data-dialog="' + dialog + '"]');
	const product_data_generic = {
		'dependency_resolution': 'first',
		'price_element_id': 'price-value',
		'additional_price_element_id': 'price-value-additional',
		'price': 'sale',
		'additionalprice': 'base',
		'displaydiscounts': false,
		'predictdiscounts': false,
		'swatch_element_id': 'swatches',
	};

	if (dialogElement) {
		let dialogContent = dialogElement.querySelector('[data-dialog-content]');
		let editItemButtons = document.querySelectorAll('[data-edit-basket-item]');

		for (const button of editItemButtons) {
			button.addEventListener('click', function () {
				let product_attribute_content = dialogContent.querySelector('[data-product-attributes]');
				let product_attribute_template = this.nextElementSibling;
				let product_data = Object.assign({}, product_data_generic, {
					product_code: this.getAttribute('data-product-code')
				});
				let selectedAttributes = JSON.parse(this.getAttribute('data-selected-attributes'));
				let subscriptionTerm = this.getAttribute('data-selected-subscription');
				
				dialogContent.querySelector('input[name="Basket_Group"]').value = this.getAttribute('data-basket-group');
				dialogContent.querySelector('input[name="Product_Code"]').value = product_data.product_code;
				dialogContent.querySelector('[data-product-code]').innerHTML = product_data.product_code;
				dialogContent.querySelector('[data-product-image]').src = this.getAttribute('data-product-image');
				dialogContent.querySelector('[data-product-name]').innerHTML = this.getAttribute('data-product-name');
				dialogContent.querySelector('input[name="Quantity"]').value = this.getAttribute('data-product-quantity');
				dialogContent.querySelector('#price-value').innerHTML = this.getAttribute('data-product-price');
				product_attribute_content.innerHTML = '';
				product_attribute_content.appendChild(product_attribute_template.content.cloneNode(true));

				for (const key in selectedAttributes) {
					if (selectedAttributes.hasOwnProperty(key)) {
						let attributes = product_attribute_content.querySelectorAll('[data-attribute="' + key.toLowerCase() + '"]');

						attributes.forEach(attribute => {
							if (attribute.type !== 'checkbox' && attribute.type !== 'radio') {
								attribute.value = selectedAttributes[key];
							}
							else if (attribute.type === 'checkbox' && attribute.value === 'on') {
								attribute.checked = true;
							}
							else if (attribute.type === 'radio' && attribute.value === selectedAttributes[key]) {
								attribute.checked = true;
							}
						});
					}
				}

				if (subscriptionTerm !== '') {
					const subscription = product_attribute_content.querySelector('[data-attribute="subscription"]');
					const subscriptionOptions = Array.from(subscription.options);
					const termToSelect = subscriptionOptions.find(item => item.text === subscriptionTerm);

					termToSelect.selected = true;
				}

				let basketItemAttributeMachine = new AttributeMachine(product_data);

				basketItemAttributeMachine.Generate_Swatch = function (product_code, attribute, option) {
					let swatch_container = document.querySelector('#swatches');
					let swatch = document.createElement('li');
					let swatchButton = document.createElement('button');
					let img = document.createElement('img');

					img.src = option.image;
					img.setAttribute('alt', option.prompt);
					swatchButton.setAttribute('type', 'button');
					swatchButton.setAttribute('aria-label', option.prompt);
					swatchButton.appendChild(img);
					swatch.classList.add('o-list-inline__item');
					swatch.setAttribute('data-code', option.code);
					swatch.setAttribute('data-color', option.prompt);
					swatch.appendChild(swatchButton);

					img.onload = function () {
						if (window.matchMedia('(pointer: fine)').matches) {
							img.height = this.height / 2;
							img.width = this.width / 2;
						}
						else {
							img.height = this.height;
							img.width = this.width;
						}
						swatch_container.style.minHeight = `${this.height * 1.25}px`;
					};

					setTimeout(function () {
						if (swatch_container) {
							let swatch_element = swatch_container.querySelector('ul');
							let swatch_select = document.querySelector('[data-hook="attribute-swatch-select"]');
							let swatch_selected = swatch_select.options[swatch_select.selectedIndex].text;
							let swatch_name_element = document.querySelector('[data-hook="attribute-swatch-name"]');
							let swatchElements = swatch_element.querySelectorAll('li');

							swatch_element.removeAttribute('style');
							swatch_element.classList.add('o-list-inline');
							swatch_name_element.textContent = swatch_selected;
							swatchElements.forEach(function (swatchElement) {
								let swatchColor = swatchElement.getAttribute('data-code');
								let swatchImage = swatchElement.querySelector('button');

								if (swatchColor === swatch_select.options[swatch_select.selectedIndex].value) {
									swatchImage.classList.add('x-product-layout-purchase__swatches--active');
								}
							});
						}
					}, 0);

					return swatch;
				};

				basketItemAttributeMachine.Swatch_Click = function (input, attribute, option) {
					let i;
					let swatchElements = input.machine.swatches.childNodes[0].childNodes;
					let swatch_name_element = document.querySelector('[data-hook="attribute-swatch-name"]');

					for (i = 0; i < input.select.options.length; i++) {
						if (input.select.options[i].value === option.code) {
							input.select.selectedIndex = i;
						}
					}

					this.Attribute_Changed(input);
					swatch_name_element.innerHTML = option.prompt;
					swatchElements.forEach(function (swatchElement) {
						let swatchColor = swatchElement.getAttribute('data-code');
						let swatchImage = swatchElement.querySelector('button');

						if (swatchColor === input.select.options[input.select.selectedIndex].value) {
							swatchImage.focus();
						}
					});
				};

				basketItemAttributeMachine.Disable_Purchase_Buttons = function () {
					let submitButton = this.buttons.filter(button => button.tagName === 'INPUT')[0];

					if (this.Purchase_FormElement_CanEnableDisable(submitButton)) {
						submitButton.disabled = true;
					}
				};

				basketItemAttributeMachine.Initialize(null, null);
				window.openDialog(dialog);

				const updateForm = document.querySelector('[data-basket-update]');

				updateForm.addEventListener('submit', function (event) {
					event.preventDefault();
					let attributes = [];
					let form_data = new FormData(updateForm);
					let index;
					let lookup = {};
					let match;
					let param_name;
					let regex = new RegExp('^product_attributes\\[\\s*(\\d+)\\s*]:(.*?)$', 'i');

					for (let [key, value] of form_data.entries()) {
						if ((match = key.match(regex)) === null) {
							continue;
						}

						index = parseInt(match[1], 10);
						param_name = match[2];

						if (!lookup.hasOwnProperty(index)) {
							lookup[index] = {};
						}

						lookup[index][param_name] = value;
					}

					for (index in lookup) {
						attributes.push(lookup[index]);
					}

					const message_element = dialogContent.querySelector('[data-hook="response-messages"]');
					let groupID = this.querySelector('input[name="Basket_Group"]').value;
					let quantityInput = parseInt(this.querySelector('input[name="Quantity"]').value);
					let subscription = this.querySelector('[data-attribute="subscription"]');
					let updateData = {
						attributes,
						quantity: quantityInput,
						subterm_id: (subscription) ? subscription.value : undefined
					};

					if (quantityInput === 0) {
						Runtime_BasketGroup_Delete (groupID, () => {
							document.location = document.location.href;
						});
					}
					else {
						Runtime_BasketGroup_Update(groupID, updateData, ({success, error_message}) => {
							if (success === 1) {
								document.location = document.location.href;
							}
							else {
								message_element.textContent = error_message;
							}
						});
					}
				});
			});
		}
	}
})();