如何在liquid shopify中生成随机数？

Question

如果逻辑包含日期对象，请注意，该值将是上次从模板生成页面时的当前时间，而不是如果根据 Shopify 文章涉及缓存或静态站点生成，则不是将页面呈现给用户时的时间。每次都会返回相似的数字。

Answer 1

您可以使用时间戳来获取较大的数字，并使用数学来获取看起来随机的结果。例如，获取 0 到 100 之间的随机数：

{% assign randomNumber = "now" | date: "%N" | modulo: 100 %}

（请记住，这将生成一个介于 0 到 99 之间的整数。）

或者 10 到 20 之间的随机数：

{% assign min = 10 %}
{% assign max = 20 %}
{% assign diff = max | minus: min %}
{% assign randomNumber = "now" | date: "%N" | modulo: diff | plus: min %}

注意： Liquid 文件会被缓存，因此随机数仅在页面创建时生成，并且不会在您每次查看页面时更改。为此，您需要 JavaScript。

Answer 2

{% assign random_number = "now" | date: "%N" | modulo: 1000 | plus: 0 %}

为我工作，提供 0 - 1000 之间的随机数。

Answer 3

使用代码生成随机数

{% capture random %}{{ 'now' | date: "%09N" }}{% endcapture %}

---

使用

输出它

{{random}}

Answer 4

要在主题中的任何位置创建 UUID（通用唯一标识符），您只需要创建一个 JS 文件。

资产/unique-id-generator.js

// Function to generate and assign unique IDs to elements matching a selector
function generateUniqueIDs(selector) {
  const elements = document.querySelectorAll(selector);
  elements.forEach((element, index) => {
    console.log("Element before:", element, "ID:", element.id, "Value:", element.value);

    const uniqueID = `element-${
      crypto.randomUUID
        ? crypto.randomUUID()
        : `${Date.now()}-${Math.floor(Math.random() * 1000)}`
    }`;

    element.id = uniqueID;

    if (element.tagName.toLowerCase() === 'input') {
      element.value = uniqueID;
    }

    const label = document.querySelector(`label[for="placeholder-${index}"]`);
    if (label) label.setAttribute('for', uniqueID);

    console.log("Element after:", element, "ID:", element.id, "Value:", element.value);
  });
}

// Automatically assign unique IDs on DOM load
document.addEventListener('DOMContentLoaded', function () {
  console.log("DOM fully loaded. Assigning unique IDs...");
  generateUniqueIDs('.unique-id');
});

// Add click event listener to all elements with .click-causes-regeneration to regenerate unique IDs
document.querySelectorAll('.click-causes-regeneration').forEach(element => {
  element.addEventListener('click', function () {
    console.log("Regeneration triggered by click on:", element);
    generateUniqueIDs('.unique-id');
  });
});

// Export function for accessibility elsewhere
window.generateUniqueIDs = generateUniqueIDs;

布局/主题.液体

<script src="{{ 'unique-id-generator.js' | asset_url }}" defer="defer"></script>

例如，使用它为每个订单项指定一个唯一的 ID (UUID)

片段/buy-buttons.liquid

{%- form 'product',
        product,
        id: product_form_id,
        ...
      -%}
        <input
          type="hidden"
          name="id"
          ...
        >

        {% comment %} ADD UNIQUE ID TO SEPARATE LINE ITEMS {% endcomment %}
        <input type="hidden" name="properties[lineitem_unique_id]" value="" class="needs-unique-id">

控制台日志：

DOM fully loaded. Assigning unique IDs...
unique-id-generator.js:5 Element before: input.needs-unique-id ID:  Value: 
unique-id-generator.js:22 Element after: input#1c6e1063-137f-4fee-9c0d-75a1cb6121f5.needs-unique-id ID: 1c6e1063-137f-4fee-9c0d-75a1cb6121f5 Value: 1c6e1063-137f-4fee-9c0d-75a1cb6121f5

如您所见，我还添加了一个再生器，当有人单击“添加到购物车”时，该再生器非常有用，这样下次“添加到购物车”也会导致订单项具有不同的 ID。

片段/buy-buttons.liquid

<button
            id="ProductSubmitButton-{{ section_id }}"
            type="submit"
            name="add"
            class="click-causes-regeneration .....