rebly-sections 1.0.1 → 1.2.0

package/assets/data/component-library/special-offer-area.liquid

@@ -0,0 +1,530 @@
+<!-- Special offer area Start Here -->
+<section class="special-offer-area" id="section-{{ section.id }}">
+  <div class="{% if section.settings.container_style == 'style_1' %}container {% else %} container-fluid{% endif %}">
+    <div class="row align-items-center special-offer-product">
+      <div class="col-md-6 text-{% if section.settings.section_text_align_2 == 'section_text_left' %}left{% elsif section.settings.section_text_align_2 == 'section_text_center' %}center{% elsif section.settings.section_text_align_2 == 'section_text_right' %}right{% endif %}">
+        <figure class="special-offer-product__image">
+          <img src="{% if section.settings.product_img %}{{ section.settings.product_img | img_url: 'master' }}{% else %}http:\/\/via.placeholder.com\/660x650{% endif %}" alt="{{ section.settings.product_img.alt }}">
+        </figure>
+        <div class="special-offer-product__badge">
+          {% if section.settings.discount != '' %}
+          <span class="discount-badge">{{ section.settings.discount }}</span>
+             {% endif %}
+             {% if section.settings.old_price != '' or section.settings.new_price != '' %}
+          <div class="price-box">
+            <span class="regular-price">{{ section.settings.old_price }}</span>
+            <span class="sale-price">{{ section.settings.new_price }}</span>
+          </div>
+             {% endif %}
+        </div>
+      </div>
+      <div class="col-md-6 text-{% if section.settings.section_text_align == 'section_text_left' %}left{% elsif section.settings.section_text_align == 'section_text_center' %}center{% elsif section.settings.section_text_align == 'section_text_right' %}right{% endif %}">
+        {% if section.settings.product_title != '' %}
+        <h3 class="special-offer-product__title mb--20">
+          <a href="{{ section.settings.product_title_url }}">{{ section.settings.product_title }}</a>
+        </h3>
+        {% endif %}
+        {% if section.settings.coundown_date != '' %}
+        <div class="special-offer-product__countdown mb--40 mb-md--30">
+          <div class="product-countdown" data-countdown="{{ section.settings.coundown_date }}">
+          </div>
+        </div>
+        {% endif %}
+         {% if section.settings.banner_button != '' %}
+        <a href="{{ section.settings.banner_button_url }}" class="btn btn-small btn-style-1">{{ section.settings.banner_button }}</a>
+            {% endif %}
+      </div>
+    </div>
+  </div>
+</section>
+<!-- Special offer area End Here -->
+
+
+
+
+{%- style -%}
+  #section-{{ section.id }}{
+    {%- for block in section.blocks -%}
+    {%- case block.type -%}
+    {%- when 'section_margin' -%}
+    margin-top: {{ block.settings.section_margin_top }}px;
+    margin-bottom: {{ block.settings.section_margin_bottom }}px;
+    {%- when 'section_padding' -%}
+    padding-top: {{ block.settings.section_padding_top }}px;
+    padding-bottom: {{ block.settings.section_padding_bottom }}px;
+    {%- when 'section_background' -%}    
+    background: {{ block.settings.section_bg_color }} 
+      {%- if block.settings.section_bg_image -%}url("{{ block.settings.section_bg_image | img_url: 'master' }}"){%- endif -%} no-repeat scroll center center / cover;
+    {%- endcase -%}
+    {%- endfor -%}
+  }
+  @media (min-width: 768px) and (max-width: 991px) {
+    #section-{{ section.id }}{
+      {%- for block in section.blocks -%}
+      {% case block.type %}
+      {%- when 'section_margin' -%}
+      margin-top: {{ block.settings.section_margin_top_md }}px;
+      margin-bottom: {{ block.settings.section_margin_bottom_md }}px;
+      {%- when 'section_padding' -%}
+      padding-top: {{ block.settings.section_padding_top_md }}px;
+      padding-bottom: {{ block.settings.section_padding_bottom_md }}px;
+      {%- endcase -%}
+      {%- endfor -%}
+    }
+  }
+  @media (max-width: 767px) {
+    #section-{{ section.id }}{
+      {%- for block in section.blocks -%}
+      {%- case block.type -%}
+      {%- when 'section_margin' -%}
+      margin-top: {{ block.settings.section_margin_top_xs }}px;
+      margin-bottom: {{ block.settings.section_margin_bottom_xs }}px;
+      {%- when 'section_padding' -%}
+      padding-top: {{ block.settings.section_padding_top_xs }}px;
+      padding-bottom: {{ block.settings.section_padding_bottom_xs }}px;
+      {%- endcase -%}
+      {%- endfor -%}
+    }
+  }
+
+ #section-{{ section.id }} .special-offer-product__title a{
+	color: {{ section.settings.title_color }};
+}
+ #section-{{ section.id }} .special-offer-product__title a:hover{
+	color: {{ section.settings.title_hover_color }};
+}
+
+#section-{{ section.id }} .btn-style-1{
+color: {{ section.settings.button_text_color }};
+background-color: {{ section.settings.button_bg_color }};
+border-color: {{ section.settings.button_border_color }};
+}
+
+#section-{{ section.id }} .btn-style-1:hover {
+color: {{ section.settings.button_text_hover_color }}!important;
+background-color: {{ section.settings.button_bg_hover_color }};
+border-color: {{ section.settings.button_border_hover_color }};
+}
+
+#section-{{ section.id }} .special-offer-product__badge .discount-badge {
+color: {{ section.settings.badge_text_color }};
+    background-color: {{ section.settings.badge_bg_color }};
+}
+
+#section-{{ section.id }} .special-offer-product__badge .price-box span{
+    color: {{ section.settings.price_color }};
+}
+
+
+{%- endstyle -%}
+
+
+
+{% schema %}
+  {
+    "name": "Special Offer",
+    "settings": [
+		{
+          "type": "header",
+          "content": "Container Style"
+        },
+        {
+            "type": "radio",
+            "id": "container_style",
+            "label": "Container Style",
+            "options":[
+              {
+                  "value":"style_1",
+                  "label": "Container"
+              },
+              {
+                  "value":"style_2",
+                  "label": "Container Fluid"
+              }
+            ],
+
+           "default": "style_2"
+        },
+		{
+		  "type": "header",
+          "content": "Image Area"
+        },
+		{
+          "type": "select",
+          "id": "section_text_align_2",
+          "label": "Button Text Align",
+		  "options":[
+				{
+					"label": "Left",
+					"value": "section_text_left"
+				},
+				{
+					"label": "Center",
+					"value": "section_text_center"
+				},
+				{
+					"label": "Right",
+					"value": "section_text_right"
+				}
+			],
+			"default": "section_text_center"
+      	},
+        {
+          "type": "image_picker",
+          "id": "product_img",
+          "label": "Image",
+          "info": "Recommended Size: 660 x 650px"
+        },
+		{
+		  "type": "header",
+          "content": "Discount"
+        },
+		{
+          "type": "text",
+          "id": "discount",
+          "label": "Discount",
+          "default": "-40%"
+      	},
+		{
+		  "type": "header",
+          "content": "Price New/Old"
+        },
+		{
+          "type": "text",
+          "id": "old_price",
+          "label": "Old Price",
+          "default": "$89.99"
+      	},
+		{
+          "type": "text",
+          "id": "new_price",
+          "label": "New Price",
+          "default": "$53.99"
+      	},
+		{
+		  "type": "header",
+          "content": "Text Area"
+        },
+		{
+          "type": "select",
+          "id": "section_text_align",
+          "label": "Text Align",
+		  "options":[
+				{
+					"label": "Left",
+					"value": "section_text_left"
+				},
+				{
+					"label": "Center",
+					"value": "section_text_center"
+				},
+				{
+					"label": "Right",
+					"value": "section_text_right"
+				}
+			],
+			"default": "section_text_center"
+      	},
+		{
+          "type": "text",
+          "id": "product_title",
+          "label": "Product Title",
+          "default": "Loose-Fiting Sweatshirt With Ribbed Trims"
+      	},
+		{
+          "type": "url",
+          "id": "product_title_url",
+          "label": "URL"
+      	},
+		{
+		  "type": "header",
+          "content": "Coundown Date"
+        },
+		{
+          "type": "text",
+          "id": "coundown_date",
+          "label": "Date",
+          "default": "2020/05/01"
+      	},
+        {
+          "type": "text",
+          "id": "banner_button",
+          "label": "Button Title",
+          "default": "Shop Now"
+        },
+        {
+          "type": "url",
+          "id": "banner_button_url",
+          "label": "URL"
+        },
+		{
+          "type": "header",
+          "content": "Color"
+        }, 
+        {
+           "type": "color",
+           "id": "badge_text_color",
+           "label": "Badge Text Color",
+           "default": "#fff"
+        },
+        {
+           "type": "color",
+           "id": "badge_bg_color",
+           "label": "Badge BG Color",
+           "default": "#d0021b"
+        }, 
+        {
+           "type": "color",
+           "id": "price_color",
+           "label": "Price Color",
+           "default": "#282828"
+        }, 
+        {
+           "type": "color",
+           "id": "title_color",
+           "label": "Title Color",
+           "default": "#282828"
+        }, 
+        {
+           "type": "color",
+           "id": "title_hover_color",
+           "label": "Title Hover Color",
+           "default": "#cf987e"
+        }, 
+        {
+           "type": "color",
+           "id": "button_text_color",
+           "label": "Button Text Color",
+           "default": "#fff"
+        }, 
+        {
+           "type": "color",
+           "id": "button_bg_color",
+           "label": "Button BG Color",
+           "default": "#000"
+        },
+        {
+           "type": "color",
+           "id": "button_border_color",
+           "label": "Button Border Color",
+           "default": "#000"
+        },
+        {
+           "type": "color",
+           "id": "button_text_hover_color",
+           "label": "Button Text Hover Color",
+           "default": "#fff"
+        },
+        {
+           "type": "color",
+           "id": "button_bg_hover_color",
+           "label": "Button BG Hover Color",
+           "default": "#cf987e"
+        },
+        {
+           "type": "color",
+           "id": "button_border_hover_color",
+           "label": "Button Border Hover Color",
+           "default": "#cf987e"
+        }
+	],
+	"blocks":[
+	   {
+          "type": "section_padding",
+          "name": "Section Padding",
+		  "limit": 1,
+          "settings": [
+            {
+			  "type": "header",
+			  "content": "Large/Desktop Device"
+			},
+			{
+			  "type": "range",
+			  "id": "section_padding_top",
+			  "min": 0,
+			  "max": 150,
+			  "step": 5,
+			  "label": "Padding Top",
+			  "unit": "px",
+			  "default": 0
+			},
+			{
+			  "type": "range",
+			  "id": "section_padding_bottom",
+			  "min": 0,
+			  "max": 150,
+			  "step": 5,
+			  "label": "Padding Bottom",
+			  "unit": "px",
+			  "default": 100
+			},
+			{
+			  "type": "header",
+			  "content": "Tablet Device"
+			},
+			{
+			  "type": "range",
+			  "id": "section_padding_top_md",
+			  "min": 0,
+			  "max": 150,
+			  "step": 5,
+			  "label": "Padding Top",
+			  "unit": "px",
+			  "default": 0
+			},
+			{
+			  "type": "range",
+			  "id": "section_padding_bottom_md",
+			  "min": 0,
+			  "max": 150,
+			  "step": 5,
+			  "label": "Padding Bottom",
+			  "unit": "px",
+			  "default": 80
+			},
+			{
+			  "type": "header",
+			  "content": "Mobile Device"
+			},
+			{
+			  "type": "range",
+			  "id": "section_padding_top_xs",
+			  "min": 0,
+			  "max": 150,
+			  "step": 5,
+			  "label": "Padding Top",
+			  "unit": "px",
+			  "default": 0
+			},
+			{
+			  "type": "range",
+			  "id": "section_padding_bottom_xs",
+			  "min": 0,
+			  "max": 150,
+			  "step": 5,
+			  "label": "Padding Bottom",
+			  "unit": "px",
+			  "default": 60
+			}
+          ]
+       },
+	   {
+          "type": "section_margin",
+          "name": "Section Margin",
+		  "limit": 1,
+          "settings": [
+            {
+			  "type": "header",
+			  "content": "Large/Desktop Device"
+			},
+			{
+			  "type": "range",
+			  "id": "section_margin_top",
+			  "min": 0,
+			  "max": 150,
+			  "step": 5,
+			  "label": "Margin Top",
+			  "unit": "px",
+			  "default": 0
+			},
+			{
+			  "type": "range",
+			  "id": "section_margin_bottom",
+			  "min": 0,
+			  "max": 150,
+			  "step": 5,
+			  "label": "Margin Bottom",
+			  "unit": "px",
+			  "default": 0
+			},
+			{
+			  "type": "header",
+			  "content": "Tablet Device"
+			},
+			{
+			  "type": "range",
+			  "id": "section_margin_top_md",
+			  "min": 0,
+			  "max": 150,
+			  "step": 5,
+			  "label": "Margin Top",
+			  "unit": "px",
+			  "default": 0
+			},
+			{
+			  "type": "range",
+			  "id": "section_margin_bottom_md",
+			  "min": 0,
+			  "max": 150,
+			  "step": 5,
+			  "label": "Margin Bottom",
+			  "unit": "px",
+			  "default": 0
+			},
+			{
+			  "type": "header",
+			  "content": "Mobile Device"
+			},
+			{
+			  "type": "range",
+			  "id": "section_margin_top_xs",
+			  "min": 0,
+			  "max": 150,
+			  "step": 5,
+			  "label": "Margin Top",
+			  "unit": "px",
+			  "default": 0
+			},
+			{
+			  "type": "range",
+			  "id": "section_margin_bottom_xs",
+			  "min": 0,
+			  "max": 150,
+			  "step": 5,
+			  "label": "Margin Bottom",
+			  "unit": "px",
+			  "default": 0
+			}
+          ]
+       },
+	   {
+          "type": "section_background",
+          "name": "Section Background",
+		  "limit": 1,
+          "settings": [
+            {
+			  "type": "image_picker",
+			  "id": "section_bg_image",
+			  "label": "BG Image"
+			},
+			{
+			  "type": "color",
+			  "id": "section_bg_color",
+			  "label": "BG Color",
+			  "default": "#ffffff"
+			}
+          ]
+       }
+	],
+	"presets": [
+		{
+		  "name": "Special Offer",
+		  "category": " about",
+		  "blocks":[
+				{
+					"type": "section_padding"
+				},
+				{
+					"type": "section_background"
+				}
+			]
+		}
+	]
+  }
+{% endschema %}
+
+{% stylesheet %}
+{% endstylesheet %}
+
+{% javascript %}
+{% endjavascript %}