Skip to content

Instantly share code, notes, and snippets.

@influxweb

influxweb/ctgy-adpm.html

Last active September 25, 2020 17:06
Show Gist options
  • Save influxweb/b4f7318fddf6b389433776a9d7f1ca39 to your computer and use it in GitHub Desktop.
Save influxweb/b4f7318fddf6b389433776a9d7f1ca39 to your computer and use it in GitHub Desktop.
Download ZIP
Shadows v2: CTGY Multi-Product Add To Cart (ADPM)
Raw
ctgy-adpm.html
<mvt:item name="html_profile" />
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="&mvt:global:basehref;">
<mvt:if expr="NOT ISNULL l.settings:category:page_title">
<title>&mvt:category:page_title;</title>
<mvt:elseif expr="NOT ISNULL l.settings:page:title">
<title>&mvt:page:title;</title>
<mvt:else>
<title>&mvt:store:name;: &mvt:category:name;</title>
</mvt:if>
<mvt:item name="head" param="css_list" />
<mvt:item name="head" param="head_tag" />
<mvt:item name="attributemachine" param="head_deferred" />
<mvt:item name="category_listing_imagemachine" param="head_deferred" />
</head>
<body id="js-CTGY" class="o-site-wrapper t-page-&mvt:global:pageClass;">
<mvt:item name="hdft" param="global_header" />
<section class="o-layout o-layout--column-reverse o-layout--row-reverse--l o-layout--wide">
<div class="o-layout__item u-width-12 u-width-9--l">
<mvt:if expr="NOT ISNULL l.settings:category_title:image">
<section class="o-layout u-hidden u-flex--l">
<div class="o-layout__item">
<div class="x-hero" title="&mvte:category:name;">
<img src="&mvte:category_title:image;" alt="&mvte:category:name;">
</div>
<br>
</div>
</section>
</mvt:if>
<section class="o-layout">
<div class="o-layout__item">
<mvt:item name="hdft" param="header" />
</div>
</section>
<section class="o-layout">
<div class="o-layout__item">
<mvt:item name="prod_ctgy_hdft" param="ctgy_header" />
</div>
</section>
<mvt:foreach array="cattree_categories" iterator="category_children">
<mvt:if expr="l.settings:category_children:parent_id EQ l.settings:category:id">
<mvt:assign name="l.null" value="miva_array_insert(l.settings:subcategories, l.settings:category_children, -1)" />
</mvt:if>
</mvt:foreach>
<mvt:assign name="l.settings:subcategory_count" value="miva_array_elements(l.settings:subcategories)" />
<mvt:if expr="l.settings:subcategories GT 0">
<section class="o-layout u-grids-2 u-grids-3--l x-product-list">
<mvt:foreach iterator="subcategory" array="subcategories">
<div class="o-layout__item u-text-center x-product-list__item">
<a class="u-block x-product-list__link" href="&mvte:subcategory:link;">
<figure class="x-product-list__figure">
<mvt:if expr="l.settings:subcategory:image">
<img class="x-product-list__image" src="&mvt:subcategory:image;">
</mvt:if>
<figcaption>
<strong class="x-product-list__name u-text-uppercase">&mvte:subcategory:name;</strong>
</figcaption>
</figure>
</a>
</div>
</mvt:foreach>
</section>
<mvt:else>
<mvt:item name="category_listing" />
</mvt:if>
<section class="o-layout">
<div class="o-layout__item">
<mvt:item name="prod_ctgy_hdft" param="ctgy_footer" />
</div>
</section>
<section class="o-layout">
<div class="o-layout__item">
<mvt:item name="hdft" param="footer" />
</div>
</section>
</div>
<aside class="o-layout__item u-width-12 u-width-3--l">
<section class="o-layout u-hidden--l">
<div class="o-layout__item">
<p class="c-heading-delta u-text-bold u-text-center u-text-uppercase">&mvte:category:name;</p>
<mvt:if expr="NOT ISNULL l.settings:category_title:image">
<div class="x-hero" title="&mvte:category:name;">
<img src="&mvte:category_title:image;" alt="&mvte:category:name;">
</div>
<br>
</mvt:if>
</div>
</section>
<mvt:item name="category_tree" />
<mvt:item name="facets" />
</aside>
</section>
<mvt:item name="hdft" param="global_footer" />
</body>
</html>
Raw
ctgy-product_attributes.html
<mvt:foreach iterator="attribute" array="attributes">
<mvt:assign name="l.settings:attribute_ID" value="'l-' $ tolower(l.settings:attribute:code) $ '_' $ l.settings:product:id" />
<mvt:if expr="l.settings:attribute:required">
<mvt:assign name="l.settings:required_attribute" value="'required'" />
<mvt:assign name="l.settings:required_attribute_classes" value="'u-text-bold is-required'" />
<mvt:else>
<mvt:assign name="l.settings:required_attribute" value="''" />
<mvt:assign name="l.settings:required_attribute_classes" value="''" />
</mvt:if>
<input type="hidden" name="Products[&mvte:product:id;]:attributes[&mvte:attribute:index;]:code" value="&mvte:attribute:code;">
<mvt:if expr="l.settings:attribute:template_code NE 0">
<input type="hidden" name="Products[&mvte:product:id;]:attributes[&mvte:attribute:index;]:template_code" value="&mvte:attribute:template_code;">
</mvt:if>
<mvt:if expr="l.settings:attribute:type EQ 'text'">
<div class="x-product-layout-purchase__options-attribute">
<label class="c-form-label &mvt:required_attribute_classes;" for="&mvt:attribute_ID;" title="&mvte:attribute:prompt;">&mvte:attribute:prompt;</label>
<input id="&mvt:attribute_ID;" class="c-form-input c-form-input--large u-color-gray-40 u-font-small" type="text" name="Products[&mvte:product:id;]:attributes[&mvte:attribute:index;]:value" value="&mvte:attribute:value;" placeholder="" &mvt:required_attribute;>
</div>
<mvt:elseif expr="l.settings:attribute:type EQ 'memo'">
<div class="x-product-layout-purchase__options-attribute">
<label class="c-form-label &mvt:required_attribute_classes;" for="&mvt:attribute_ID;" title="&mvte:attribute:prompt;">&mvte:attribute:prompt;</label>
<textarea id="&mvt:attribute_ID;" class="c-form-input c-form-input--long c-form-input--large u-color-gray-40 u-font-small" name="Product_Attributes[&mvt:attribute:index;]:value" placeholder="" &mvt:required_attribute;>&mvte:attribute:value;</textarea>
</div>
<mvt:elseif expr="l.settings:attribute:type EQ 'radio'">
<div class="x-product-layout-purchase__options-attribute" aria-labelledby="group_&mvt:attribute_ID;" role="radiogroup">
<span id="group_&mvt:attribute_ID;" class="c-form-label u-block &mvt:required_attribute_classes;" title="&mvte:attribute:prompt;" &mvt:required_attribute;>&mvte:attribute:prompt;</span>
<mvt:foreach iterator="option" array="attribute:options">
<label class="c-form-checkbox c-form-checkbox--radio" title="&mvte:option:prompt;">
<mvt:if expr="((g.Product_Attributes[l.settings:attribute:index]:value EQ 0) AND (l.settings:option:id EQ l.settings:attribute:default_id)) OR (g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code)">
<input class="c-form-checkbox__input" type="radio" name="Products[&mvte:product:id;]:attributes[&mvte:attribute:index;]:value" value="&mvte:option:code;" checked &mvt:required_attribute;>
<mvt:else>
<input class="c-form-checkbox__input" type="radio" name="Products[&mvte:product:id;]:attributes[&mvte:attribute:index;]:value" value="&mvte:option:code;" &mvt:required_attribute;>
</mvt:if>
<span class="c-form-checkbox__caption">
<mvt:if expr="l.settings:option:image">
<img src="&mvte:option:image;" alt="&mvte:option:prompt;" loading="lazy">
<mvt:else>
&mvte:option:prompt;
<mvt:if expr="l.settings:option:price">
<mvt:if expr="l.settings:option:price GT 0">
&nbsp;<mvt:eval expr="'+ $' $ rnd(l.settings:option:price, 2)" />
<mvt:else>
&nbsp;<mvt:eval expr="' -$' $ glosub(rnd(l.settings:option:price, 2), '-', '')" />
</mvt:if>
</mvt:if>
</mvt:if>
</span>
</label>
</mvt:foreach>
</div>
<mvt:elseif expr="l.settings:attribute:type EQ 'select'">
<div class="x-product-layout-purchase__options-attribute">
<label class="c-form-label &mvt:required_attribute_classes;" for="&mvt:attribute_ID;" title="&mvte:attribute:prompt;">&mvt:attribute:prompt;</label>
<div class="c-form-select">
<select id="&mvt:attribute_ID;" class="c-form-select__dropdown c-form-input--large u-color-gray-40 u-font-small" name="Products[&mvt:product:id;]:attributes[&mvt:attribute:index;]:value" &mvt:required_attribute;>
<mvt:foreach iterator="option" array="attribute:options">
<mvt:if expr="((g.Product_Attributes[l.settings:attribute:index]:value EQ 0) AND (l.settings:option:id EQ l.settings:attribute:default_id)) OR (g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code)">
<option value="&mvte:option:code;" selected>
&mvte:option:prompt;
<mvt:if expr="l.settings:option:price">
<mvt:if expr="l.settings:option:price GT 0">
&nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:option:price, 2)" />
<mvt:else>
&nbsp;<mvt:eval expr="' -$' $ glosub(rnd(l.settings:option:price, 2), '-', '')" />
</mvt:if>
</mvt:if>
</option>
<mvt:else>
<option value="&mvte:option:code;">
&mvte:option:prompt;
<mvt:if expr="l.settings:option:price">
<mvt:if expr="l.settings:option:price GT 0">
&nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:option:price, 2)" />
<mvt:else>
&nbsp;<mvt:eval expr="' -$' $ glosub(rnd(l.settings:option:price, 2), '-', '')" />
</mvt:if>
</mvt:if>
</option>
</mvt:if>
</mvt:foreach>
</select>
</div>
</div>
<mvt:elseif expr="l.settings:attribute:type EQ 'swatch-select'">
<div class="x-product-layout-purchase__options-attribute">
<label class="c-form-label &mvt:required_attribute_classes;" for="&mvt:attribute_ID;" title="&mvte:attribute:prompt;">&mvt:attribute:prompt;</label>
<div class="c-form-select">
<select id="&mvt:attribute_ID;" class="c-form-select__dropdown c-form-input--large u-color-gray-40 u-font-small" name="Products[&mvt:product:id;]:attributes[&mvt:attribute:index;]:value" &mvt:required_attribute;>
<mvt:foreach iterator="option" array="attribute:options">
<mvt:if expr="((g.Product_Attributes[l.settings:attribute:index]:value EQ 0) AND (l.settings:option:id EQ l.settings:attribute:default_id)) OR (g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code)">
<option value="&mvte:option:code;" selected>
&mvte:option:prompt;
<mvt:if expr="l.settings:option:price">
<mvt:if expr="l.settings:option:price GT 0">
&nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:option:price, 2)" />
<mvt:else>
&nbsp;<mvt:eval expr="' -$' $ glosub(rnd(l.settings:option:price, 2), '-', '')" />
</mvt:if>
</mvt:if>
</option>
<mvt:else>
<option value="&mvte:option:code;">
&mvte:option:prompt;
<mvt:if expr="l.settings:option:price">
<mvt:if expr="l.settings:option:price GT 0">
&nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:option:price, 2)" />
<mvt:else>
&nbsp;<mvt:eval expr="' -$' $ glosub(rnd(l.settings:option:price, 2), '-', '')" />
</mvt:if>
</mvt:if>
</option>
</mvt:if>
</mvt:foreach>
</select>
</div>
</div>
<mvt:elseif expr="l.settings:attribute:type EQ 'checkbox'">
<div class="x-product-layout-purchase__options-attribute">
<span class="c-form-label u-block">&nbsp;</span>
<label class="c-form-checkbox &mvt:required_attribute_classes;" title="&mvte:attribute:prompt;">
<mvt:if expr="g.Product_Attributes[l.settings:attribute:index]:value">
<input class="c-form-checkbox__input" type="checkbox" name="Products[&mvte:product:id;]:attributes[&mvte:attribute:index;]:value" value="Yes" checked &mvt:required_attribute;>
<mvt:else>
<input class="c-form-checkbox__input" type="checkbox" name="Products[&mvte:product:id;]:attributes[&mvte:attribute:index;]:value" &mvt:required_attribute;>
</mvt:if>
<span class="c-form-checkbox__caption">
<mvt:if expr="l.settings:attribute:image">
<img src="&mvte:attribute:image;" alt="&mvte:attribute:prompt;" loading="lazy">
<mvt:else>
&mvte:attribute:prompt;
<mvt:if expr="l.settings:attribute:price">
<mvt:if expr="l.settings:attribute:price GT 0">
&nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:attribute:price, 2)" />
<mvt:else>
&nbsp;<mvt:eval expr="' -$' $ glosub(rnd(l.settings:attribute:price, 2), '-', '')" />
</mvt:if>
</mvt:if>
</mvt:if>
</span>
</label>
</div>
</mvt:if>
</mvt:foreach>
Raw
ctgy-product_list.html
<mvt:if expr="l.settings:category_listing:products_on_page_count GT 1">
<mvt:assign name="g.facet_listings" value="''"/>
<mvt:foreach iterator="facet" array="facets:facets">
<mvt:foreach iterator="facet_value" array="facet:values">
<mvt:if expr="l.settings:facet_value:selected">
<input type="hidden" name="&mvte:facet:code;" value="&mvte:facet_value:value;"/>
<mvt:assign name="g.facet_listings" value="'&' $ l.settings::facet:code $ '=' $ l.settings::facet_value:value"/>
</mvt:if>
</mvt:foreach>
</mvt:foreach>
<section class="u-hidden u-flex--l o-layout--align-center o-layout--justify-between o-layout--wrap">
<h1 class="c-heading-delta u-text-bold u-text-uppercase">&mvte:category:name;</h1>
<div class="x-display-list-filtering t-display-list-filtering">
<form class="x-display-list-filtering__per-page" method="get" action="&mvte:urls:_self:auto_noparams;">
<fieldset>
<legend>Number of Products to Show</legend>
<mvt:if expr="tolower( l.settings:category_listing:mode ) EQ 'ctgy' AND toupper( g.Screen ) NE 'CTGY'">
<input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;" />
<mvt:elseif expr="tolower( l.settings:category_listing:mode ) EQ 'relp' AND toupper( g.Screen ) NE 'PROD'">
<input type="hidden" name="Product_Code" value="&mvte:global:Product_Code;" />
</mvt:if>
<mvt:item name="urls" param="hidden_params:_self:auto" />
<input type="hidden" name="Search" value="&mvte:global:Search;" />
<input type="hidden" name="Sort_By" value="&mvte:global:Sort_By;" />
<mvt:foreach iterator="facet" array="facets:facets">
<mvt:foreach iterator="facet_value" array="facet:values">
<mvt:if expr="l.settings:facet_value:selected">
<input type="hidden" name="&mvte:facet:code;" value="&mvte:facet_value:value;" />
</mvt:if>
</mvt:foreach>
</mvt:foreach>
<div class="c-form-list">
<div class="c-form-list__item">
<label class="c-form-label u-font-tiny u-text-uppercase u-text-normal" for="l-per_page">View</label>
<div class="c-form-select">
<select id="l-per_page" class="c-form-select__dropdown u-font-small u-text-uppercase u-text-bold" name="Per_Page" onchange="MMProdList_UpdateQuery( this ); return true;">
<mvt:if expr="g.Per_Page EQ 12">
<option value="12" selected="selected">12 Items/Page</option>
<mvt:else>
<option value="12">12 Items/Page</option>
</mvt:if>
<mvt:if expr="g.Per_Page EQ 24">
<option value="24" selected="selected">24 Items/Page</option>
<mvt:else>
<option value="24">24 Items/Page</option>
</mvt:if>
<mvt:if expr="g.Per_Page EQ 48">
<option value="48" selected="selected">48 Items/Page</option>
<mvt:else>
<option value="48">48 Items/Page</option>
</mvt:if>
<mvt:if expr="g.Per_Page EQ -1">
<option value="-1" selected="selected">All Items</option>
<mvt:else>
<option value="-1">All Items</option>
</mvt:if>
</select>
</div>
</div>
</div>
</fieldset>
</form>
<!-- end .x-display-list-filtering__per-page -->
<form class="x-display-list-filtering__sort-by" method="get" action="&mvte:urls:_self:auto_noparams;">
<fieldset>
<legend>Sort Products By</legend>
<mvt:if expr="tolower( l.settings:category_listing:mode ) EQ 'ctgy' AND toupper( g.Screen ) NE 'CTGY'">
<input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;">
<mvt:elseif expr="tolower( l.settings:category_listing:mode ) EQ 'relp' AND toupper( g.Screen ) NE 'PROD'">
<input type="hidden" name="Product_Code" value="&mvte:global:Product_Code;">
</mvt:if>
<mvt:item name="urls" param="hidden_params:_self:auto"/>
<input type="hidden" name="Search" value="&mvte:global:Search;"/>
<input type="hidden" name="Per_Page" value="&mvte:global:Per_Page;"/>
<mvt:foreach iterator="facet" array="facets:facets">
<mvt:foreach iterator="facet_value" array="facet:values">
<mvt:if expr="l.settings:facet_value:selected">
<input type="hidden" name="&mvte:facet:code;" value="&mvte:facet_value:value;">
</mvt:if>
</mvt:foreach>
</mvt:foreach>
<div class="c-form-list">
<div class="c-form-list__item">
<label class="c-form-label u-font-tiny u-text-uppercase u-text-normal" for="l-sort_by">Sort</label>
<div class="c-form-select">
<select id="l-sort_by" class="c-form-select__dropdown u-font-small u-text-uppercase u-text-bold" name="Sort_By" onchange="MMProdList_UpdateQuery( this ); return true;">
<mvt:if expr="ISNULL g.Sort_By">
<option value="disp_order" selected>Featured</option>
<mvt:else>
<option value="disp_order">Featured</option>
</mvt:if>
<mvt:if expr="g.Sort_By EQ 'bestsellers'">
<option value="bestsellers" selected>Best Selling</option>
<mvt:else>
<option value="bestsellers">Best Selling</option>
</mvt:if>
<mvt:if expr="g.Sort_By EQ 'price_asc'">
<option value="price_asc" selected>Price (Low to High)</option>
<mvt:else>
<option value="price_asc">Price (Low to High)</option>
</mvt:if>
<mvt:if expr="g.Sort_By EQ 'price_desc'">
<option value="price_desc" selected>Price (High to Low)</option>
<mvt:else>
<option value="price_desc">Price (High to Low)</option>
</mvt:if>
<mvt:if expr="g.Sort_By EQ 'newest'">
<option value="newest" selected>Newest Items</option>
<mvt:else>
<option value="newest">Newest Items</option>
</mvt:if>
</select>
</div>
</div>
</div>
</fieldset>
</form>
<!-- end .x-display-list-filtering__sort-by -->
</div>
<!-- end .x-display-list-filtering -->
</section>
<hr class="c-keyline u-hidden u-shown--l">
</mvt:if>
<form data-hook="multi-add-form" action="&mvte:urls:BASK:auto;" method="post" name="add">
<fieldset>
<legend>Add Multiple &mvt:category:name; Product To Your Cart</legend>
<input type="hidden" name="Action" value="ADPM">
<input type="hidden" name="Attributes" value="Yes">
<mvt:foreach iterator="product" array="category_listing:products">
<div class="o-layout o-layout--spaced">
<div class="o-layout__item u-width-8--m">
<div class="o-layout">
<div class="o-layout__item u-width-4">
<img id="main_image_&mvte:product:id;" src="graphics/en-US/cssui/blank.gif" alt="&mvt:product:name;" loading="lazy" width="&mvte:category_listing_imagemachine:image_width;" height="&mvte:category_listing_imagemachine:image_height;">
<mvt:item name="category_listing_imagemachine" param="body_deferred:product:id" />
</div>
<div class="o-layout__item u-width-8">
<p><a href="&mvte:product:link;">&mvt:product:name;</a></p>
<p class="u-font-small"><mvt:eval expr="miva_html_strip(l.settings:product:descrip, '')"/></p>
<div id="inventory-message_&mvte:product:id;">
<mvt:if expr="l.settings:product:inv_active">&mvt:product:inv_long;<br></mvt:if>
</div>
</div>
<div class="o-layout__item u-width-8--m u-offset-4--m">
<mvt:if expr="l.settings:product:inv_level NE 'out'">
<input type="hidden" name="Products[ &mvt:product:id; ]:code" value="&mvte:product:code;">
<mvt:item name="product_attributes" param="product:id"/>
</mvt:if>
</div>
</div>
</div>
<div class="o-layout__item u-width-3--m u-offset-1--m u-width-2--l u-offset-2--l">
<div class="o-layout o-layout--align-bottom u-grids-2 u-grids-1--m">
<div class="o-layout__item">
<p>
<strong id="price-value_&mvte:product:id;">&mvt:product:formatted_price;</strong><br>
<s id="price-value-additional_&mvte:product:id;"><mvt:if expr="l.settings:product:base_price GT l.settings:product:price">&mvt:product:formatted_base_price;</mvt:if></s>
</p>
<div id="product-discounts_&mvte:product:id;" class="x-product-layout-purchase__product-discounts u-font-small">
<mvt:foreach array="product:discounts" iterator="discount">
<mvt:if expr="l.settings:discount:display">
&mvt:discount:descrip;: &mvt:discount:formatted_discount;
</mvt:if>
</mvt:foreach>
</div>
</div>
<div class="o-layout__item">
<label class="c-form-label u-font-tiny &mvt:required_attribute_classes;" for="quantity_&mvte:product:id;">Quantity</label>
<div class="x-quantify c-control-group t-quantify u-font-small" data-hook="multi-add-quantity-control">
<button class="c-button c-control-group__button u-bg-white u-color-gray-40 u-icon-subtract" data-action="decrement" aria-label="Decrease Quantity"></button>
<input id="quantity_&mvte:product:id;" class="c-form-input c-control-group__field u-text-center u-color-gray-40" data-hook="multi-add-quantity" type="text" inputmode="number" name="Products[ &mvt:product:id; ]:quantity" value="0" aria-label="Enter quantity for &mvte:product:name;">
<button class="c-button c-control-group__button u-bg-white u-color-gray-40 u-icon-add" data-action="increment" aria-label="Increase Quantity"></button>
</div>
</div>
</div>
</div>
</div>
<mvt:item name="attributemachine" param="body_deferred" />
<hr class="c-keyline">
</mvt:foreach>
<div class="o-layout o-layout--spaced">
<div class="o-layout__item u-text-right">
<mvt:if expr="l.settings:product:inv_level NE 'out'">
<input class="c-button c-button--huge u-bg-black u-color-white u-text-bold" aria-live="polite" data-hook="multi-add-submit" data-value="Shop Now" type="submit" value="Shop Now">
</mvt:if>
</div>
</div>
</fieldset>
</form>
<mvt:if expr="l.settings:category_listing:page_links:last_page GT 1">
<nav class="x-pagination x-pagination--centered t-pagination" aria-label="Pagination">
<ul class="o-list-inline">
<mvt:if expr="l.settings:category_listing:page_links:current_page NE 1">
<li class="o-list-inline__item">
<a class="c-button c-button--hollow u-border-rounded u-color-gray-40" href="&mvte:urls:_self:auto_sep;&mvte:category_listing:page_links:prev_link_params;" aria-label="Go to the previous page.">
<span class="u-icon-chevron-left" aria-hidden="true"></span>
</a>
</li>
<mvt:else>
<li class="o-list-inline__item">
<span class="c-button c-button--hollow u-border-rounded u-color-gray-40" title="You are on the first page.">
<span class="u-icon-chevron-left" aria-hidden="true"></span>
</span>
</li>
</mvt:if>
<li class="o-list-inline__item o-layout--grow">
<div class="c-form-select">
<select class="c-form-select__dropdown u-font-small u-text-uppercase u-text-bold u-color-gray-40" aria-label="Go to page" onchange="window.location.href=this.options[ this.selectedIndex ].value">
<mvt:foreach iterator="pages" array="category_listing:page_links:pages">
<mvt:if expr="l.settings:category_listing:page_links:current_page EQ l.settings:pages:page_num">
<option value="&mvte:urls:_self:auto_sep;&mvte:pages:link_params;" aria-current="page" selected>Page &mvte:pages:page_num; of &mvte:category_listing:page_links:last_page;</option>
<mvt:else>
<option value="&mvte:urls:_self:auto_sep;&mvte:pages:link_params;">Page &mvte:pages:page_num; of &mvte:category_listing:page_links:last_page;</option>
</mvt:if>
</mvt:foreach>
</select>
</div>
</li>
<mvt:if expr="l.settings:category_listing:page_links:current_page NE l.settings:category_listing:page_links:last_page">
<li class="o-list-inline__item">
<a class="c-button c-button--hollow u-border-rounded u-color-gray-40" href="&mvte:urls:_self:auto_sep;&mvte:category_listing:page_links:next_link_params;" aria-label="Go to the next page.">
<span class="u-icon-chevron-right" aria-hidden="true"></span>
</a>
</li>
<mvt:else>
<li class="o-list-inline__item">
<span class="c-button c-button--hollow u-border-rounded u-color-gray-40" title="You are on the last page.">
<span class="u-icon-chevron-right" aria-hidden="true"></span>
</span>
</li>
</mvt:if>
</ul>
</nav>
<!-- end .x-pagination -->
</mvt:if>
<script>
(function () {
'use strict';
const form = document.querySelector('[data-hook="multi-add-form"]');
const adjusters = form.querySelectorAll('[data-hook="multi-add-quantity-control"]');
const quantities = form.querySelectorAll('[data-hook="multi-add-quantity"]');
const submit = form.querySelector('[data-hook="multi-add-submit"]');
let changed = document.createEvent('HTMLEvents');
for (let id = 0; id < adjusters.length; id++) {
/**
* This listener prevents the `enter` key from adjusting the `input` value.
*/
adjusters[id].addEventListener('keydown', function (keyEvent) {
if (keyEvent.target.matches('input')) {
if (keyEvent.key === 'Enter') {
keyEvent.preventDefault();
}
let input = keyEvent.target;
changed.initEvent('input', true, false);
input.dispatchEvent(changed);
}
});
adjusters[id].addEventListener('click', function (event) {
if (event.target.matches('button')) {
let button = event.target;
let inputs = [].filter.call(this.children, function (sibling) {
return sibling !== button && sibling.matches('input');
});
let input = inputs[0];
let value = parseInt(input.value);
let action = button.getAttribute('data-action');
changed.initEvent('change', true, false);
event.stopPropagation();
event.preventDefault();
if (action === 'decrement') {
value = value > 0 ? value - 1 : 0;
input.value = value;
input.dispatchEvent(changed);
}
else if (action === 'increment') {
value = value + 1;
input.value = value;
input.dispatchEvent(changed);
}
else {
input.value = 0;
input.dispatchEvent(changed);
}
}
});
adjusters[id].addEventListener('change', function (event) {
let input = event.target;
let totalQuantity = 0;
quantities.forEach(function (quantity) {
if (parseInt(quantity.value) > 0) {
totalQuantity += parseInt(quantity.value) || 0;
}
});
if (parseInt(input.value) > 0) {
input.parentElement.style.outline = '2px solid currentColor';
}
else {
input.parentElement.style.outline = 'none';
}
if (parseInt(totalQuantity) > 0) {
submit.value = 'Add ' + totalQuantity + ' Item(s) to Cart';
}
else {
submit.value = submit.dataset.value;
}
});
}
})();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment