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":768740360205,"title":"Default Title","option1":"Default Title","option2":null,"option3":null,"sku":"8927387","requires_shipping":true,"taxable":true,"featured_image":{"id":298772037645,"product_id":93545398285,"position":1,"created_at":"2017-11-11T17:38:54-05:00","updated_at":"2017-11-11T17:38:54-05:00","alt":null,"width":1000,"height":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-4059a15e.jpg?v=1510439934","variant_ids":[768740360205]},"available":true,"name":"Nude Bee Pom Pom Knit Cap","public_title":null,"options":["Default Title"],"price":2499,"weight":85,"compare_at_price":null,"inventory_quantity":1,"inventory_management":null,"inventory_policy":"deny","barcode":null,"featured_media":{"alt":null,"id":475509588061,"position":1,"preview_image":{"aspect_ratio":1.0,"height":1000,"width":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-4059a15e.jpg?v=1510439934"}},"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); }