When it comes to online shopping, it’s crucial to make sure customers have all the information they need and are in control of their choices. In the Shopify Dawn theme, there’s a default behavior where the first available product option is automatically added to the cart when you click “Add to Cart.” This might lead to accidental purchases, and it’s not the best user experience because users might not realize they have options. In this blog post, we’ll provide a straightforward JavaScript solution to fix this issue. Our script is designed specifically for the Shopify Dawn theme. It adds a “Select an option” message, making sure that users have to actively choose their product configuration before making a purchase. This small change can help customers make more informed decisions and create a friendlier and more transparent shopping experience.
Beofre
After
<script>
document.addEventListener('DOMContentLoaded', function () {
const selectElement = document.querySelector('.select__select');
const addToCartButton = document.querySelector('.product-form__submit');
const priceItem = document.querySelector('.price-item');
// Function to disable the Add to Cart button and hide the price
function disableAddToCart() {
addToCartButton.disabled = true;
priceItem.classList.add('visually-hidden'); // Add the visually-hidden class to hide the price
}
// Create a new option element for "Select an option"
const selectOption = document.createElement('option');
selectOption.value = 'Select an option';
selectOption.text = 'Select an option';
// Add the "Select an option" option at the beginning of the select element
selectElement.insertBefore(selectOption, selectElement.firstElementChild);
// Set "Select an option" as the initially selected option
selectElement.value = 'Select an option';
// Disable the Add to Cart button initially
disableAddToCart();
// Function to handle the change event
function handleSelectChange() {
if (selectElement.value !== 'Select an option') {
// Enable the Add to Cart button when a real option is selected
addToCartButton.disabled = false;
priceItem.classList.remove('visually-hidden'); // Remove the visually-hidden class to show the price
} else {
// Disable the Add to Cart button if "Select an option" is chosen
disableAddToCart();
}
}
// Add an event listener to the select field
selectElement.addEventListener('change', handleSelectChange);
// Trigger the change function on page load to simulate selecting "Select an option"
handleSelectChange();
});
</script>
Code details:
Event Listener: The code begins by waiting for the DOM to be fully loaded. This ensures that the script doesn’t run until the web page is ready for interaction.
DOM Elements: It then selects three important elements:
selectElement: The dropdown or select element that allows users to choose product options.addToCartButton: The button that adds the product to the cart.priceItem: The element that displays the product price.
Disable Add to Cart: The
disableAddToCartfunction is defined to disable the “Add to Cart” button and hide the price initially. It achieves this by setting thedisabledproperty of the button totrueand adding a CSS classvisually-hiddento thepriceItemelement.Create “Select an option”: It creates a new
<option>element with the value and text set to “Select an option.” This option serves as the default selection in the dropdown.Insert Default Option: The script inserts the “Select an option” option at the beginning of the select element’s options list.
Set Initial Value: It sets the value of the select element to “Select an option” to make it the default selection.
Handle Select Change: The
handleSelectChangefunction is defined to handle changes in the select element. If a real option (not “Select an option”) is chosen, it enables the “Add to Cart” button and removes thevisually-hiddenclass from the price item, making the price visible. If “Select an option” is chosen, it calls thedisableAddToCartfunction to disable the button and hide the price again.Event Listener: An event listener is added to the select element to listen for changes, and it triggers the
handleSelectChangefunction when a change occurs.Initial Trigger: Finally, the
handleSelectChangefunction is called initially to simulate selecting “Select an option” when the page loads.
