rebly-sections 1.0.1 → 1.2.0

package/assets/data/component-library/home-video-banner.liquid

@@ -0,0 +1,317 @@
+{% assign full = section.settings.full %}
+{% assign margin = section.settings.margin | split: ',' %}
+{% assign top = margin[0] %}
+{% assign bottom = margin[1] %}  
+
+<div class="grid-uniform" {% if section.settings.video_style == 'style1' %} style="background-image:url({{ section.settings.promo_images_1 | img_url: "2000x"}});background-repeat:no-repeat;data-background=({{ section.settings.promo_images_1 | img_url: "2000x"}});"{% endif %}>    
+  <div class="video-banner {% if section.settings.video_style == 'style1' %}with-popup{% else %}promo-video{% endif %}" style="padding-top:{{top}}px; padding-bottom:{{bottom}}px;">
+    <div class="container">        
+      <div class="overlay"></div>
+
+      {% if section.settings.title != blank or section.settings.description  %}
+      <div class="grid-uniform {% if section.settings.video_style == 'style2' %}promo-video__inner{% endif %}">
+        <div class="section-header section-header--small">
+          <div class="border-title wow fadeInLeft animated text-center">
+            {% endif %}  
+
+            {% if section.settings.title != blank %}
+            <h2 class="section-header__title" style="color:{{ section.settings.title_color }}">    
+              {{ section.settings.title }}
+            </h2>
+            {% endif %} 
+            
+            {% if section.settings.description != blank %}
+            <div class="short-desc" style="color:{{ section.settings.desc_color }}"> <p>{{ section.settings.description }}</p>
+            </div>
+            {% endif %}  
+            
+            <div class="dt-sc-hr-invisible-very-small"></div>
+
+            {% if section.settings.video_style == 'style2' %}
+            {% if section.settings.button_1 != blank %}
+            <a class="btn" href="{{ section.settings.link_1 }}">{{ section.settings.button_1 }}</a>    
+            {% endif %} 
+            {% endif %}
+            {% if section.settings.title != blank or section.settings.description  %}
+          </div>
+
+        </div>
+      </div>
+      {% endif %} 
+      {% if section.settings.video_style == 'style1' %}
+      <div class="grid-uniform video-banner-block">      
+        {% if section.settings.video_url != blank %}
+        <div class="video-image grid__item wide--two-thirds post-large--two-thirds large--grd__item medium-down--hide wow slideInLeft animated">            
+          <div class="video-text p-video">             
+            <a href="{{ section.settings.video_url }}" class="jas-popup-url">
+          {% if section.settings.image_2 != blank %}   <img src="{{ section.settings.image_2 | img_url: 'master' }}" alt="{{ section.settings.titleshadow_1 }}"/>   {% endif %}
+              <i class="fa fa-play"></i>
+            </a>              
+          </div>          
+        </div>
+        <div class="video-popup grid__item wide--hide post-large--hide large--hide medium--grd__item wow slideInLeft animated"> 
+          <iframe width="560" height="315" src="{{ section.settings.video_url }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>            
+        </div>
+        {% endif%}
+{% if section.settings.title_1 != blank or section.settings.button_1 != blank or section.settings.logo != blank  %}
+        <div class="video-content grid__item wide--one-third post-large--one-third large--grd__item medium--grd__item text-center"> 
+   		 <div class="content-inner" style="background:{{ section.settings.add_box_bg }}">
+          {% if section.settings.logo != blank %}<img src="{{ section.settings.logo | img_url: 'master' }}" alt="{{ section.settings.titleshadow_1 }}"/> {% endif %}              
+
+          {% if section.settings.title_1 != blank %}
+          <h5 style="color:{{ section.settings.title_1_color }}">{{ section.settings.title_1 }}</h5>
+          {% endif %}
+          {% if section.settings.subtitle != blank %}
+          <h3 style="color:{{ section.settings.subtitle_color }}">{{ section.settings.subtitle }}</h3>
+          {% endif %}
+          {% if section.settings.titleshadow_1 != blank %}
+          <h4 style="color:{{ section.settings.shadowtext_color }}">{{ section.settings.titleshadow_1 }}</h4>
+          {% endif %}
+          {% if section.settings.text_1 != blank %}
+          <p style="color:{{ section.settings.text_color }}">{{ section.settings.text_1 }}</p>
+          {% endif %}
+          {% if section.settings.button_1 != blank %}
+          <a class="btn" href="{{ section.settings.link_1 }}">{{ section.settings.button_1 }}</a>    
+          {% endif %}
+         </div>
+        </div>    
+      {% endif %}
+      </div>  
+      {% endif %} 
+
+      {% if section.settings.video_style == 'style2' %}
+
+      <video {% if section.settings.auto_play %}autoplay {% endif %}  {% if section.settings.play_continue %} loop {% endif %}>
+        <source src="{{ section.settings.promo_video_code }}" type="video/mp4">
+      </video>
+
+      {% endif %}
+    </div> 
+  </div>
+</div>
+
+<style>
+
+  {% if section.settings.show_overlay %} 
+  .video-banner .overlay { background:{{ section.settings.overlay_bg | color_modify: 'alpha', 0.8 }}; } 
+  .promo-video .overlay { background:{{ section.settings.overlay_bg | color_modify: 'alpha', 0.6 }}; } 
+  {% endif %} 
+
+  .video-banner .btn { background:{{ section.settings.button_bg_color }}; color:{{ section.settings.button_txt_color }}; }  
+  .video-banner .btn:hover{ background:{{ section.settings.button_bghover_color }}; color:{{ section.settings.button_txthover_color }}; }
+
+</style>
+
+{% schema %}
+{
+"name": "Video Banner",
+"class": "index-section video-addbox",
+"settings": [
+{
+"type": "checkbox",
+"id": "full",
+"label": "Show Full width"
+},
+{
+"type": "text",
+"id": "margin",
+"label": "Style value (Margin)",
+"default":"0,0",
+"info":"Top(px),Bottom(px)"
+},
+{
+"type": "select",
+"id": "video_style",
+"label": "Style",
+"options": [
+{
+"value": "style1",
+"label": "Pop Up"
+},
+{
+"value": "style2",
+"label": "Background Video"
+}      
+],
+"default": "style1"
+},
+
+{
+"type": "image_picker",
+"id": "promo_images_1",
+"label": "Background Image"
+},
+{
+"type": "checkbox",
+"id": "show_overlay",
+"label": "Show Overlay"
+},
+{
+"type": "color",
+"id": "overlay_bg",
+"label":"Overlay Bg color",
+"default": "#f5f5f5"
+},
+{
+"type": "color",
+"id": "background_color",
+"label":"Bckground color",
+"default": "#000"
+},
+{
+"type": "image_picker",
+"id": "image_2",
+"label": "Video screenshot",
+"info": "Size: 437x257"
+},
+{
+"type": "text",
+"id": "video_url",
+"label": "Video url",
+"default": "https://www.youtube.com/watch?v=bvtwWhKdxhM"
+},
+{
+"type": "header",
+"content": "For Background Video only"
+},
+{
+"type": "checkbox",
+"id": "auto_play",
+"label": "Auto play?"
+},
+{
+"type": "checkbox",
+"id": "play_continue",
+"label": "Play video continuously"
+},
+{
+"type": "textarea",
+"id": "promo_video_code",
+"label": "Video FIle URL"
+},
+{
+"type": "text",
+"id": "title",
+"label": "Heading",
+"default": "Video Banner"
+}, 
+{
+"type": "color",
+"id": "title_color",
+"label": "Heading color",
+"default": "#000"
+}, 
+{
+"type": "textarea",
+"id": "description",
+"label": "Description"
+},
+{
+"type": "color",
+"id": "desc_color",
+"label": "Description color",
+"default": "#000"
+},
+
+{
+"type": "color",
+"id": "add_box_bg",
+"label": "Add Box Bg",
+"default": "#64c2ce"
+},
+{
+"type": "image_picker",
+"id": "logo",
+"label": "Logo"
+
+},
+
+{
+"type": "text",
+"id": "title_1",
+"label": "Heading"
+},
+{
+"type": "color",
+"id": "title_1_color",
+"label":"Title color",
+"default": "#000"
+},
+{
+"type": "text",
+"id": "subtitle",
+"label": "Offer"
+},
+{
+"type": "color",
+"id": "subtitle_color",
+"label":"Offer color",
+"default": "#000"
+},
+{
+"type": "text",
+"id": "titleshadow_1",
+"label": "Sub Heading"
+},
+{
+"type": "color",
+"id": "shadowtext_color",
+"label":"Text color",
+"default": "#000"
+},
+{
+"type": "textarea",
+"id": "text_1",
+"label": "Description"
+},
+{
+"type": "color",
+"id": "text_color",
+"label":"Text color",
+"default": "#000"
+},
+{
+"type": "text",
+"id": "button_1",
+"label": "Button text",
+"default": "Shop Now"
+},
+{
+"type": "color",
+"id": "button_bg_color",
+"label":"Background color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "button_txt_color",
+"label":"Text color",
+"default": "#fff"
+},
+{
+"type": "color",
+"id": "button_bghover_color",
+"label":"Background Hover color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "button_txthover_color",
+"label":"Text Hover color",
+"default": "#fff"
+},
+{
+"type": "url",
+"id": "link_1",
+"label": "Link URL"
+}
+],
+"presets": [
+{
+"name": "Video Banner",
+"category": "Video",
+"blocks": []
+}
+]
+}
+{% endschema %}

