rebly-sections 1.0.1 → 1.2.0

package/assets/data/component-library/blog.liquid

@@ -0,0 +1,371 @@
+{% if section.settings.blog_results_per_page != blank %}
+{% assign blog_per_page = section.settings.blog_results_per_page %}
+{% else %}
+{% assign blog_per_page = 12 %}
+{% endif %}
+
+
+{% case section.settings.blog_grid %}
+{% when '1' %}
+{%- assign blog_item_width = 'wide--grid__item post-large--grid__item large--grid__item medium--grid__item small-grid__item' -%}
+{% when '2' %}
+{%- assign blog_item_width = 'wide--one-half post-large--one-half large--one-half medium--one-half small-grid__item' -%}            
+{% when '3' %}
+{%- assign blog_item_width = 'wide--one-third post-large--one-third large--one-half medium--one-half small-grid__item' -%}            
+{% when '4' %}
+{%- assign blog_item_width = 'wide--one-quarter post-large--one-third large--one-half medium--one-half small-grid__item' -%}            
+{% when '5' %}
+{%- assign blog_item_width = 'wide--one-fifth post-large--one-quarter large--one-half medium--one-half small-grid__item' -%}            
+{% endcase %}
+{% paginate blog.articles by blog_per_page %}
+
+<div class="blog-section">
+{% if section.settings.blog_1_img != blank %}
+<div class="blog-header">
+   <div class="blog-featured-image">
+     {% if section.settings.blog_1_img != blank %}
+     <img src="{{ section.settings.blog_1_img | img_url:"2000x" }}" alt="{{ section.settings.banner_title }}">
+     <div class="overlay" style="position:absolute;background:#000;opacity:0.3;top:0;left:0;right:0;width:100%;height:100%;z-index:1;"></div>
+     {% endif %}
+     {% if section.settings.banner_title != blank or section.settings.banner_btn_txt != blank  %}
+     <div class="blog_banner_cnt">
+       <div class="container">
+         <a href="{{ section.settings.banner_btn_link }}"> <h2 style="color:{{ section.settings.banner_title_clr }};">{{ section.settings.banner_title }}</h2></a>
+         {% if section.settings.banner_btn_txt != blank %} <a class="btn" href="{{ section.settings.banner_btn_link }}"> {{ section.settings.banner_btn_txt }}</a>{% endif %}
+       </div>
+     </div>
+     {% endif %}
+   </div>   
+</div>
+{% endif %}
+<div class="container">
+<div class="grid-uniform">
+<div class="blog-title">
+    <h2 class="text-center">{{ blog.title }}</h2>
+  </div>
+  {% if blog.all_tags.size > 0 %}
+  <ul class="blog-tags-section {{ request.path | replace: '/', ' ' }}">
+    {% for tag in blog.all_tags %}
+    {% if current_tags contains tag %}
+    <li class="active">{{ tag | link_to_tag: tag }}</li>
+    {% else %}
+    <li>{{ tag | link_to_tag: tag }}</li>
+    {% endif %}
+    {% endfor %}
+  </ul>
+  {% endif %}
+   <div class="blog_grid_section">
+  {% for article in blog.articles %}
+  <div class="article-item grid__item   {% if section.settings.blog_masonary %} blog-model-mansory {% else %} {{ blog_item_width  }} {% endif %}">
+    <div class="article">
+      {% if section.settings.show_blog_4_img %}
+      {% if article.image %}
+      {% assign image_alt = article.title | escape %}
+      <div class="article-image">
+        {{ article | img_url: 'master' | img_tag: image_alt, 'article__image' | link_to: article.url }}
+      </div>
+      {% endif %}
+      {% endif %}
+      <div class="article-description">   
+        {% if article.tags.size > 0 and section.settings.show_blog_4_tag %}
+        <div class="blog-tag">
+          <i class="fas fa-tag"></i>
+          {% for tag in article.tags %}
+          <a class="blog-tags" href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>{% unless forloop.last %} &#44; {% endunless %}
+          {% endfor %}
+        </div>
+        {% endif %}
+
+        <div class="article-content">				
+          <h4><a href="{{ article.url }}">{{ article.title }}</a></h4>
+          <div class="article-header">
+            {% if section.settings.show_blog_4_date %}
+            <p class="blog-date">
+              <i class="far fa-calendar"></i> <span data-datetime="{{ article.published_at | date: '%Y-%m-%d' }}"><span class="date">{{ article.published_at | date: '%b' }} {{ article.published_at | date: '%d' }} , {{ article.published_at | date: '%Y' }}</span></span>             
+            </p>
+            {% endif %}
+
+            {% if article.comments_enabled? %}
+            {% assign number_of_comments = article.comments_count %}
+            <p class="comments-count"><i class="far fa-comment"></i><a style="color:{{ section.settings.blog_design_commentcolor }};" href="{{ article.url }}#comments">{{  number_of_comments }} {{ 'blogs.comments.comments' | t }}</a></p>
+            {% endif %}
+            {% if section.settings.show_blog_4_author %}            
+            <p class="author">
+              <i class="far fa-user"></i>
+              <span> {{ article.author }}</span>
+            </p> 
+            {% endif %}
+          </div>          
+
+          {% if section.settings.show_blog_4_content %}
+          <p class="blog_desc"> {{ article.excerpt_or_content | strip_html | truncate: 150 }}</p>
+          {% endif %} 
+
+          {% if section.settings.show_blog_4_btn %}
+          <div class="blog-btn">
+            <a href="{{ article.url }}" class="link_text">{{ 'blogs.article.read_more' | t }}</a>
+          </div>
+          {% endif %}
+        </div>
+
+      </div>
+    </div>
+  </div>
+  {% endfor %} 
+  </div>
+  {% if paginate.pages > 1 %}
+  <div class="text-center">
+    {% include 'pagination-default' %}
+  </div>
+  {% endif %}
+</div>
+</div>
+</div>
+{% endpaginate %}
+
+
+<style>
+
+   {% if section.settings.blog_masonary %}
+  .blog-model-mansory { margin-bottom:30px;break-inside: avoid;break-inside: avoid-column; page-break-inside: avoid; -webkit-column-break-inside: avoid;}
+  .blog-section .blog_grid_section {-moz-column-count: {{ section.settings.blog_grid }}; -webkit-column-count: {{ section.settings.blog_grid }}; column-count: {{ section.settings.blog_grid }};  }
+  {% endif %}
+  
+  .blog-post .article .article-content h4 a, .blog-post .comments-count a:hover { color:{{ section.settings.blog_design_4_title }}; }
+  .blog-post .article .article-content:hover h4 a { color:{{ section.settings.blog_design_4_titlehover }}; }
+  .blog-post .article-description { background:{{ section.settings.blog_bg }}; }
+  .blog-post .article-description:hover { background:{{ section.settings.blog_hover_bg }}; }
+
+  .blog-post .article-header .blog-date { background:{{ section.settings.date_bgcolor }};color:{{ section.settings.blog_design_4_datecolor }}; }
+  .blog-post .article-header .author { color:{{ section.settings.blog_design_4_authorcolor }}; }
+  .blog-post .article-header .comments-count { color:{{ section.settings.blog_design_commentcolor }}; }
+  .blog-post .blog-tag a, .blog-post .blog-tag, .blog-post .blog-tag i  {color:{{ section.settings.blog_design_4_tag }};} 
+  .blog-post .blog-tag a:hover {color:{{ section.settings.blog_design_4_taghover }}; }
+  .blog-post .article .blog-btn a { color:{{ section.settings.button_txt_color }}; }
+  .blog-post .article .blog-btn a:hover { color:{{ section.settings.hover_button_txt_color }} ;}
+
+  .blog-section .blog_banner_cnt a.btn { background-color: transparent; border: 2px solid {{ section.settings.banner_btn_clr }}; color: {{ section.settings.banner_btn_clr }}; }
+  .blog-section .blog_banner_cnt a.btn:hover { background-color: {{ section.settings.banner_btn_hvr_bgclr }}; border-color: {{ section.settings.banner_btn_hvr_bgclr }}; color: {{ section.settings.banner_btn_hvrclr }}; }
+
+  .blog-post .article-content .blog-btn a { font-size: 13px; border-bottom: 1px solid {{ section.settings.button_txt_color }}; text-transform: uppercase; text-decoration: none; position: relative; }
+  .blog-post .article-content .blog-btn a:before { bottom: 0; content: ''; height: 1px; margin: auto; position: absolute; width: 0; bottom: -1px; left: 0; background-color: {{ section.settings.hover_button_txt_color }}; }
+  .blog-post .article-content .blog-btn a:after { bottom: 0; content: ''; height: 1px; margin: auto; position: absolute; width: 0; bottom: -1px; right: 0; -webkit-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); -moz-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); -ms-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); -o-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); background-color: {{ section.settings.hover_button_txt_color }}; }
+  
+  .blog-post .article-content .blog-btn a:hover:before { -webkit-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); -moz-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); -ms-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); -o-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); width: 100%; }
+  .blog-post .article-content .blog-btn a:hover:after { background: transparent; width: 100%; }
+
+</style>
+
+{% schema %}
+{
+"name": "Blog Page",
+"settings": [
+{
+"type": "image_picker",
+"id": "blog_1_img",
+"label": "Blog Featured Image",
+"info":"2000x1335"
+},
+{
+"type": "text",
+"id": "banner_title",
+"label": "Banner Title"
+},
+{
+"type": "color",
+"id": "banner_title_clr",
+"label": "Banner Title Color",
+"default":"#000"
+},
+{
+"type": "text",
+"id": "banner_btn_txt",
+"label": "Banner Btn Text",
+"default":"Read More"
+},
+
+{
+"type": "color",
+"id": "banner_btn_clr",
+"label": "Banner Btn Color",
+"default":"#fff"
+},
+{
+"type": "color",
+"id": "banner_btn_hvrclr",
+"label": "Banner Btn Hover Color",
+"default":"#fff"
+},
+{
+"type": "color",
+"id": "banner_btn_hvr_bgclr",
+"label": "Banner Btn Hover Bg Color",
+"default":"#fff"
+},
+{
+"type": "url",
+"id": "banner_btn_link",
+"label": "Banner Link"
+
+},
+{
+"type": "checkbox",
+"id": "blog_masonary",
+"label": "Use Blog Masonary?"
+},
+{
+"type": "select",
+"id": "blog_results_per_page",
+"label": "Blogs per page",
+"default": "12",
+"options": [
+{
+"value": "8",
+"label": "8"
+},
+{
+"value": "9",
+"label": "9"
+},
+{
+"value": "12",
+"label": "12"
+},
+{
+"value": "24",
+"label": "24"
+},
+{
+"value": "36",
+"label": "36"
+},
+{
+"value": "100",
+"label": "100"
+}
+]
+},
+{
+"type": "select",
+"id": "blog_grid",
+"label": "Blog per row (grid only)",
+"default": "4",
+"options": [
+{
+"value": "1",
+"label": "1"
+},
+{
+"value": "2",
+"label": "2"
+},
+{
+"value": "3",
+"label": "3"
+},
+{
+"value": "4",
+"label": "4"
+},
+{
+"value": "5",
+"label": "5"
+}
+]
+},
+
+{
+"type": "checkbox",
+"id": "show_blog_4_content",
+"label": "Display Blog content"
+},
+{
+"type": "checkbox",
+"id": "show_blog_4_img",
+"label": "Display Blog img"
+},
+{
+"type": "checkbox",
+"id": "show_blog_4_author",
+"label": "Display Blog author name"
+},
+{
+"type": "checkbox",
+"id": "show_blog_4_btn",
+"label": "Display Blog button"
+},
+{
+"type": "checkbox",
+"id": "show_blog_4_date",
+"label": "Display Blog date"
+},
+{
+"type": "checkbox",
+"id": "show_blog_4_tag",
+"label": "Display Blog tag"
+},
+{
+"type": "color",
+"id": "blog_bg",
+"label": "Blog Bg",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "blog_design_4_title",
+"label": "Blog  title color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "blog_design_4_titlehover",
+"label": "Blog  title hover color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "blog_design_4_datecolor",
+"label": "Blog date color",
+"default": "#929292"
+},
+{
+"type": "color",
+"id": "blog_design_4_authorcolor",
+"label": "Blog author  color",
+"default": "#929292"
+},
+{
+"type": "color",
+"id": "blog_design_commentcolor",
+"label": "Blog comment color",
+"default": "#929292"
+},
+{
+"type": "color",
+"id": "blog_design_4_tag",
+"label": "Blog tag color",
+"default": "#929292"
+},
+{
+"type": "color",
+"id": "blog_design_4_taghover",
+"label": "Blog tag hover",
+"default": "#000"
+},
+
+{
+"type": "color",
+"id": "button_txt_color",
+"label":"Text color",
+"default": "#000"
+},
+
+{
+"type": "color",
+"id": "hover_button_txt_color",
+"label":"Hover Text color",
+"default": "#000"
+}
+]
+}
+{% endschema %}

