rebly-sections 1.0.1 → 1.2.0

package/assets/data/component-library/home-featured-collections.liquid

@@ -0,0 +1,484 @@
+{% if section.blocks.size > 0 %}
+{% assign full = section.settings.full %}
+{% assign margin = section.settings.margin | split: ',' %}
+{% assign top = margin[0] %}
+{% assign bottom = margin[1] %}    
+
+<div class="{% if section.settings.full %} container-fluid {% else %}container-bg{% endif %}">
+  <div class="featured-collection-inner" style="margin-top:{{top}}px; margin-bottom:{{bottom}}px;">       
+    <div class="grid-uniform">
+
+      {% if section.settings.layout_setup == '75%' %}
+      {% assign column1  = 'grid__item wide--three-quarters post-large--two-quarters large--one-whole medium-down--grid__item small--grid__item' %}
+      {% assign column2  = 'grid__item wide--one-quarter post-large--two-quarters large--one-whole medium-down--grid__item small--grid__item' %}
+      {% elsif block.settings.layout_setup == '50%' %}
+      {% assign column1  = 'grid__item wide--one-half post-large--one-half large--one-half medium-down--grid__item small--grid__item' %}
+      {% assign column2  = 'grid__item wide--one-half post-large--one-half large--one-half medium-down--grid__item small--grid__item' %}
+      {% elsif block.settings.layout_setup == '67%' %}
+      {% assign column1  = 'grid__item wide--two-thirds post-large--two-thirds large--one-whole medium-down--grid__item small--grid__item' %}
+      {% assign column2  = 'grid__item wide--one-third post-large--two-third large--one-whole medium-down--grid__item small--grid__item' %}
+      {% elsif block.settings.layout_setup == '100%' %}
+      {% assign column1  = 'grid__item' %}
+      {% assign column2  = 'grid__item' %}
+      {% else %}
+      {% assign column1  = 'grid__item wide--three-quarters post-large--two-quarters large--one-whole medium-down--grid__item small--grid__item' %}
+      {% assign column2  = 'grid__item wide--one-quarter post-large--two-quarters large--one-whole medium-down--grid__item small--grid__item' %}
+      {% endif %}
+
+      {% if section.settings.content_position == 'default' and section.settings.title != blank  %}
+      <div class="grid__item">  
+        <div class="collection-info {{section.settings.content_position}}">
+          <div class="section-header section-header--small">
+            <div class="border-title">    
+              {% if section.settings.small_title != blank %}
+              <div class="short-desc">
+              <p style="color:{{ section.settings.text_clr }};">{{ section.settings.small_title }}</p>              
+              </div>
+              {% endif %}
+              {% if section.settings.title != blank %}
+              <h2 class="section-header__title" style="color:{{ section.settings.title_clr }};">    
+                {{ section.settings.title }}
+              </h2>
+              {% endif %}                 
+              {% if section.settings.left_link != blank %}
+              <a href="{{ section.settings.left_link }}" class="link_text" style="color: {{ section.settings.left_link_txt_clr }};">{{ section.settings.left_link_text }}</a>
+              {% endif %} 
+            </div>
+          </div>    
+          <div class="nav_list_type2_items"></div>
+        </div>
+      </div>  
+      {% endif %}
+      {% capture content_block %}  
+      <div class="grid__item {{column2}}">  
+        <div class="collection-info {{section.settings.content_position}}">
+          <div class="section-header section-header--small">
+            <div class="border-title">        
+              {% if section.settings.title != blank %}
+              <h2 class="section-header__title" style="color:{{ section.settings.title_clr }};">    
+                {{ section.settings.title }}
+              </h2>
+              {% endif %}  
+              {% if section.settings.small_title != blank %}
+              <p style="color:{{ section.settings.text_clr }};">{{ section.settings.small_title }}</p>
+              {% endif %} 
+              {% if section.settings.left_link != blank %}
+              <a href="{{ section.settings.left_link }}" class="link_text" style="color: {{ section.settings.left_link_txt_clr }};">{{ section.settings.left_link_text }}</a>
+              {% endif %} 
+            </div>
+          </div>    
+          <div class="nav_list_type2_items"></div>
+        </div>
+      </div>  
+      {% endcapture %}        
+      {% if section.settings.content_position == 'left' %}
+      {{ content_block }}
+      {% endif %}
+      <div class="grid__item {% unless section.settings.content_position == 'default' %} {{column1 }} {% endunless %}">
+       <div class="grid-uniform">
+        <div class="{% if section.settings.enable_carousel %} owl-carousel owl-theme ListType2 {% else %}no-carousel {% endif %}"> 
+        {% for block in section.blocks %}          
+      
+        {% if section.settings.enable_carousel %}
+        {% assign column = 'grid__item' %}
+        {% else %}
+          
+        {% case section.blocks.size %}
+        {% when 1 %}
+        {%- assign column = 'grid__item one-block' -%}
+        {% when 2 %}
+        {%- assign column = 'grid__item wide--one-half post-large--one-half large--one-half two-blocks' -%}
+        {% when 3 %}        
+        {%- assign column = 'grid__item wide--one-third post-large--one-third large--one-half three-blocks' -%}
+        {% when 4 %}        
+        {%- assign column = 'grid__item wide--one-quarter post-large--one-half large--one-half four-blocks' -%}
+        {% endcase %}                     
+        {% endif %}
+          
+          
+        {% if block.type == 'default' %}
+        {% unless collection.handle == 'frontpage' %}           
+        {% assign collection =  collections[block.settings.collection]  %} 
+        {% include 'index-collection-grid-item', collection_item_width:column %}  
+        {% endunless %}            
+        {% endif %}
+        {% if block.type == 'categorylisting' %}
+        <div class="{{column }} category-listing-type">                      
+          <div class="category-listing_inner" style="background-color:{{ section.settings.content_bg }}; background-image:url('{{ block.settings.image | img_url: '500X' }}');background-repeat:no-repeat;background-position:bottom right;">    
+            <div class="category_heading">                 
+              {% if block.settings.sub_title != blank  %}  
+              <h4 style="color:{{ section.settings.sub_title_clr }};">{{ block.settings.sub_title}}</h4>
+              {% endif %} 
+            </div>   
+            <div class="category_text"> 
+              <ul>
+                {% for link in linklists[block.settings.linkedlist].links %}
+                <li>
+                  <a href="{{ link.url }}">{{ link.title }}</a>
+                </li>
+                {% endfor %}
+              </ul> 
+            </div>             
+          </div>
+        </div>       
+        {% endif %}
+        {% if block.type == 'imagewithtext' %}
+          <div class="{{column }} image-content">               
+
+            {% if section.settings.title_position == 'top' %}
+            <div class="collection-content text-center">              
+              {% if block.settings.title != blank %}                        
+              <h4 style="color:{{ section.settings.block_title_color }}">{{ block.settings.title }}</h4>        
+              {% endif %}   
+              {% if block.settings.text != blank %}                         
+              <p style="color:{{ section.settings.block_text_color }}">{{ block.settings.text }}</p>        
+              {% endif %}
+              {% if block.settings.link_text != blank %}
+              <a href="{{ block.settings.link }}" class="btn">
+                {{ block.settings.link_text }}
+              </a>
+              {% endif %} 
+            </div>  
+
+            {% endif %}
+            <div class="collection-image"> 
+              {% if block.settings.link != blank %}  <a href="{{ block.settings.link }}"> {% endif %}
+              {% if block.settings.image != blank %}  
+              <img src="{{ block.settings.image | img_url: '500x' }}">
+              {% else %}
+              <img src="//via.placeholder.com/500x500" />
+              {% endif %}
+              {% if block.settings.link != blank %}</a>{% endif %}      
+            </div>
+            {% if section.settings.title_position == 'bottom' %}
+
+            <div class="collection-content text-center">              
+              {% if block.settings.title != blank %}                        
+              <h4 style="color:{{ section.settings.block_title_color }}">{{ block.settings.title }}</h4>        
+              {% endif %}   
+              {% if block.settings.text != blank %}                         
+              <p style="color:{{ section.settings.block_text_color }}">{{ block.settings.text }}</p>        
+              {% endif %}
+              {% if block.settings.link_text != blank %}
+              <a href="{{ block.settings.link }}" class="btn">
+                {{ block.settings.link_text }}
+              </a>
+              {% endif %} 
+            </div>  
+            {% endif %}
+
+          </div>  
+          {% endif %} 
+        {% endfor %}   
+       </div>
+       </div>   
+      </div>  
+      {% if section.settings.content_position == 'right' %}
+      {{ content_block }}
+      {% endif %}
+      
+    </div>    
+  </div>
+</div>
+{% endif %}
+
+<style>
+
+  .list-collection-product-items .dt-sc-event-overlay-inner {background:{{section.settings.title_bg_clr}};}
+  .list-collection-product-items .dt-sc-event-overlay-inner p ,.list-collection-product-items .dt-sc-event-overlay-inner a {color:{{section.settings.title_txt_clr}};}
+  .list-collection-product-items .list-collection-products .grid__item:hover .dt-sc-event-overlay-inner{background:{{section.settings.title_hoverbg_clr}};}
+  .list-collection-product-items .list-collection-products .grid__item:hover .dt-sc-event-overlay-inner p,.list-collection-product-items .list-collection-products .grid__item:hover .dt-sc-event-overlay-inner a{color:{{section.settings.title_hovertxt_clr}};}
+  .list-collection-product-items .dt-sc-event-overlay-inner {box-shadow:0 5px 5px {{ section.settings.boxshadow_clr | color_modify: 'alpha', 0.05 }}; }
+  .list-collection-product-items .list-collection-products .grid__item:hover .dt-sc-event-overlay-inner {box-shadow:0 7px 7px {{ section.settings.boxshadow_clr | color_modify: 'alpha', 0.05 }}; }
+  .list-collection-product-items .list-collection-products .pickgradient.grid-link::before {opacity:0;border:5px solid {{ section.settings.list_gridborder_clr | color_modify: 'alpha', 1 }};}
+  .list-collection-product-items .list-collection-products .pickgradient-products:hover .pickgradient.grid-link::before {opacity:1;}
+  .list-collection-product-items .owl-prev a:hover, .list-collection-product-items .owl-next a:hover { background:{{ section.settings.left_link_txt_clr }}; }  
+  
+  .category-listing-type .category-listing_inner ul li a { color:{{ section.settings.linkedlist_color }}; }
+  .category-listing-type .category-listing_inner ul li a:hover { color:{{ section.settings.linkedlist_hover_color }}; }
+  .category-listing-type .category-listing_inner ul li:before { background-color:{{ section.settings.linkedlist_color }}; }
+  .category-listing-type .category_heading h4:before { background:{{section.settings.title_bg_color}}; }
+  .category-listing-type .category_heading img { background:{{section.settings.icon_bg_clr}}; border-color:{{section.settings.sub_title_clr }} !important; }
+
+</style>
+
+
+{% schema %}
+{
+"name": "Featured Collections",
+"class": "index-section featured-collection",
+"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": "text",
+"id": "title",
+"label": "Heading",
+"default": "Featured Collections"
+},	
+{
+"type": "color",
+"id": "title_clr",
+"label": "Title Color",
+"default":"#000"
+},
+{
+"type": "select",
+"id": "content_position",
+"label": "Heading Position",
+"options": [
+{
+"value": "default",
+"label": "center"
+},
+{
+"value": "left",
+"label": "left"
+},
+{
+"value": "right",
+"label": "right"
+}
+]
+},
+{
+"type": "select",
+"id": "title_position",
+"label": "Content Position",
+"options": [
+{
+"value": "top",
+"label": "Top"
+},
+{
+"value": "bottom",
+"label": "Bottom"
+}
+]
+},
+{
+"type": "select",
+"id": "layout_setup",
+"label": "Container Split",
+"options": [
+{
+"value": "75%",
+"label": "75/25"
+},
+{
+"value": "50%",
+"label": "50/50"
+},
+{
+"value": "67%",
+"label": "67/33"
+},
+{
+"value": "100%",
+"label": "100/100"
+}
+],
+"default": "75%"
+},
+{
+"type": "checkbox",
+"id": "enable_carousel",
+"label": "Enable Carousel",
+"default": false
+},	
+{
+"type": "textarea",
+"id": "small_title",
+"label": "Description"
+},	
+{
+"type": "color",
+"id": "text_clr",
+"label": "Text color",
+"default":"#000"
+},
+{
+"type": "text",
+"id": "left_link_text",
+"label": "Left Link Text",
+"default": "Discover"
+},	
+{
+"type": "color",
+"id": "left_link_txt_clr",
+"label": "Link Text color",
+"default":"#fff"
+},	
+{
+"type": "url",
+"id": "left_link",
+"label": "Left Link"   	  
+},
+{
+"type": "header",
+"content": "Icon Type"
+},
+{
+"type": "color",
+"id": "content_bg",
+"label": "Content Bg color",
+"default": "#fbfbfb"
+},
+{
+"type": "color",
+"id": "linkedlist_color",
+"label": "Links color",
+"default": "#ccc"
+},
+{
+"type": "color",
+"id": "linkedlist_hover_color",
+"label": "Links hover color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "sub_title_clr",
+"label": "Heading color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "title_bg_color",
+"label": "Heading bg color",
+"default": "#000"
+}
+],
+"blocks": [
+{
+"type": "default",
+"name": "Collection with count",    
+"settings": [    
+{
+"type": "collection",
+"id": "collection",
+"label": "Pick collection"
+},
+{
+"type": "text",
+"id": "link_text",
+"label": "Link Text"
+}
+]
+},
+{
+"type": "categorylisting",
+"name": "Category Listing",    
+"settings": [    
+{
+"type": "text",
+"id": "sub_title",
+"label": "Heading",
+"default": "Heading"
+},
+
+{
+"type": "link_list",
+"id": "linkedlist",
+"label": "Linked list"
+},
+{
+"type": "image_picker",
+"id": "image",
+"label": "Image"        
+}
+]
+},
+{
+"type": "imagewithtext",
+"name": "Image with text",    
+"settings": [    
+{
+"type": "image_picker",
+"id": "image",
+"label": "Image"
+},
+{
+"type": "text",
+"id": "title",
+"label": "Title",
+"default": "Heading"	
+},
+{
+"type": "textarea",
+"id": "text",
+"label": "Text",
+"default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."	
+},
+{
+"type": "text",
+"id": "link_text",
+"label": "Link Text"
+},
+{
+"type": "url",
+"id": "Link",
+"label": "Link"
+}
+]
+}
+],
+"presets": [
+{
+"name": "Featured Collections",
+"category": "Collection",
+"blocks": [
+{
+"type": "default"
+},
+{
+"type": "categorylisting"
+},        
+{
+"type": "imagewithtext"
+}
+]
+}
+]
+}
+{% endschema %}
+<script type="text/javascript">        
+  $(document).ready(function(){
+    var ListType2 = $(".ListType2");
+    ListType2.owlCarousel({
+      loop:false,
+      autoPlay: false,
+      nav:true,
+      navContainer: ".nav_list_type2_items",
+      navText: ['<a class="prev-arrow"><i class="fa fa-arrow-left"></i></a>',' <a class="next-arrow"><i class="fa fa-arrow-right"></i></a>'],
+      dots: false,
+      responsive:{
+        0:{
+          items:1
+        },
+        568:{
+          items:2
+        },
+        720:{
+          items:2
+        },
+        1024:{
+          items: 3
+        }
+      }
+    });   
+  }); 
+
+</script>
+{% stylesheet %}
+{% endstylesheet %}