Shopify Shoppable Video Slider – Interactive Product Videos

                    <!-- 
========================================
Section Name: Shoppable Video Slider
Tech Stack: Liquid, HTML, CSS, JavaScript, Swiper.js
What This Section Does: 
- Displays a responsive slider of product videos with add-to-cart functionality.
- Features a video popup modal for enhanced viewing experience.
- Includes product details and pricing alongside each video.
- Fully customizable with responsive design for all devices.

Promotion: 
Boost your Shopify store's conversion rates with interactive shoppable videos. Engage customers with visual demonstrations and simplified purchasing. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
{% comment %}
  Section: Shoppable Video Slider
  - Uses Swiper.js from CDN for smooth sliding
  - Simplified video implementation with Shopify placeholders
  - Product selection with add to cart functionality
  - Video popup on click
{% endcomment %}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<div class="shoppable-video-section{% if section.settings.full_width %} section-full-width{% endif %}" 
     style="background-color: {{ section.settings.background_color }}">
  <div class="page-width{% if section.settings.full_width %} page-width--flush{% endif %}">
    
    {% if section.settings.heading != blank %}
      <div class="section-header text-center">
        <h2 class="shoppable-video__heading">{{ section.settings.heading }}</h2>
      </div>
    {% endif %}

    <div class="swiper shoppable-video-swiper">
      <div class="swiper-wrapper">
        {% for block in section.blocks %}
          {% if block.type == 'video_product' %}
            <div class="swiper-slide shoppable-video-slide" {{ block.shopify_attributes }}>
              <div class="shoppable-video-item">
                <div class="shoppable-video-container" data-video-id="{{ block.id }}">
                  <!-- Video display -->
                  {% if block.settings.video != blank %}
                    <div class="shoppable-video__video-wrapper">
                      {{ block.settings.video | video_tag: image_size: "1024x", autoplay: true, loop: true, muted: true, controls: false, preload: "auto", class: "shoppable-video__media" }}
                    </div>
                  {% else %}
                    <div class="shoppable-video__placeholder">
                      {{ 'product-5' | placeholder_svg_tag: 'placeholder-svg' }}
                      <div class="shoppable-video__placeholder-icon">
                        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-play" viewBox="0 0 26 26">
                          <path d="M9.33 6.69l10.33 6.3-10.33 6.31V6.69zm15.34 6.3L6.67 24V0l18 13z" fill-rule="evenodd"/>
                        </svg>
                      </div>
                    </div>
                  {% endif %}
                </div>
                
                {% if block.settings.product != blank %}
                  {% assign product = all_products[block.settings.product] %}
                  {% if product.empty? %}
                    <div class="shoppable-video__product">
                      <div class="shoppable-video__product-details">
                        <div class="shoppable-video__thumbnail">
                          {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
                        </div>
                        <div class="shoppable-video__product-info">
                          <h3 class="shoppable-video__product-title">{{ 'products.product.name' | t }}</h3>
                          <p class="shoppable-video__product-price">{{ 1999 | money }}</p>
                        </div>
                      </div>
                      <button type="button" class="shoppable-video__add-to-cart button button--full-width">
                        {{ 'products.product.add_to_cart' | t }}
                      </button>
                    </div>
                  {% else %}
                    <div class="shoppable-video__product" data-product-id="{{ product.id }}">
                      <div class="shoppable-video__product-details">
                        <div class="shoppable-video__thumbnail">
                          {% if product.featured_image %}
                            <img src="{{ product.featured_image | img_url: '100x100', crop: 'center' }}" 
                                 alt="{{ product.featured_image.alt | escape }}" 
                                 loading="lazy" 
                                 width="50" 
                                 height="50">
                          {% else %}
                            {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
                          {% endif %}
                        </div>
                        <div class="shoppable-video__product-info">
                          <h3 class="shoppable-video__product-title">{{ product.title }}</h3>
                          <p class="shoppable-video__product-price">{{ product.price | money }}</p>
                        </div>
                      </div>
                      <div class="shoppable-video__add-to-cart-wrapper">
                        <button type="button" 
                                class="shoppable-video__add-to-cart"
                                data-product-id="{{ product.id }}"
                                {% if product.variants.size > 1 %}
                                  onclick="window.location.href='{{ product.url }}'"
                                {% endif %}>
                          {% if product.variants.size > 1 %}
                            {{ 'products.product.view_details' | t }}
                          {% else %}
                            {{ 'products.product.add_to_cart' | t }}
                          {% endif %}
                        </button>
                      </div>
                    </div>
                  {% endif %}
                {% endif %}
              </div>
            </div>
          {% endif %}
        {% endfor %}
      </div>
      
      {% if section.settings.show_navigation %}
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      {% endif %}
      
      {% if section.settings.show_pagination %}
        <div class="swiper-pagination"></div>
      {% endif %}
    </div>
  </div>
</div>

<!-- Video Popup Modal -->
<div class="video-popup-modal" id="videoPopupModal">
  <div class="video-popup-container">
    <div class="video-popup-close">×</div>
    <div class="video-popup-content">
      <div class="video-popup-video-container">
        <!-- Video will be loaded here -->
      </div>
      <div class="video-popup-product-info">
        <!-- Product info will be loaded here -->
      </div>
    </div>
  </div>
</div>

<style>
  .shoppable-video-section {
    padding: 50px 0;
  }
  
  .shoppable-video__heading {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
  }
  
  .shoppable-video-swiper {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  
  .shoppable-video-slide {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  
  .shoppable-video-item {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
  }
  
  .shoppable-video-container {
    position: relative;
    padding-top: 125%; /* Taller aspect ratio */
    overflow: hidden;
    background: #f5f5f5;
    cursor: pointer;
  }
  
  .shoppable-video__video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .shoppable-video__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .shoppable-video__placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .shoppable-video__placeholder-icon {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .shoppable-video__placeholder-icon svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
  }
  
  .shoppable-video__product {
    padding: 15px;
    background: #000000;
    color: #ffffff;
  }
  
  .shoppable-video__product-details {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .shoppable-video__thumbnail {
    width: 50px;
    height: 50px;
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .shoppable-video__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .shoppable-video__product-info {
    margin-left: 15px;
  }
  
  .shoppable-video__product-title {
    font-size: 16px;
    margin: 0;
    font-weight: 500;
    color: #fff;
  }
  
  .shoppable-video__product-price {
    font-size: 14px;
    margin: 5px 0 0;
  }
  
  .shoppable-video__add-to-cart-wrapper {
    display: flex;
    width: 100%;
  }
  
  .shoppable-video__add-to-cart {
    display: block;
    flex-grow: 1;
    padding: 10px;
    background: #000000;
    color: #ffffff;
    border: 1px solid #ffffff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    border-radius: 2px 0 0 2px;
    transition: all 0.3s ease;
    height: 40px;
    line-height: 20px;
  }
  

  .shoppable-video__add-to-cart:hover, 
  .shoppable-video__dropdown-button:hover {
    background: #ffffff;
    color: #000000;
  }
  
  .shoppable-video__dropdown-button:hover svg {
    stroke: #000000;
  }
  
  /* Swiper customizations */
  .swiper-button-next,
  .swiper-button-prev {
    color: #000000;
  }
  
  .swiper-pagination-bullet {
    background: #000000;
  }
  
  /* Video Popup Modal */
  .video-popup-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
  }
  
.video-popup-container {
    position: relative;
    width: 100%;
    max-width: 780px;
    max-height: 100vh;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
}
  
.video-popup-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    color: #000000;
    cursor: pointer;
    z-index: 10;
    /* text-shadow: 0 0 5px rgba(0,0,0,0.5); */
}
  
.video-popup-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
}
  
.video-popup-video-container {
    position: relative;
    min-height: 590px;
    background: #000;
}
  
.video-popup-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
  
.video-popup-product-info {
    justify-content: end;
    width: 100%;
    padding: 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
}
  
  @media screen and (max-width: 767px) {
    .shoppable-video-section {
      padding: 30px 0;
    }
    
    .shoppable-video__heading {
      font-size: 24px;
      margin-bottom: 20px;
    }
    
    .shoppable-video__product-title {
      font-size: 14px;
    }
    
    .shoppable-video__product-price {
      font-size: 12px;
    }
    
    .video-popup-content {
      flex-direction: column;
    }
    
    .video-popup-product-info {
      width: 100%;
    }
  }
</style>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Initialize Swiper
    var swiper = new Swiper('.shoppable-video-swiper', {
      slidesPerView: 1,
      spaceBetween: 10,
      loop: true,
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      breakpoints: {
        640: {
          slidesPerView: 2,
          spaceBetween: 15,
        },
        768: {
          slidesPerView: 3,
          spaceBetween: 20,
        },
        1024: {
          slidesPerView: {{ section.settings.slides_per_view }},
          spaceBetween: 20,
        },
      }
    });
    
    // Add to cart functionality for single variant products
    const addToCartButtons = document.querySelectorAll('.shoppable-video__add-to-cart');
    
    addToCartButtons.forEach(button => {
      const productId = button.dataset.productId;
      
      if (productId && !button.hasAttribute('onclick')) {
        button.addEventListener('click', function(e) {
          e.preventDefault();
          e.stopPropagation();
          
          this.classList.add('loading');
          this.textContent = "Adding...";
          
          fetch('/cart/add.js', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json'
            },
            body: JSON.stringify({
              items: [{
                id: productId,
                quantity: 1
              }]
            })
          })
          .then(response => response.json())
          .then(data => {
            this.classList.remove('loading');
            
            if (data.status && data.status !== 200) {
              console.error('Error:', data.description);
              this.textContent = "Error";
              setTimeout(() => {
                this.textContent = "{{ 'products.product.add_to_cart' | t }}";
              }, 2000);
              return;
            }
            
            // Update cart drawer or mini-cart if applicable
            if (typeof window.updateCartDrawer === 'function') {
              window.updateCartDrawer();
            } else {
              // Try to refresh cart sections if available
              try {
                if (typeof window.theme !== 'undefined' && typeof window.theme.refreshCart === 'function') {
                  window.theme.refreshCart();
                }
              } catch(e) {
                console.log('Could not auto-refresh cart');
              }
            }
            
            // Show success message
            this.textContent = "Added!";
            
            setTimeout(() => {
              this.textContent = "{{ 'products.product.add_to_cart' | t }}";
            }, 2000);
          })
          .catch(error => {
            console.error('Error:', error);
            this.classList.remove('loading');
            this.textContent = "Error";
            
            setTimeout(() => {
              this.textContent = "{{ 'products.product.add_to_cart' | t }}";
            }, 2000);
          });
        });
      }
    });
    
    // Video Popup functionality
    const modal = document.getElementById('videoPopupModal');
    const closeBtn = document.querySelector('.video-popup-close');
    const videoContainers = document.querySelectorAll('.shoppable-video-container');
    
    videoContainers.forEach(container => {
      container.addEventListener('click', function() {
        const videoId = this.getAttribute('data-video-id');
        const slide = this.closest('.shoppable-video-slide');
        
        // Clone the video element from the slide
        const videoElement = this.querySelector('video, iframe');
        const productInfo = slide.querySelector('.shoppable-video__product').cloneNode(true);
        
        if (videoElement) {
          const videoClone = videoElement.cloneNode(true);
          
          if (videoElement.tagName === 'VIDEO') {
            videoClone.controls = true;
            videoClone.muted = false;
          }
          
          // Clear previous content
          const popupVideoContainer = document.querySelector('.video-popup-video-container');
          const popupProductInfo = document.querySelector('.video-popup-product-info');
          
          popupVideoContainer.innerHTML = '';
          popupProductInfo.innerHTML = '';
          
          // Add new content
          popupVideoContainer.appendChild(videoClone);
          popupProductInfo.appendChild(productInfo);
          
          // Show modal
          modal.style.display = 'flex';
          
          // Make sure the video plays
          if (videoClone.tagName === 'VIDEO') {
            videoClone.play();
          }
        }
      });
    });
    
    // Close modal on click
    closeBtn.addEventListener('click', function() {
      modal.style.display = 'none';
      document.querySelector('.video-popup-video-container').innerHTML = '';
    });
    
    // Close modal if clicked outside of content
    window.addEventListener('click', function(event) {
      if (event.target === modal) {
        modal.style.display = 'none';
        document.querySelector('.video-popup-video-container').innerHTML = '';
      }
    });
    
    // Force play videos that might be paused due to browser restrictions
    document.querySelectorAll('video').forEach(video => {
      video.play().catch(e => {
        console.log("Auto-play prevented by browser", e);
      });
    });
  });
