自动将 div 添加到 Shopify 中的产品说明

如何解决自动将 div 添加到 Shopify 中的产品说明

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

解决方法

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

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

{% 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> 标记（因为我们从内容中删除了它）并显示其余内容。

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

<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 %}

你可以试试这个（未测试但应该可以）：

{% 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 标签是用来创建的分隔符数组，你需要在你的 elem 前面加上它。

请注意，您还应该考虑没有 h2 的产品描述案例，并在您的代码中管理此案例。