ProductDisplay/Product Component new template.

template.html

[template version=2]
	[comment]
		# If the product is inactive, this component will respond in 2 ways
		# 1. if the user is a customer, it will display the 'Product is disabled message' only.
		# 2. if the user is an admin, it will display a notification saying the product is inactive
		# 		but will still render the rest of the component
	[/comment]
	<article class="product">
	[if v inactive]
		[if session admin]
			[include-template inactive_admin_view]
			[include-template main_body]
		[else]
			[include-template inactive_customer_view]
		[/else]
		[/if]
	[else]
		[include-template main_body]
	[/else]
	[/if]
	</article>
	[include-template large_image]
	[include-template scripts]
[/template]

[template inactive_admin_view]
	<section class="inactive errorbox">
		This item is currently set to inactive and it will not be displayed to visitors. As an administrator of this site, here's a preview of what it looks like to visitor when it is enabled.
	</section>
[/template]

[template inactive_customer_view]
	<section class="inactive customer">
		<h1>This product has been disabled.</h1>
		This product is no longer active.  Perhaps you should search our shop for other <a href="[area shop]"> similar products</a>.
	</section>
[/template]

[template main_body]
	<section id="product">
		<aside class="image">
			[include-template breadcrumb]
			[include-template images]
		</aside>
		<main>
			[include-template product_summary]
			[include-template order_form]
			[include-template additional_info]
		</main>
	</section>
	[include-template description]
[/template]

[template images]
[perl failure="Error calculating image size" no_return=1]
	# determine the width & height for the image - create image double the size we need for zoom hover
	my $width = $Variable->{IMAGE_WIDTH} || 540;
	my $height = $Variable->{IMAGE_HEIGHT} || 540;
	$Tag->tmp('makesize', ($width * 2) . 'x' . ($height * 2));
[/perl]
	<section class="image-main">
		<div id="image-slider">
			<div class="glide__track" data-glide-el="track">
				<ul class="glide__slides">
				[item-list v="images" prefix="image"]
					<li class="glide__slide">
						<figure>
							<img
								id="image-[image-index]"
								itemprop="image"
								src="[image src='__IMAGE_DIR__originals/[image-param image]' makesize="[scratch makesize]" src_only=1]"
								alt="[v title] image [image-index]"
								data-code="[image-param code]"
								data-index="[image-index]"
							/>
						</figure>
					</li>
				[/item-list]
				</ul>
			</div>
			
			[comment] nav bullets [/comment]
			<div class="glide__bullets" data-glide-el="controls[nav]">
				[item-list v="images" prefix="image"]
					<button class="glide__bullet" data-glide-dir="=[image-index]"></button>
				[/item-list]
			</div>
		</div>
		<button class="maximise"></button>
		[include-template featured]
	</section>

	[comment] image thumbnails [/comment]
	[if v image_count > 1]
		<section class="image-thumbnails">
			<div id="thumb-slider">
				<div class="thumb-controls" data-glide-el="controls">
					<button class="slide-left" data-glide-dir="<">Slide thumbnails left</button>
					<button class="slide-right" data-glide-dir=">">Slide thumbnails right</button>
				</div>
				<div class="glide__track" data-glide-el="track">
					<ul class="glide__slides">
					[item-list v="images" prefix="image"]
						<li class="glide__slide">
							<button class="thumb" data-index="[image-index]">
								<img
									id="image-[image-index]"
									src="[image src='__IMAGE_DIR__originals/[image-param image]' makesize="[scratch makesize]" src_only=1]"
									alt="Show additional image [image-index]"
								/>
							</button>
						</li>
					[/item-list]
					</ul>
				</div>
			</div>
		</section>
	[/if]
[/template]

[template featured]
	[perl failure="Error generating feature"]
		use logic::Core;
		return unless Core->is_hash($V->{merchandising});
		my $featured = $V->{merchandising}{featured};

		# replace certain features
		my $map = {
			'new item' => 'New',
		};
		my $feature = $map->{lc $featured};
		$featured = $feature if $feature;

		# we need to determine the classes for the feature
		my $length = length($featured);
		my @classes = 'feature';
		push @classes, 'long' if $length > 4;

		# generate a unique (but consistent) number for this string based off its ascii characters
		# use that number to assign one of 3 feature classes
		my $number = join('', unpack("C*", lc($featured)));
		push @classes, 'feature-' . sprintf('%d', ($number % 3) + 1);
		my $featured_class = join( ' ', @classes);
		return qq{<mark class="$featured_class">$featured</mark>};
	[/perl]
[/template]

[template product_summary]
	<article class="summary">
		[include-template title]
		[include-template rating]
		[include-template price]
		[include-template short_description]
		[if v additional_fields]
			[include-template additional_fields]
		[/if]
	</article>
[/template]

[template order_form]
	<form class="order">
		[if v show_enquire]
			[include-template enquiry]
		[elsif v display_order]
			[comment]
				# @todo - should we just loop through each of the options
				# here instead of the template?
			[/comment]
			[if v option_type]
				[include-template options]
			[/if]
			[include-template quantity]
			<div class="submission">
				[include-template add_to_cart]
				[if v addon_wishlist]
					[include-template add_to_favourites]
				[/if]
			</div>
		[/elsif]
		[/if]
	</form>
