liquid 重置密码消息恢复密码消息

Shopify重置密码

sh-reset-password
customers/login.liquid

<div class="note form-success hidden" id="ResetSuccess">
  {{ 'customer.recover_password.success' | t }}
</div>

и
{% form 'recover_customer_password' %}
{{ form.errors | default_errors }}

{% comment %}
Add a hidden span to indicate the form was submitted succesfully.
{% endcomment %}
{% if form.posted_successfully? %}
<span class="hide reset-password-success"></span>
{% endif %}

В языках должно быть это сообщение или из опций темы можно сделать

в js

resetPasswordSuccess();

/**
*
*  Show reset password success message
*
*/
function resetPasswordSuccess() {
var $formState = $('.reset-password-success');

// check if reset password form was successfully submited.
if (!$formState.length) {
return;
}

// show success message
$('#ResetSuccess').removeClass('hidden');
}

liquid 网址中的产品差异

Shopifyвариациявурледобавляетвариациювурл

sh-product-variation-url
http://screen.w3.ua/Apr17/108960458.jpg

Есть правки в этом снипете option-selectors.liquid enableHistoryState отвечает за добавление вариации в урл

{% if template contains 'product' %}
<script type="text/javascript">
  jQuery(document).ready(function($){
    new Shopify.OptionSelectors("product-variants-{{product.id}}", { product: {{ product | json }}, onVariantSelected: selectCallback, enableHistoryState: true });
    // Add label if only one product option and it isn't 'Title'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
      jQuery('#product-{{product.id}} .selector-wrapper:eq(0)').prepend('<label>{{ product.options.first | escape }}</label>');
    {% endif %}
  });
</script>
{% else %}
<script type="text/javascript">
  jQuery(document).ready(function($){
    new Shopify.OptionSelectors("product-variants-{{product.id}}", { product: {{ product | json }}, onVariantSelected: selectCallback, enableHistoryState: false });
    // Add label if only one product option and it isn't 'Title'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
      jQuery('#product-{{product.id}} .selector-wrapper:eq(0)').prepend('<label>{{ product.options.first | escape }}</label>');
    {% endif %}
  });
</script>
{% endif %}

liquid Ajax产品添加到购物车

Shopifyаяксдобавлениепродуктавкорзину

sh-ajax-addtocart
http://screen.w3.ua/Mar17/1747398.jpg

https://help.shopify.com/themes/customization/products/add-to-cart/stay-on-product-page-when-items-added-to-cart

liquid 通过过滤器标签过滤器收集过滤器集合

按标签Shopify集合过滤器

sh-collection-filter-by-tags
https://help.shopify.com/themes/customization/collections/filtering-a-collection-with-multiple-tag-drop-down

Пример с чекбоксами

<h2>FILTER SEARCH</h2>

<ul class="clearfix filters filter-list" data-collection-handle="{{ collection.handle }}">
  {% assign tags = settings.collectionf_tags | split: ',' %}
  {% for t in tags %}
  {% assign tag = t | strip %}
  {% if current_tags contains tag %}
  {% assign collection_active = 'active' %}
  {% endif %}
  {% endfor %}

  <li class="clearfix filter {{ collection_active }}">

    <a class="opener" href="#">COLLECTION</a>
    <ul class="slide coll-filter">

      {% for t in tags %}
      {% assign tag = t | strip %}
      {% if current_tags contains tag %}

      <li>
        <input id="check4-{{ tag | handle }}" checked="checked" type="checkbox" value="{{ tag | handle }}" class="checkbox" >
        <label for="check4-{{ tag | handle }}">{{ tag }}</label>
      </li>

      {% elsif collection.all_tags contains tag %}

      <li>
        <input id="check4-{{ tag | handle }}" type="checkbox" value="{{ tag | handle }}" class="checkbox" >
        <label for="chek4-{{ tag | handle }}">{{ tag }}</label>
      </li>

      {% endif %}
      {% endfor %}
    </ul>
  </li>

  {% assign tags = settings.size_tags | split: ',' %}
  {% for t in tags %}
  {% assign tag = t | strip %}
  {% if current_tags contains tag %}
  {% assign size_active = 'active' %}
  {% endif %}
  {% endfor %}

  <li class="clearfix filter {{ size_active }}">

    <a class="opener" href="#">SIZE</a>
    <ul class="slide coll-filter">

      {% for t in tags %}
      {% assign tag = t | strip %}
      {% if current_tags contains tag %}

      <li>
        <input id="check5-{{ tag | handle }}" checked="checked" type="checkbox" value="{{ tag | handle }}" class="checkbox" >
        <label for="check5-{{ tag | handle }}">{{ tag }}</label>
      </li>

      {% elsif collection.all_tags contains tag %}

      <li>
        <input id="check5-{{ tag | handle }}" type="checkbox" value="{{ tag | handle }}" class="checkbox" >
        <label for="check5-{{ tag | handle }}">{{ tag }}</label>
      </li>

      {% endif %}
      {% endfor %}
    </ul>
  </li>

  {% assign tags = settings.colour_tags | split: ',' %}
  {% for t in tags %}
  {% assign tag = t | strip %}
  {% if current_tags contains tag %}
  {% assign color_active = 'active' %}
  {% endif %}
  {% endfor %}

  <li class="clearfix filter {{ color_active }}">

    <a class="opener" href="#">COLOUR</a>
    <ul class="slide coll-filter">

      {% for t in tags %}
      {% assign tag = t | strip %}
      {% if current_tags contains tag %}

      <li>
        <input id="check6-{{ tag | handle }}" checked="checked" type="checkbox" value="{{ tag | handle }}" class="checkbox" >
        <label for="check6-{{ tag | handle }}">{{ tag }}</label>
      </li>

      {% elsif collection.all_tags contains tag %}

      <li>
        <input id="check6-{{ tag | handle }}" type="checkbox" value="{{ tag | handle }}" class="checkbox" >
        <label for="check6-{{ tag | handle }}">{{ tag }}</label>
      </li>

      {% endif %}
      {% endfor %}
    </ul>
  </li>

