在首发主题产品页面添加视频文件

Question

我正在开发 Shopify 的首个主题。这里我添加了产品图片的自定义代码。

<div class="product-image-left single-itemim lightbox-pop Mobile"> 
              
               {% if product.images.size > 0 %}
              {% for image in product.images %} 
              {% capture wrapper_class %}
              {%- unless featured_image == image -%}
              hide
              {%- endunless -%}
              {% endcapture %}
              <div data-index="{{ forloop.index }}" id="ImageWrapper-{{ image.id }}" data-image-id="{{ image.id }}" class="responsive-image__wrapper" {{ wrapper_attributes }}>
                 <a href="{{ image | img_url: '1000x' }}" class="image-popup-link"><img id="Image-{{ image.id }}"
                     class="responsive-image__image lazyload {{ image_class }}"
                     src="{{ image | img_url: '800x' }}"
                     data-src="{{ img_url }}"
                     data-widths="[{{ image_widths }}]"
                     data-aspectratio="{{ image.aspect_ratio }}"
                     data-sizes="auto"
                     tabindex="-1"
                     alt="{{ image.alt | escape }}"
                     {{ image_attributes }}
                     >
                </a>  
               
              </div>

              {% endfor %}
            {%else%}
            <div class="responsive-image__wrapper ">
           {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
            </div>
            {%endif%}         
            </div>

这里有人可以帮忙吗？告诉我如何在这里添加视频文件代码。所以我可以添加所有格式的视频文件。谢谢

Answer 1

Shopify 页面上已经有它的教程。

请看这里：https://shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video

编辑： 您应该将上面发布的整个代码替换为

{% for media in product.media %}
  {% include 'media' %}
{% endfor %}

然后将您的代码移动到 media.liquid sn-p，如下所示：

{% case media.media_type %}
  {% when 'image' %}
    <div class="product-image-left single-itemim lightbox-pop Mobile">
        {% if product.images.size > 0 %}
            {% for image in product.images %}
            {% capture wrapper_class %}
            {%- unless featured_image == image -%}
            hide
            {%- endunless -%}
            {% endcapture %}
            <div data-index="{{ forloop.index }}" id="ImageWrapper-{{ image.id }}" data-image-id="{{ image.id }}" class="responsive-image__wrapper" {{ wrapper_attributes }}>
                <a href="{{ image | img_url: '1000x' }}" class="image-popup-link"><img id="Image-{{ image.id }}"
                                                                                       class="responsive-image__image lazyload {{ image_class }}"
                                                                                       src="{{ image | img_url: '800x' }}"
                                                                                       data-src="{{ img_url }}"
                                                                                       data-widths="[{{ image_widths }}]"
                                                                                       data-aspectratio="{{ image.aspect_ratio }}"
                                                                                       data-sizes="auto"
                                                                                       tabindex="-1"
                                                                                       alt="{{ image.alt | escape }}"
                                                                                       {{ image_attributes }}
                >
                </a>

            </div>

            {% endfor %}
            {% else %}
            <div class="responsive-image__wrapper ">
                {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
            </div>
        {% endif %}
    </div>
    {% when 'external_video' %}
    <div class="product-single__media" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100}}%;" data-media-id="{{ media.id }}">
      {{ media | external_video_tag }}
    </div>
  {% when 'video' %}
    <div class="product-single__media" data-media-id="{{ media.id }}">
      {{ media | video_tag: controls: true }}
    </div>
  {% when 'model' %}
    <div class="product-single__media" style="padding-top: 100%" data-media-id="{{ media.id }}">
      {{ media | model_viewer_tag }}
    </div>
  {% else %}
    <div class="product-single__media" style="padding-top: 100%;" data-media-id="{{ media.id }}">
      {{ media | media_tag }}
    </div>
{% endcase %}