components

The components directory contains reusable code snippets, typically for independent features or UI elements such as breadcrumbs, buttons, and icons.

This article uses the breadcrumb UI component as an example to explain its usage.

Directory structure

There is no strict requirement for the hierarchical structure of the components directory. However, it is recommended to organize them by function. Refer to the following example:

components
└─ breadcrumb            	# breadcrumb component
    ├─ breadcrumb.html    # template file (required)
    ├─ breadcrumb.css     # style file (optional)
    └─ breadcrumb.js      # interaction logic file (optional)

Reference a component

In the page template or section file, reference a component using the component tag, following the format {component directory}/{template filename}.

The following is an example of referencing a breadcrumb snippet in a theme section file.

<!-- sections/customers-order-detail.html -->
<div class="order-detail-page">
  <section class="order-detail">
    {{#component "breadcrumb/breadcrumb" /}}
  </section>
</div>

Custom parameter supported

You can pass multiple custom parameters to the component to achieve varied presentations in different theme modules. The following steps show a basic example of using custom parameters.

Pass parameters

In the file sections/customers-order-detail.html, pass the class and title parameters to the breadcrumb component and assign values to them.

<div class="order-detail-page">
  <section class="order-detail">
    <!-- Pass class and title parameters -->
    {{#component "breadcrumb/breadcrumb" class="hidden-desktop" title="Order Name" /}}
  </section>
</div>

Retrieve parameters

In the code snippet file components/breadcrumb/breadcrumb.html, retrieve the values of class and title parameters through the props object.

<a class="breadcrumb {{props.class}}"> <!-- Retrieve value of class parameter -->
  <div class="breadcrumb__title body1">{{props.title}}</div> <!-- Retrieve value of title parameter -->
</a>
<div class="title">{{props.title}}</div> <!-- Retrieve value of title parameter -->

Render the result

The HTML code appears as follows after rendering the parameters by the template engine.

<div class="order-detail-page">
  <section class="order-detail">
    <a class="breadcrumb hidden-desktop"> <!-- Newly injected class -->
      <div class="breadcrumb__title body1">Order Name</div> <!-- Newly injected title -->
    </a>
    
    <div class="title">Order Name</div> <!-- Newly injected title -->
  </section>
</div>

Was this article helpful to you?

SHOPLINE

Legal