handlebars 小胡子教程

小胡子教程#mustache

links.mustache
<div class="sidebar">
  <h2>Actions</h2>
    <h2>Links</h2>
  <ul>
      {{#links}}
      <li><a href="{{linkUrl}}" target="_bank">{{linkName}}</a></li>
      {{/links}}
  </ul>
</div>

handlebars 小胡子教程

小胡子教程#mustache

entry.mustache
<div class="entries">
   {{#entry}}
  <div class="entry">
     <h2>{{title}}</h2>
      <div class="body">{{body}}</div>
      <div class="date">{{date}}</div>
  </div>
    {{/entry}}
</div>

handlebars 小类

BigCommerce子类别

bc-subcategories
{{#if category.subcategories}}
    <div class="sidebarBlock">
        <h5 class="sidebarBlock-heading">{{category.name}}</h5>
        <ul class="navList">
            {{#each category.subcategories}}
            <li class="navList-item">
                <a class="navList-action" href="{{url}}" alt="{{name}}" title="{{name}}">{{name}}</a>
            </li>
            {{/each}}
        </ul>
    </div>
{{/if}}

handlebars Instagram Feed

bc-instagram
https://bicoso.net/bigcommerce-get-instagram-feed-on-homepage-stencil-theme/

или

Instagram Feed by Elfsight App

handlebars Делениепомодулюкастомнаяобвертка

BigCommerce模2

bc-modulo
https://developer.bigcommerce.com/stencil-docs/handlebars-syntax-and-helpers/handlebars-helpers-reference/comparison-helpers/standard-comparison-helpers#handlebars_neither

{{#ifNth 2 @index}} {{@index}} - nacelo na 2 {{else}}  {{@index}} - ne nacelo na 2 {{/ifNth}}

{{#ifNth 5 @index}} {{@index}} - nacelo na 5 {{else}}  {{@index}} - ne nacelo na 5 {{/ifNth}}

handlebars 自定义菜单页脚菜单

BigCommerce自定义菜单附加菜单

bc-footer-menu
<nav class="navPages">
    <ul class="navPages-list{{#if theme_settings.navigation_design '!==' 'simple'}} navPages-list-depth-max{{/if}}">
        {{#each categories}}
            <li class="navPages-item">
                <a class="navPages-action{{#if is_active}} activePage{{/if}}" href="{{url}}">{{name}}</a>
            </li>
        {{/each}}
        {{#unless theme_settings.hide_content_navigation}}
            {{#each pages}}
                 <li class="navPages-item navPages-item-page">
                     <a class="navPages-action{{#if name '==' ../page.title}} activePage{{/if}}" href="{{url}}">{{name}}</a>
                 </li>
             {{/each}}
        {{/unless}}
    </ul>
</nav>
bc-custom-footer-menu


<nav class="footer-menu">
    <ul>
        {{#each pages as |parentpage|}}

            {{#if parentpage.name '==' ../theme_settings.footer_menu}}

                {{#if parentpage.children}}

                    {{#each parentpage.children as |child|}}

                        <li class="{{#if child.name '==' ../../../../page.title }} active{{/if}}"><a href="{{child.url}}">{{child.name}}</a></li>

                    {{/each}}

                {{/if}}

            {{/if}}

        {{/each}}
    </ul>
</nav>

handlebars 如果或是的话

模板中的BigCommerce条件

bc-if-else
\!h IF if

== 	equal to
=== 	equal to and equal type
!= 	not equal
< 	less than
> 	greater than
<= 	less than or equal to
>=

{{#if head.title '==' 'Page One'}}
        <!-- do something -->
{{else if head.title "==" 'Random Page'}}
        <!-- do something else --> 
{{else}}
        <!-- do default --> 
{{/if}}

<li class="
	{{#if product.custom_fields }}
      	{{#each product.custom_fields as |product_field| }}
        	{{#if product_field.name '==' 'category_preview' }}
        		{{#if product_field.value '==' 'wide' }}
             	    grid__item small--one-whole medium-up--one-half half-grid
             	{{/if}}
           	{{/if}}
        {{/each}}
    {{else}}
        grid__item small--one-half medium-up--one-quarter
    {{/if}}
">
    
\!h if not
{{#if (not theme_settings.hide_categories_links)}}
<!-- do something else --> 
{{/if}}


\!h OR or

{{#or customer (if theme_settings.restrict_to_login '!==' true)}}

{{/or}}

{{#if theme_settings.instagram_feed}}

	<section class="instagram">
		<div class="container">
			
			{{#or theme_settings.instagram_title theme_settings.instagram_subtitle}}
				<div class="instagram__title">

					{{#if theme_settings.instagram_title}}<h2 class="h2">{{ theme_settings.instagram_title }}</h2>{{/if}}

					{{#if theme_settings.instagram_subtitle}}<span class="instagram__sub-title">{{ theme_settings.instagram_subtitle }}</span>{{/if}}

				</div>
			{{/or}}

			<div class="imstagram-wrap">
				<script src="https://apps.elfsight.com/p/platform.js" defer></script><div class="elfsight-app-08539a92-7cf7-490a-9b17-a8b811f000ce"></div>
			</div>

		</div>
	</section>

{{/if}}

handlebars *菜单* - 自定义多级菜单

BigCommerce导航菜单

bc-handlebars
https://support.bigcommerce.com/s/article/Adding-Page-Links-to-Your-Category-Menu

templates/common/navigation-menu.html

<ul class="primary-menu">
  {{#each categories}}

      {{#if ../theme_settings.navigation_design '===' 'simple'}}
          {{> components/common/navigation-list}}
      {{/if}}

      {{#if ../theme_settings.navigation_design '===' 'alternate'}}
          {{> components/common/navigation-list-alternate}}
      {{/if}}

  {{/each}}

  {{#unless theme_settings.hide_content_navigation}}

      <ul class="primary-menu">
          {{#each pages as |parentpage|}}

              {{#if parentpage.name '!=' ../theme_settings.footer_menu}}
              
                  <li class="{{#if parentpage.children}}drop{{/if}}
                  {{#if parentpage.name '==' ../page.title}} active{{/if}}
                  {{#if parentpage.children}}{{#each parentpage.children as |child|}}{{#if child.name '==' ../../../page.title}} active{{/if}}{{/each}}{{/if}}">

                      <a {{#if parentpage.children}}class="drop-opener"{{/if}} href="{{parentpage.url}}">

                          {{#if parentpage.name '==' 'Blog'}}

                              {{lang 'header.press'}}

                          {{else}}

                              {{parentpage.name}}

                          {{/if}}
                          
                      </a>

                      {{#if parentpage.children}}

                          <div class="drop-menu">
                              <div class="drop-hold">

                                  <ul class="sub-menu">
                                      {{#each parentpage.children as |child|}}

                                          <li class="{{#if child.name '==' ../../../page.title }} active{{/if}}"><a href="{{child.url}}">{{child.name}}</a></li>

                                      {{/each}}
                                  </ul>

                                  <div class="columns mob-hidden">
                                      <div class="col">
                                          <div class="visual-drop"><img src="img-drop-01.jpg" alt="image description" width="222" height="221"></div>
                                      </div>
                                      <div class="col">
                                          <div class="visual-drop"><img src="img-drop-02.jpg" alt="image description" width="222" height="221"></div>
                                      </div>
                                  </div>

                              </div>
                          </div>

                      {{/if}}

                  </li>

              {{/if}}

          {{/each}}
      </ul>

  {{/unless}}
</ul>

handlebars Handlebar js有用полезныештуки车把js

BigCommerce车把js

bc-handlebar
\!h template context print all 

{{{json this}}}

Выведи просто в любом html темплейте, распечатает все данные в контексте данного темплейта.
(по моим ощущениям примерно как $wp_query в WP)
разверни в читабельный вид и можно дальше работать с данными

https://unminify.com/

\!h Так можно распечатать любой объект handlebar echo handlebar print_r

{{{json children}}}


\!h Так можно обратиться к атрибутам объекта где [1] это индекс элемента в массиве

{{children.[1].name}}

\!h циклы handlebar циклы handlebar loop

navigations-menu.html

{{{json pages}}}

{{#each pages}}
    {{@index}} or {{@key}} - {{{json this}}}
    <br/>
    {{@key}} - {{name}}
    <br/>
    {{@index}} - {{this.name}}
{{/each}}

{{#each pages as |page_value page_key|}}
  {{#each children as |subpage_value subpage_key|}}
    Parent page: {{{json page_key}}} - {{{json page_value}}} Subpage: {{{json subpage_key}}} - {{{json subpage_value}}} <br/>
  {{/each}}
{{/each}}

{{#each pages as |page|}}
  {{#each page.children as |subpage|}}
    Parent page: {{page.name}} Subpage: {{subpage.name}} <br/>
  {{/each}}
{{/each}}

\!h string to html in string title with html

Три фигурные скобки для вывода переменной не две

{{{title}}}

\!h strip tags remove tegs from string

<title>{{sanitize head.title}}</title>

\!h cut string excerpt length

<p>{{ellipsis summary 50}}</p>

\!h page type page template

{{page_type}}

\!h отключить eslint 

В самом верху js файла
/* eslint-disable */

\!h replace str_replace

{{#replace "'" head.title}}’{{else}}{{head.title}}{{/replace}}

https://stackoverflow.com/questions/37797112/bigcommerce-stencil-bug-with-replace-handlebars-helper?rq=1

handlebars 特定日期的智能自定义背景

在header.tpl中添加到body类标记中

header.tpl
<body class="
{if $smarty.now|date_format:'%m%d' <= '0107' || $smarty.now|date_format:'%m%d' >= '1201'}event_christmas{/if}
"></body>