\r\n ![\"${element.label}\"](\"${element.image}\")
\r\n \r\n
\r\n ${response.data.message}
`);\r\n }\r\n }).catch((error) => {\r\n console.error(error)\r\n });\r\n});\r\n// endregion\r\n\r\n// region Apply discount to cart\r\n$(document).on('click', '.js-cart-apply-discount', function (event) {\r\n event.preventDefault();\r\n\r\n let $formGroup = $(this).closest('form').find('.form-group');\r\n\r\n if (typeof cancelToken !== typeof undefined) {\r\n cancelToken.cancel(\"Operation canceled due to new request.\");\r\n }\r\n\r\n cancelToken = axios.CancelToken.source();\r\n\r\n axios({\r\n method: 'post',\r\n url: $(this).closest('form').attr('action'),\r\n data: {discount_code: $('#discount_code').val()},\r\n responseType: 'json',\r\n cancelToken: cancelToken.token,\r\n }).then((response) => {\r\n $('.js-error-block-discount').remove();\r\n if (response.data.success) {\r\n $.each(response.data.replace, (selector, content) => {\r\n $(selector).html(content)\r\n });\r\n } else {\r\n $formGroup.removeClass('has-success');\r\n $formGroup.addClass('has-error');\r\n $formGroup.append(`${response.data.message}
`);\r\n }\r\n }).catch((error) => {\r\n console.error(error)\r\n });\r\n});\r\n// endregion\r\n\r\n// region Item Page Slider\r\n$(document).ready(function () {\r\n let $itemSlider = $('.js-item-slider');\r\n let $linkedItemSlider = $('.js-linked-item-slider');\r\n if ($itemSlider.length > 0) {\r\n let $mainItemSlider = $('.slider-for');\r\n let $subItemSlider = $('.slider-nav');\r\n\r\n $mainItemSlider.slick({\r\n lazyLoad: 'progressive',\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n arrows: true,\r\n asNavFor: '.slider-nav',\r\n }).slick('slickFilter', function (index, $elem) {\r\n return $($elem).find('.slider-main').attr('data-colour') === $itemSlider.attr('data-colour');\r\n });\r\n $subItemSlider.slick({\r\n lazyLoad: 'progressive',\r\n slidesToShow: 5,\r\n slidesToScroll: 1,\r\n asNavFor: '.slider-for',\r\n arrows: true,\r\n centerMode: false,\r\n focusOnSelect: true,\r\n infinite: true\r\n }).slick('slickFilter', function (index, $elem) {\r\n return $($elem).find('.slider-preview').attr('data-colour') === $itemSlider.attr('data-colour');\r\n });\r\n\r\n $mainItemSlider.on('afterChange', function (event, slick, direction) {\r\n $('.slider-counter').html(`(${(slick.currentSlide + 1)}/${slick.slideCount})`);\r\n })\r\n\r\n $(document).on('change', '.js-product-colour input', function () {\r\n let colour = $(this).attr('data-value').trim();\r\n\r\n $mainItemSlider.slick('slickUnfilter').slick('slickFilter', function (index, $elem) {\r\n return $($elem).find('.slider-main').attr('data-colour') === colour;\r\n }).slick('slickGoTo', 0);\r\n $subItemSlider.slick('slickUnfilter').slick('slickFilter', function (index, $elem) {\r\n return $($elem).find('.slider-preview').attr('data-colour') === colour;\r\n }).slick('slickGoTo', 0);\r\n });\r\n }\r\n\r\n if ($linkedItemSlider.length > 0) {\r\n let $cart = $('.similar-products-js');\r\n $linkedItemSlider.slick({\r\n slidesToShow: $cart.length > 0 ? 4 : 3,\r\n infinite: true,\r\n responsive: [\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 3,\r\n slidesToScroll: 3,\r\n }\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 2\r\n }\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1\r\n }\r\n }\r\n ],\r\n });\r\n }\r\n});\r\n// endregion\r\n\r\n// region Item Page Styles\r\nfunction changeProductStyle() {\r\n let $size = $('.js-product-size');\r\n let $colour = $('.js-product-colour');\r\n let size = $size.find('input:checked').attr('data-value');\r\n let colour = $colour.find('input:checked').attr('data-value');\r\n\r\n if (typeof cancelToken !== typeof undefined) {\r\n cancelToken.cancel(\"Operation canceled due to new request.\");\r\n }\r\n\r\n cancelToken = axios.CancelToken.source();\r\n\r\n $('.js-product-colour-label').html($('.js-product-colour input:checked').next().text());\r\n $('.js-product-size-label').html($('.js-product-size input:checked').next().text());\r\n\r\n axios({\r\n method: 'post',\r\n url: $('.js-product').attr('data-url'),\r\n data: {size: size, colour: colour},\r\n responseType: 'json',\r\n cancelToken: cancelToken.token,\r\n }).then((response) => {\r\n if (response.data.success) {\r\n let $list = '';\r\n $.each(response.data.sizes, function (i, data) {\r\n $list += `\r\n `;\r\n });\r\n\r\n $('.js-product-size-values').html($list);\r\n\r\n $list = '';\r\n $.each(response.data.colours, function (i, data) {\r\n $list += `\r\n `;\r\n });\r\n\r\n $('.js-product-colour-values').html($list);\r\n }\r\n }).catch((error) => {\r\n console.error(error)\r\n });\r\n}\r\n\r\n$(document).on('change', '.js-product-size', changeProductStyle);\r\n$(document).on('change', '.js-product-colour', changeProductStyle);\r\n$(document).on('change', '.js-product-price input', function () {\r\n $('.js-price').html($(this).attr('data-label'));\r\n});\r\n// endregion\r\n\r\n// region Toggle Wishlist\r\n$(document).on('click', '.js-item-toggle-wishlist', function (event) {\r\n event.preventDefault();\r\n\r\n if (typeof cancelToken !== typeof undefined) {\r\n cancelToken.cancel(\"Operation canceled due to new request.\");\r\n }\r\n\r\n cancelToken = axios.CancelToken.source();\r\n\r\n axios({\r\n method: 'post',\r\n url: $(this).attr('href'),\r\n responseType: 'json',\r\n cancelToken: cancelToken.token,\r\n }).then((response) => {\r\n if (response.data.success) {\r\n $(this).find('i')[0].classList = response.data.icon;\r\n $(this).find('span').html(response.data.button);\r\n }\r\n }).catch((error) => {\r\n console.error(error)\r\n });\r\n});\r\n// endregion\r\n\r\n// region Category Filters\r\n$(document).on('click', '.js-product-filters a[data-filter]', function (event) {\r\n event.preventDefault();\r\n\r\n let filter = $(this).attr('data-filter');\r\n\r\n // region Change active item\r\n $(`.js-product-filters a[data-filter=\"${filter}\"][data-selected=\"true\"]`)\r\n .attr('data-selected', 'false')\r\n .parent().removeClass('active');\r\n\r\n $(this).attr('data-selected', 'true').parent().addClass('active');\r\n\r\n $(this).closest('.js-dropdown').find('.js-filter-label').html($(this).html());\r\n // endregion\r\n\r\n let selected = $('.js-product-filters a[data-filter][data-selected=\"true\"]');\r\n\r\n let query = {};\r\n\r\n let $category = $('.js-product-filters input[name=\"category\"]');\r\n if ($category.val() !== '') {\r\n query['category'] = $category.val();\r\n }\r\n\r\n $.each(selected, function () {\r\n if ($(this).attr('data-type').trim() === '') {\r\n return;\r\n }\r\n query[$(this).attr('data-filter')] = $(this).attr('data-type');\r\n });\r\n\r\n // region Update Nav\r\n let params = Object.keys(query).map(key => key + '=' + query[key]).join('&');\r\n window.history.pushState(query, document.title, '?' + params);\r\n // endregion\r\n\r\n if (typeof cancelToken !== typeof undefined) {\r\n cancelToken.cancel(\"Operation canceled due to new request.\");\r\n }\r\n\r\n cancelToken = axios.CancelToken.source();\r\n\r\n axios({\r\n method: 'post',\r\n url: $('.js-product-filters').attr('data-url'),\r\n data: query,\r\n responseType: 'json',\r\n cancelToken: cancelToken.token,\r\n }).then((response) => {\r\n if (response.data.success) {\r\n $('.js-category-items').html(response.data.html);\r\n\r\n $('.js-cart-sub-category').removeClass('highlight');\r\n if (query.hasOwnProperty('category') && query.category !== '') {\r\n $(`.js-cart-sub-category[data-category=\"${query.category}\"]`).addClass('highlight');\r\n }\r\n }\r\n }).catch((error) => {\r\n console.error(error)\r\n });\r\n});\r\n// endregion\r\n\r\n// region Checkout > Address Select\r\n$(document).on('change', '.js-address-list input[type=\"radio\"]', function () {\r\n $(this).closest('.js-address-list').find('li').removeClass('selected');\r\n $(this).closest('li').addClass('selected');\r\n});\r\n// endregion\r\n\r\n// region Checkout > Toggle\r\n$(document).on('click', '.js-toggle-display', function (event) {\r\n event.preventDefault();\r\n\r\n let $icon = $(this).find('i');\r\n if ($icon.attr('data-original') === undefined) {\r\n $icon.attr('data-original', $icon.attr('class'));\r\n $icon.attr('class', $icon.attr('data-swap'));\r\n } else {\r\n $icon.attr('class', $icon.attr('data-original'));\r\n $icon.removeAttr('data-original');\r\n }\r\n\r\n let $label = $(this).find('span');\r\n if ($label.attr('data-original') === undefined) {\r\n $label.attr('data-original', $label.text().trim());\r\n $label.html($label.attr('data-swap'));\r\n } else {\r\n $label.html($label.attr('data-original'));\r\n $label.removeAttr('data-original');\r\n }\r\n\r\n let $target = $($(this).attr('data-bs-target'));\r\n\r\n if ($target.attr('aria-expanded') === 'true') {\r\n $target.attr('aria-expanded', 'false');\r\n $target.addClass('hide');\r\n } else {\r\n $target.attr('aria-expanded', 'true');\r\n $target.removeClass('hide');\r\n }\r\n})\r\n// endregion\r\n\r\n// region PayPal Cart\r\n$(document).ready(function () {\r\n\r\n if ($('#paypal-buttons').length > 0) {\r\n\r\n var elem = document.getElementById('paypal-buttons');\r\n\r\n window.paypalLoadScript({\r\n \"client-id\": elem.getAttribute('data-pk').toString(),\r\n currency: \"GBP\"\r\n\r\n }).then((paypal) => {\r\n paypal.Buttons({\r\n // Set up the transaction\r\n createOrder: function (data, actions) {\r\n return actions.order.create({\r\n purchase_units: [{\r\n amount: {\r\n value: elem.getAttribute('data-value').toString()\r\n }\r\n }]\r\n });\r\n },\r\n // Finalize the transaction\r\n onApprove: function (data, actions) {\r\n\r\n return actions.order.capture().then(function (orderData) {\r\n // Successful capture! For demo purposes:\r\n console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));\r\n\r\n var transaction = orderData.purchase_units[0].payments.captures[0];\r\n // alert('Transaction ' + transaction.status + ': ' + transaction.id + '\\n\\nSee console for all available details');\r\n actions.redirect($('.js-payment-confirm').attr('data-url') + '?payment_intent=' + transaction.id);\r\n\r\n\r\n // Replace the above to show a success message within this page, e.g.\r\n // const element = document.getElementById('paypal-button-container');\r\n // element.innerHTML = '';\r\n // element.innerHTML = '${model}