shopify 增加youtube视频和选项卡

引入相关资源

<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
<script src="https://cdn.shopify.com/s/files/1/0607/1861/2695/files/vue.min.js"></script>
<script src="https://cdn.shopifycdn.net/s/files/1/0136/3119/3188/files/elementui-index.js"></script>

sun-tab-video-css style liquid

<style>
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 [v-cloak] {
   display: none;
 }

 @media (min-width: 1200px) {
   #shopify-section-header-08 .container, #shopify-section-navigation-08 .container {
     width: 1400px;
   }
 }


 .sun-video {
   width: 80%;
   margin: 50px auto;
 }

 .sun-video .video-group {
   display: flex;
   justify-content: space-between;
   margin: 10px 0;
   flex-wrap: wrap;
 }

 .sun-video .video-item {
   width: calc(100% / 3 - 10px);
   margin-top: 20px;
 }

 .sun-video .video-group:after {
   content: "";
   display: block;
   width: calc(100% / 3 - 10px);
   height: 0;
 }

 .sun-video .video-title {
   display: -webkit-box;
   font-size: 20px;
   font-weight: bold;
   margin: 30px 0;
   text-align: center;
   min-height: 50px;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
 }

 .sun-video .video-content {
   width: 100%;
   text-align: center;
 }

 .sun-video .video-content:hover .play-button {
   background: #f00;
 }

 .sun-video .youtube {
   background-color: #000;
   margin-bottom: 30px;
   position: relative;
   padding-top: 56.25%;
   overflow: hidden;
   cursor: pointer;
 }

 .sun-video .youtube img {
   width: 100%;
   top: 0;
   left: 0;
   opacity: 0.8;
 }

 .sun-video .youtube img[data-class='default'] {
   top: -40px;
 }

 .sun-video .youtube .play-button {
   width: 90px;
   height: 60px;
   background-color: #000;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
   z-index: 1;
   opacity: 0.8;
   border-radius: 6px;
 }


 .sun-video .youtube .play-button:before {
   display:block;
   content: "";
   border-style: solid;
   border-width: 15px 0 15px 26.0px;
   border-color: transparent transparent transparent #fff;
   
 }


 .sun-video .youtube img,
 .sun-video .youtube .play-button {
   cursor: pointer;
 }

 .sun-video .youtube img,
 .sun-video .youtube iframe,
 .sun-video .youtube .play-button,
 .sun-video .youtube .play-button:before {
   position: absolute;
 }


 .sun-video .youtube .play-button,
 .sun-video .youtube .play-button:before {
   top: 50%;
   left: 50%;
   transform: translate3d(-50%, -50%, 0);
   display:block;
 }


 .sun-video .youtube iframe {
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
 }


 .sun-video .main-container-img img {
   width: 100%;
 }


 @media (max-width: 1000px) {

   .sun-video {
     width: 95%;
   }

   .sun-video .video-item {
     width: 100%;
     margin: 10px auto;
   }


 }

 @media (min-width: 1600px) {

 }
</style>
<style>
 .el-tabs__nav {
   width: 100%;
 }

 .el-tabs__item {
   padding: 0;
   width: calc(100% / {{ section.settings.tab_count | default: 2 }});
   text-align: center;
   /*border-left: 1px solid #ccc;*/
   /*border-top: 1px solid #ccc;*/
   /*border-right: 1px solid #ccc;*/
   /*border-bottom: 0;*/
 }

 .el-tabs__item.is-active {
   color: #e71c20;
 }

 .el-tabs__active-bar {
   background-color: #e71c20;
   /*bottom: auto;*/
 }

 .el-tabs__item:hover {
   color: #e71c20;
 }

 .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
   border-top: 2px solid #e71c20;
 }


</style>
 <div class="sun-video" id="sun-video-app" v-cloak>
 <el-tabs id="sun-video-tab-content" v-model="activeName" @tab-click="handleClick" type="card">
 
 </el-tabs>
 </div>

html section

{% if customer.id or true  %}
 {% if section.settings.render_first %}
   {% render 'sun-tab-video-css' %}
 {% endif %}
 {% if section.settings.tab_title == blank %}
      <style>
       .el-tabs--card>.el-tabs__header{display:none;}
     </style>
   {% endif %}
 <div id="{{ section.id }}" style="display:none;">
   {% if section.settings.tab_title %}
   <el-tab-pane label="{{ section.settings.tab_title }}" name="{% if section.settings.render_first %}first{% else %} {{ section.id }}{% endif %}">
     {% endif %}
     <div class="video-group">
       {% for block in section.blocks %}
         <div class="video-item">
         <p class="video-title">{{ block.settings.title }}</p>
         <div class="video-content">
           <div class="youtube" data-embed="{{ block.settings.embed_id }}" data-max="{{ block.settings.max }}">
             <div class="play-button"></div>
           </div>
         </div>
       </div>
       {% endfor %}
     </div>
 {% if section.settings.tab_title %}
   </el-tab-pane>
   {% endif %}
 </div>
 <script>
   window.sunshine.tab_html = $('#{{ section.id }}').html();
  $("#sun-video-tab-content").append(window.sunshine.tab_html)
 </script>

 {% if section.settings.render_last %}
   {% render 'sun-tab-video-js' %}
 {% endif %}      
{% endif %}
{% schema %}
 {
   "name": "Sun Tab Video",
   "settings": [
     {
       "type":"checkbox",
       "label":"Render First",
       "id":"render_first",
       "default": false
     },
     {
       "type":"checkbox",
       "label":"Render Last",
       "id":"render_last",
       "default": false
     },
     {
       "type":"number",
       "label":"Tab Count",
       "id":"tab_count"
     },
     {
       "type":"text",
       "label":"Tab Title",
       "id":"tab_title"
     }
   ],
   "blocks":[
     {
       "type":"text",
       "name":"Tab Item",
       "settings": [
         {
           "type":"text",
           "id":"title",
           "label":"Item Title"
         },
         {
           "type":"text",
           "id":"embed_id",
           "label":"Youtube Embed Id"
         },
         {
           "type":"checkbox",
           "id":"max",
           "label":"Thumb Image Max?",
           "default":true
         }
       ]
     }
   ],
   "presets":[
     {
       "name":"Sun Tab Video"
     }
   ]
 }
{% endschema %}

sun-tab-video-js

<script>

   new Vue({
       el: "#sun-video-app",
       delimiters: ['${', '}'],
       data: function () {
           return {
               activeName: 'first'
           }
       },
       methods: {
           handleChange(val) {
               // console.log(val);
           },
           handleClick(tab, event) {
               // console.log(tab, event);
           },
           btn_submit() {
               // console.log('submit')
           }
       },
       created() {

       },
       computed: {}

   })
</script>
<script>
   var youtube = document.querySelectorAll(".youtube");
   // loop
   for (var i = 0; i < youtube.length; i++) {
       var source = '';
       var img_class = '';
       // thumbnail image source.
       if (youtube[i].dataset.max == 'true') {
           source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/maxresdefault.jpg";
           img_class = 'max';
       } else {
           source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/0.jpg";
           img_class = 'default';
       }
       var image = new Image();
       image.src = source;
       image.setAttribute('data-class', img_class);
       image.addEventListener("load", function () {
           youtube[i].appendChild(image);
       }(i));

       youtube[i].addEventListener("click", function () {

           var iframe = document.createElement("iframe");

           iframe.setAttribute("frameborder", "0");
           iframe.setAttribute("allowfullscreen", "");
           iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.embed + "?rel=0&autoplay=1&showinfo=1");

           this.innerHTML = "";
           this.appendChild(iframe);
       });

   }

</script>