Change a button onclick href based on multiple IDs - Shopify

DeanCGiroir
May 18, 2022
255 views
0 votes
2 Answers

I have an order summary. The order summary is a collection of 5 different HTML IDs based on user selection. I’m trying to get the "checkout button" to link to different URLs based on different configurations corresponding to different HTML IDs.

For example, if the user selects "BRAZIL", "2 BAGS", "WHOLE BEAN", "EVERY 4 WEEKS", "ALL ROAST TYPES" the checkout button would take them to a specific URL and so on specific for that selection. If they make a different selection, they should be taken to a different URL.

I’m assuming a for loop and 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.

What I currently have:

// CHECKOUT BUTTON CONDITIONALS
function checkoutButton() {
  let checkoutBtnClick = document.querySelectorAll("#change-coffee, #change-bag, #change-grind-type, #change-delivery, #change-roast-type").innerHTML;
  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://www.google.com/"');
  } 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://www.facebook.com/"');
  }
}

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

<!--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: <span class="box-summary-option-coffee" id="change-coffee">BRAZIL</span>
    </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">
        <span class="box-summary-price-per-shipment">
                        PRICE PER SHIPMENT:
                    </span>
        <span class="box-summary-order-price" id="box-summary-total-price">
                        $90
                    </span>
      </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>

Answers

I think what you’re looking for, is something like this :

// List Shopify codes for all possible variations as a hierarchical object
let variations = {
  // coffee
  "BRAZIL" : {
    // bag
    "2 BAGS" : {
      // delivery
      "EVERY 4 WEEKS" : {
        // roast type
        "ALL ROAST TYPES" : {
          // grind type
          "WHOLE BEAN" :"42755456106732:1",
          "GROUND" :"42755456106500:1",
          ...
        },
        ...
      },
     ...
    },
    ...
  },
  ...
};

// CHECKOUT BUTTON CONDITIONALS
function checkoutButton() {
  // Select each node you want to process
  let coffee = document.getElementById("change-coffee").innerHTML.trim().toUpperCase();
  let bag = document.getElementById("change-bag").innerHTML.trim().toUpperCase();
  let delivery = document.getElementById("change-delivery").innerHTML.trim().toUpperCase();
  let roastType = document.getElementById("change-roast-type").innerHTML.trim().toUpperCase();
  let grindType = document.getElementById("change-grind-type").innerHTML.trim().toUpperCase();
  
  try {
    // Go find the Shopify code
    // If only grindType is not known, this returns 'undefined'
    // If any of the other values are not known, this triggers an error
    // The order of the variables should match the order in your hierarchical object
    let shopifyCode = variations[coffee][bag][delivery][roastType][grindType];
    if(typeof  shopifyCode === 'undefined') {
      // Now you also throw an error if just grindType is not known
      throw "shopifyCode can't be undefined"; 
    }

    // Build your URL
    const URL = `https://www.server.com/thepartthatstaysthesame/${shopifyCode}`;
    // Display URL in console (useful for testing purposes)
    console.log(URL);
    // Visit the URL you just created
    window.location.href = URL;
  } catch (error) {
    // Do your error handling here
    console.error('Variation unknown');
  }
}

You can use a map.

Also recommended to use addEventListener

Note the spread operator [...] to make an array of the node list to map

I also assume the IDs we are looking for all start with change

// CHECKOUT BUTTON CONDITIONALS
document.getElementById("box-summary-checkout-button").addEventListener("click", () => {
  const parms = [...document.querySelectorAll("[id^=change]")]
    .map(div => `${div.id}=${div.textContent.trim().replace(/ /g,"+")}`);
  const url = `https://www.server.com/someprocesses?${parms.join("&")}`;
  console.log(url);
  //window.location.href = url;

})

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

<!--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: <span class="box-summary-option-coffee" id="change-coffee">BRAZIL</span>
    </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">
        <span class="box-summary-price-per-shipment">
                        PRICE PER SHIPMENT:
                    </span>
        <span class="box-summary-order-price" id="box-summary-total-price">
                        $90
                    </span>
      </div>
      <div class="box-summary-order-button-container">
        <button class="box-summary-order-button" id="box-summary-checkout-button">
                        CONTINUE TO CHECKOUT
                    </button>

Please signup or login to give your own answer.

Click here to cancel reply.

Change a button onclick href based on multiple IDs – Shopify

Answers