Skip to content

Instantly share code, notes, and snippets.

@influxweb

influxweb/bask-basket.html

Last active April 29, 2022 21:23
Show Gist options
  • Save influxweb/780f6c2a803b4266d350c5a5c8760ad3 to your computer and use it in GitHub Desktop.
Save influxweb/780f6c2a803b4266d350c5a5c8760ad3 to your computer and use it in GitHub Desktop.
Download ZIP
BASK: Edit Basket Attributes [UPDATED: 04/29/2022]
Raw
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" />
Raw
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>
Raw
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;
}
});
}
});
});
}
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment