rebly-sections 1.0.1 → 1.2.0

package/assets/data/component-library/logo-bar.liquid

@@ -0,0 +1,314 @@
+{%- render 'section-background-start' -%}
+<div id="logo-bar-{{ section.id }}" class="container{% if section.settings.full_width %}-fluid{% endif %}{% render 'section-gutters-nobkg' %}" data-section-id="{{ section.id }}" data-section-type="logo-bar">
+  <div class="row flex">
+    {%- assign heading_pos = section.settings.heading_pos -%}
+    {%- if heading_pos == 'left' and section.settings.title != blank -%}
+    <div class="col-xs-12 col-sm-5">
+      {%- render 'section-heading' with heading_align: 'left' -%}
+    </div>
+    {%- endif -%}
+    {%- if heading_pos == 'above' and section.settings.title != blank -%}
+    <div class="col-xs-12">
+      {%- render 'section-heading' -%}
+    </div>
+    {%- endif -%}
+    {%- if heading_pos == 'right' and section.settings.title != blank -%}
+    <div class="col-xs-12 hidden-sm hidden-md hidden-lg">
+      {%- render 'section-heading' -%}
+    </div>
+    {%- endif -%}
+    <div class="section__content col-xs-12{% if heading_pos != 'above' %} col-sm-7{% endif %}">
+      {%- if section.blocks.size > 0 -%}
+        {%- assign item_size = section.settings.item_size -%}
+        {%- if item_size == 'very-small' -%}
+          {%- assign column_count_org = 6 -%}
+          {%- assign threshold_mobile = 2 -%}
+        {%- elsif item_size == 'small' -%}
+          {%- assign column_count_org = 5 -%}
+          {%- assign threshold_mobile = 2 -%}
+        {%- elsif item_size == 'medium' -%}
+          {%- assign column_count_org = 4 -%}
+          {%- assign threshold_mobile = 2 -%}
+        {%- elsif item_size == 'large' -%}
+          {%- assign column_count_org = 3 -%}
+          {%- assign threshold_mobile = 2 -%}
+        {%- else -%}
+          {%- assign column_count_org = 2 -%}
+          {%- assign threshold_mobile = 1 -%}  
+        {%- endif -%}
+        {%- assign total_line = 1 -%}
+        {%- if section.settings.slider_enable and section.settings.slider_two_line -%}
+          {%- assign total_line = 2 -%}
+        {%- endif -%}
+        {%- if section.settings.slider_enable -%}
+          {%- unless total_line > 1 -%}
+            {%- assign data_slider = '{"adaptiveHeight":false,"autoplay": true,"autoplaySpeed": 2000,"slidesToShow": ' | append: column_count_org | append: ',"slidesToScroll":1,"responsive":[{"breakpoint": 768,"settings": {"slidesToShow":3}}]}' -%}
+          {%- else -%} 
+            {%- assign data_slider = '{"adaptiveHeight":false,"autoplay": true,"autoplaySpeed": 2000,"slidesToShow": 1,"slidesToScroll":1,"rows":2,"slidesPerRow":' | append: column_count_org | append: ',"responsive":[{"breakpoint": 768,"settings": {"slidesToShow": 1,"slidesToScroll":1,"slidesPerRow":3}}]}' -%} 
+          {%- endunless -%}
+        {%- endif -%}
+        <div class="grid grid--{{ section.settings.item_size }} logo-bar{% if section.settings.slider_enable %} use-slider{% if total_line > 1 %} slick-rows{% endif %}{% endif %}"{% if section.settings.slider_enable %} data-slider='{{ data_slider }}'{% endif %}>
+          {%- for block in section.blocks -%}
+            {%- assign threshold = column_count_org | times: total_line -%}
+            {%- assign threshold_mobile = threshold_mobile | times: total_line -%}
+            {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
+            <div class="grid__item{% if forloop.index > threshold %} ov-slider-tb{% endif %}{% if forloop.index > threshold_mobile %} ov-slider-mb{% endif %}" {{ block.shopify_attributes }}>
+              {%- if block.settings.image != blank and block.settings.image.alt != blank -%}
+                {%- assign logo_image_title = block.settings.image.alt -%}
+              {%- elsif block.settings.image != blank -%}
+                {%- assign logo_image_title = block.settings.image.src | split: '/' | last -%}
+              {%- else -%}
+                {%- assign logo_image_title = 'logo brand' -%}  
+              {%- endif -%}
+              {%- if block.settings.link != blank -%}
+                <a href="{{ block.settings.link }}" class="logo-bar__link img-container" title="{{ logo_image_title | escape }}" style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;">
+              {%- else -%}
+                <div class="img-container"{% if block.settings.image != blank %} style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}>
+              {%- endif -%}
+              {%- if block.settings.image != blank -%}
+                <img data-aspectratio="{{ block.settings.image.aspect_ratio }}"
+              data-src="{{ img_url }}"
+              data-sizes="auto" class="logo-bar__image img-responsive img-abs lazyload w100" alt="{{ logo_image_title }}"{% render 'img-one-pixel' %}/>
+              {%- else -%}
+                  {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
+              {%- endif -%}
+              {% if block.settings.link != blank %}
+                </a>
+              {%- else -%}
+                </div>  
+              {% endif %}
+            </div>
+          {%- endfor -%}
+        </div>
+      {%- endif -%}
+      {%- if section.blocks.size == 0 -%}
+        {%- render 'no-blocks' -%}
+      {%- endif -%}
+    </div>
+    {%- if heading_pos == 'right' and section.settings.title != blank -%}
+    <div class="col-xs-12 col-sm-5 hidden-xs">
+      {%- render 'section-heading' with heading_align: 'right' -%}
+    </div>
+    {%- endif -%}
+  </div>
+</div>
+{%- render 'section-background-end' -%}
+{% style %}{%- render 'preload-logo-bar.css' -%}{% endstyle %}
+{% schema %}
+  {
+    "name": "Logo list",
+    "tag": "section",
+    "max_blocks": 12,
+    "settings": [
+      {
+        "type": "paragraph",
+        "content": "[View the guide for this section](https://vodoma-docs.boostheme.com/dynamic-sections/banner-and-image/logo-list)"
+      },
+      {
+        "type": "header",
+        "content": "Background"
+      },
+      {
+        "type": "checkbox",
+        "id": "bkg_enable",
+        "label": "Enable",
+        "default": false
+      },
+      {
+        "type": "color",
+        "id": "section_bkg",
+        "label": "Pick a color"
+      },
+      {
+        "type": "image_picker",
+        "id": "section_bkg_image",
+        "label": "Background image"
+      },
+      {
+        "type": "radio",
+        "id": "section_bkg_gutter",
+        "label": "Background size",
+        "options": [
+          {
+            "value": "small",
+            "label": "Small"
+          },
+          {
+            "value": "medium",
+            "label": "medium"
+          },
+          {
+            "value": "high",
+            "label": "High"
+          }
+        ],
+        "default": "high"
+      },
+      {
+        "type": "radio",
+        "id": "section_bkg_style",
+        "label": "Background image style",
+        "options": [
+          {
+            "value": "cover",
+            "label": "Cover"
+          },
+          {
+            "value": "contain",
+            "label": "Contain"
+          }
+        ],
+        "default": "cover"
+      },
+      {
+        "type": "header",
+        "content": "Section Gutters"
+      },
+      {
+        "type": "checkbox",
+        "id": "top_gutter",
+        "label": "Enable top gutter",
+        "default": true
+      },
+      {
+        "type": "checkbox",
+        "id": "bottom_gutter",
+        "label": "Enable bottom gutter",
+        "default": true
+      },
+      {
+        "type": "header",
+        "content": "General Settings"
+      },
+      {
+        "type": "text",
+        "id": "title",
+        "label": "Heading",
+        "default": "Logo list"
+      },
+      {
+        "type": "text",
+        "id": "sub_title",
+        "label": "Sub heading"
+      },
+      {
+        "type": "select",
+        "id": "heading_pos",
+        "label": "Heading position",
+        "options": [
+          {
+            "value": "left",
+            "label": "Left"
+          },
+          {
+            "value": "right",
+            "label": "Right"
+          },
+          {
+            "value": "above",
+            "label": "Above"
+          }
+        ],
+        "default": "right"
+      },
+      {
+        "type": "select",
+        "id": "item_size",
+        "label": "Choose item size",
+        "info": "You can change item size to change the number of products per row",
+        "options": [
+          {
+            "value": "very-small",
+            "label": "Very Small"
+          },
+          {
+            "value": "small",
+            "label": "Small"
+          },
+          {
+            "value": "medium",
+            "label": "Medium"
+          },
+          {
+            "value": "large",
+            "label": "Large"
+          },
+          {
+            "value": "very-large",
+            "label": "Very Large"
+          }
+        ],
+        "default": "large"
+      },
+      {
+        "type": "checkbox",
+        "id": "full_width",
+        "label": "Wide display"
+      },
+      {
+        "type": "header",
+        "content": "Slider Settings"
+      },
+      {
+        "type": "checkbox",
+        "id": "slider_enable",
+        "label": "Enable",
+        "default": true
+      },
+      {
+        "type": "checkbox",
+        "id": "slider_two_line",
+        "label": "Show logo list in two lines",
+        "default": false
+      }
+    ],
+    "blocks": [
+      {
+        "type": "logo_image",
+        "name": "Logo",
+        "settings": [
+          {
+            "type": "image_picker",
+            "id": "image",
+            "label": "Image"
+          },
+          {
+            "type": "url",
+            "id": "link",
+            "label": "Link",
+            "info": "Optional"
+          }
+        ]
+      }
+    ],
+    "presets": [
+      {
+        "name": "Logo list",
+        "category": "Image",
+        "blocks": [
+          {
+            "type": "logo_image"
+          },
+          {
+            "type": "logo_image"
+          },
+          {
+            "type": "logo_image"
+          },
+          {
+            "type": "logo_image"
+          },
+          {
+            "type": "logo_image"
+          },
+          {
+            "type": "logo_image"
+          },
+          {
+            "type": "logo_image"
+          }
+        ]
+      }
+    ]
+  }
+{% endschema %}

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

@@ -0,0 +1,367 @@
+{% if section.blocks.size > 0 %}
+<section class="lookbook-content" id="lookbook-{{ section.id }}" style="float:left;width:100%;">
+  <div class="lookbook-custom" style="float:left;width:100%;">
+    <div class="container">
+      <div class="section-header">
+        <h2 class="section-header--title">{{ section.settings.page_title }} </h2>
+      </div>
+
+      <div class="rte">
+        {{ page.content }}
+      </div>
+
+      <div class="grid-uniform" data-layout="masonry" data-isotope='{ "itemSelector": "[data-gridItem]", "layoutMode": "masonry" }'>
+        {% for block in section.blocks %}
+
+        {% if block.settings.size_image == 'normal' %}
+        {%- assign grid_item_width = 'grid__item wide--one-half post-large--one-half large--one-half medium--one-half small--grid__item' -%}
+        {% else %}
+        {%- assign grid_item_width = 'grid__item' -%}
+        {% endif %}
+
+        {% if block.settings.dpl_slide_img %}
+        <div data-gridItem class="item {{ grid_item_width }}">
+          <div class="images-contain">
+            {% if block.settings.image_slide != blank %}
+
+            {%- assign img_url = block.settings.image_slide | img_url: 'master' -%}
+
+            <a href="{{ block.settings.link }}" class="slide-image">
+              <img src="{{ img_url }}" alt="{{ block.settings.image_slide.alt | default: shop.name }}">
+            </a>
+
+            {% else %}
+
+            <div class="not_img">
+              270 x 380px
+            </div>   
+            {% endif %}
+
+            {% if block.settings.lb_product_1 != blank %}
+            <div class="select-icon lb-icon-1-{{ block.id }}" data-lookbook-icon data-handle="{{ block.settings.lb_product_1 }}" style="top:{{ block.settings.top_position_1 }}%; left:{{ block.settings.left_position_1 }}%;">
+              <i class="fas fa-circle"></i>
+            </div>
+            {% endif %}
+
+            {% if block.settings.lb_product_2 != blank %}
+            <div class="select-icon lb-icon-2-{{ block.id }}" data-lookbook-icon data-handle="{{ block.settings.lb_product_2 }}" style="top:{{ block.settings.top_position_2 }}%; left:{{ block.settings.left_position_2 }}%;">
+              <i class="fas fa-circle"></i>
+            </div>
+            {% endif %}
+
+            {% if block.settings.lb_product_3 != blank %}
+            <div class="select-icon lb-icon-3-{{ block.id }}" data-lookbook-icon data-handle="{{ block.settings.lb_product_3 }}" style="top:{{ block.settings.top_position_3 }}%; left:{{ block.settings.left_position_3 }}%;">
+              <i class="fas fa-circle"></i>
+            </div>
+            {% endif %}
+
+            <style type="text/css">
+              #lookbook-{{section.id}} .lb-icon-1-{{ block.id }} .fa-circle {
+                background-color: {{ block.settings.dots_bg_color_1 | color_modify: "alpha" , 0.3 }};width:25px;height:25px;line-height:25px;text-align:center;border-radius:50%;font-size:12px;color:{{ block.settings.dots_color_1 }};
+              }
+
+
+
+              #lookbook-{{section.id}} .lb-icon-1-{{ block.id }} .fa-circle{
+                box-shadow:0 0 0 3px  {{ block.settings.dots_shadow_color_1 | color_modify: 'alpha', 0.9 }};
+              } 
+
+              #lookbook-{{section.id}} .lb-icon-1-{{ block.id }} .fa-circle:hover { background-color: {{ block.settings.dots_hoverbg_color_1 | color_modify: "alpha" , 0.3 }};color:{{ block.settings.dots_hovercolor_1 }};}
+
+
+              #lookbook-{{section.id}} .lb-icon-2-{{ block.id }} .fa-circle {
+                background-color: {{ block.settings.dots_bg_color_2 | color_modify: "alpha" , 0.3 }};width:25px;height:25px;line-height:25px;text-align:center;border-radius:50%;font-size:12px;color:{{ block.settings.dots_color_2 }};
+              }
+
+              #lookbook-{{section.id}} .lb-icon-2-{{ block.id }} .fa-circle:hover { background-color: {{ block.settings.dots_hoverbg_color_2 | color_modify: "alpha" , 0.3}};color:{{ block.settings.dots_hovercolor_2 }};}
+
+
+
+              #lookbook-{{section.id}} .lb-icon-2-{{ block.id }} .fa-circle{
+                box-shadow:0 0 0 3px {{ block.settings.dots_shadow_color_2 | color_modify: 'alpha', 0.9 }};
+              } 
+
+              #lookbook-{{section.id}} .lb-icon-3-{{ block.id }} .fa-circle {
+                background-color: {{ block.settings.dots_bg_color_3 | color_modify: "alpha" , 0.3 }};width:25px;height:25px;line-height:25px;text-align:center;border-radius:50%;font-size:12px;color:{{ block.settings.dots_color_3 }};
+              }
+
+              #lookbook-{{section.id}} .lb-icon-3-{{ block.id }} .fa-circle:hover { background-color: {{ block.settings.dots_hoverbg_color_3 | color_modify: "alpha" , 0.3 }};color:{{ block.settings.dots_hovercolor_3 }};}
+
+              #lookbook-{{section.id}} .lb-icon-3-{{ block.id }} .fa-circle{
+                box-shadow:0 0 0 3px {{ block.settings.dots_shadow_color_3 | color_modify: 'alpha', 0.9 }};
+              } 
+            </style> 
+          </div>                  
+        </div>
+        {% endif %}
+        {% endfor %}
+      </div>
+    </div>
+  </div> 
+</section>
+
+{% if section.settings.display_product_detail_share %}
+<div class="container">
+  <div class="share_toolbox justify-content-center">  
+    {{ section.settings.share_text }}
+    <div class="addthis_inline_share_toolbox"></div>
+    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-595b0ea2fb9c5869"></script>
+  </div>
+  {% endif %}
+
+  {% if section.settings.button != blank %}
+  <div class="button-action text-center">
+    <a href="{{ section.settings.link }}" class="btn">
+      {{ section.settings.button }}
+    </a>
+  </div>
+  {% endif %}
+</div>
+{% endif %}
+
+
+{% schema %}
+{
+"name": "Lookbook Custom",
+"max_blocks": 20,
+"settings": [ 
+
+{
+"type": "text",
+"id": "page_title",
+"label": "Page Title",
+"default":"Lookbook Page"
+},
+{
+"type": "checkbox",
+"id": "display_product_detail_share",
+"label": "Display Product Share?",
+"default": true
+},
+{
+"type": "text",
+"id": "share_text",
+"label": "Share Text",
+"default": "Share"
+},
+{
+"type": "text",
+"id": "button",
+"label": "Lookbook Button"
+},
+{
+"type": "url",
+"id": "link",
+"label": "Lookbook link"
+}           
+],
+
+"blocks" : [
+{
+"type": "image",
+"name": "Image",
+
+"settings":[
+{
+"type": "checkbox",
+"id": "dpl_slide_img",
+"label" : "Enable",
+"default" : true
+},
+{
+"type": "image_picker",
+"id": "image_slide",
+"label" : "Select Image",
+"info": "Recommended Image: Width x Height (768px x 960)px"
+}, 
+{
+"type": "select",
+"id": "size_image",
+"label": "Size Image",
+"default": "normal",
+"options": [
+{
+"value": "normal",
+"label": "Normal"
+},
+{
+"value": "large",
+"label": "Large"
+}         
+]
+},
+{
+"type": "header",
+"content": "Lookbook Product",
+"info" : "======================="
+},
+{
+"type" : "header",
+"content" : "Product 1"
+},
+{
+"type" : "product",
+"id" : "lb_product_1",
+"label" : "Select Product"
+},
+{
+"type" : "text",
+"id" : "top_position_1",
+"label" : "Top Position",
+"default" : "10",
+"info" : "Unit %" 
+},
+{
+"type" : "text",
+"id" : "left_position_1",
+"label" : "Left Position",
+"default" : "10",
+"info" : "Unit %" 
+},
+{
+"type" : "color",
+"id" : "dots_color_1",
+"label" : "Select Icon Color",
+"default" : "#fff"
+},
+{
+"type" : "color",
+"id" : "dots_bg_color_1",
+"label" : "Select Icon Background color",
+"default" : "#323232"			
+},
+{
+"type" : "color",
+"id" : "dots_hoverbg_color_1",
+"label" : "Select Icon Hover Background color",
+"default" : "#323232"			
+},
+{
+"type" : "color",
+"id" : "dots_hovercolor_1",
+"label" : "Select Icon Hover color",
+"default" : "#323232"			
+},
+{
+"type" : "color",
+"id" : "dots_shadow_color_1",
+"label" : "Select Icon Shadow Color with opacity 30%",
+"default" : "#fff",
+"info" : "======================="
+},
+
+{
+"type" : "header",
+"content" : "Product 2"
+},
+{
+"type" : "product",
+"id" : "lb_product_2",
+"label" : "Select Product"
+},
+{
+"type" : "text",
+"id" : "top_position_2",
+"label" : "Top Position",
+"default" : "10",
+"info" : "Unit %" 
+},
+{
+"type" : "text",
+"id" : "left_position_2",
+"label" : "Left Position",
+"default" : "10",
+"info" : "Unit %" 
+},
+{
+"type" : "color",
+"id" : "dots_color_2",
+"label" : "Select Icon Color",
+"default" : "#fff"
+},
+{
+"type" : "color",
+"id" : "dots_bg_color_2",
+"label" : "Select Icon Background color",
+"default" : "#323232"			
+},
+
+{
+"type" : "color",
+"id" : "dots_hoverbg_color_2",
+"label" : "Select Icon Hover Background color",
+"default" : "#323232"			
+},
+{
+"type" : "color",
+"id" : "dots_hovercolor_2",
+"label" : "Select Icon Hover color",
+"default" : "#323232"			
+},
+{
+"type" : "color",
+"id" : "dots_shadow_color_2",
+"label" : "Select Icon Shadow Color with opacity 30%",
+"default" : "#fff",
+"info" : "======================="
+},
+
+{
+"type" : "header",
+"content" : "Product 3"
+},
+{
+"type" : "product",
+"id" : "lb_product_3",
+"label" : "Select Product"
+},
+{
+"type" : "text",
+"id" : "top_position_3",
+"label" : "Top Position",
+"default" : "10",
+"info" : "Unit %" 
+},
+{
+"type" : "text",
+"id" : "left_position_3",
+"label" : "Left Position",
+"default" : "10",
+"info" : "Unit %" 
+},
+{
+"type" : "color",
+"id" : "dots_color_3",
+"label" : "Select Icon Color",
+"default" : "#fff"
+},
+{
+"type" : "color",
+"id" : "dots_bg_color_3",
+"label" : "Select Icon Background color",
+"default" : "#323232"			
+},
+{
+"type" : "color",
+"id" : "dots_hoverbg_color_3",
+"label" : "Select Icon Hover Background color",
+"default" : "#323232"			
+},
+{
+"type" : "color",
+"id" : "dots_hovercolor_3",
+"label" : "Select Icon Hover color",
+"default" : "#323232"			
+},
+{
+"type" : "color",
+"id" : "dots_shadow_color_3",
+"label" : "Select Icon Shadow Color with opacity 30%",
+"default" : "#fff",
+"info" : "======================="
+}
+]
+}
+]
+}
+{% endschema %}