Shopify 开发 备忘录

摘要

记录 Shopify 开发过程中常用代码和容易忘记的代码

计算

产品优惠计算

优惠（money）

<!-- 假设： 原价(compareAtPrice)为 100， 售价(price)为： 80， 着折扣为 20 -->
<!-- 补充代码：获取原价和售价 -->
{% assign price = product.price_min %}
{% assign compareAtPrice = product.compare_at_price %}
<!-- 写法: 原价 - 售价 -->
-{{ compareAtPrice | minus: price | money }}

优惠折扣（百分比）

<!-- 假设： 原价(compareAtPrice)为 100， 售价(price)为： 80， 着折扣为 20 -->
<!-- 补充代码：获取原价和售价 -->
{% assign price = product.price_min %}
{% assign compareAtPrice = product.compare_at_price %}
<!-- 写法1: (原价 - 售价) * 100 / 原价 ｜ 四舍五入 => 20 + % OFF => 20% OFF -->
{{ compareAtPrice | minus: price | times: 100 | divided_by: compareAtPrice | round }}% OFF
<!-- 写法2: 售价 / 原价 * 100 ｜ 四舍五入 - 100 | 绝对值 => 20 + % OFF => 20% OFF -->
{{ price | divided_by: compareAtPrice | times: 100 | round | minus: 100 | abs }}% OFF
<!-- 写法3: 售价 / 原价 - 1 * 100 ｜ 四舍五入 | 绝对值 => 20 + % OFF => 20% OFF -->
{{ price | divided_by: compareAtPrice | minus: 1 | times: 100 | round | abs }}% OFF

支付图标

        {% if section.settings.show_payment_icons %}
          {% unless shop.enabled_payment_types == empty %}
            <p>{{ 'layout.footer.accepted_payments' | t }}</p>
              <ul class="payment-types__list">
              {% for type in shop.enabled_payment_types %}
                {%- assign icon_class = 'payment-icon payment-icon--' | append: type -%}
                <li data-name="{{type}}">
                  {{ type | payment_type_svg_tag: class:icon_class }}
                </li>
              {% endfor %}
              </ul>
          {% endunless %}
        {% endif %}

邮件订阅

From

{% form 'customer' %}
  <div class="email">
    <label for="email">Email</label>
    <input type="email" name="contact[email]" />
  </div>

  <div class="submit">
    <input type="submit" value="Sign up" />
  </div>
{% endform %}

参数

参数	说明
?customer_posted=true	订阅成功