[/template]

[template breadcrumb]
	<section class="crumbs">
		[item-list v="breadcrumbs" prefix="crumb"]
			<a href="[crumb-param link]">[crumb-param name]</a>
		[/item-list]
	</section>
[/template]

[template title]
	<h1 class="product-header">[v title]</h1>
[/template]

[template rating]
[comment] DISABLED
	<p class="star">
		<i class="fas fa-star" href="#"></i>
		<i class="fas fa-star" href="#"></i>
		<i class="fas fa-star" href="#"></i>
		<i class="fas fa-star" href="#"></i>
		<i class="far ri fa-star" href="#"></i>
	(1 customer review)</p>
[/comment]
[/template]

[template price]
	<section id="price" class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
		[if v currency_conversion_currency]
			<meta itemprop="priceCurrency" content="[v currency_conversion_currency]"/>
		[/if]
		[if v show_price]
			[if v price.discount]
				<mark itemprop="price" id="flat">[v price.flat]</mark>
			[/if]
			<mark>
				<span id="unit">[v price.unit]</span>
				[if v price.gst_info]
					<span class="gst">[v price.gst_info]</span>
				[/if]
			</mark>
			[if v laybuy_data]
				[include-template name="laybuy_pricing" v="laybuy_data"]
			[/if]
		[elsif v show_enquire]
			<mark id="enquiry_only_label">
				[site-option option=enquiry_only_label default='Price on Application']
			</mark>
		[/elsif]
		[/if]
	</section>
[/template]

[template short_description]
	[if v description]
		<p class="description">[v description]</p>
		[comment]
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
		[/comment]
	[/if]
[/template]

[template options]
	[if v option_display_type eq 'single']
		[include-template options_single]
	[else]
		[include-template options_separate]
	[/else]
	[/if]
[/template]

[template options_separate]
	[item-list v="options" prefix="option"]
		[tmp opt_index][option-index][/tmp]
		<label>[option-param label]:</label>
		<div>
			<div class="select-wrap"> [comment] additional div required as select is ignoring max width [/comment]
				<select name="[option-param group]" class="option">
					[item-list v="options.[option-index].values" prefix="item"]
						<option value="[item-param code]">[item-param label]</option>
					[/item-list]
				</select>
			</div>
		</div>
	[/item-list]
[/template]

[template options_single]
	[if v variants]
		<label>Select: </label>
		<article class="option">
			<select id="variant-code" style="width:auto">
				[item-list v="variants" prefix="variant"]
					<option value="[variant-param code]">[variant-param description]</option>
				[/item-list]
			</select>
		</article>
	[/if]
[/template]

[template quantity]
	[if type="explicit" compare=`$V->{extended}{no_quantity} ||  $Tag->site_option('hide_quantity')`]
		<input value="1" name="quantity" id="quantity" type="hidden" />
	[else]
		<label>Qty:</label>
		<div>
			<input class="qty" type="text" value="1" name="quantity" id="quantity" />
			[include-template out_of_stock]
		</div>
	[/else]
	[/if]
[/template]

[template add_to_cart]
	<button
		class="[if type='explicit' compare=`!$V->{in_stock} && $V->{disable_on_no_stock}`]disabled[/if]"
		id="add-cart"
		[if type='explicit' compare=`!$V->{in_stock} && $V->{disable_on_no_stock}`]disabled[/if]
	/>Add to [v cart_label]</button>
[/template]

[template enquiry]
	<a href="[area href=enquiry form='sku=[v sku]']" class="button" id="enquiry">Enquire</a>
[/template]

[template add_to_favourites]
	<button class="add-favourite[if v is_favourite] selected[/if]">
		[include-template favourites_text]
	</button>
[/template]

[template favourites_text]
	<span class="add">Add To Favourites</span>
	<span class="remove">Remove From Favourites</span>
[/template]

[template out_of_stock]
	
	[comment] 
		if the site is configured to show out of stock message, this notification should show if the product
		or a specific selected variant is out of stock 
	[/comment]
	[if v message_on_no_stock]
		[tmp intro][if v disable_on_no_stock]Sorry, [else]Please note:[/else][/if][/tmp]
		<span id="out-of-stock" class="notification [if v in_stock]hide[/if]">
			[either][v stock_message][or][scratch intro] the selected product is currently out of stock.[/either]
		</span>
	
		[comment]
			this message will show when	a product is in stock, but the selected quantity 
			is more than what is remaining
		[/comment]
		<span id="insufficient-stock" class="notification hide">
			[scratch intro] there are only <span id="stock-quantity">[v stock_quantity]</span> of this item currently in stock.
		</span>
	[/if]
	
[/template]

[template additional_info]
	<section class="additional">
		<p>
			<label>SKU</label>
			[v sku]
		</p>
		<p>
			<label>Category</label>
			[v categories]
		</p>
		[if v share_links][include-template social_icons][/if]
	</section>
