自动将 div 添加到 Shopify 中的产品描述

Question

我正在尝试将 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 的数量和含量因产品而异。

Answer 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> 之前没有内容，它将 return 第一项的空数组，我们不需要那个。所以我们将 for 循环偏移 1 项：

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

现在我们需要 return 开始 <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 %}

Answer 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 到避免空的第一个 elem（或者您可以稍后或之前使用它以分隔的 div 显示它，它在第一个 h2 标签之前有一些东西）。要单独显示第一个元素，请使用 {{ desc_parts.first }}.
要获得唯一的 class 或 ID，您可以使用循环索引。
因为h2标签是用来创建的分隔符数组，你需要在你的 elem 前面加上它。

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

自动将 div 添加到 Shopify 中的产品描述

Automatically add divs to product descriptions in Shopify

html

javascript

liquid

shopify

shopify-template