</ul>

<div class="clear-all"><a href="{{ collection.url }}" class="btn btn-primary">Clear All</a></div>

<script>
  /* Product Tag Filters - Good for any number of filters on any type of collection page.
     Give you product tag filter select element a class of coll-filter.
     Give your collection select a class of coll-picker.
     Brought to you by Caroline Schnapp. */
  Shopify.queryParams = {};
  if (location.search.length) {
    for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
      aKeyValue = aCouples[i].split('=');
      if (aKeyValue.length > 1) {
        Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
      }
    }
  }
//   jQuery('.coll-picker').change(function() {
//     if (jQuery(this).val()) {
//       location.href = '/collections/' + jQuery(this).val();
//     }
//     else {
//       location.href = '/collections/all';
//     }
//   });
   jQuery('.filter-list').each(function() {
   var holder = jQuery(this);
    var checkboxes = holder.find('input[type="checkbox"]');
    
    function onChange() {
      var url = '';
      checkboxes.filter(':checked').each(function() {
       var item = jQuery(this);
        
        if(url.length){
         url += '+' + item.val();
        }else {
         url = item.val();
        }
      });
      delete Shopify.queryParams.page;
      {% if collection.handle %}
          var newURL = '/collections/{{ collection.handle }}';
          if (url.length) {
            newURL += '/' + url;
          }
          var search = jQuery.param(Shopify.queryParams);
          if (search.length) {
            newURL += '?' + search;
          }
          location.href = newURL;
      {% else %}
        if (url.length) {
          Shopify.queryParams.constraint = url;
        }
        else {
          delete Shopify.queryParams.constraint;
        }
        location.search = jQuery.param(Shopify.queryParams);
      {% endif %}
    }
    
    checkboxes.on('change', onChange);
  });
</script>

liquid 在url自定义解析网址中获取GET变量

在url parse url中存储变量

sh-get-variable

{%- comment -%}

  Liquid by Jason @ freakdesign.
  Questions? Ping me on twitter: @freakdesign

  Relates to blog post:
  http://freakdesign.com.au/blogs/news/get-the-url-querystring-values-with-liquid-in-shopify

  Example:
  https://jasons-experiments.myshopify.com/collections/all/products/3-4-sleeve-kimono-dress-coral-1?ref=freakdesign&cache=false

{%- endcomment -%}

{%- comment -%} Capture the content for header containing the tracking data {%- endcomment -%}
{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}

{% comment %} Use string splitting to pull the value from content_for_header and apply some string clean up {% endcomment %}
{%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | split:'.myshopify.com' | last |
   replace:'\/','/' |
   replace:'%20',' ' |
   replace:'\u0026','&'
-%}

{%- for i in (1..1) -%}
  {%- comment -%} If the string doesn't contain a ? then we have no querystring. Go no further {%- endcomment -%}
  {%- unless pageUrl contains "?" -%}{% break %}{%- endunless -%}

  {%- comment -%} Only work when the cache qs is used. Be aware of the perf issues with using cache=false {%- endcomment -%}
  {%- unless pageUrl contains "cache=false" -%}{% break %}{%- endunless -%}

  {%- comment -%} Split the url at the ? to get all values after it {%- endcomment -%}
  {%- assign pageQuerystring = pageUrl | split:'?' | last -%}

  {%- comment -%} Split the remaining string at & to get the list of keys and values (if any) {%- endcomment -%}
  {%- assign parts = pageQuerystring | split:'&' -%}

  {%- comment -%} Loop over them... {%- endcomment -%}
  {%- for part in parts -%}

    {%- comment -%} Split the part at the =. Not all querystrings will be in pairs so we need to account for that {%- endcomment -%}
    {%- assign keyAndValue = part | split:'=' -%}

    {%- if keyAndValue.size > 1 -%}

    key: {{ keyAndValue[0] }}
    value: {{ keyAndValue[1] }}

    {%- endif -%}

  {%- endfor -%}
{%- endfor -%}

