Shopify 中的随机内容

此时，您很可能已经了解到，每当您的客户要求“快速更新”或真正的“简单修复”时，它实际上都不会快速或简单。有时看起来确实如此，但实际上很少是快速或简单的。有时，它对您来说甚至可能看起来又快又简单，直到您真正投入其中并意识到它需要比您预期的更多的工作。 

假设有人向您提出以下请求：

“我有一个非常简短的请求，希望您能通过 EOW 处理。我希望在我的 Shopify 网站上的一个框中显示一些随机生成的文本，这些文本来自我们在电子表格中设置的 5 到 10 个短语的列表。你能做到吗？

这难道不是一个“简单的要求”吗？好吧，即使它看起来很简单，但事实并非如此，因为不幸的是，Shopify 在任何地方都没有将此作为默认功能。对你来说幸运的是，我已经为你找到了通过 EOD 完成的解决方法，而不是你整天搞乱代码并试图通过 EOW 来解决这个问题！

是时候深入研究代码了...

• 让我们使用一个示例，其中添加一个包含简单块类型的部分，其中包含单个文本字段。首先，我们在页面模板中设置这些，就像这样......

  {% schema %} 
  { 
      "name": "随机内容", 
      "blocks": [{ 
          "type": "段落", 
          "name": "段落", 
          "settings": [{ 
              "type": "text" , 
              "id": "段落", 
              "label": "段落" 
          }] 
      }] 
  } 
  {% endschema %}
  
  

• 接下来我们添加 5 个块，每个块都包含唯一的文本..
• 
• 现在我们已经添加了 5 条内容，我们添加随机选择一项内容并在每次页面加载时显示它的代码。

• {% 分配 min = 0 %} 
  {% 分配 max = section.blocks.size %} 
  {% 分配 diff = max | 减： min %} 
  {% 分配 randomNumber = "now" | 日期：“%N”| 模： diff | 加： min %} 
  {% for block in section.blocks %} 
    {% if forloop.index0 == randomNumber %} 
      {{ block.settings.paragraph }} 
    {% endif %} 
  {% endfor %}

• 我们这样做的方法是生成一个从 1 到存在的块数（本例中为 5）的随机数，然后显示带有随机数索引的块。
• 我们使用min和max变量来定义我们生成的可能随机数的下限和上限。在这种情况下，min变量始终为 0，max变量被赋予该部分中的块数的值。diff变量 是max减去min的差值。
• 真正神奇的地方是我们创建randomNumber变量的方式。首先，我们使用“now”关键字获取当前时间。然后使用日期过滤器将其转换为秒。接下来，我们应用模过滤​​器将秒值除以diff值，然后最后添加最小值，这确保我们始终获得唯一值。
• 现在我们已经生成了随机数，最后一步是在匹配索引处显示块内的文本段落。为了实现这一点，我们循环遍历块并获取索引与randomNumber值匹配的块。在我们继续之前，需要注意的是，我们在这里使用了forloop.index0方法，因为默认情况下 Shopify 的循环从索引 1 开始，但我们的min变量是 0，因此我们需要 Shopify 的循环来匹配它。当它找到有问题的块时，它会输出在页面加载时随机选择的段落。
• 最后需要提一下的是：Shopify 的缓存。虽然这种方法在概念上工作得很好，但实际上，由于 Shopify 缓存页面，这意味着有时随机生成的内容也会被缓存，因此这并不是每次都是 100% 真正随机的。这可能是也可能不是关键问题，具体取决于您的用例。如果在每个页面加载时获得真正随机的结果至关重要，那么您可以采用另一种替代路线：javascript。
• 此方法不是使用液态代码在模板内执行随机数生成，而是使用 javascript 和 jquery 来执行。所以我们将页面模板输出代码更改为如下所示 

• <ul> 
  {% for block in section.blocks %} 
    <li>{{ block.settings.paragraph }}</li> 
  {% endfor %} 
  </ul>

• 相反，我们将所有块输出为列表。然后我们用这个 CSS 默认隐藏它们。ul li { 显示：无；}
• 然后我们添加此 JavaScript 来选择在页面加载时显示哪个列表项

• 变量最小值 = 0; 
  var max = {{section.blocks.size }} - 1; 
  var randomNumber = Math.floor(Math.random() * (max - min + 1)) + min; 
  $('ul li').eq(randomNumber).css('显示', '块');