Bold Options Templates

templates.js

if (typeof window.BOLD.options.templates == 'undefined') {
	window.BOLD.options.templates = {};
}

window.BOLD.options.setTemplate = function (optionType, template, overwrite = true) {
	if( overwrite || typeof window.BOLD.options.templates[optionType] == 'undefined' ) {
		window.BOLD.options.templates[optionType] = template;
		if (typeof window.BOLD.options.app !== 'undefined') {
			window.BOLD.options.app.refreshTemplates(optionType);
		}
	}
};

window.BOLD.options.setTemplate('single',
`<div class="bold_option bold_option_{{ optionType }} {{#optionValueNoStock}}bold_option_out_of_stock{{/optionValueNoStock}}">
	<label>
		{{#optionTitle}}
			<span class="bold_option_title">
				{{{ optionTitle }}}
				{{#maxSizeDiv}}{{{ maxSizeDiv }}}{{/maxSizeDiv}}
			</span>
		{{/optionTitle}}
		
		{{#toolTip}}<span class="bold_tooltip"><small>{{{ toolTip }}}</small></span>{{/toolTip}}
		
		{{#optionValuePrice}}
			<span class="bold_option_value_price">{{{ optionValuePrice }}}</span>
		{{/optionValuePrice}}
		
		{{#optionElement}}
			<span class="bold_option_element">{{{ optionElement }}}</span>
		{{/optionElement}}
	</label>
	
	{{#optionQuantity}}
		<span class="bold_option_value_quantity">{{{ optionQuantity }}}</span>
	{{/optionQuantity}}
	
	{{#optionValueNoStock}}
		<span class="bold_out_of_stock_message">
			<small>{{ outOfStockMessage }}</small>
		</span>
	{{/optionValueNoStock}}
	
	{{#helpText}}<span class="bold_help_text"><small>{{{ helpText }}}</small></span>{{/helpText}}
</div>`, false);

window.BOLD.options.setTemplate('multi',
`<div class="bold_option bold_option_{{ optionType }}">
	{{#optionTitle}}
		<span class="bold_option_title">{{{ optionTitle }}}</span>
	{{/optionTitle}}
	
	{{#toolTip}}<span class="bold_tooltip"><small>{{{ toolTip }}}</small></span>{{/toolTip}}
	
	<span class="bold_option_element">
		{{#optionElement}}
			<span class="bold_option_value {{#optionValueNoStock}}bold_option_out_of_stock{{/optionValueNoStock}}">
				<label>
					{{#optionValueElement}}
						<span class="bold_option_value_element">{{{ optionValueElement }}}</span>
					{{/optionValueElement}}
					
					{{#optionValueTitle}}
						<span class="bold_option_value_title">{{{ optionValueTitle }}}</span>
					{{/optionValueTitle}}

					{{#optionValuePrice}}
						<span class="bold_option_value_price">{{{ optionValuePrice }}}</span>
					{{/optionValuePrice}}
				</label>
				
				{{#optionValueQuantity}}
					<span class="bold_option_value_quantity">{{{ optionValueQuantity }}}</span>
				{{/optionValueQuantity}}
				
				{{#optionValueNoStock}}
					<span class="bold_out_of_stock_message">
						<small>{{ outOfStockMessage }}</small>
					</span>
				{{/optionValueNoStock}}
			</span>
		{{/optionElement}}
	</span>
	
	{{#helpText}}<span class="bold_help_text"><small>{{{ helpText }}}</small></span>{{/helpText}}
</div>`, false);

window.BOLD.options.setTemplate('displaytext',
`<div class="bold_option bold_option_{{ optionType }}">
	<span class="bold_option_element">
		<p>{{{ optionElement }}}</p>
	</span>
</div>`, false);

window.BOLD.options.setTemplate('checkbox',
`<div class="bold_option bold_option_{{ optionType }} {{#optionValueNoStock}}bold_option_out_of_stock{{/optionValueNoStock}}">
	<label>
		{{#optionElement}}
			<span class="bold_option_element">{{{ optionElement }}}</span>
		{{/optionElement}}
	
		{{#optionTitle}}
			<span class="bold_option_title">{{{ optionTitle }}}</span>
		{{/optionTitle}}
		
		{{#optionValuePrice}}
			<span class="bold_option_value_price">{{{ optionValuePrice }}}</span>
		{{/optionValuePrice}}
	</label>
	
	{{#optionQuantity}}
		<span class="bold_option_value_quantity">{{{ optionQuantity }}}</span>
	{{/optionQuantity}}
	
	{{#optionValueNoStock}}
		<span class="bold_out_of_stock_message">
			<small>{{ outOfStockMessage }}</small>
		</span>
	{{/optionValueNoStock}}
	
	{{#toolTip}}<span class="bold_tooltip"><small>{{{ toolTip }}}</small></span>{{/toolTip}}
	{{#helpText}}<span class="bold_help_text"><small>{{{ helpText }}}</small></span>{{/helpText}}
</div>`, false);

