Change URL based on input

Hi

I’ve made a calculation (in danish), where the user can see how much they save by moving their insurances to a new company.

Link to solution: https://codepen.io/madsenfc/pen/ePJGzR

However, I need to look into how I can sent the user to the webshop with the products they’ve clicked on. So if the user clicks on “Car” (in danish “Bil”) and “Family” (in danish “Indbo”), the URL in the CTA should change from the static link in the CTA to https://www.if.dk/privat/webshop?ifdkws_new=familie,bil . So the parameters after ? should be depend on what the user have clicked. Each product has a name that can be assigned in ifdkws_new.

I’m pretty new to JavaScript, so I’m still learning. However, I need som guideance in what to do, as I find it e bit confusing where to start.

BR Martin

You can achieve this result in many ways.

My proposal is storing all the texts of the clicked items in array, then pass this array to the href attribute. Here is example how you can do this:

Implement this code inside $(‘.toggle’).on() function:

var defaultLink = ‘/privat/forsikringer’
var webshopLink = ‘/privat/webshop?ifdkws_new=’

var text = $(this).text().slice(0, -1)

var position = arr.indexOf(text)
if (position == -1) arr.push(text)
else arr.splice(position, 1)

if (arr.length == 0) {
  $('.ecmt-button').attr('href', defaultLink);
} else {
  $('.ecmt-button').attr('href', webshopLink + arr.join());
}

and this outside it (may be just line before)

var arr =

text is storring current button text - slice(0, -1) is removing last character (‘+’ in this case)
position determines if text is already in arr (if is it returns index else -1)
arr.splice(position, 1) removes item at index position
arr.join() returns string separated by comma

EDIT:
using ternary operator you can make the code even cleaner:

var text = $(this).text().slice(0, -1)
var defaultLink = "/privat/forsikringer"
var webshopLink = "/privat/webshop?ifdkws_new="
var position = arr.indexOf(text)
position == -1 ? arr.push(text) : arr.splice(position, 1)
$('.ecmt-button').attr('href', arr.length == 0 ? defaultLink : webshopLink + arr.join())

I second wawraf.

Nice layout, by the way!

I’m fairly new to coding myself, so this may be an incredibly newbie response. I’m sorry for that if it’s the case.

I can envision a number of ways to solve this. But I think I would probably start by creating a javascript function that you can utilize to change the href attribute or build it into your JQuery .toggle on click function if you’re so inclined.

Since you’re already using JQuery, you could build a lookup object with the button and URL as entries. Or if all you need to do is tag the string on to the end of the existing URL you could do it without any lookup:

let newURL = "https://www.if.dk/privat/webshop?ifdkws_new=";
...
function updateURL(buttonSelector) {

  const text = $(buttonSelector).text().slice(0, -1); // Insert appropriate button selector -> Extract Text -> Cut off the end '+'

  if ($(buttonSelector).hasClass('selected')) {    // Test if button is toggled
    if (!newURL.includes(text)) {     // Test if newURL already includes text
      /(=)$/.test(newURL) ?      // Test if you need a comma first or not
        newURL += text : newURL += ',' + text;
    }
  } else {
    if (newURL.includes(text)) {
      newURL = newURL.replace(text, '');    // remove text from URL if button is toggled off
    } else if (newURL.includes(',' + text)) {
      newURL = newURL.replace(',' + text, '');
    }
  };

  $(".ecmt-button").attr("href", newURL);     // JQuery to overwrite the current href attribute with newURL
}