Change a button onclick href based on multiple ID configurations

1


I have an order summary for a Shopify store. The order summary is a collection of 5 different HTML IDs based on user selection. There's a total of 72 different product variations (6 products w/ 12 variations each). I'm trying to get the "checkout button" to link to specific URLs based on 72 different groups of ID configurations.  So, for each group of 5 IDs there will be a unique URL.  

For example, if the user selects "BRAZIL", "2 BAGS", "WHOLE BEAN", "EVERY 4 WEEKS", "ALL ROAST TYPES" the checkout button would the user to a unique URL.  If the user selects "COLOMBIA", "2 BAGS", "GROUND", "EVERY 2 WEEKS", "ALL ROAST TYPES" the checkout button would the user to a different unique URL.  So, the unique URLs would be based on the different ID groups of 5.

I'm assuming a for loop and if... else if, else statement would do the trick but I can't seem to figure it out. I feel like I'm close but maybe I'm way off.

NOTE: This is just a part of another 400 lines of HTML code which I felt wasn't needed since it's working correctly...

What I currently have:

<pre lang="HTML">
<pre>    <!--ORDER SUMMARY CONTAINER-->
    <div class="container-summary">
        <div class="box-summary">
            <div class="box-summary-title">
                ORDER SUMMARY
            </div>
            <div class="box-summary-block-coffee">
                COFFEE SELECTION: BRAZIL
            </div>

            <div class="box-summary-block">
                <div class="box-summary-block-left">
                    <div class="box-summary-category1-left">
                        # OF BAGS
                    </div>
                    <div class="box-summary-option-bags" id="change-bag">
                        2 BAGS
                    </div>
                    <div class="box-summary-category2-left">
                        GRIND TYPE
                    </div>
                    <div class="box-summary-option-grind" id="change-grind-type">
                        WHOLE BEAN
                    </div>
                </div>

                <div class="box-summary-block-right">
                    <div class="box-summary-category1-right">
                        DELIVERY
                    </div>
                    <div class="box-summary-option-delivery" id="change-delivery">
                        EVERY 4 WEEKS
                    </div>
                    <div class="box-summary-category2-right">
                        ROAST TYPE
                    </div>
                    <div class="box-summary-option-roast" id="change-roast-type">
                        ALL ROAST TYPES
                    </div>
                </div>

            </div>

            <div class="box-summary-order-summary">
                <div class="box-summary-shipment-plus-price">
                    
                        PRICE PER SHIPMENT:
                    
                    
                        $90
                    
                </div>
                <div class="box-summary-order-button-container">
                    <button class="box-summary-order-button" id="box-summary-checkout-button" onclick="checkoutButton()">
                        CONTINUE TO CHECKOUT
                    </button>

/* ORDER SUMMARY */
.container-summary {
    display: flex;
    border: 3px solid none;
    justify-content: center;
    margin-bottom: 50px;
    font-family: 'lato', sans-serif;
}

.box-summary {
    height: 20.5rem;
    width: 30rem;
    background: #eee;
    border-radius: 6px;
}

.box-summary-title {
    display: flex;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .03rem;
    margin-top: 25px;
    color: #433d3d;
    line-height: .95em;
}

.box-summary-block {
    display: flex;
    justify-content: space-around;
    margin: 1rem 3rem;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03rem;
    line-height: 1.9em;
    color: #393939;
}

.box-summary-block-coffee {
    display: flex;
    justify-content: center;
    margin: 1rem 4rem;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03rem;
    line-height: 1.9em;
    color: #393939;
}

.box-summary-option-coffee {
    margin-left: .75rem;
}

.box-summary-block-right {
    text-align: end;
}

.box-summary-category2-left, 
.box-summary-category2-right {
    margin-top: .6em;
}

.box-summary-option-bags, 
.box-summary-option-grind, 
.box-summary-option-delivery,
.box-summary-option-roast,
.box-summary-option-coffee {
    color: #3e718a;
} 

.box-summary-shipment-plus-price {
    display: flex;
    justify-content: space-evenly;
    margin-left: 60px;
    margin-right: 60px;
    margin-bottom: 10px;
    margin-top: 20px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .03rem;
    line-height: .95em;
    color: #433d3d;
}

.box-summary-order-button-container {
    display: flex;
    justify-content: center;
}

.box-summary-order-button {
    padding: 15px 30px 15px 30px;
    font-size: 15px
}

<pre>

// MY CODE
function checkoutButton(){
let checkoutBtnClick = document.querySelectorAll("#change-coffee, #change-bag, #change-grind-type, #change-delivery, #change-roast-type");
for (i = 0; i < checkoutBtnClick.length; i++) {
if (checkoutBtnClick === "BRAZIL", "2 BAGS", "WHOLE BEAN", "EVERY 4 WEEKS", "ALL ROAST TYPES") {
document.getElementById("box-summary-checkout-button").setAttribute('onclick', 'window.location.href="https://herbycreamcoffee.myshopify.com/cart/42755456106732:1"');
} else if (checkoutBtnClick === "BRAZIL", "2 BAGS", "GROUND", "EVERY 4 WEEKS", "ALL ROAST TYPES") {
document.getElementById("box-summary-checkout-button").setAttribute('onclick', 'window.location.href="https://herbycreamcoffee.myshopify.com/cart/42780699787500:1"');
} else if (checkoutBtnClick === "BRAZIL", "2 BAGS", "GROUND", "EVERY 4 WEEKS", "MEDIUM/DARK") {
document.getElementById("box-summary-checkout-button").setAttribute('onclick', 'window.location.href="https://herbycreamcoffee.myshopify.com/cart/42780699820268:1"');
    }
  }
}

// CHECKOUT BUTTON CONDITIONALS
function checkoutButton() {
// Initialize your URL
let URL = "https://herbycreamcoffee.myshopify.com/cart/";
// Select the nodes you want to process
let nodes = document.querySelectorAll(
"#change-coffee, #change-bag, #change-grind-type, #change-delivery, #change-roast-type"
); 
// Loop through every node
nodes.forEach(function(node) {
// Normalize the value of the node's innerHTML
// This removes excess spaces and ensures the string processed is uppercase
let normalized = node.innerHTML.trim().toUpperCase();
// Check the value of the normalized string
switch (normalized) {
case "2 BAGS":
case "WHOLE BEAN": 
case "ALL ROAST TYPES":
// Append specific string to URL
URL += '42755456106732:1'
break;
case "2 BAGS":
case "GROUND": 
case "ALL ROAST TYPES":
// Append specific string to URL
URL += '42780699787500:1'
break;
case "1 BAG":
case "WHOLE BEAN": 
case "ALL ROAST TYPES":
// Append specific string to URL
URL += '42780699787806:1'
break;
// Add other cases here
default:
// Error handling
}
});
        
// Visit the URL you just created
window.location.href = URL;
}