Catalog Item Catalog Client Script not working as expected.

[Plecto20]

Hi,

I’m working on a catalog item for new headsets. The wired headset is priced at $20.00, and the wireless headset is priced at $100.00.

(I’ve attached two screenshots for reference.)

The form includes a field intended to display the total cost based on the selected headset type and quantity. However, it currently shows 0.00 regardless of the input.

Additionally, to get the price to display in the “Order Now” box I had to add 0.01 in the pricing tab.

Any thoughts?

I’m using the following script in the Catalog Client Scripts section.

function onLoad() {

  recalc_total();

}

function onChange(control, oldValue, newValue, isLoading, isTemplate) {

  if (isLoading || newValue === oldValue) return;

  recalc_total();

}

function recalc_total() {

  // Get current values

  var choice = (g_form.getValue('type_of_headset') || '').toString();

  var qtyStr = g_form.getValue('quantity_of_headset');

  // Coerce quantity to integer (handle empty/invalid)

  var qty = parseInt(qtyStr, 10);

  if (isNaN(qty) || qty < 0) qty = 0;

  // Price map (USD)

  var prices = {

    'wired': 20.00,

    'wireless': 100.00

  };

  var unitPrice = prices[choice] || 0;

  var total = unitPrice * qty;

  // Format to 2 decimals; setValue expects a string

  g_form.setValue('total_cost', total.toFixed(2));

}

[Brad Bowman]

The right way to do this is to have 2 Catalog Items, since there are 2 different headsets.  Then you can assign the price to each in the Catalog Item definitions, and take out all of the stuff you've put in to replicate this functionality, and the (total) Price will be correctly reflected in the Cart/Order box.  This will also help with reporting, so you can easily see how many requests containing how many headsets have been ordered for each type, without getting into the variables.  If you pursue this approach for whatever reason, you don't ever want to use an onLoad and onChange function in the same script.  What you need is 2 of the same/similar onChange Catalog Client Scripts when type_of_headset and quantity_of_headset changes.  onChange scripts don't run when the newValue is the same as the oldValue, so you don't need that bit either:

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading) {
        return;
    }

    // Get current values
    var choice = (g_form.getValue('type_of_headset') || '').toString();
    var qtyStr = g_form.getValue('quantity_of_headset');

    // Coerce quantity to integer (handle empty/invalid)
    var qty = parseInt(qtyStr, 10);
    if (isNaN(qty) || qty < 0) qty = 0;

    // Price map (USD)
    var prices = {
        'wired': 20.00,
        'wireless': 100.00
    };

    var unitPrice = prices[choice] || 0;
    var total = unitPrice * qty;

    // Format to 2 decimals; setValue expects a string
    g_form.setValue('total_cost', total.toFixed(2));
}

[AndersBGS]

Hi @Plecto20 ,

As @Brad Bowman  stated, which I agree to, the best aproch is to have two different catalog items, as this is two different items. By doing this, you would be able to utilize the OOTB functionality for price, add to basket and order now.