--------- колллекции ---------

https://help.shopify.com/themes/customization/collections/add-view-all-to-collection-pages

это, по сути, GET 
collection.15.liquid
collection.10.liquid
но только через ?view= надо передавать цифру

liquid 捆绑产品多添加到购物车многопродуктоввкорзину

Shopify miltiple加入购物车

sh-multi-addtocart
убери add-to-cart-js

{% if product.available %}
  {% assign hide_default_title = false %}
  {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
    {% assign hide_default_title = true %}
  {% endif %}

<div class="price-variants-block">  
  <form id="product-{{ product.id }}" action="/cart/add" method="post" class="variants">
    
    {% if product.metafields.bundle contains 'section_title' %}
    <h3>{{ product.metafields.bundle.section_title }}</h3>
    {% endif %}
    
    {% if product.metafields.bundle contains 'first_collection' or product.metafields.bundle contains 'second_collection' or product.metafields.bundle contains 'third_collection' %}
    <ul class="select-list">

      {% if product.metafields.bundle contains 'first_collection' %}
      <li class="option" data-option="option1">
        {% if product.metafields.bundle contains 'first_collection_title' %}<p class="price">{{ product.metafields.bundle.first_collection_title }}</p>{% endif %}
        <ul>
          {% assign first_collection = product.metafields.bundle.first_collection %}
          {% for product in collections[first_collection].products limit:100 %}
          <li>
            <label>
              <input type="checkbox" class="bundle-checkbox" value="{{ product.selected_or_first_available_variant.id }}" name="id[]"> 
              {{ product.title }}
            </label>
          </li>
          {% endfor %}
        </ul>
      </li>
      {% endif %}

    </ul>
    {% endif %}
    
    <input type="submit" id="add-{{ product.id }}" class="btn btn-lg" value="ADD TITLES TO CART " name="add" {% comment %}onclick="Shopify.addItemFromForm('product-{{product.id}}'); return false;"{% endcomment %} />

  </form>

</div> 
{% else %}
<div class="sold-out">
  <span class="price">{{ 'products.product.sold_out_html' | t }}</span>
</div>      
{% endif %}

liquid 简短说明摘录

Shopify摘录简短说明

sh-escrpt
{{ product.description | truncate: 300 }}
{{product.description | strip_html | truncatewords: 50}}

liquid 产品检查图像由alt

Shopify产品图片alt

sh-product-img-alt
{% assign counter = 0 %}
{% if additional != blank %}

  {% for image in product.images %}
      {% if forloop.first %}
      <div class="container">
        <div class="option-block inst-portfolio">
            <h2>The {{ product.title }} look.</h2>
            <div class="option-holder">
      {% endif %}

      {% if image.alt == 'additional' and counter < 3 %}
        {% assign counter = counter | plus: 1 %}
        <div class="option-box">
           <a rel="lightbox[gallery1]" href="{{ image | product_img_url: 'master' }}">
              <img src="{{ image | product_img_url: 'large' }}" alt="{{ image.alt }}">
           </a>
        </div>
      {% endif %}

      {% if forloop.last %}</div></div></div>{% endif %}
  {% endfor %}

{% endif %}

liquid 产品新产品

Shopify产品新产品

sh-product-new
{% assign date_published = product.published_at | date:'%Y%m%d' %}
{% assign date_now = 'now' | date:'%Y%m%d' %}
{% assign date_difference = date_now | minus: date_published %}
{% if date_difference < 7 %}New{% endif %}

liquid 分页数字和产品数量

Shopify定制分页

sh-custom-pagination
{% if paginate.pages > 1 %}
{% unless template == 'customers/account' %}<div class="row">{% endunless %}
<div class="pagination--holder">
  <div class="pagination_info">
     <p>Showing {{ paginate.current_offset | plus: 1 }}-{% if paginate.next %}{{ paginate.current_offset | plus: paginate.page_size }}{% else %}{{ paginate.items }}{% endif %} of {{ paginate.items }} products</p>
  </div>
    <ul class="pagination clearfix">
    {% if paginate.previous %}
      <li><a href="{{ paginate.previous.url }}" class="prev"><i class="icon-chevron-thin-left"></i></a></li>
    {% else %}
    <li class="disabled"><i class="icon-chevron-thin-left"></i></li>
    {% endif %}
     
      {% for part in paginate.parts %}
        {% if part.is_link == false %}
        <li class="cur">{{ part.title }}</li>
        {% else %}
        <li><a href="{{ part.url }}">{{ part.title }}</a></li>
        {% endif %}
      {% endfor %}
      
    {% if paginate.next %}
      <li><a href="{{ paginate.next.url }}" class="next"><span class="icon-chevron-thin-right"></span></a></li>
    {% else %}
      <li class="disabled"><span class="icon-chevron-thin-right"></span></li>
    {% endif %}
    </ul>
  </div>
{% unless template == 'customers/account' %}</div>{% endunless %}
{% endif %}