0

I need to create price configurator for new light system inside house with angular 7. Im coding it however in plain js instead of typescript + sass.

Page 1. user selects wheather he wants new building or existing one.. Wifi/wires [z1, z2...] 

<label>New building</label>
<input type="radio" value="z1">

  1. He should chose size of a building inside option(=this adds different set of controls to page number 3. ) [-o1, -o2...]

     <select><option value="-o1">small</option>...

  2. What he wants to build (lights, aircon, detectors... could be multiple) (=adds a different set of controls to page number 4. or adds them ) [y8, y9...]

  3. Chose controls (android, tv, keychain, movement detector) (could be multiple) [-5x2-24x2]
  4. Calculate price

I need to add theese values as strings inside variable and then take this new variable and assign prices to it. z1-o1-y8-i-5x2-24x2 > z1 = new building, o1 = small building, y8 = lights (could be multiple options -> aircon, detectors..), i = On/off + timing(could be multiple options -> on/off + dimming...) , 5x2 means that controller type "5" would be twice in this option and "24" also twice. Price of "5" = 1000 and "24" = 2000.

I dont know if im doing this right. It is complicated. How can this be done? Thanks

Zyonix
  • 107
  • 10

1 Answers1

3

If each option has a price, and the prices need to be added together, you can do it like this:

First create an object with each option and the corresponding price:

const prices = {
  z1: 4999
  z2: 7499
  o1: 13000
  ...etc
}

Then you can create an array with all the options:

const options = ['z1', 'o1', 'y8', 'i', etc];

and determine the price by looping through the array like so:

function determinePrice(options) {
  let price = 0;
  for (let option of options) {
    price += prices[option];
  }
  return price
}

If you do it with this method, I recommend instead of adding 5x2 to the options, add just 5 twice and it will be counted twice.

Also for this to work, you need to make sure that all your different pages have access to the same array, so they can push the users selected options into that same array. How you do this depends on the structure of your project, but you can have a look here for inspiration:

Angular Component Interaction

elias.hj
  • 116
  • 5
  • z1..,o1..,y8...,i.... does not have prices. Only prices i have are controllers (5x2 and 24x2) – Zyonix Jan 08 '19 at 14:19
  • Look at this. I need to recreate this exactly http://elkoep.inels.com/en/installation – Zyonix Jan 08 '19 at 14:22
  • If not everything has prices you can add if (prices[option]) inside the loop and only then add the price to the total, so you just ignore the options that don't have a price. I see what you are trying to accomplish but don't understand exactly what you are asking. If you want to save all the users selected options as a string, you can just read each of the select values and go options += selectValue, and it will make one giant string of all the values. If you instead push them into an array you can loop through them and determine the price based on what has been selected. – elias.hj Jan 08 '19 at 17:24