diff --git a/tailbone/templates/page.mako b/tailbone/templates/page.mako
index 1dbd333b..2d8227d4 100644
--- a/tailbone/templates/page.mako
+++ b/tailbone/templates/page.mako
@@ -32,7 +32,8 @@
 
     let ThisPage = {
         template: '#this-page-template',
-        methods: {}
+        computed: {},
+        methods: {},
     }
 
     let ThisPageData = {
diff --git a/tailbone/templates/products/view.mako b/tailbone/templates/products/view.mako
index 99f555ae..c8f2a5ec 100644
--- a/tailbone/templates/products/view.mako
+++ b/tailbone/templates/products/view.mako
@@ -305,7 +305,7 @@
         <p class="panel-heading">
           Vendor Sources
           % if request.rattail_config.versioning_enabled() and master.has_perm('versions'):
-              <a href="#" @click.prevent="showingCostHistory = true">
+              <a href="#" @click.prevent="showCostHistory()">
                 (view cost history)
               </a>
           % endif
@@ -380,7 +380,7 @@
             </p>
           </header>
           <section class="modal-card-body">
-            ${regular_price_history_grid.render_buefy_table_element(data_prop='regularPriceHistoryData')|n}
+            ${regular_price_history_grid.render_buefy_table_element(data_prop='regularPriceHistoryData', loading='regularPriceHistoryLoading')|n}
           </section>
           <footer class="modal-card-foot">
             <b-button @click="showingPriceHistory_regular = false">
@@ -399,7 +399,7 @@
             </p>
           </header>
           <section class="modal-card-body">
-            ${current_price_history_grid.render_buefy_table_element(data_prop='currentPriceHistoryData')|n}
+            ${current_price_history_grid.render_buefy_table_element(data_prop='currentPriceHistoryData', loading='currentPriceHistoryLoading')|n}
           </section>
           <footer class="modal-card-foot">
             <b-button @click="showingPriceHistory_current = false">
@@ -418,7 +418,7 @@
             </p>
           </header>
           <section class="modal-card-body">
-            ${suggested_price_history_grid.render_buefy_table_element(data_prop='suggestedPriceHistoryData')|n}
+            ${suggested_price_history_grid.render_buefy_table_element(data_prop='suggestedPriceHistoryData', loading='suggestedPriceHistoryLoading')|n}
           </section>
           <footer class="modal-card-foot">
             <b-button @click="showingPriceHistory_suggested = false">
@@ -437,7 +437,7 @@
             </p>
           </header>
           <section class="modal-card-body">
-            ${cost_history_grid.render_buefy_table_element(data_prop='costHistoryData')|n}
+            ${cost_history_grid.render_buefy_table_element(data_prop='costHistoryData', loading='costHistoryLoading')|n}
           </section>
           <footer class="modal-card-foot">
             <b-button @click="showingCostHistory = false">
@@ -539,16 +539,121 @@
       <script type="text/javascript">
 
         ThisPageData.showingPriceHistory_regular = false
-        ThisPageData.regularPriceHistoryData = ${json.dumps(regular_price_history_grid.get_buefy_data()['data'])|n}
+        ThisPageData.regularPriceHistoryDataRaw = ${json.dumps(regular_price_history_grid.get_buefy_data()['data'])|n}
+        ThisPageData.regularPriceHistoryLoading = false
+
+        ThisPage.computed.regularPriceHistoryData = function() {
+            let data = []
+            this.regularPriceHistoryDataRaw.forEach(raw => {
+                data.push({
+                    price: raw.price_display,
+                    since: raw.since,
+                    changed: raw.changed_display_html,
+                    changed_by: raw.changed_by_display,
+                })
+            })
+            return data
+        }
+
+        ThisPage.methods.showPriceHistory_regular = function() {
+            this.showingPriceHistory_regular = true
+            this.regularPriceHistoryLoading = true
+
+            let url = '${url("products.price_history", uuid=instance.uuid)}'
+            let params = {'type': 'regular'}
+            this.$http.get(url, {params: params}).then(response => {
+                this.regularPriceHistoryDataRaw = response.data
+                this.regularPriceHistoryLoading = false
+            })
+        }
 
         ThisPageData.showingPriceHistory_current = false
-        ThisPageData.currentPriceHistoryData = ${json.dumps(current_price_history_grid.get_buefy_data()['data'])|n}
+        ThisPageData.currentPriceHistoryDataRaw = ${json.dumps(current_price_history_grid.get_buefy_data()['data'])|n}
+        ThisPageData.currentPriceHistoryLoading = false
+
+        ThisPage.computed.currentPriceHistoryData = function() {
+            let data = []
+            this.currentPriceHistoryDataRaw.forEach(raw => {
+                data.push({
+                    price: raw.price_display,
+                    price_type: raw.price_type,
+                    since: raw.since,
+                    changed: raw.changed_display_html,
+                    changed_by: raw.changed_by_display,
+                })
+            })
+            return data
+        }
+
+        ThisPage.methods.showPriceHistory_current = function() {
+            this.showingPriceHistory_current = true
+            this.currentPriceHistoryLoading = true
+
+            let url = '${url("products.price_history", uuid=instance.uuid)}'
+            let params = {'type': 'current'}
+            this.$http.get(url, {params: params}).then(response => {
+                this.currentPriceHistoryDataRaw = response.data
+                this.currentPriceHistoryLoading = false
+            })
+        }
 
         ThisPageData.showingPriceHistory_suggested = false
-        ThisPageData.suggestedPriceHistoryData = ${json.dumps(suggested_price_history_grid.get_buefy_data()['data'])|n}
+        ThisPageData.suggestedPriceHistoryDataRaw = ${json.dumps(suggested_price_history_grid.get_buefy_data()['data'])|n}
+        ThisPageData.suggestedPriceHistoryLoading = false
+
+        ThisPage.computed.suggestedPriceHistoryData = function() {
+            let data = []
+            this.suggestedPriceHistoryDataRaw.forEach(raw => {
+                data.push({
+                    price: raw.price_display,
+                    since: raw.since,
+                    changed: raw.changed_display_html,
+                    changed_by: raw.changed_by_display,
+                })
+            })
+            return data
+        }
+
+        ThisPage.methods.showPriceHistory_suggested = function() {
+            this.showingPriceHistory_suggested = true
+            this.suggestedPriceHistoryLoading = true
+
+            let url = '${url("products.price_history", uuid=instance.uuid)}'
+            let params = {'type': 'suggested'}
+            this.$http.get(url, {params: params}).then(response => {
+                this.suggestedPriceHistoryDataRaw = response.data
+                this.suggestedPriceHistoryLoading = false
+            })
+        }
 
         ThisPageData.showingCostHistory = false
-        ThisPageData.costHistoryData = ${json.dumps(cost_history_grid.get_buefy_data()['data'])|n}
+        ThisPageData.costHistoryDataRaw = ${json.dumps(cost_history_grid.get_buefy_data()['data'])|n}
+        ThisPageData.costHistoryLoading = false
+
+        ThisPage.computed.costHistoryData = function() {
+            let data = []
+            this.costHistoryDataRaw.forEach(raw => {
+                data.push({
+                    cost: raw.cost_display,
+                    vendor: raw.vendor,
+                    since: raw.since,
+                    changed: raw.changed_display_html,
+                    changed_by: raw.changed_by_display,
+                })
+            })
+            return data
+        }
+
+        ThisPage.methods.showCostHistory = function() {
+            this.showingCostHistory = true
+            this.costHistoryLoading = true
+
+            let url = '${url("products.cost_history", uuid=instance.uuid)}'
+            this.$http.get(url).then(response => {
+                this.costHistoryDataRaw = response.data
+                this.costHistoryLoading = false
+            })
+        }
 
       </script>
   % endif
diff --git a/tailbone/views/products.py b/tailbone/views/products.py
index 8a2c3d0c..aaf70774 100644
--- a/tailbone/views/products.py
+++ b/tailbone/views/products.py
@@ -483,7 +483,7 @@ class ProductsView(MasterView):
             return text
 
         if self.get_use_buefy():
-            kwargs = {'@click.prevent': 'showingPriceHistory_{} = true'.format(typ)}
+            kwargs = {'@click.prevent': 'showPriceHistory_{}()'.format(typ)}
         else:
             kwargs = {'id': 'view-{}-price-history'.format(typ)}
         history = tags.link_to("(view history)", '#', **kwargs)
@@ -494,10 +494,17 @@ class ProductsView(MasterView):
         br = HTML.tag('br')
         return HTML.tag('div', c=[text, br, history])
 
+    def show_price_effective_dates(self):
+        if not self.rattail_config.versioning_enabled():
+            return False
+        return self.rattail_config.getbool(
+            'tailbone', 'products.show_effective_price_dates',
+            default=True)
+
     def render_regular_price(self, product, field):
         text = self.render_price(product, field)
 
-        if text and self.rattail_config.versioning_enabled():
+        if text and self.show_price_effective_dates():
             history = self.get_regular_price_history(product)
             if history:
                 date = localtime(self.rattail_config, history[0]['changed'], from_utc=True).date()
@@ -508,7 +515,7 @@ class ProductsView(MasterView):
     def render_current_price(self, product, field):
         text = self.render_price(product, field)
 
-        if text and self.rattail_config.versioning_enabled():
+        if text and self.show_price_effective_dates():
             history = self.get_current_price_history(product)
             if history:
                 date = localtime(self.rattail_config, history[0]['changed'], from_utc=True).date()
@@ -526,7 +533,7 @@ class ProductsView(MasterView):
     def render_suggested_price(self, product, column):
         text = self.render_price(product, column)
 
-        if text and self.rattail_config.versioning_enabled():
+        if text and self.show_price_effective_dates():
             history = self.get_suggested_price_history(product)
             if history:
                 date = localtime(self.rattail_config, history[0]['changed'], from_utc=True).date()
@@ -973,8 +980,63 @@ class ProductsView(MasterView):
             return ""
         return pretty_quantity(value)
 
+    def price_history(self):
+        """
+        AJAX view for fetching various types of price history for a product.
+        """
+        product = self.get_instance()
+
+        typ = self.request.params.get('type', 'regular')
+        assert typ in ('regular', 'current', 'suggested')
+
+        getter = getattr(self, 'get_{}_price_history'.format(typ))
+        data = getter(product)
+
+        # make some data JSON-friendly
+        jsdata = []
+        for history in data:
+            history = dict(history)
+            price = history['price']
+            history['price'] = float(price)
+            history['price_display'] = "${:0.2f}".format(price)
+            changed = localtime(self.rattail_config, history['changed'], from_utc=True)
+            history['changed'] = six.text_type(changed)
+            history['changed_display_html'] = raw_datetime(self.rattail_config, changed)
+            user = history.pop('changed_by')
+            history['changed_by_uuid'] = user.uuid
+            history['changed_by_display'] = six.text_type(user)
+            jsdata.append(history)
+        return jsdata
+
+    def cost_history(self):
+        """
+        AJAX view for fetching cost history for a product.
+        """
+        product = self.get_instance()
+        data = self.get_cost_history(product)
+
+        # make some data JSON-friendly
+        jsdata = []
+        for history in data:
+            history = dict(history)
+            cost = history['cost']
+            if cost is not None:
+                history['cost'] = float(cost)
+                history['cost_display'] = "${:0.2f}".format(cost)
+            else:
+                history['cost_display'] = None
+            changed = localtime(self.rattail_config, history['changed'], from_utc=True)
+            history['changed'] = six.text_type(changed)
+            history['changed_display_html'] = raw_datetime(self.rattail_config, changed)
+            user = history.pop('changed_by')
+            history['changed_by_uuid'] = user.uuid
+            history['changed_by_display'] = six.text_type(user)
+            jsdata.append(history)
+        return jsdata
+
     def template_kwargs_view(self, **kwargs):
         product = kwargs['instance']
+        use_buefy = self.get_use_buefy()
 
         # TODO: pretty sure this is no longer needed?  guess we'll find out
         # kwargs['image'] = False
@@ -998,7 +1060,10 @@ class ProductsView(MasterView):
         if self.rattail_config.versioning_enabled() and self.has_perm('versions'):
 
             # regular price
-            data = self.get_regular_price_history(product)
+            if use_buefy:
+                data = []       # defer fetching until user asks for it
+            else:
+                data = self.get_regular_price_history(product)
             grid = grids.Grid('products.regular_price_history', data,
                               request=self.request,
                               columns=[
@@ -1012,7 +1077,10 @@ class ProductsView(MasterView):
             kwargs['regular_price_history_grid'] = grid
 
             # current price
-            data = self.get_current_price_history(product)
+            if use_buefy:
+                data = []       # defer fetching until user asks for it
+            else:
+                data = self.get_current_price_history(product)
             grid = grids.Grid('products.current_price_history', data,
                               request=self.request,
                               columns=[
@@ -1030,7 +1098,10 @@ class ProductsView(MasterView):
             kwargs['current_price_history_grid'] = grid
 
             # suggested price
-            data = self.get_suggested_price_history(product)
+            if use_buefy:
+                data = []       # defer fetching until user asks for it
+            else:
+                data = self.get_suggested_price_history(product)
             grid = grids.Grid('products.suggested_price_history', data,
                               request=self.request,
                               columns=[
@@ -1044,7 +1115,10 @@ class ProductsView(MasterView):
             kwargs['suggested_price_history_grid'] = grid
 
             # cost history
-            data = self.get_cost_history(product)
+            if use_buefy:
+                data = []       # defer fetching until user asks for it
+            else:
+                data = self.get_cost_history(product)
             grid = grids.Grid('products.cost_history', data,
                               request=self.request,
                               columns=[
@@ -1654,6 +1728,7 @@ class ProductsView(MasterView):
         rattail_config = config.registry.settings.get('rattail_config')
         route_prefix = cls.get_route_prefix()
         url_prefix = cls.get_url_prefix()
+        instance_url_prefix = cls.get_instance_url_prefix()
         template_prefix = cls.get_template_prefix()
         permission_prefix = cls.get_permission_prefix()
         model_title = cls.get_model_title()
@@ -1684,6 +1759,20 @@ class ProductsView(MasterView):
         config.add_route('products.image', '/products/{uuid}/image')
         config.add_view(cls, attr='image', route_name='products.image')
 
+        # price history
+        config.add_route('{}.price_history'.format(route_prefix), '{}/price-history'.format(instance_url_prefix),
+                         request_method='GET')
+        config.add_view(cls, attr='price_history', route_name='{}.price_history'.format(route_prefix),
+                        renderer='json',
+                        permission='{}.versions'.format(permission_prefix))
+
+        # cost history
+        config.add_route('{}.cost_history'.format(route_prefix), '{}/cost-history'.format(instance_url_prefix),
+                         request_method='GET')
+        config.add_view(cls, attr='cost_history', route_name='{}.cost_history'.format(route_prefix),
+                        renderer='json',
+                        permission='{}.versions'.format(permission_prefix))
+
         # mobile quick lookup
         if legacy_mobile:
             config.add_route('mobile.products.quick_lookup', '/mobile/products/quick-lookup')