</script>

{% schema %}
{
  "name": "Shoppable Video Slider",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": "What our fellows think",
      "label": "Heading"
    },
    {
      "type": "range",
      "id": "slides_per_view",
      "min": 2,
      "max": 5,
      "step": 1,
      "default": 5,
      "label": "Slides per view (desktop)"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "default": false,
      "label": "Full width section"
    },
    {
      "type": "color",
      "id": "background_color",
      "default": "#ffffff",
      "label": "Background color"
    },
    {
      "type": "checkbox",
      "id": "show_navigation",
      "default": true,
      "label": "Show navigation arrows"
    },
    {
      "type": "checkbox",
      "id": "show_pagination",
      "default": false,
      "label": "Show pagination dots"
    }
  ],
  "blocks": [
    {
      "type": "video_product",
      "name": "Video + Product",
      "limit": 10,
      "settings": [
        {
          "type": "header",
          "content": "Video Content"
        },
        {
          "type": "video",
          "id": "video",
          "label": "Video",
          "info": "Upload or select a video to display"
        },
        {
          "type": "header",
          "content": "Product Selection"
        },
        {
          "type": "product",
          "id": "product",
          "label": "Product"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Shoppable Video Slider",
      "blocks": [
        {
          "type": "video_product"
        },
        {
          "type": "video_product"
        },
        {
          "type": "video_product"
        },
        {
          "type": "video_product"
        },
        {
          "type": "video_product"
        }
      ]
    }
  ]
}
{% endschema %}