在 Shopify 中自动将 div 添加到产品描述中答案

【问题标题】：Automatically add divs to product descriptions in Shopify在 Shopify 中自动将 div 添加到产品描述中
【发布时间】：2021-06-09 13:00:10
【问题描述】：

我正在尝试将 div 添加到 Shopify 中的产品描述中，以便随后创建手风琴。目前我的代码是这样的

在 .liquid 文件中：

<div class="product-single__description rte">
  {{ product.description }}
</div>

这是输出：

<div class="product-single__description rte">
  <h2>TEXT</h2>
  <h4>TEXT</h4>
  <p><em>Text</em></p>
  <h4>TEXT</h4>
  <p>Text</p>
  <h2>TEXT</h2>
  <h4>Text</h4>
  <p>Text</p>
  <h4>TEXT</h4>
  <p>Text</p>
  <h4>TEXT</h4>
  <p>Text</p>
  <p><em>Text</em></p>
</div>

我的目标是插入一个 div 包装器并将内容从 H2 封装到下一个 h2，例如：

<div class="product-single__description rte">

  <div class=“class_1”
    <h2>TEXT</h2>
    <h4>TEXT</h4>
    <p ><em>Text</em></p>
    <h4>TEXT</h4>
    <p>Text</p>
  </div>

  <div class=“class_2”
    <h2>TEXT</h2>
    <h4>Text</h4>
    <p>Text</p>
    <h4>TEXT</h4>
    <p >Text</p>
    <h4>TEXT</h4>
    <p>Text</p>
    <p><em>Text</em></p>
  </div>

</div>

H2的数量和内容因产品而异。

【问题讨论】：

标签： javascript html shopify liquid shopify-template

【解决方案1】：

在您执行此操作之前，您需要进行一些检查。

首先我们为内容设置一个变量：

{% assign content = product.description %}

之后我们会检查是否有一个普通的<h2> 在那里

{% if content contains '<h2>' %}
  // logic to add here
{% else %}
  {{content}}
{% endif %}

（请记住，如果您的 h2 标签有任何内联样式，则必须改为定位 <h2）

如果有，我们将继续if内部的逻辑，但如果没有，我们将在else语句中输出纯内容。

所以我们现在在// logic to add here 部分。

我们将按<h2> 分割内容，如下所示：

{% assign content_arr = content | split: '<h2>' %}

我们会检查您在第一个<h2> 之前是否有一些内容，因为我们不想在这种情况下丢失它，所以我们这样检查：

{% if content_arr[0] != '' %}
  {{content_arr[0]}}
{% endif %}

我们需要循环数组的其余项。

由于我们是由<h2> 分割的，如果<h2> 之前没有内容，它将为第一项返回一个空数组，我们不需要那个。所以我们将 for 循环偏移 1 个项目：

{% for item in content_arr offset: 1 %}
  // items here
{% endfor %}

现在我们需要返回开始的<h2> 标签（因为我们从内容中删除了它）并显示其余内容。

在{{item}}之前写<h2>很简单：

<div class="class_{{forloop.index}}">
  <h2>{{item}}
</div>

仅此而已。

这里是完整的代码：

{% assign content = product.description %}

{% if content contains '<h2>' %}
  {% assign content_arr = content | split: '<h2>' %}
  {% if content_arr[0] != '' %}
    {{content_arr[0]}}
  {% endif %}
  {% for item in content_arr offset: 1 %}
    <div class="class_{{forloop.index}}">
      <h2>{{item}}
    </div>
  {% endfor %}
{% else %}
  {{content}}
{% endif %}

【讨论】：

这是一个很好的解决方案。非常感谢！

【解决方案2】：

您可以试试这个（未经测试，但应该可以）：

{% assign desc_parts = product.description | split:'<h2>' %}
{% for part in desc_parts offset:1 %}
    <div class="class_{{ forloop.index }}">
        {{ part | prepend:'<h2>' }}
    </div>
{% endfor %}

解释：

因为您在产品描述中没有干净的分离器，让我们使用 h2 标签。
然后，使用此分隔符创建一个数组（拆分函数）。
然后循环遍历数组，偏移量为 1 到避免使用空的第一个元素（或者您可以稍后或之前使用它以将其显示在一个单独的 div 中，因为在第一个 h2 标记之前有一些东西）。要单独显示第一个元素，请使用 {{ desc_parts.first }}。
要获得唯一的类或 ID，您可以使用循环索引。
因为 h2 标签是用于创建的分隔符数组，你需要在你的元素前面加上它。

请注意，您还应该考虑产品描述没有 h2 的情况，并在您的代码中管理这种情况。

【讨论】：