Shopify 网站上产品滑块中的图像和视频

Question

在 Shopify 中创建允许您添加图像和视频的产品滑块时，我需要一些帮助。目前滑块工作正常，但我在将产品视频添加到滑块时遇到问题。

根据我的阅读，您可以使用 alt 标签添加 YouTube 嵌入代码，该代码将覆盖图像并显示视频。我可以在第一张图片上使用它，但它有一个租用来破坏滑块的其余部分。我相信我可能需要更改默认滑块并使用另一种替代方法。

这是我目前所拥有的

  $('#FeaturedImageZoom-product-template .product-featured-img').each (function() {

    var videoid = $(this).attr("alt");
    console.log(videoid);

    if ($('.product-featured-img').attr("alt") == videoid) {         
      $(this).replaceWith('<iframe width="500px" height="500px" src="'+videoid+'?autoplay=1&amp;showinfo=0&amp;controls=0&amp;modestbranding=1&amp;rel=0" frameborder="0" allowfullscreen></iframe>');
    } 

  });

这是与之相关的流动代码：

<div class="grid product-single">
<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
  {%- assign featured_img_src = current_variant.featured_image.src | default: product.featured_image.src -%}
  {%- assign featured_img_alt = current_variant.featured_image.alt | default: product.featured_image.alt -%}
  <div id="FeaturedImageZoom-{{ section.id }}" class="product-single__photo{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}" {% if enable_zoom %}data-zoom="{{ featured_img_src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
    <img src="{{ featured_img_src | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_img_alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img{% if enable_zoom %} js-zoom-enabled{% endif %}">
  </div>

  {% if product.images.size > 1 %}
    {% if product.images.size > 3 %}
      {%- assign enable_thumbnail_slides = true -%}
    {% endif %}

    <div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">
      {% if enable_thumbnail_slides == true %}
        <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">
          {% include 'icon-chevron-left' %}
          <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
        </button>
      {% endif %}
      <ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">
        {% for image in product.images %}
          <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item">
            <a
              href="{{ image.src | img_url: product_image_size, scale: product_image_scale }}"
                class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
                <img class="product-single__thumbnail-image" src="{{ image.src | img_url: product_thumb_size, scale: product_image_scale }}" alt="{{ image.alt | escape }}">
            </a>
          </li>
        {% endfor %}
      </ul>
      {% if enable_thumbnail_slides == true %}
        <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">
          {% include 'icon-chevron-right' %}
          <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
        </button>
      {% endif %}
    </div>
  {% endif %}
</div>

我已经阅读了几篇文章，其中概述了开发人员尝试添加产品视频时遇到的类似问题，但我还没有找到解决方案。

如果有人可以在这里提供帮助，将不胜感激。

谢谢

Answer 1

既然可以使用简单的液体，为什么还要使用 javascript？

您只需要检查alt 属性是否包含youtube 或独特的东西。

例如：

{% if image.alt contains 'youtube' %}
    <iframe width="500px" height="500px" src="{{image.alt}}?autoplay=1&amp;showinfo=0&amp;controls=0&amp;modestbranding=1&amp;rel=0" frameborder="0" allowfullscreen></iframe>
{% else %}
    <a
      href="{{ image.src | img_url: product_image_size, scale: product_image_scale }}"
        class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
        {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
        <img class="product-single__thumbnail-image" src="{{ image.src | img_url: product_thumb_size, scale: product_image_scale }}" alt="{{ image.alt | escape }}">
    </a>
{% endif %}

Answer 2

我只是想通过“滴”发布我根据上面的答案得出的解决方案。我希望这可以帮助其他人走上正轨。

  <!-- Product Slider w/ Video -->
  <div id="product-flexslider" class="flexslider product_gallery product-{{ product.id }}-gallery {% if product-images == blank %}product_slider{% endif %} {% if settings.product_thumbs == false %}animated fadeInUp{% endif %}">
    <ul class="slides">
      {% for image in product.images %}
      <li data-thumb="{{ image | product_img_url: '1024x1024' }}" data-title="{% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}">
        {% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}
        {% assign src = image.alt | split: 'src="' %}
        {% assign src = src[1] | split: '"' | first %}

        {% if src contains '?' %}
        {% assign src = src | append: '&amp;autoplay=1' %}
        {% else %}
        {% assign src = src | append: '?autoplay=1' %}
        {% endif %}

        <div class="video-container {% if image.alt contains 'vimeo' %}vimeo{% else %}youtube{% endif %}">
          <div>
            <a href="{{ src }}" title="{{ product.title | escape }}">
              {{ image.alt }}
            </a>
          </div>
        </div>
        {% else %}
        <a href="{{ image | product_img_url: 'master' }}" title="{{ image.alt | escape }}">
          <img  src="{{ image | product_img_url: '1024x1024' }}" alt="{{ image.alt | escape }}"/>
        </a>
        {% endif %}
      </li>
      {% endfor %}
    </ul>
  </div>

  <!-- Carousel -->

  <div id="product-carousel" class="flexslider product_gallery product-{{ product.id }}-gallery {% if product-images == blank %}product_slider{% endif %} {% if settings.product_thumbs == false %}animated fadeInUp{% endif %}">
    <ul class="slides">
      {% for image in product.images %}
      <li data-thumb="{{ image | product_img_url: '1024x1024' }}" data-title="{% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}">

        <a href="{{ image | product_img_url: 'master' }}" title="{{ image.alt | escape }}">
          <img src="{{ image | product_img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" />
        </a>
      </li>
      {% endfor %}
    </ul>
  </div>
  <!-- End Slider -->

<!-- FlexSlider -->

{{ 'jquery.flexslider-min.js' | asset_url | script_tag }}
{{ 'flexslider.css' | asset_url | stylesheet_tag }}


<script type="text/javascript" charset="utf-8">
(function($) {
  $(window).load(function(){
   $('#product-carousel').flexslider({
    animation: "slide",
    controlNav: false,
    itemWidth: 41,
    itemMargin: 5,
    asNavFor: '#product-flexslider'
  });
  $('#product-flexslider').flexslider({
    animation: "slide",
    controlNav: false,
    sync: "#product-carousel"
  });
});
})(jQuery);

</script>

更新代码后，您可以将嵌入代码放置在图像的 ALT 标记中，同时将图像用作缩略图占位符。

FlexSlider 属性可以在这里找到： https://github.com/woocommerce/FlexSlider/wiki/FlexSlider-Properties

此处与另一个问题有关的帖子也帮助了解决方案： https://ecommerce.shopify.com/c/ecommerce-discussion/t/issue-with-variable-image-444159