handlebars,Code片段,代码实例,代码示例,代码片段库

handlebars 所有产品都在一个页面上

bc-all-products


/categories

handlebars 数学运算

bc-math


\!h minus operation

{{#if cart.sub_total.value '>' 150}}
    <div class="free">{{lang 'cart.added_to_cart.free_shipping'}}</div>
{{else}}
    <div class="more">{{lang 'cart.added_to_cart.spend'}} <span id="spend-result"></span> {{lang 'cart.added_to_cart.more'}}</div>
    <script type="text/javascript">
        var spend = 150 - {{cart.sub_total.value}};
        document.getElementById('spend-result').innerHTML = '$' + spend.toFixed(2);
    </script>
{{/if}}

handlebars 翻译语言区域设置

bc-translations-languages-locale


\!h with variables

--- lang/en.json ---
"what_next": "Ok you have, {num_products, plural, one {1 item} other {# items}} in your cart. What's next?",

---  templates ---
{{lang 'cart.added_to_cart.what_next' num_products=cart.quantity}}

handlebars 自定义字段

bc-custom-fields

<ul class="grid grid--uniform sameheight">
    {{#each products as |product|}}
	    <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}}
	    ">
	        {{>components/products/card-custom settings=../settings show_compare=../show_compare show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer event=../event position=(add @index 1)}}
	    </li>
    {{/each}}
</ul>

handlebars 运输

bc-shipping


\!h Free shipping

https://support.bigcommerce.com/s/article/Free-Shipping

\!h By product

https://support.bigcommerce.com/s/article/Free-Shipping#by-product

\!h Flat rate

https://support.bigcommerce.com/s/article/Flat-Rate-Shipping

handlebars 模板 - 获取URL参数

stencil-url-parms.html

{{!-- Get the currency object --}}
{{#withFirst currency_selector.currencies}} 
    {{!-- Get the start of the URL without the query string--}}
    {{#withLast (split this.switch_url "?")}}
      {{!-- Get the URL parameters, loop through them --}}
      {{#each (split this "&")}}
      
        {{!-- Parameter Name --}}
        {{first (split this "=")}}
        {{!-- Parameter Value --}}
        {{last (split this "=")}}
        
        {{!-- Example of checking a certain parameter + value --}}
        {{#if (first (split this "=")) '==' '<parameter-name-goes-here>'}}
        
          {{#if (last (split this "=")) '==' '<parameter-value-to-test-goes-here>'}}
            <span>Hooray for {{first (split this "=")}}</span>
          {{else}}
            <span>{{last (split this "=")}} is not the value you're looking for.</span>
          {{/if}}
          
        {{else}}
          <span>{{first (split this "=")}} is not the parameter you're looking for</span>
        {{/if}}
 
      {{/each}}
    {{/withLast}}
{{/withFirst}}

handlebars 模板 - 获取URL参数

stencil-url-parms.html

{{!-- Get the currency object --}}
{{#withFirst currency_selector.currencies}} 
    {{!-- Get the start of the URL without the query string--}}
    {{#withLast (split this.switch_url "?")}}
      {{!-- Get the URL parameters, loop through them --}}
      {{#each (split this "&")}}
      
        {{!-- Parameter Name --}}
        {{first (split this "=")}}
        {{!-- Parameter Value --}}
        {{last (split this "=")}}
        
        {{!-- Example of checking a certain parameter + value --}}
        {{#if (first (split this "=")) '==' '<parameter-name-goes-here>'}}
        
          {{#if (last (split this "=")) '==' '<parameter-value-to-test-goes-here>'}}
            <span>Hooray for {{first (split this "=")}}</span>
          {{else}}
            <span>{{last (split this "=")}} is not the value you're looking for.</span>
          {{/if}}
          
        {{else}}
          <span>{{first (split this "=")}} is not the parameter you're looking for</span>
        {{/if}}
 
      {{/each}}
    {{/withLast}}
{{/withFirst}}

handlebars 模板 - 获取URL参数

stencil-url-parms.html

{{!-- Get the currency object --}}
{{#withFirst currency_selector.currencies}} 
    {{!-- Get the start of the URL without the query string--}}
    {{#withLast (split this.switch_url "?")}}
      {{!-- Get the URL parameters, loop through them --}}
      {{#each (split this "&")}}
      
        {{!-- Parameter Name --}}
        {{first (split this "=")}}
        {{!-- Parameter Value --}}
        {{last (split this "=")}}
        
        {{!-- Example of checking a certain parameter + value --}}
        {{#if (first (split this "=")) '==' '<parameter-name-goes-here>'}}
        
          {{#if (last (split this "=")) '==' '<parameter-value-to-test-goes-here>'}}
            <span>Hooray for {{first (split this "=")}}</span>
          {{else}}
            <span>{{last (split this "=")}} is not the value you're looking for.</span>
          {{/if}}
          
        {{else}}
          <span>{{first (split this "=")}} is not the parameter you're looking for</span>
        {{/if}}
 
      {{/each}}
    {{/withLast}}
{{/withFirst}}

handlebars 销售订单客户存款摘要

此代码段允许进行轻微修改，以便在创建销售订单时在Netsuite内创建具有指定帐户的客户存款

ns-customer-deposit


{{#if_eq record.Order.0.OrderPayment.0.PaymentType "PayPal Express"}}
	  "deposit_paymentmethod":"9",
      "deposit":[{
      "account":"333",
      "payment":"{{record.Order.0.OrderPayment.0.Amount}}",
								"custom_fields":
									[{
									"name":"trandate",
									"value":"{{dateTimeToDate record.Order.0.OrderPayment.0.DatePaid}}"
									},
									{
										"name":"custbody_pm_int_tran_con_id",
										"value":"{{record.Order.0.ID}}-0"
									},
									{
										"name":"externalid",
										"value":"{{record.Order.0.ID}}-0"
									},
									{
										"name":"custbody_pm_int_webstore",
										"value":"1"
									}]
    }],
{{/if_eq}}

readme.md

This snippet allows for creation of a customer deposit for Awards & Trophies.
Key variables need to altered to suit the account

handlebars 条件元素属性

conditional element attributes.pug

button&attributes(saldo.extras && saldo.extras.link ? {'role': 'button', 'onclick': `window.open('${saldo.extras.link}', '_blank')`} : false)