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

StackOverflow https://stackoverflow.com/questions/20623804

Question

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..

Was it helpful?

Solution

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...
});

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top