Rendering HTML with Ajax

Rendering HTML with Ajax

Stencil allows you to render dynamic components on the fly. For example, note this default code in /templates/components/products/quick-view.html (note also this file name, which Handlebars will reference later in this example):

<div class="modal-body quickView">
    {{> components/products/product-view schema=false}}

To render a different template, you would instead reference that template’s file name. For example, assume that you want to substitute a custom template that you’ve named: <theme-name>/templates/components/products/quicker-view.html.

This next code block is from the Stencil default theme’s /assets/js/theme/global/quick-view.js file. Note the quicker-view.html statements brought in to reference the new file name:

let $modal = $('#modal'),
  $modalContent = $('.modal-content', $modal),
  $modalOverlay = $('.loadingOverlay', $modal),
  modalModifierClasses = 'modal--large';

$('body').on('click', '.quickview', (event) => {
  let productId = $(event.currentTarget).data('product-id');


  // clear the modal

  // open modal
  $'reveal', 'open');

	//quicker-view.html statement, replacing the standard template's quick-view.html template
  utils.api.product.getById(productId, {template: 'products/quicker-view'}, function done(err, response) {

      return new ProductDetails($modalContent, context);