[第5期]在产品页添加视频拖拽小窗

视频小窗介绍

在开始这一期的内容之前，先给大家演示一下这个功能，嘻嘻~

功能演示：

功能介绍：

1、在产品页右下角插入一个视频小窗，能够根据产品单独设置专属介绍视频。

2、鼠标拖住视频小窗能全页面位置拖拽。

3、鼠标拖着视频右下角角标能放大缩小视频。

4、点击右上角x能关闭视频小窗，刷新页面后能恢复显示。

功能用途：

视频拖拽小窗功能多用于需要安装类的产品、场景类的产品，添加一个安装视频或者场景视频在产品右下角，让用户不需要切换内容就能一直看到这个视频，还能放大和拖拽。

代码实现

以下功能为了代码最小化将借助Jquery插件实现

一、 进入在线代码编辑器，找到snippets，点击Add a new snippet来创建一个代码块文件

二、名字为"product-popup-video"，保存。

三、自查是否还有Jquery插件，打开在线代码编辑器，找到layout->theme.liqud，按ctrl+F搜索jquery，如果按next是没有结果的话，则需要先添加以下代码；如果有则不需要添加这段代码。

 {%if template.name == "product" and product.metafields.custom.popup_video%}
  <!-- 可选strat -->
   <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <!-- 可选end -->
  {%endif%}

四、再复制以下代码。

{%if template.name == "product" and product.metafields.custom.popup_video%}
  <!-- 可选strat -->
   <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <!-- 可选end -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js" integrity="sha256-AlTido85uXPlSyyaZNsjJXeCs07eSv3r43kyCVc8ChI=" crossorigin="anonymous"></script>
<div class="product-popup-video-container">
 
    {{ product.metafields.custom.popup_video.value
        | video_tag:
          image_size: "1100x",
          autoplay: true,
          loop: true,
          controls: false,
          muted: true
      }}
   
    <div class="option-box">
        <div class="close-icon">
         X
        </div>
     
    </div>
</div>
<style>
   .product-popup-video-container{
   
        bottom: 10px;
    right: 10px;
        opacity: 0;
        pointer-events: none;
        position: fixed!important;
    z-index: 33;
    width: 180px;
    height: 320px;
    background: rgb(0, 0, 0);
 border-radius：10px;
overflow:hidden；
    }
    .product-popup-video-container.show-this{
        opacity: 1;
        pointer-events: all;
    }
    .product-popup-video-container video{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .product-popup-video-container .close-icon{
position: absolute;
top: 10px;
right: 10px;
width: 15px;
    height: 15px;
cursor: pointer;
      font-family: sans-serif;
    }
    .product-popup-video-container .option-box{
opacity: 0;
transition: all 0.3s ease;
    }
    .product-popup-video-container .close-icon path{
        fill: #ffffff;
    }
    .product-popup-video-container .play-box{
        position: absolute;
bottom: 10px;
left: 10px;
width: 15px;
height: 15px;
cursor: pointer;
    }
    .product-popup-video-container:hover .option-box{
opacity: 1;
    }
 
    @media screen and (max-width:589px) {

        .product-popup-video-container{
            width: 130px;
    height: 200px;
        }
    }
</style>
<script>
    $(function() {

  $(".product-popup-video-container").draggable();
 
    $(".product-popup-video-container").resizable( );
 
});
$('.product-popup-video-container').addClass("show-this");

$('.product-popup-video-container .close-icon').click(function(){
    $('.product-popup-video-container').removeClass("show-this")
});
</script>
{%endif%}
 

五、按右上角Save按钮保存文件。

六、找到layout->theme.liquid拉到最下面的</body>，在其上面粘贴以下代码，保存

{% render "product-popup-video" %}

七、登录状态下，在商店后台url输入以下链接 ，回车加载页面。

https://admin.shopify.com/store/店铺名/settings/custom_data/product/metafields/create

Name：视频小窗

Namespace and key:custom.popup_video 

Description:产品拖拽视频小窗

Select type:File

Validations:Accept specific file type->Videos,不要勾选Images

八、找到要设置的产品，进入产品编辑页面，找到Product metafields，设置视频小窗内容就可以了。打开该产品页，就能在右下角看到。

赶紧为你的网站添加视频小窗功能吧！

关注我，了解Rao独立站出海，教你解锁更多Shopify实用功能！

关于我

这里，主要会以图文的方式去发布于shopify开发相关的所有问题，相应的视频教程后续也会不断上线。

网站目前属于初建阶段，还有很多不完善的地方，请耐心等候更新。

期待与各位小伙伴一起成长进步！

欢迎评论区留下你们感兴趣的内容！

一起交流：Ayao_jiang