roller.js

(function( $, document ) {
  var orderable_switch_pricing = {
    vars: {
      'cycle_buttons': '.orderable-switch .kt-button',
      'qty_buttons': '.orderable-qty .kt-button',
      'active_toggle': 'kt-button--active',
      'checkout_url': 'https://my.orderable.com/checkout/?wcf-default=',
      'pricing': {
        'annual': {
          '1': {
            'original_price': '',
            'price': '$249',
            'checkout_id': '1'
          },
          '10': {
            'original_price': '',
            'price': '$399',
            'checkout_id': '2'
          },
          '25': {
            'original_price': '',
            'price': '$499',
            'checkout_id': '3'
          }
        },
        'lifetime': {
          '1': {
            'original_price': '',
            'price': '$749',
            'checkout_id': '1'
          },
          '10': {
            'original_price': '',
            'price': '$1199',
            'checkout_id': '2'
          },
          '25': {
            'original_price': '',
            'price': '$1499',
            'checkout_id': '3'
          }
        }
      }
    },

    /**
     * On doc ready.
     */
    on_ready: function() {
      orderable_switch_pricing.watch();
    },

    /*
     * Watch.
     */
    watch: function() {
      $( document.body ).on( 'click', orderable_switch_pricing.vars.cycle_buttons, function( e ) {
        e.preventDefault();

        var $button = $( this ),
          $buttons = $( '.orderable-switch .kt-button' );

        $buttons.removeClass( orderable_switch_pricing.vars.active_toggle );
        $button.addClass( orderable_switch_pricing.vars.active_toggle );

        orderable_switch_pricing.set_price();
      } );

      $( document.body ).on( 'click', orderable_switch_pricing.vars.qty_buttons, function( e ) {
        e.preventDefault();

        var $button = $( this ),
          direction = $button.hasClass( 'orderable-qty__up' ) ? 'up' : 'down';

        orderable_switch_pricing.update_sites( direction, $button );
      } );
    },

    /**
     * Set price.
     */
    set_price: function() {
      var type = $( '.orderable-switch .kt-button--active' ).hasClass( 'orderable-switch__annual' ) ? 'annual' : 'lifetime',
        sites = orderable_switch_pricing.get_sites(),
        price = orderable_switch_pricing.vars.pricing[type][sites];

      $('.orderable-price--current').text( price.price );
      $('.orderable-price--original').text( price.original_price );
      $('.orderable-buy').attr( 'href', orderable_switch_pricing.vars.checkout_url + price.checkout_id );
    },

    /*
     * Set sites.
     */
    set_sites: function( sites ) {
      var $sites = $('.orderable-qty-label');

      if ( typeof sites === 'undefined' ) {
        var sites_text = $sites.text(),
        sites = parseInt( sites_text );
      }

      var sites_text = 1 === sites ? 'Site' : 'Sites';

      $sites.data( 'sites', sites ).text( sites + ' ' + sites_text );
      orderable_switch_pricing.set_price();
    },

    /*
     * Get sites.
     */
    get_sites: function() {
      var $sites = $('.orderable-qty-label');

      if ( ! $sites.data( 'sites' ) ) {
        orderable_switch_pricing.set_sites();
      }


      var	sites = $sites.data( 'sites' );

      return sites;
    },

    /**
     * update sites qty.
     */
    update_sites: function( direction, $button ) {
      var options = [ 1, 10, 25 ],
        current_sites = orderable_switch_pricing.get_sites(),
        current_index = options.indexOf( current_sites ),
        new_index = current_index;

      $( orderable_switch_pricing.vars.qty_buttons ).removeClass( 'kt-button--disabled' );

      if ( 'up' === direction ) {
        new_index = new_index+1;
      } else {
        new_index = new_index-1;
      }

      var sites = options[ new_index ];

      // Disable button on last site qty.
      if ( typeof sites === 'undefined' || 0 === new_index || 2 === new_index ) {
        $button.addClass( 'kt-button--disabled' );
      }

      orderable_switch_pricing.set_sites( sites );
    }
  };
  $( document ).ready( orderable_switch_pricing.on_ready );
}( jQuery, document ));