![](\"/img/icons/PrevArrow.svg\"){kind=icon}
', '![](\"/img/icons/NextArrow.svg\"){kind=icon}
'],\r\n touchDrag: true_false,\r\n mouseDrag: true_false,\r\n lazyLoad: true,\r\n autoplay: autoSlide,\r\n autoplayTimeout: autoplayTimeout_user\r\n });\r\n\r\n owl.on('changed.owl.carousel', function (e) {\r\n owl.trigger('stop.owl.autoplay');\r\n owl.trigger('play.owl.autoplay');\r\n });\r\n });\r\n}\r\nfunction owl_Carousel_Init_Related(element, childElements, autoSlide_user, autoplayTimeout_user) {\r\n var navImageSuffix = '';\r\n if ($('body').hasClass('farFromOrdinary')) {\r\n navImageSuffix = '--white';\r\n }\r\n\r\n if (element === null || typeof element === 'undefined' || element === '') {\r\n alert('You need to specify an element for the owl carousel slider to attach to');\r\n }\r\n if (childElements === null || typeof childElements === 'undefined' || childElements === '') {\r\n alert('You need to specify the slide elements for the owl carousel slider to attach to');\r\n }\r\n if (autoplayTimeout_user === null || typeof autoplayTimeout_user === 'undefined' || autoplayTimeout_user === '') {\r\n autoplayTimeout_user = 5000;\r\n }\r\n\r\n var bannerSlide = $(element);\r\n\r\n bannerSlide.each(function (i) {\r\n $(this).attr('id', i + 1);\r\n var item_count = parseInt($(this).find(childElements).length); // '.main-banner__slide'\r\n var true_false = false;\r\n if (item_count > 1) {\r\n true_false = true;\r\n } else {\r\n true_false = false;\r\n }\r\n var autoSlide = true_false;\r\n\r\n if (true_false === true) {\r\n // Only do this check if true. Don't want to be setting auto scroll if only one element\r\n autoSlide = autoSlide_user;\r\n } else {\r\n autoSlide = false;\r\n }\r\n\r\n var owl = $(this).owlCarousel({\r\n items: 4,\r\n margin: 0,\r\n loop: true,\r\n dots: true,\r\n nav: true,\r\n navText: ['![](\"/img/icons/PrevArrow'){kind=icon}
', '![](\"/img/icons/NextArrow'){kind=icon}
'],\r\n responsiveClass: true,\r\n responsive: {\r\n 0: {\r\n items: 1,\r\n nav: false\r\n },\r\n 600: {\r\n items: 2,\r\n nav: false\r\n },\r\n 1000: {\r\n items: 4,\r\n nav: true,\r\n loop: false\r\n }\r\n },\r\n touchDrag: true_false,\r\n mouseDrag: true_false,\r\n lazyLoad: true,\r\n autoplay: false\r\n \r\n });\r\n\r\n owl.on('changed.owl.carousel', function (e) {\r\n owl.trigger('stop.owl.autoplay');\r\n owl.trigger('play.owl.autoplay');\r\n });\r\n });\r\n}","var hbBasketTemplate;\r\nvar hbEmptyTemplate;\r\nvar shortTimeoutDuration = 1500;\r\nvar longTimeoutDuration = 10000; \r\n\r\n\r\n// Init\r\n// ==========================\r\n\r\nfunction initBasket() {\r\n console.log(\"Init basket\");\r\n\r\n // Init handle bars\r\n hbBasketTemplate = Handlebars.compile(document.getElementById(\"basket-row\").innerHTML);\r\n hbEmptyTemplate = Handlebars.compile(document.getElementById(\"basket-empty\").innerHTML);\r\n\r\n\r\n getBasket().then(function (result) {\r\n renderBasket(result);\r\n });\r\n\r\n // Change line item quantity\r\n $('section.basket-listing').on(\"change\", \"input.line-item\", function (e) {\r\n\r\n var lineId = $(this).attr('data-line');\r\n var quantity = parseInt($(this).val());\r\n\r\n //if (quantity === 0) {\r\n // alert('Please enter a quantity greater than 0 or remove using the cross.');\r\n // return;\r\n //}\r\n console.log('Changed amount on item : %o to %o', lineId, quantity);\r\n\r\n updateLineItemAmount(lineId, quantity).then(function (result) {\r\n console.log('Updated : %o', result);\r\n renderBasket(result);\r\n updateBasketItemCountNav(result.TotalItemsInBasket);\r\n });\r\n });\r\n $('section.basket-listing').on(\"click\", \".quantity-decrease\", function (e) {\r\n var input = $(this).next();\r\n var lineId = input.attr('data-line');\r\n var quantity = parseInt(input.val());\r\n var newQuantity = quantity - 1;\r\n //if (newQuantity === 0) {\r\n // alert('Please enter a quantity greater than 0 or remove using the cross.');\r\n // return;\r\n //}\r\n console.log('Changed amount on item : %o to %o', lineId, newQuantity);\r\n\r\n updateLineItemAmount(lineId, newQuantity).then(function (result) {\r\n console.log('Updated : %o', result);\r\n renderBasket(result);\r\n updateBasketItemCountNav(result.TotalItemsInBasket);\r\n });\r\n });\r\n $('section.basket-listing').on(\"click\", \".quantity-increase\", function (e) {\r\n var input = $(this).prev();\r\n var lineId = input.attr('data-line');\r\n var quantity = parseInt(input.val());\r\n var newQuantity = quantity + 1;\r\n if (newQuantity === 0) {\r\n alert('Please enter a quantity greater than 0 or remove using the cross.');\r\n return;\r\n }\r\n console.log('Changed amount on item : %o to %o', lineId, newQuantity);\r\n\r\n updateLineItemAmount(lineId, newQuantity).then(function (result) {\r\n console.log('Updated : %o', result);\r\n renderBasket(result);\r\n updateBasketItemCountNav(result.TotalItemsInBasket);\r\n });\r\n });\r\n $('section.basket-listing').on(\"click\", \"#basket-update\", function (e) {\r\n\r\n e.preventDefault();\r\n\r\n updateAllLineItemsAmount().then(function (result) {\r\n console.log('Updated : %o', result);\r\n renderBasket(result);\r\n });\r\n });\r\n\r\n // Check voucher code\r\n $('section.basket-listing').on(\"click\", \"#discount-button\", function (e) {\r\n\r\n e.preventDefault();\r\n console.log('Checking discount');\r\n\r\n checkDiscountCode();\r\n });\r\n\r\n // Remove item\r\n $('section.basket-listing').on(\"click\", \"i.remove\", function (e) {\r\n\r\n e.preventDefault();\r\n\r\n var lineId = $(this).attr('data-line');\r\n var quantity = 0;\r\n\r\n console.log('Changed amount on item : %o to %o', lineId, quantity);\r\n\r\n updateLineItemAmount(lineId, quantity).then(function (result) {\r\n console.log('Updated : %o', result);\r\n renderBasket(result);\r\n updateBasketItemCountNav(result.TotalItemsInBasket);\r\n });\r\n });\r\n}\r\n\r\nfunction initProductDetails() {\r\n console.log(\"Init details\");\r\n\r\n // Add item to cart - Product details\r\n $('button.product-details__button').click(function (e) {\r\n console.log('Add product');\r\n var $that = $(this);\r\n\r\n\r\n // Varient sku\r\n itemVarientSKU = '';\r\n var variantLabelVal = $('label[for=\"variant\"]').text();\r\n var variant = $('#variant').val();\r\n var variantSelectedText = $(\"#variant option:selected\").text();\r\n var $validationElement = $('.validation');\r\n if (variant !== undefined) {\r\n if (variant === \"0\") {\r\n $validationElement.removeClass('hidden').find('p').html('Please select a ' + variantLabelVal);\r\n return;\r\n } else {\r\n $validationElement.addClass('hidden');\r\n itemVarientSKU = variant;\r\n }\r\n }\r\n\r\n itemSKU = $('#product-sku').val();\r\n if (itemSKU == '') {\r\n alert('Product page missing product SKU');\r\n return;\r\n }\r\n\r\n // Save for later\r\n var startingText = $(this).text();\r\n $(this).text('Adding')\r\n\r\n\r\n quantity = 1;\r\n\r\n addItemToBasket(itemSKU, itemVarientSKU, quantity).then(function (result) {\r\n console.log('Added : %o', result);\r\n\r\n // Update the button \r\n $that.text('Added');\r\n // Get count and update basket summary\r\n //$('#basket-Items').text('(' + result + ')');\r\n updateBasketItemCountNav(result);\r\n\r\n var $successMessage = $('#successMessage');\r\n flashSuccessMessageDetails($successMessage, variantLabelVal, variantSelectedText);\r\n\r\n $('.itemAdded').removeClass('hidden').find('p').html($('.main-content__title').text() + \" \");\r\n setTimeout(function () {\r\n $that.text(startingText);\r\n }, shortTimeoutDuration);\r\n\r\n });\r\n });\r\n \r\n}\r\n\r\nfunction initRelatedProducts() {\r\n $('button.related-product__button').click(function (e) {\r\n console.log('Add product');\r\n // Save for later\r\n var startingText = $(this).text();\r\n\r\n $(this).text('Adding');\r\n\r\n itemSKU = $(this).attr('data-sku');\r\n if (itemSKU == '') {\r\n alert('Missing product SKU');\r\n return;\r\n }\r\n // Varient sku - always empty\r\n itemVarientSKU = '';\r\n\r\n quantity = 1;\r\n\r\n addItemToBasket(itemSKU, itemVarientSKU, quantity).then(function (result) {\r\n\r\n var $this = $(this);\r\n\r\n // Update the button \r\n $this.text('Added');\r\n // Get count and update basket summary\r\n var that = this;\r\n //$('#basket-Items').text('(' + result + ')');\r\n updateBasketItemCountNav(result);\r\n\r\n //var $successContainer = $this.closest('.related-row');\r\n //flashSuccessMessageListing($successContainer);\r\n\r\n setTimeout(function () {\r\n $(that).text(startingText);\r\n }, shortTimeoutDuration);\r\n\r\n }.bind(this));\r\n });\r\n}\r\n\r\nfunction initProductListing() {\r\n console.log(\"Init listing\");\r\n\r\n $('button.button.product-panel__button').click(function (e) {\r\n console.log('Add product');\r\n // Save for later\r\n var startingText = $(this).text();\r\n\r\n $(this).text('Adding');\r\n\r\n itemSKU = $(this).attr('data-sku');\r\n if (itemSKU == '') {\r\n alert('Missing product SKU');\r\n return;\r\n }\r\n // Varient sku - always empty\r\n itemVarientSKU = '';\r\n\r\n quantity = 1;\r\n\r\n addItemToBasket(itemSKU, itemVarientSKU, quantity).then(function (result) {\r\n\r\n var $this = $(this);\r\n\r\n // Update the button \r\n $this.text('Added');\r\n // Get count and update basket summary\r\n var that = this;\r\n //$('#basket-Items').text('(' + result + ')');\r\n updateBasketItemCountNav(result);\r\n\r\n var $successContainer = $this.closest('.panel-row__col-content');\r\n flashSuccessMessageListing($successContainer);\r\n\r\n setTimeout(function () {\r\n $(that).text(startingText);\r\n }, shortTimeoutDuration);\r\n\r\n }.bind(this));\r\n\r\n\r\n });\r\n\r\n}\r\n\r\nfunction initAddress() {\r\n console.log(\"Init address\");\r\n\r\n $('form.validate').each(function () {\r\n $(this).validate({\r\n errorElement: \"span\",\r\n errorClass: \"help-inline\",\r\n highlight: function (label) {\r\n $(label).closest('.control-group').addClass('error');\r\n },\r\n success: function (label) {\r\n label.closest('.control-group').addClass('success');\r\n },\r\n\r\n rules: {\r\n \"BillingAddress.FirstName\": \"required\",\r\n \"BillingAddress.FirstName\": \"required\",\r\n \"BillingAddress.Line1\": \"required\",\r\n \"BillingAddress.City\": \"required\",\r\n \"BillingAddress.PostalCode\": \"required\",\r\n \"BillingAddress.EmailAddress\": {\r\n required: true,\r\n email: true\r\n }\r\n },\r\n messages: {\r\n \"BillingAddress.FirstName\": \"Please specify your first name\",\r\n \"BillingAddress.LastName\": \"Please specify your last name\",\r\n \"BillingAddress.Line1\": \"Please specify your Street name and number\",\r\n \"BillingAddress.City\": \"Please specify your City / Town\",\r\n \"BillingAddress.PostalCode\": \"Please specify your postcode\",\r\n \"BillingAddress.EmailAddress\": {\r\n required: \"Please specify your email address\",\r\n email: \"Your email address must be in the format of name@domain.com\"\r\n }\r\n }\r\n });\r\n\r\n });\r\n\r\n $('#IsShippingAddressDifferent').change(function (e) {\r\n if (this.checked) {\r\n $('#shippingAddress').removeClass('hidden');\r\n } else {\r\n $('#shippingAddress').addClass('hidden');\r\n }\r\n });\r\n\r\n}\r\n\r\nfunction initStripeCheckout(PublishableKey) {\r\n\r\n console.log('initStripeCheckout');\r\n\r\n // Make sure we have a key\r\n if (PublishableKey === null || PublishableKey === '') {\r\n alert('Stripe publishable key missing');\r\n\r\n checkoutButton.addEventListener('click', function () {\r\n alert('Stripe publishable key missing');\r\n });\r\n\r\n return;\r\n }\r\n doStripeCheckout(PublishableKey);\r\n\r\n $('#checkout-button').click(function (e) {\r\n console.log('initStripeCheckout #checkout-button')\r\n e.preventDefault();\r\n doStripeCheckout(PublishableKey);\r\n\r\n /*\r\n fetch('/umbraco/surface/UCommCheckout/CreateCheckoutSession', {\r\n method: 'POST',\r\n })\r\n .then(function (response) {\r\n return response.json();\r\n })\r\n .then(function (session) {\r\n return stripe.redirectToCheckout({ sessionId: session.id });\r\n })\r\n .then(function (result) {\r\n // If `redirectToCheckout` fails due to a browser or network\r\n // error, you should display the localized error message to your\r\n // customer using `error.message`.\r\n if (result.error) {\r\n alert(result.error.message);\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log('catch error during InitStripeCheckout : %o' + error)\r\n alert('catch error during InitStripeCheckout : ' + error.message);\r\n console.error('Error:', error);\r\n });\r\n */\r\n });\r\n\r\n}\r\n\r\n \r\n// Helpers\r\n// ==========================\r\n\r\nfunction doStripeCheckout(PublishableKey) {\r\n // Create an instance of the Stripe object with your publishable API key\r\n var stripe = Stripe(PublishableKey);\r\n\r\n fetch('/umbraco/surface/UCommCheckout/CreateCheckoutSession', {\r\n method: 'POST',\r\n })\r\n .then(function (response) {\r\n return response.json();\r\n })\r\n .then(function (session) {\r\n return stripe.redirectToCheckout({ sessionId: session.id });\r\n })\r\n .then(function (result) {\r\n // If `redirectToCheckout` fails due to a browser or network\r\n // error, you should display the localized error message to your\r\n // customer using `error.message`.\r\n if (result.error) {\r\n alert(result.error.message);\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log('catch error during initStripeCheckout : %o' + error)\r\n alert('catch error during initStripeCheckout : ' + error.message);\r\n console.error('Error:', error);\r\n });\r\n}\r\n\r\nfunction flashSuccessMessageListing($successContainer) {\r\n var $successMessage = $successContainer.find('.successMessage');\r\n var productTitle = $successContainer.find('h2.panel__title').text();\r\n var message = '' + productTitle + ' has been added to your bag.
' + productTitle + ' - ' + variantLabelVal + ' : ' + variantSelectedText + ' has been added to your basket.
' + productTitle + ' has been added to your basket.