Click here to Skip to main content
15,359,445 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
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>



CSS
/* 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
}


JavaScript
<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"');
    }
  }
}






What I have tried:

I've tried using a switch statement but it would only work if one ID was used at a time.
JavaScript
// 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;
}
Posted
Updated 20-May-22 21:43pm

1 solution

Hello Deang1983 !

to warn you softly,
you're facing a design problem,

the case/break logical you try to write comes as 'unlimited JS update'.

as you'll add 'products' , you'll need more case/break.


take a long and concrete time to mind the way your datas are store.

at Db level
at table level


you're at the point to write a unlimited growing list of 'id' for products to add embeded in a giant 'case'.

really think again your solution.
you're on a db design level question, not a code problem. really.


UPDATE :
look at 'and' 'or' to complete your testing pattern :
AND:
if(var_a == value_n && var_b == another_value){;}{;}

OR:
if(var_a == value_n || var_b == another_value){;}{;}


AND : if the 2 tests are true ...
OR : if one of the test is true ...
   
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900