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):

templates/components/products/quick-view.html

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

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

/assets/js/theme/global/quick-view.js

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');
 
  event.preventDefault();
 
  // clear the modal
  $modalContent.html('');
  $modalOverlay.show();
 
  // open modal
  $modal.foundation('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) {
      $modalOverlay.hide();
      $modalContent.html(response);
 
      return new ProductDetails($modalContent, context);
  });
});

Did you find what you were looking for?

Blog commenting with Disqus config.json