Скрыть текст в описании продукта Shopify

Просто ищу советы по Shopify. Я пытаюсь обернуть текст в описании продукта тегами [#size] [/ size] (или подобными) ... чтобы затем захватить этот текст и поместить его во всплывающее окно.

Я сделал большую часть работы, так что он создает всплывающую кнопку, и всплывающее окно работает нормально, даже включая текст из описания продукта, однако текст в описании продукта остается там, а не скрывает его во всплывающем окне вверх, а я хватаюсь за соломинку, пытаясь исправить это ...

Любые идеи будут высоко оценены, заранее спасибо.

Вот мой код в product-template.liquid

{% if product.description contains '[#size]' or product.description contains '[#video]' or product.description contains '[#other]' %}
      <div class="product-extra">
        {% if section.settings.show_product_size_chart and product.description contains '[#size]' %}
          {% assign shortcode_description = product.description | split: '[/size]' | first | split: '[#size]' | last %}
            <a class="product-size-chart fancybox" href="#product-size-chart"><i class="fas fa-ruler"></i> {{ 'products.product.sizing' | t }}
              <div id="product-size-chart" style="display: none;">
                {{ shortcode_description }}
              </div>
            </a>
        {% endif %}

        {% if section.settings.show_product_video and product.description contains '[#video]' %}
          {% assign shortcode_description = product.description | split: '[/video]' | first | split: '[#video]' | last %}
          <a class="product-video fancybox" href="#product-video"><i class="fas fa-play-circle"></i> {{ 'products.product.video' | t }}
            <div id="product-video" style="display: none;">
              {{ shortcode_description }}
            </div>
          </a>
        {% endif %}
        {% if section.settings.show_product_model and product.description contains '[#other]' %}
          <a class="product-model fancybox" href="#product-model"><i class="fas fa-info-circle"></i> {{ 'products.product.model' | t }}
            <div id="product-model" style="display: none;">
              {% assign shortcode_description = product.description | split: '[/other]' | first | split: '[#other]' | last %}
              {{ shortcode_description }}
            </div>
          </a>
        {% endif %}
      </div>
    {% endif %}

shopify liquid shopify-template
person Jack    schedule 17.05.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете создать фрагмент, например, под названием shortcode.liquid.

Во фрагменте вы помещаете следующий код:

{%- capture open_tag -%}[#{{tag}}]{%- endcapture -%}
{%- capture close_tag -%}[/{{tag}}]{%- endcapture -%}

{%- assign text_content = content | split: open_tag | last | split: close_tag | first -%}
{%- capture remove_shortcode -%}{{open_tag}}{{text_content}}{{close_tag}}{%- endcapture -%}

{%- assign new_content = content | remove: remove_shortcode -%}

И вы вызываете фрагмент так:

{%- include 'shortcode' content: product.content, tag: 'size' -%}

Где вы передаете контент (в данном случае это product.content) и шорткод, на который вы хотите настроить таргетинг (в данном случае это размер).

После вызова сниппета у вас есть две переменные:

{{text_content}} это вернет содержимое между шорткодом

{{new_content}} - это вернет новый контент, но с удаленным шорткодом

Важно - этот фрагмент будет работать только с одним экземпляром одного и того же шорткода, иначе говоря, у вас не может быть двух экземпляров шорткода size.

person drip    schedule 17.05.2019
comment
Спасибо за ответ, я очень ценю это :) Однако, похоже, это не работает. {{text_content}} {{new_content}} оба просто возвращают полное описание продукта. - person Jack; 17.05.2019
comment
@Jack Ага, я вызвал фрагмент с тем же именем, что и переменная. Я обновил код, теперь он говорит tag вместо шорткода, и он должен работать. - person drip; 17.05.2019
comment
@Jack это становится более сложным для простого фрагмента. Лучше посмотрите на это: github.com/culturekings/shopify-shortcodes Это рабочий шорткод, который Я использовал, но вам нужно будет написать логику извлечения самостоятельно. - person drip; 20.05.2019
comment
В конце концов, разобрал, спасибо за вашу помощь, братан. Для всех, кому интересно, я использовал следующий код {% if product.description contains '[#'%} ‹div class = rte› {{product.description | разделить: '[#' | first}} ‹/div› {% else%} ‹div class = rte› {{product.description}} ‹/div› {% endif%} - person Jack; 20.05.2019