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":27212903553,"title":"XS","option1":"XS","option2":null,"option3":null,"sku":"8673224","requires_shipping":true,"taxable":true,"featured_image":{"id":18309019073,"product_id":8177796865,"position":1,"created_at":"2016-10-06T16:15:57-04:00","updated_at":"2016-10-06T16:15:57-04:00","alt":null,"width":1000,"height":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-871b2886.jpg?v=1475784957","variant_ids":[27212903553,27212903617,27212903681,27212903745,27212903809,27212903873,27212903937,27212904001]},"available":true,"name":"Nude Calligraphic Men's Short Sleeve T-Shirt - XS","public_title":"XS","options":["XS"],"price":2478,"weight":108,"compare_at_price":null,"inventory_quantity":1,"inventory_management":null,"inventory_policy":"deny","barcode":null,"featured_media":{"alt":null,"id":98662940765,"position":1,"preview_image":{"aspect_ratio":1.0,"height":1000,"width":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-871b2886.jpg?v=1568783439"}},"requires_selling_plan":false,"selling_plan_allocations":[]},{"id":27212903617,"title":"S","option1":"S","option2":null,"option3":null,"sku":"7630767","requires_shipping":true,"taxable":true,"featured_image":{"id":18309019073,"product_id":8177796865,"position":1,"created_at":"2016-10-06T16:15:57-04:00","updated_at":"2016-10-06T16:15:57-04:00","alt":null,"width":1000,"height":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-871b2886.jpg?v=1475784957","variant_ids":[27212903553,27212903617,27212903681,27212903745,27212903809,27212903873,27212903937,27212904001]},"available":true,"name":"Nude Calligraphic Men's Short Sleeve T-Shirt - S","public_title":"S","options":["S"],"price":2478,"weight":122,"compare_at_price":null,"inventory_quantity":1,"inventory_management":null,"inventory_policy":"deny","barcode":null,"featured_media":{"alt":null,"id":98662940765,"position":1,"preview_image":{"aspect_ratio":1.0,"height":1000,"width":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-871b2886.jpg?v=1568783439"}},"requires_selling_plan":false,"selling_plan_allocations":[]},{"id":27212903681,"title":"M","option1":"M","option2":null,"option3":null,"sku":"1864706","requires_shipping":true,"taxable":true,"featured_image":{"id":18309019073,"product_id":8177796865,"position":1,"created_at":"2016-10-06T16:15:57-04:00","updated_at":"2016-10-06T16:15:57-04:00","alt":null,"width":1000,"height":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-871b2886.jpg?v=1475784957","variant_ids":[27212903553,27212903617,27212903681,27212903745,27212903809,27212903873,27212903937,27212904001]},"available":true,"name":"Nude Calligraphic Men's Short Sleeve T-Shirt - M","public_title":"M","options":["M"],"price":2478,"weight":139,"compare_at_price":null,"inventory_quantity":1,"inventory_management":null,"inventory_policy":"deny","barcode":null,"featured_media":{"alt":null,"id":98662940765,"position":1,"preview_image":{"aspect_ratio":1.0,"height":1000,"width":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-871b2886.jpg?v=1568783439"}},"requires_selling_plan":false,"selling_plan_allocations":[]},{"id":27212903745,"title":"L","option1":"L","option2":null,"option3":null,"sku":"7746007","requires_shipping":true,"taxable":true,"featured_image":{"id":18309019073,"product_id":8177796865,"position":1,"created_at":"2016-10-06T16:15:57-04:00","updated_at":"2016-10-06T16:15:57-04:00","alt":null,"width":1000,"height":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-871b2886.jpg?v=1475784957","variant_ids":[27212903553,27212903617,27212903681,27212903745,27212903809,27212903873,27212903937,27212904001]},"available":true,"name":"Nude Calligraphic Men's Short Sleeve T-Shirt - L","public_title":"L","options":["L"],"price":2478,"weight":150,"compare_at_price":null,"inventory_quantity":1,"inventory_management":null,"inventory_policy":"deny","barcode":null,"featured_media":{"alt":null,"id":98662940765,"position":1,"preview_image":{"aspect_ratio":1.0,"height":1000,"width":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-871b2886.jpg?v=1568783439"}},"requires_selling_plan":false,"selling_plan_allocations":[]},{"id":27212903809,"title":"XL","option1":"XL","option2":null,"option3":null,"sku":"3407393","requires_shipping":true,"taxable":true,"featured_image":{"id":18309019073,"product_id":8177796865,"position":1,"created_at":"2016-10-06T16:15:57-04:00","updated_at":"2016-10-06T16:15:57-04:00","alt":null,"width":1000,"height":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-871b2886.jpg?v=1475784957","variant_ids":[27212903553,27212903617,27212903681,27212903745,27212903809,27212903873,27212903937,27212904001]},"available":true,"name":"Nude Calligraphic Men's Short Sleeve T-Shirt - XL","public_title":"XL","options":["XL"],"price":2478,"weight":164,"compare_at_price":null,"inventory_quantity":-1,"inventory_management":null,"inventory_policy":"deny","barcode":null,"featured_media":{"alt":null,"id":98662940765,"position":1,"preview_image":{"aspect_ratio":1.0,"height":1000,"width":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-871b2886.jpg?v=1568783439"}},"requires_selling_plan":false,"selling_plan_allocations":[]},{"id":27212903873,"title":"2XL","option1":"2XL","option2":null,"option3":null,"sku":"2231072","requires_shipping":true,"taxable":true,"featured_image":{"id":18309019073,"product_id":8177796865,"position":1,"created_at":"2016-10-06T16:15:57-04:00","updated_at":"2016-10-06T16:15:57-04:00","alt":null,"width":1000,"height":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-871b2886.jpg?v=1475784957","variant_ids":[27212903553,27212903617,27212903681,27212903745,27212903809,27212903873,27212903937,27212904001]},"available":true,"name":"Nude Calligraphic Men's Short Sleeve T-Shirt - 2XL","public_title":"2XL","options":["2XL"],"price":2676,"weight":181,"compare_at_price":null,"inventory_quantity":1,"inventory_management":null,"inventory_policy":"deny","barcode":null,"featured_media":{"alt":null,"id":98662940765,"position":1,"preview_image":{"aspect_ratio":1.0,"height":1000,"width":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-871b2886.jpg?v=1568783439"}},"requires_selling_plan":false,"selling_plan_allocations":[]},{"id":27212903937,"title":"3XL","option1":"3XL","option2":null,"option3":null,"sku":"3493613","requires_shipping":true,"taxable":true,"featured_image":{"id":18309019073,"product_id":8177796865,"position":1,"created_at":"2016-10-06T16:15:57-04:00","updated_at":"2016-10-06T16:15:57-04:00","alt":null,"width":1000,"height":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-871b2886.jpg?v=1475784957","variant_ids":[27212903553,27212903617,27212903681,27212903745,27212903809,27212903873,27212903937,27212904001]},"available":true,"name":"Nude Calligraphic Men's Short Sleeve T-Shirt - 3XL","public_title":"3XL","options":["3XL"],"price":2875,"weight":184,"compare_at_price":null,"inventory_quantity":0,"inventory_management":null,"inventory_policy":"deny","barcode":null,"featured_media":{"alt":null,"id":98662940765,"position":1,"preview_image":{"aspect_ratio":1.0,"height":1000,"width":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-871b2886.jpg?v=1568783439"}},"requires_selling_plan":false,"selling_plan_allocations":[]},{"id":27212904001,"title":"4XL","option1":"4XL","option2":null,"option3":null,"sku":"7316606","requires_shipping":true,"taxable":true,"featured_image":{"id":18309019073,"product_id":8177796865,"position":1,"created_at":"2016-10-06T16:15:57-04:00","updated_at":"2016-10-06T16:15:57-04:00","alt":null,"width":1000,"height":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-871b2886.jpg?v=1475784957","variant_ids":[27212903553,27212903617,27212903681,27212903745,27212903809,27212903873,27212903937,27212904001]},"available":true,"name":"Nude Calligraphic Men's Short Sleeve T-Shirt - 4XL","public_title":"4XL","options":["4XL"],"price":3073,"weight":215,"compare_at_price":null,"inventory_quantity":0,"inventory_management":null,"inventory_policy":"deny","barcode":null,"featured_media":{"alt":null,"id":98662940765,"position":1,"preview_image":{"aspect_ratio":1.0,"height":1000,"width":1000,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0723\/5823\/products\/mockup-871b2886.jpg?v=1568783439"}},"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); }