Rendering HTML with Ajax

Plan: Stencil Developer

Lesson 15 of 28 · 15 min

Render Dynamic Components

Stencil allows you to render dynamic components on the fly. For example, note this default code in templates/components/products/quick-view.html.

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

Take note of this file name, which Handlebars will reference later in this lesson.

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.

EXAMPLE:

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);
  });
});

You should be able to render dynamic components on the fly.