package/assets/data/component-library/home-wide-banner.liquid

@@ -0,0 +1,327 @@
+{% assign full = section.settings.full %}
+{% assign margin = section.settings.margin | split: ',' %}
+{% assign top = margin[0] %}
+{% assign bottom = margin[1] %}
+{% if section.settings.show_blocks %}  
+{% assign column1  = 'grid__item wide--one-half post-large--one-half large--one-whole medium-down--grid__item small--grid__item' %}
+{% assign column2  = 'grid__item wide--one-half post-large--one-half large--one-whole medium-down--grid__item small--grid__item' %}
+{% else %}
+{% assign column1  = 'grid__item wide--one-whole' %}
+{% endif %}
+
+<div class="{% if section.settings.full %} container-fluid {% else %}container{% endif %}">
+  <div class="dt-sc-hr-invisible-medium"></div>
+  <div class="wide-banner-type" style="margin-top:{{top}}px; margin-bottom:{{bottom}}px; {% if section.settings.show_image_1 %}background-image:url('{{ section.settings.image_1 | img_url: '1920X' }}');background-attachment:fixed;background-repeat:no-repeat;background-position:center center; {% else %}background-color:{{section.settings.background_color}};{% endif%}">
+    <div class="grid-uniform CollectionItems">      
+      <div class="{{column1 }} banner-content text-{{section.settings.content_position}}">       
+        {% if section.settings.text_1 != blank %}
+        <h3 style="color:{{ section.settings.text_color }};">{{ section.settings.text_1 }}</h3>    
+        {% endif %}  
+        {% if section.settings.title_1 != blank %}
+        <h2 style="color:{{ section.settings.title_color }};">{{ section.settings.title_1 }} <span style="color:{{ section.settings.titleshadow_offer_color }};">{{ section.settings.offer_text }}</span></h2>
+        {% endif %}
+        <div class="deal-clock lof-clock-timer-detail"></div>
+        {% assign dealTime = section.settings.deal_end_date | replace: '_',' ' %}  
+        <div class="deal-content">
+          {% if section.settings.titleshadow_1 != blank %}
+          <h4 style="color:{{ section.settings.titleshadow_1_color }};">{{ section.settings.titleshadow_1 }}</h4>
+          {% endif %}
+          {% if section.settings.textshadow_1 != blank %}
+          <p  style="color:{{ section.settings.textshadow_1_color }};">{{ section.settings.textshadow_1 }}</p>    
+          {% endif %}  
+          <script>
+            //<![CDATA[
+            jQuery(document).ready(function($){
+              $(".lof-clock-timer-detail").lofCountDown({      
+                TargetDate:"{{ dealTime }}",
+                DisplayFormat:"<ul class='list-inline'><li class='day'>%%D%%<span>Days</span></li><li class='hours'>%%H%%<span>Hours</span></li><li class='mins'>%%M%%<span>Minutes</span></li><li class='seconds'>%%S%%<span>Seconds</span></li></ul>",
+                //FinishMessage: "Expired"
+              });
+            });
+            //]]>
+          </script>
+          {% if section.settings.button_1 != blank or  section.settings.button_2 != blank %}
+          <div class="deal-btn">{% endif %}  {% if section.settings.button_1 != blank %}<a class="btn" href="{{ section.settings.link_1 }}" style="border:none;color:{{ section.settings.button_txt_color }};background-color:{{ section.settings.button_bg_color }};">{{ section.settings.button_1 }}</a>{% endif %} 
+
+
+            {% if section.settings.button_2 != blank %}
+            <a class="btn" href="{{ section.settings.link_2 }}" style="border:none;color:{{ section.settings.button_txt_color }};background-color:{{ section.settings.button_bg_color }};">{{ section.settings.button_2 }}</a>   
+            {% endif %}   
+            {% if section.settings.button_1 != blank or  section.settings.button_2 != blank %}
+          </div> 
+          {% endif %}  
+        </div>
+      </div>
+
+      {% if section.settings.show_blocks %}  
+      <div class="{{column2 }} icon-section">
+        {% for block in section.blocks %}         
+        <div class=" grid__item wide--one-half post-large--one-half large--one-half medium-one-half small--grid__item wow fadeInUp animated">
+          <a href="{{ block.settings.client_link }}">
+            {% if block.settings.client_img != blank or block.settings.client_heading != blank %}
+            <div class="icon">
+              <img src="{{ block.settings.client_img | img_url: "70x70"  }}" alt="{{ block.settings.client_heading }}"  style ="border:3px solid {{block.settings.img_border_color}};"/>
+            </div>
+            {% else %}          
+            <div class="item"><img src="//via.placeholder.com/70x70"></div>
+            {% endif %}   
+            {% if block.settings.client_heading != blank %}
+            <span style="color:{{ block.settings.client_heading_color}}">{{ block.settings.client_heading }} </span>
+            {% endif %}
+          </a>
+        </div>
+        {% endfor %}
+      </div>
+      {% endif %} 
+    </div>   
+  </div>
+</div>
+
+<style>
+
+  .lof-clock-timer-detail ul li,.lof-clock-timer-detail ul li span { color:{{ section.settings.time_color }}; }
+  .banner-content .lof-clock-timer-detail li:after { background:{{ section.settings.time_color }}; }
+  .banner-content .deal-btn .btn:hover{background:{{ section.settings.button_bghover_color }}!important;color:{{ section.settings.button_txthover_color }}!important;}
+
+  {% if section.settings.show_overlay %} .home-wide-banner .wide-banner-type:before { background:{{ section.settings.overlay_bg | color_modify: 'alpha', 0.6 }}; } {% endif %} 
+
+</style>
+
+{% schema %}
+{
+"name": "Wide Banner",
+"class": "index-section home-wide-banner",
+"settings": [
+{
+"type": "checkbox",
+"id": "full",
+"label": "Show Full width"
+},
+{
+"type": "text",
+"id": "margin",
+"label": "Style value (Margin)",
+"default":"0,0",
+"info":"Top(px),Bottom(px)"
+},
+{
+"type": "checkbox",
+"id": "show_image_1",
+"label": "Show Image"
+},
+{
+"type": "image_picker",
+"id": "image_1",
+"label": "Image",
+"info": "Size: 1920x1280"
+},
+{
+"type": "checkbox",
+"id": "show_overlay",
+"label": "Show Overlay"
+},
+{
+"type": "color",
+"id": "overlay_bg",
+"label":"Overlay Bg color",
+"default": "#f5f5f5"
+},
+{
+"type": "color",
+"id": "background_color",
+"label":"Background color",
+"default": "#f5f5f5"
+},
+{
+"type": "select",
+"id": "content_position",
+"label": "Content Position",
+"options": [
+{
+"value": "center",
+"label": "Center"
+},
+{
+"value": "left",
+"label": "Left"
+},
+{
+"value": "right",
+"label": "Right"
+}
+],
+"default": "center"
+},
+{
+"type": "text",
+"id": "title_1",
+"label": "Heading",
+"default": "Heading"
+},
+{
+"type": "color",
+"id": "title_color",
+"label":"Heading color",
+"default": "#000"
+},
+{
+"type": "text",
+"id": "offer_text",
+"label": "Offer Text",
+"default": "Offer Text"
+},
+{
+"type": "color",
+"id": "titleshadow_offer_color",
+"label":"Offer Text color",
+"default": "#000"
+},
+{
+"type": "text",
+"id": "text_1",
+"label": "Sub Heading",
+"default": "sub Heading"
+},
+{
+"type": "color",
+"id": "text_color",
+"label":"Sub Heading color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "time_color",
+"label":"Deal time color",
+"default": "#000"
+},
+{
+"type": "text",
+"id": "titleshadow_1",
+"label": "Shadow Text",
+"default": "Shadow Text"
+},
+{
+"type": "color",
+"id": "titleshadow_1_color",
+"label":"Description 1 color",
+"default": "#000"
+},
+
+{
+"type": "textarea",
+"id": "textshadow_1",
+"label": "Description",
+"default": "Few lines of short description"
+},
+{
+"type": "color",
+"id": "textshadow_1_color",
+"label":"Description",
+"default": "#000"
+},
+{
+"type": "text",
+"id": "button_1",
+"label": "Button text",
+"default": "Shop Now"
+},
+{
+"type": "color",
+"id": "button_bg_color",
+"label":"Background color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "button_txt_color",
+"label":"Text color",
+"default": "#fff"
+},
+{
+"type": "color",
+"id": "button_bghover_color",
+"label":"Background Hover color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "button_txthover_color",
+"label":"Text Hover color",
+"default": "#fff"
+},
+{
+"type": "url",
+"id": "link_1",
+"label": "Link URL"
+},
+{
+"type": "text",
+"id": "button_2",
+"label": "Button text",
+"default": "View More"
+},
+{
+"type": "url",
+"id": "link_2",
+"label": "Link URL"
+},
+{
+"type": "text",
+"id": "deal_end_date",
+"label": "Deal end date",
+"info": "format should be MM/DD/YYYY_HH:MM:SS "
+},
+{
+"type": "checkbox",
+"id": "show_blocks",
+"label": "Show Thumbs",
+"default": true
+}
+
+
+],
+"blocks": [
+{
+"type": "Image",
+"name":"Icon Block",
+"settings": [
+{
+"type": "image_picker",
+"id": "client_img",
+"label": "Image",
+"info": "Size: 75x75"
+},
+{
+"type": "text",
+"id": "client_heading",
+"label": "Title"
+},
+{
+"type": "color",
+"id": "img_border_color",
+"label": "img border color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "client_heading_color",
+"label": "Title Color",
+"default": "#000"
+},
+{
+"type": "url",
+"id": "client_link",
+"label": "Link"
+}
+]
+}
+],
+"presets": [
+{
+"name": "Wide Banner",
+"category": "Image",
+"blocks": []
+}
+]
+}
+{% endschema %}