Gionni Valeriana Gionni Valeriana - 4 months ago 17
Javascript Question

Paypal button that allows the customer to select the amount of products with different prices for amount ranges

The customer must be able to choosing any number of pieces he likes, but the price for each piece must be able to vary depending on how many pieces the customer is choosing

Example:

From 1 to 5 pieces: 10 euro each

From 6 to 10 pieces: 8 euro each

From 11 to 15 pieces: 6 euro each

From 16 to 20 pieces ... etc..

If the customer choose 4 pieces the price for each piece must be 10 euros.

But if the customer choose 13 pieces the price for each piece must be 6 euros.

I shouldn't use PayPal Shopping Cart or CMS, just a simple button with a dropdown list if possible..

Answer

This is what JavaScript was made for.

  1. Display the table clearly to the end user
  2. Use a select for the number of pieces
  3. Use a text input to display the cost
  4. Use another input to display the subtotal
  5. Recalculate when the pieces select changes

When user clicks to continue, then submit the total input field.

Looks like this:

PIECES   x   COST  =   SUBTOTAL
[ 7  |V]      $[ 8 ]     $[ 56 ]

PIECES   x   COST  =   SUBTOTAL
[ 4  |V]      $[ 10 ]    $[ 40 ]

PIECES   x   COST  =   SUBTOTAL
[ 11 |V]      $[ 6 ]     $[ 66 ]

With JavaScript, change the cost field based on the pieces selection. Example with jQuery

<select id="pieces">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    etc..
</select>

<input id="cost"></input>
<input id="subtotal"></input>

<script>
$('#pieces').on('change', function() {
    var pieces = $('#pieces').val(),
        price;
    if (pieces < 6) { 
        price = 10;
        $('#cost').val(price);
        $('#subtotal').val(pieces * price)}
    }
    if ((pieces > 5) && (pieces < 11)) { 
        price = 8;
        $('#cost').val(price);
        $('#subtotal').val(pieces * price)}
    }
    etc...
});