[/template]

[template social_icons]
	<p class="social">
		<label>Share</label>
		<a class="facebook" title="Share on Facebook" href="https://www.facebook.com/sharer/sharer.php?u=[v share_url]" target="_blank"></a>
		<a class="twitter" title="Share on Twitter" href="https://twitter.com/home?status=[v share_url]" target="_blank"></a>
		<a class="google-plus" title="Share on Google+" href="https://plus.google.com/share?url=[v share_url]" target="_blank"></a>
		<a class="email" title="Email" href="mailto:?body=[v share_url]&subject=[v title]"></a>
		<a class="pinterest" title="Share on Pinterest" href="https://pinterest.com/pin/create/button/?url=[v share_url]&media=__SECURE_SERVER____IMAGE_DIR__originals/[v images.0.image]&description=[v description]" target="_blank"></a>
	</p>
[/template]

[template description]
	<article class="full-description">
		[if v comment_tabs]
			<!-- Create the tab links -->
			<nav id="description-tabs">
				[item-list v="comment_tabs" prefix="tab"]
					[tmp _curr_index][tab-index][/tmp]
					<a class="[if scratch _curr_index eq '0']active[/if] tablink" href="#[tab-param id]">[tab-param heading]</a>
				[/item-list]
			</nav>
			[item-list v="comment_tabs" prefix="tab"]
				<section id="[tab-param id]" class="tabcontent">
					[v name="comment_tabs.[tab-index].detail" safe_data=1]
				</section>
			[/item-list]

			[javascript file="components/ProductDisplay/Product/comment_tabs.js"][/javascript]
		[else]
			<h2>Description</h2>
			[v name="comment" safe_data=1]
		[/else]
		[/if]
	</article>
[/template]

[template additional_fields]
	<section class="additional-fields">
		[item-list v="additional_fields" prefix="field"]
			<p><span>[field-param label]:</span> [field-param value]</p>
		[/item-list]
	</section>
[/template]

[template large_image]
	[comment] placeholder for the large image slider which will be loaded over ajax from the large_image_list template [/comment]
	<article id="large-image" class="large-image">
		<div class="loading-spinner"></div>
	</article>
[/template]

[template large_image_list]
	<button class="close">Close</button>
	<div class="large-controls">
		<button class="previous">Slide image left</button>
		<button class="next">Slide image right</button>
	</div>
	<div id="large-slider" class="glide">
		<div class="glide__track" data-glide-el="track">
			<ul class="glide__slides">
			[loop v="imagelist" prefix="image"]
				<li class="glide__slide">
					<img
						id="large-[image-index]"
						src="[image src='__IMAGE_DIR__originals/[image-code]' makesize="2000x2000" src_only=1]"
						alt="Large image [image-index]"
					/>
				</li>
			[/loop]
			</ul>
		</div>
	</div>
[/template]

[template scripts]
	[perl failure="Error building product data"]

		# make a selection of product data available to javascript
		my $product = {
			sku => $V->{sku},
			optionType => $V->{option_type},
			optionsAdvanced => $V->{options_advanced},
			optionMap => $V->{option_value_map} || [],
			images => [map { $_->{image} } @{$V->{images}}],
		};

		# if we need to disable on no stock, and/or show a message, pass through stock levels
		if ($V->{message_on_no_stock}) {
			$product->{inventory} = $V->{option_type} && $V->{option_type} ne 'Simple' ?
				$V->{variant_stock_data} : $V->{stock_quantity};
			$product->{stockDisable} = $V->{disable_on_no_stock};
		};
		$Tag->tmp('product_json', $Tag->filter('encode_json', $product));
	[/perl]
	[javascript]
		var product = JSON.parse([filter op=javascript interpolate=1][scratch product_json][/filter]);
	[/javascript]
	<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide"></script>
	[style]
		.glide{position:relative;width:100%;box-sizing:border-box}.glide *{box-sizing:inherit}.glide__track{overflow:hidden}.glide__slides{position:relative;width:100%;list-style:none;backface-visibility:hidden;transform-style:preserve-3d;touch-action:pan-Y;overflow:hidden;padding:0;white-space:nowrap;display:flex;flex-wrap:nowrap;will-change:transform}.glide__slides--dragging{user-select:none}.glide__slide{width:100%;height:100%;flex-shrink:0;white-space:normal;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.glide__slide a{user-select:none;-webkit-user-drag:none;-moz-user-select:none;-ms-user-select:none}.glide__arrows{-webkit-touch-callout:none;user-select:none}.glide__bullets{-webkit-touch-callout:none;user-select:none}.glide--rtl{direction:rtl}
		.glide .glide__slide{margin:0}.glide--disabled .thumb-controls {display: none;}
	[/style]
	[javascript file="components/ProductDisplay/Product/product.js"][/javascript]
[/template]

[comment]
	# if laybuy templates if supported
[/comment]
[if v laybuy_data]
	[include file="components/ProductDisplay/Product/laybuy_template.html"]
[if]