window.BOLD.options.setTemplate('textboxmulti',
`<div class="bold_option bold_option_{{ optionType }}">
	{{#optionTitle}}
		<span class="bold_option_title">{{{ optionTitle }}}</span>
	{{/optionTitle}}
	
	{{#toolTip}}<span class="bold_tooltip"><small>{{{ toolTip }}}</small></span>{{/toolTip}}
	
	<span class="bold_option_element">
		{{#optionElement}}
			<span class="bold_option_value">
				<label>
					{{#optionValueTitle}}
						<span class="bold_option_value_title">{{{ optionValueTitle }}}</span>
					{{/optionValueTitle}}
				
					{{#optionValueElement}}
						<span class="bold_option_value_element">{{{ optionValueElement }}}</span>
					{{/optionValueElement}}
				</label>
			</span>
		{{/optionElement}}
	</span>
	
	{{#helpText}}<span class="bold_help_text"><small>{{{ helpText }}}</small></span>{{/helpText}}
</div>`, false);

window.BOLD.options.setTemplate('swatch',
`<div class="bold_option bold_option_{{ optionType }}">
	{{#optionTitle}}
		<span class="bold_option_title">{{{ optionTitle }}}</span>
	{{/optionTitle}}
	
	{{#toolTip}}<span class="bold_tooltip"><small>{{{ toolTip }}}</small></span>{{/toolTip}}
	
	<span class="bold_option_element">
		{{#optionElement}}
			<span class="bold_option_value {{#optionValueNoStock}}bold_option_out_of_stock{{/optionValueNoStock}}">
				<label>
					{{#optionValueElement}}
						<span class="bold_option_value_element">{{{ optionValueElement }}}</span>
					{{/optionValueElement}}
					<span class="bold_option_swatch_title">
						<span class="bold_option_value_title">{{{ optionValueTitle }}}</span>
						{{#optionValuePrice}}
							<span class="bold_option_value_price">{{{ optionValuePrice }}}</span>
						{{/optionValuePrice}}
						{{#optionValueNoStock}}
							<span class="bold_out_of_stock_message"><small>{{ outOfStockMessage }}</small></span>
						{{/optionValueNoStock}}
					</span>
				</label>
				{{#optionQuantity}}
					<span class="bold_option_value_quantity">{{{ optionQuantity }}}</span>
				{{/optionQuantity}}
			</span>
		{{/optionElement}}
	</span>
	
	{{#helpText}}<span class="bold_help_text"><small>{{{ helpText }}}</small></span>{{/helpText}}
</div>`, false);

window.BOLD.options.setTemplate('optionset',
`<div class="bold_option_set">
</div>`, false);

window.BOLD.options.setTemplate('option_product_title',
`<div class="bold_option_product_title">{{ optionProductTitle}}</div>`, false);

window.BOLD.options.setTemplate('priced_options_total',
`{{ pre_total_text }} <span>{{{ total }}}</span> {{ post_total_text }}`, false);

window.BOLD.options.setTemplate('priced_options_addtoprice',
`{{{ product_price_with_total }}}`, false);

window.BOLD.options.setTemplate('priced_options_appendtoprice',
`{{{ product_price }}} + <span>{{{ total }}}</span>`, false);

window.BOLD.options.setTemplate('cart_edit_lightbox_info',
`<div class="bold_option_product_info">
	<div class="bold_option_product_info_title">{{ title }}</div>
	<div class="bold_option_product_info_price">{{{ price }}}</div>
	{{#image_src}}
		<div class="bold_option_product_info_image">
			<img src="{{ image_src }}" alt="">
		</div>
	{{/image_src}}
	{{#description}}
		<div class="bold_option_product_info_description">{{ description }}</div>
	{{/description}}
</div>`, false);

window.BOLD.options.setTemplate('cart_formatted_properties',
`<div class="bold_line_properties">
	{{#properties}}
		<div>
			<span class="bold_line_property">{{ property }}</span>
			<span class="bold_line_separator">{{ separator }}</span>
			{{#value}}<span class="bold_line_value">{{ value }}</span>{{/value}}
			{{#upload}}<span class="bold_line_value bold_line_upload"><a href="{{ upload_url }}">{{ upload }}</a></span>{{/upload}}
		</div>
	{{/properties}}
</div>`, false);

window.BOLD.options.setTemplate('option_error',
`<span class="bold_error_message">
	<small>{{ error }}</small>
</span>`, false);