package/assets/data/component-library/brands-page.liquid

@@ -0,0 +1,114 @@
+
+{% if section.settings.display_brand and section.blocks.size > 0 %}
+<div class="logo-brands">
+  <div class="grid__item brands-slider" data-brands-slider data-rows="5">
+    {% for block in section.blocks %}
+    <div class="grid__item wide--one-whole post-large--one-half large--one-half medium--one-half small-one-half">
+      <a title="{{ block.settings.title }}" href="{{ block.settings.link }}">
+        {% if block.settings.image != blank %}
+        <img src="{{ block.settings.image | img_url : "200x" }}" alt="{{ block.settings.image.alt }}"/>
+        {% else %}
+        <div class="not_img" style="font-size: 16px;">
+          186 x 74px
+        </div> 
+        {% endif %} 
+      </a>
+    </div>
+    {% endfor %}
+  </div>
+</div>
+{% endif %}
+
+<ul class="azbrandstable">
+  <li class="all-brand">
+    <a class="active readonly" href="javascript:void(0)">All</a>
+  </li>
+
+  {% assign array = "A|B|C|D|E|F|G|H|I|J|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y|Z|#" | split: "|" %}
+
+  {% for item in array %} 
+  <li class="vendor-letter">
+    <a href="javascript:void(0)">
+      {{ item }}
+    </a>
+  </li>
+  {% endfor %}
+</ul> 
+
+<div class="brands-list" data-brands-list>
+  {% assign curr = "" %}
+
+  {% for vendor in shop.vendors %}
+  {% assign first = vendor | strip_html | upcase | truncate: 1, '' %}
+
+  <div class="brand{% unless first == curr %} brand-{{ first }}{% endunless %}"{% if first == curr %} style="display:none"{% endif %}>
+    {% unless first == curr %}   
+    <div class="azbrands-title">
+      {% if first == '1' or first == '2' or first == '3' or first == '4' or first == '5' or first == '6' or first == '7' or first == '8' or first == '9' or first == '0' %}
+      <h3>#</h3>
+      {% else %}
+      <h3>
+        {{ first }}
+      </h3>
+      {% endif %}
+    </div>
+    {% endunless %}
+
+    {% assign curr = first %}
+    <ul class='brand-grid row'>
+      <li class='brand-item grid__item wide--one-whole post-large--one-half large--one-half medium--one-half small-one-half'>
+        {{ vendor | link_to_vendor }}
+      </li>      
+    </ul>
+  </div>
+  {% endfor %}  
+</div>
+
+
+{% schema %}
+  {
+    "name": "Brands Page",
+    "max_blocks": 15,
+    "settings": [
+      {
+        "type": "header",
+        "content": "Brands Page"
+      },
+      {
+        "type": "checkbox",
+        "id": "display_brand",
+        "label": "Display Brands Slider?",
+        "default": true
+      }
+
+      ],
+      "blocks": [
+      {
+        "type": "image",
+        "name": "Image",
+        "settings": [
+          {
+            "type": "image_picker",
+            "id": "image",
+            "label": "Image"
+          },
+          {
+            "type": "text",
+            "id": "title",
+            "label": "Your Brands",
+            "default": "Benjamin Button"
+          },
+		  {
+            "type": "url",
+            "id": "link",
+            "label": "Link",
+            "info": "Optional"
+          }
+        ]
+      }
+    ]
+  }
+{% endschema %}
+
+
+