Shopify - 添加预计交货日期（使用代码）

问题描述 投票：0回答：0

我正在尝试向我的 Shopify 产品添加自定义液体，以仅在可用（有库存）产品上显示预计交货日期。我知道有一些应用程序可以让它工作，但因为它只是一行......它还必须包括网站语言。如果是 "fr" = 显示法语版本的文本和日期 else ;显示英文版本。

代码1的截图：https://gyazo.com/f350afc9cd3705d7482d89ad1e2ffc9f 代码2截图：https://gyazo.com/4f3fcb2d6d0fb9810cf199a1d10b705c

这是我使用的代码，使用 date.js 库：

  1. 这个显示完美（有样式 + 日期）但如果您单击缺货产品变体则不会隐藏。
    {% if shop.locale == "en" %}
            <div class="product-info-block product-inventory-notice  product-inventory-notice--ok with-icon">
                <div class="icon-container"><svg class="icon icon--small icon--type-check_mark_in_circle" stroke-width="1" aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle stroke="currentColor" fill="none" cx="8" cy="8" r="6.6666665"></circle>
            <path stroke="currentColor" fill="none" transform="translate(5.0003335,6.0003335)" d="m 6,0 -4,4 L 0,2.1818182"></path></svg></div>
                <span class="with-icon__beside">Delivery between&nbsp;<strong><span id="fromDate"></span></strong>&nbsp;and&nbsp;<strong><span id="toDate"></span></strong></span>
                </div>
            {{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}
            <script>
            var fromDate = Date.today().addDays(1);
            if (fromDate.is().saturday() || fromDate.is().sunday()) {
            fromDate = fromDate.next().monday();
            }
            var toDate = Date.today().addDays(3);
            if (toDate.is().saturday() || toDate.is().sunday()) {
            toDate = toDate.next().monday();
            }
            document.getElementById('fromDate').innerHTML = fromDate.toString('dddd d, MMMM');
            document.getElementById('toDate').innerHTML = toDate.toString('dddd d, MMMM');
            </script>

            {% else %}
            <div class="product-info-block product-inventory-notice  product-inventory-notice--ok with-icon">
                <div class="icon-container"><svg class="icon icon--small icon--type-check_mark_in_circle" stroke-width="1" aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle stroke="currentColor" fill="none" cx="8" cy="8" r="6.6666665"></circle>
            <path stroke="currentColor" fill="none" transform="translate(5.0003335,6.0003335)" d="m 6,0 -4,4 L 0,2.1818182"></path></svg></div>
                <span class="with-icon__beside">En stock : livré chez vous entre le&nbsp;<strong><span id="fromDate"></span></strong>&nbsp;et le&nbsp;<strong><span id="toDate"></span></strong></span>
                </div>
            {{ '//unchained-pro.com/ressources/date-fr-FR.js' | script_tag }}
            <script>
            var fromDate = Date.today().addDays(1);
            if (fromDate.is().saturday() || fromDate.is().sunday()) {
                fromDate = fromDate.next().monday();
            }
            var toDate = Date.today().addDays(3);
            if (toDate.is().saturday() || toDate.is().sunday()) {
                toDate = toDate.next().monday();
            }
            document.getElementById('fromDate').innerHTML = fromDate.toString('dddd d MMMM');
            document.getElementById('toDate').innerHTML = toDate.toString('dddd d MMMM');
            </script>
        {% endif %}
  1. 当产品变体缺货但不显示日期时，这个隐藏。我从我的 main-product.liquid 中的一个元素中获取了代码，该元素具有根据变体的库存显示或隐藏的属性。
<div class="variant-visibility-area{% unless block.settings.show_in_quickbuy %} not-in-quickbuy{% endunless %}" {{ block.shopify_attributes }}>
  {%- for variant in product.variants -%}
    {% if variant.inventory_management != blank and variant.inventory_quantity > 0 %}
        <script type="text/template" data-variant-id="{{ variant.id }}">
          {% if show_inventory_count %}
              {% if variant.inventory_quantity <= block.settings.inventory_threshold %}
                assign notice = 'products.labels.only_x_left' | t: quantity: variant.inventory_quantity
                {% else %}
                assign notice = 'products.labels.x_units_available' | t: quantity: variant.inventory_quantity
                {% endif %}
                  {% else %}
                      {% if variant.inventory_quantity <= block.settings.inventory_threshold %}
                {% else %}
                {% if shop.locale == "en" %}
                <div class="product-info-block product-inventory-notice product-inventory-notice--ok with-icon">
                  <div class="icon-container">
                      <svg class="icon icon--small icon--type-check_mark_in_circle" stroke-width="1" aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                          <circle stroke="currentColor" fill="none" cx="8" cy="8" r="6.6666665"></circle>
                          <path stroke="currentColor" fill="none" transform="translate(5.0003335,6.0003335)" d="m 6,0 -4,4 L 0,2.1818182"></path>
                      </svg>
                  </div>
                  <span class="with-icon__beside">
                      Delivery between&nbsp;
                      <strong><span id="fromDate"></span></strong>&nbsp;and&nbsp;
                      <strong><span id="toDate"></span></strong>
                  </span>
              </div>
                {{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}
                <script>
                var fromDate = Date.today().addDays(1);
                if (fromDate.is().saturday() || fromDate.is().sunday()) {
                fromDate = fromDate.next().monday();
                }
                var toDate = Date.today().addDays(3);
                if (toDate.is().saturday() || toDate.is().sunday()) {
                toDate = toDate.next().monday();
                }
                document.getElementById('fromDate').innerHTML = fromDate.toString('dddd d, MMMM');
                document.getElementById('toDate').innerHTML = toDate.toString('dddd d, MMMM');
                </script>
        
                {% else %}
                <div class="product-info-block product-inventory-notice  product-inventory-notice--ok with-icon">
                    <div class="icon-container"><svg class="icon icon--small icon--type-check_mark_in_circle" stroke-width="1" aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle stroke="currentColor" fill="none" cx="8" cy="8" r="6.6666665"></circle>
                <path stroke="currentColor" fill="none" transform="translate(5.0003335,6.0003335)" d="m 6,0 -4,4 L 0,2.1818182"></path></svg></div>
                    <span class="with-icon__beside">En stock : livré chez vous entre le <strong><span id="fromDate"></span></strong>et le<strong><span id="toDate"></span></strong></span>
                    </div>
                {{ '//unchained-pro.com/ressources/date-fr-FR.js' | script_tag }}
                <script>
                var fromDate = Date.today().addDays(1);
                if (fromDate.is().saturday() || fromDate.is().sunday()) {
                    fromDate = fromDate.next().monday();
                }
                var toDate = Date.today().addDays(3);
                if (toDate.is().saturday() || toDate.is().sunday()) {
                    toDate = toDate.next().monday();
                }
                document.getElementById('fromDate').innerHTML = fromDate.toString('dddd d MMMM');
                document.getElementById('toDate').innerHTML = toDate.toString('dddd d MMMM');
                </script>
            {% endif %}
                {% endif %}
                  {% endif %}
          {%- capture notice_html -%}
            <div class="lightly-spaced-row">
              <div class="product-info-block product-inventory-notice {% if block.settings.enable_pulse %}product-inventory-notice--pulse{% endif %} product-inventory-notice--{% if variant.inventory_quantity <= block.settings.inventory_threshold %}low{% else %}ok{% endif %} with-icon{% if block.settings.enable_box %} text-box{% endif %}">
                <div class="icon-container">
                  {%- if variant.inventory_quantity <= block.settings.inventory_threshold -%}
                    {%- render 'icon', icon: 'clock', size: 'small' -%}
                  {%- else -%}
                    {%- render 'icon', icon: 'check_mark_in_circle', size: 'small' -%}
                  {%- endif -%}
                </div>
                <span class="with-icon__beside">{{ notice }}</span>
              </div>
            </div>
          {%- endcapture -%}
          {{- notice_html -}}
        </script>
        {%- if variant.id == current_variant.id -%}
          {{- notice_html -}}
        {%- endif -%}
    {% endif %}
  {%- endfor -%}
</div>

预先感谢您的帮助，

Noware

date shopify liquid
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.