const radios = document.querySelectorAll('#qty-options input') const originalPrice = document.querySelector('#original-price') const currentPrice = document.querySelector('#current-price') // Initiate value for (let option of radios) { if (option.checked) { updateQueryString('variant', option.value) updatePrice() } } // Add event listeners to each radio button for (let option of radios) { option.addEventListener('change', (event) => { updateQueryString('variant',event.target.value) updatePrice() }); } function updatePrice() { const variants = JSON.parse('[{"id":32655291789,"title":"S","option1":"S","option2":null,"option3":null,"sku":"8558629","requires_shipping":true,"taxable":true,"featured_image":{"id":21838620493,"product_id":9179689613,"position":1,"created_at":"2017-02-24T12:36:39-05:00","updated_at":"2017-02-24T12:36:39-05:00","alt":null,"width":1000,"height":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-3087c2b7.jpg?v=1487957799","variant_ids":[32655291789,32655291917,32655291981,32655292109,32655292237]},"available":true,"name":"Bees Bein' Bees Women's Short Sleeve Shirt - S","public_title":"S","options":["S"],"price":2350,"weight":99,"compare_at_price":null,"inventory_quantity":1,"inventory_management":null,"inventory_policy":"deny","barcode":null,"featured_media":{"alt":null,"id":201909862493,"position":1,"preview_image":{"aspect_ratio":1.0,"height":1000,"width":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-3087c2b7.jpg?v=1568888063"}},"requires_selling_plan":false,"selling_plan_allocations":[]},{"id":32655291917,"title":"M","option1":"M","option2":null,"option3":null,"sku":"1941488","requires_shipping":true,"taxable":true,"featured_image":{"id":21838620493,"product_id":9179689613,"position":1,"created_at":"2017-02-24T12:36:39-05:00","updated_at":"2017-02-24T12:36:39-05:00","alt":null,"width":1000,"height":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-3087c2b7.jpg?v=1487957799","variant_ids":[32655291789,32655291917,32655291981,32655292109,32655292237]},"available":true,"name":"Bees Bein' Bees Women's Short Sleeve Shirt - M","public_title":"M","options":["M"],"price":2350,"weight":99,"compare_at_price":null,"inventory_quantity":1,"inventory_management":null,"inventory_policy":"deny","barcode":null,"featured_media":{"alt":null,"id":201909862493,"position":1,"preview_image":{"aspect_ratio":1.0,"height":1000,"width":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-3087c2b7.jpg?v=1568888063"}},"requires_selling_plan":false,"selling_plan_allocations":[]},{"id":32655291981,"title":"L","option1":"L","option2":null,"option3":null,"sku":"4365988","requires_shipping":true,"taxable":true,"featured_image":{"id":21838620493,"product_id":9179689613,"position":1,"created_at":"2017-02-24T12:36:39-05:00","updated_at":"2017-02-24T12:36:39-05:00","alt":null,"width":1000,"height":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-3087c2b7.jpg?v=1487957799","variant_ids":[32655291789,32655291917,32655291981,32655292109,32655292237]},"available":true,"name":"Bees Bein' Bees Women's Short Sleeve Shirt - L","public_title":"L","options":["L"],"price":2350,"weight":105,"compare_at_price":null,"inventory_quantity":1,"inventory_management":null,"inventory_policy":"deny","barcode":null,"featured_media":{"alt":null,"id":201909862493,"position":1,"preview_image":{"aspect_ratio":1.0,"height":1000,"width":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-3087c2b7.jpg?v=1568888063"}},"requires_selling_plan":false,"selling_plan_allocations":[]},{"id":32655292109,"title":"XL","option1":"XL","option2":null,"option3":null,"sku":"8373563","requires_shipping":true,"taxable":true,"featured_image":{"id":21838620493,"product_id":9179689613,"position":1,"created_at":"2017-02-24T12:36:39-05:00","updated_at":"2017-02-24T12:36:39-05:00","alt":null,"width":1000,"height":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-3087c2b7.jpg?v=1487957799","variant_ids":[32655291789,32655291917,32655291981,32655292109,32655292237]},"available":true,"name":"Bees Bein' Bees Women's Short Sleeve Shirt - XL","public_title":"XL","options":["XL"],"price":2350,"weight":111,"compare_at_price":null,"inventory_quantity":1,"inventory_management":null,"inventory_policy":"deny","barcode":null,"featured_media":{"alt":null,"id":201909862493,"position":1,"preview_image":{"aspect_ratio":1.0,"height":1000,"width":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-3087c2b7.jpg?v=1568888063"}},"requires_selling_plan":false,"selling_plan_allocations":[]},{"id":32655292237,"title":"2XL","option1":"2XL","option2":null,"option3":null,"sku":"6356483","requires_shipping":true,"taxable":true,"featured_image":{"id":21838620493,"product_id":9179689613,"position":1,"created_at":"2017-02-24T12:36:39-05:00","updated_at":"2017-02-24T12:36:39-05:00","alt":null,"width":1000,"height":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-3087c2b7.jpg?v=1487957799","variant_ids":[32655291789,32655291917,32655291981,32655292109,32655292237]},"available":true,"name":"Bees Bein' Bees Women's Short Sleeve Shirt - 2XL","public_title":"2XL","options":["2XL"],"price":2550,"weight":119,"compare_at_price":null,"inventory_quantity":1,"inventory_management":null,"inventory_policy":"deny","barcode":null,"featured_media":{"alt":null,"id":201909862493,"position":1,"preview_image":{"aspect_ratio":1.0,"height":1000,"width":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-3087c2b7.jpg?v=1568888063"}},"requires_selling_plan":false,"selling_plan_allocations":[]}]') const urlParams = new URLSearchParams(window.location.search); const variantId = urlParams.get('variant') const item = variants.find(v => v.id.toString() === variantId) if (item.compare_at_price) { originalPrice.innerHTML = `$${(item.compare_at_price / 100).toFixed(2)}` originalPrice.classList.add = `mr-2` } else { originalPrice.innerHTML = `` originalPrice.classList.remove = `mr-2` } currentPrice.innerHTML = `$${(item.price / 100).toFixed(2)}` } function updateQueryString(key, value, url) { if (!url) url = window.location.href; let updated = '' var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"), hash; if (re.test(url)) { if (typeof value !== 'undefined' && value !== null) { updated = url.replace(re, '$1' + key + "=" + value + '$2$3'); } else { hash = url.split('#'); url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, ''); if (typeof hash[1] !== 'undefined' && hash[1] !== null) { url += '#' + hash[1]; } updated = url; } } else { if (typeof value !== 'undefined' && value !== null) { var separator = url.indexOf('?') !== -1 ? '&' : '?'; hash = url.split('#'); url = hash[0] + separator + key + '=' + value; if (typeof hash[1] !== 'undefined' && hash[1] !== null) { url += '#' + hash[1]; } updated = url; } else { updated = url; } } window.history.replaceState({ path: updated }, '', updated); }