Handle Volumes and Seats

Easily handle dynamic changes on your pricing page for volumes and graduated prices.

Volume watcher for seats, and graduated prices

Volume, seats, graduated prices, and the likes work in a slightly different way: Since designs change on every websites, we added a watcher to place on the element where you display the current selected value. So whether you have a button, a select buttons, a cursor, or whichever other strategy, place the data-pricery-watcher on that place where the current volume is displayed, and let pricery change the other values for you:

// Don't change anything to your current logic
<div>
  <span>1 seat</span>
  <span class="selected">5 seat</span>
  <span>10 seat</span>
</div>

// Just add a pricery watcher where the selected amount is displayed
<div>
  <p>
    You selected
    <span data-pricery-watcher>5</span> 
    seats
  </p>
</div>

Don't have a unique display location? If you don't clearly display the current selected number anywhere on your current design, just create a hidden HTML element with that value and add the pricery watcher there.

Last updated