feat: add slider template
diff --git a/erpnext/shopping_cart/web_template/hero_slider/hero_slider.html b/erpnext/shopping_cart/web_template/hero_slider/hero_slider.html
index e69de29..e8b7974 100644
--- a/erpnext/shopping_cart/web_template/hero_slider/hero_slider.html
+++ b/erpnext/shopping_cart/web_template/hero_slider/hero_slider.html
@@ -0,0 +1,112 @@
+{%- macro slide(image, title, subtitle, action, label, index, align="Left", theme="Dark") -%}
+{%- set align_class = resolve_class({
+ 'text-right': align == 'Right',
+ 'text-centre': align == 'Center',
+ 'text-left': align == 'Left',
+}) -%}
+
+{%- set heading_class = resolve_class({
+ 'text-white': theme == 'Dark',
+ '': theme == 'Light',
+}) -%}
+<div class="carousel-item {{ 'active' if index=='1' else ''}}" style="height: 450px;">
+ <img class="d-block h-100 w-100" style="object-fit: cover;" src="{{ image }}" alt="{{ title }}">
+ {%- if title or subtitle -%}
+ <div class="carousel-body container d-flex {{ align_class }}">
+ <div class="carousel-content align-self-center">
+ {%- if title -%}<h2 class="{{ heading_class }}">{{ title }}</h2>{%- endif -%}
+ {%- if subtitle -%}<p class="text-muted mt-2">{{ subtitle }}</p>{%- endif -%}
+ {%- if action -%}
+ <a href="{{ action }}" class="btn btn-primary mt-3">
+ {{ label }}
+ </a>
+ {%- endif -%}
+ </div>
+ </div>
+ {%- endif -%}
+</div>
+{%- endmacro -%}
+
+<div id="{{ slider_name }}" class="section-carousel carousel slide" data-ride="carousel">
+ {%- if show_indicators -%}
+ <ol class="carousel-indicators">
+ {%- for index in ['1', '2', '3', '4', '5'] -%}
+ {%- if values['slide_' + index + '_image'] -%}
+ <li data-target="#{{ slider_name }}" data-slide-to="{{ frappe.utils.cint(index) - 1 }}" class="{{ 'active' if index=='1' else ''}}"></li>
+ {%- endif -%}
+ {%- endfor -%}
+ </ol>
+ {%- endif -%}
+ <div id="{{ slider_name }}423243" class="carousel-inner">
+ {%- for index in ['1', '2', '3', '4', '5'] -%}
+ {%- set image = values['slide_' + index + '_image'] -%}
+ {%- set title = values['slide_' + index + '_title'] -%}
+ {%- set subtitle = values['slide_' + index + '_subtitle'] -%}
+ {%- set primary_action = values['slide_' + index + '_primary_action'] -%}
+ {%- set primary_action_label = values['slide_' + index + '_primary_action_label'] -%}
+ {%- set align = values['slide_' + index + '_content_align'] -%}
+ {%- set theme = values['slide_' + index + '_theme'] -%}
+
+ {%- if image -%}
+ {{ slide(image, title, subtitle, primary_action, primary_action_label, index, align, theme) }}
+ {%- endif -%}
+
+ {%- endfor -%}
+ </div>
+ {%- if show_controls -%}
+ <a class="carousel-control-prev" href="#{{ slider_name }}" role="button" data-slide="prev">
+ <div class="carousel-control">
+ <svg class="mr-1" width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M11.625 3.75L6.375 9L11.625 14.25" stroke="#4C5A67" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ </div>
+ <span class="sr-only">Previous</span>
+ </a>
+ <a class="carousel-control-next" href="#{{ slider_name }}" role="button" data-slide="next">
+ <div class="carousel-control">
+ <svg class="ml-1" width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M6.375 14.25L11.625 9L6.375 3.75" stroke="#4C5A67" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ </div>
+ <span class="sr-only">Next</span>
+ </a>
+ {%- endif -%}
+</div>
+
+<script type="text/javascript">
+ $('.carousel').carousel({
+ interval: false,
+ pause: "hover",
+ wrap: true
+ })
+</script>
+
+<style>
+ .carousel-control {
+ height: 42px;
+ width: 42px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: white;
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 1px 2px 1px rgba(0, 0, 0, 0.06);
+ border-radius: 100px;
+ }
+
+ .carousel-control-prev,
+ .carousel-control-next {
+ opacity: 1;
+ }
+
+ .carousel-body {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+ .carousel-content {
+ max-width: 400px;
+ }
+</style>
\ No newline at end of file
diff --git a/erpnext/shopping_cart/web_template/hero_slider/hero_slider.json b/erpnext/shopping_cart/web_template/hero_slider/hero_slider.json
index a8ce2cd..496fc79 100644
--- a/erpnext/shopping_cart/web_template/hero_slider/hero_slider.json
+++ b/erpnext/shopping_cart/web_template/hero_slider/hero_slider.json
@@ -5,35 +5,56 @@
"doctype": "Web Template",
"fields": [
{
- "__unsaved": 1,
+ "fieldname": "slider_name",
+ "fieldtype": "Data",
+ "label": "Slider Name",
+ "reqd": 1
+ },
+ {
+ "default": "1",
+ "fieldname": "show_indicators",
+ "fieldtype": "Check",
+ "label": "Show Indicators",
+ "reqd": 0
+ },
+ {
+ "default": "1",
+ "fieldname": "show_controls",
+ "fieldtype": "Check",
+ "label": "Show Controls",
+ "reqd": 0
+ },
+ {
+ "fieldname": "slide_1",
+ "fieldtype": "Section Break",
+ "label": "Slide 1",
+ "reqd": 0
+ },
+ {
"fieldname": "slide_1_image",
"fieldtype": "Attach Image",
"label": "Image",
"reqd": 0
},
{
- "__unsaved": 1,
"fieldname": "slide_1_title",
"fieldtype": "Data",
"label": "Title",
"reqd": 0
},
{
- "__unsaved": 1,
"fieldname": "slide_1_subtitle",
- "fieldtype": "Data",
+ "fieldtype": "Small Text",
"label": "Subtitle",
"reqd": 0
},
{
- "__unsaved": 1,
"fieldname": "slide_1_primary_action_label",
"fieldtype": "Data",
"label": "Primary Action Label",
"reqd": 0
},
{
- "__unsaved": 1,
"fieldname": "slide_1_primary_action",
"fieldtype": "Data",
"label": "Primary Action",
@@ -41,47 +62,74 @@
},
{
"__unsaved": 1,
+ "fieldname": "slide_1_content_align",
+ "fieldtype": "Select",
+ "label": "Content Align",
+ "options": "Left\nCentre\nRight",
+ "reqd": 0
+ },
+ {
+ "__unsaved": 1,
+ "fieldname": "slide_1_theme",
+ "fieldtype": "Select",
+ "label": "Slide Theme",
+ "options": "Dark\nLight",
+ "reqd": 0
+ },
+ {
"fieldname": "slide_2",
"fieldtype": "Section Break",
"label": "Slide 2",
"reqd": 0
},
{
- "__unsaved": 1,
"fieldname": "slide_2_image",
"fieldtype": "Attach Image",
"label": "Image ",
"reqd": 0
},
{
- "__unsaved": 1,
"fieldname": "slide_2_title",
"fieldtype": "Data",
"label": "Title ",
"reqd": 0
},
{
- "__unsaved": 1,
"fieldname": "slide_2_subtitle",
- "fieldtype": "Data",
+ "fieldtype": "Small Text",
"label": "Subtitle ",
"reqd": 0
},
{
- "__unsaved": 1,
"fieldname": "slide_2_primary_action_label",
"fieldtype": "Data",
"label": "Primary Action Label ",
"reqd": 0
},
{
- "__unsaved": 1,
"fieldname": "slide_2_primary_action",
"fieldtype": "Data",
"label": "Primary Action ",
"reqd": 0
},
{
+ "__unsaved": 1,
+ "default": "Left",
+ "fieldname": "slide_2_content_align",
+ "fieldtype": "Select",
+ "label": "Content Align",
+ "options": "Left\nCentre\nRight",
+ "reqd": 0
+ },
+ {
+ "__unsaved": 1,
+ "fieldname": "slide_2_theme",
+ "fieldtype": "Select",
+ "label": "Slide Theme",
+ "options": "Dark\nLight",
+ "reqd": 0
+ },
+ {
"__islocal": 1,
"__unsaved": 1,
"fieldname": "slide_3",
@@ -94,7 +142,7 @@
"__unsaved": 1,
"fieldname": "slide_3_image",
"fieldtype": "Attach Image",
- "label": "Image ",
+ "label": "Image",
"reqd": 0
},
{
@@ -102,15 +150,15 @@
"__unsaved": 1,
"fieldname": "slide_3_title",
"fieldtype": "Data",
- "label": "Title ",
+ "label": "Title",
"reqd": 0
},
{
"__islocal": 1,
"__unsaved": 1,
"fieldname": "slide_3_subtitle",
- "fieldtype": "Data",
- "label": "Subtitle ",
+ "fieldtype": "Small Text",
+ "label": "Subtitle",
"reqd": 0
},
{
@@ -118,7 +166,7 @@
"__unsaved": 1,
"fieldname": "slide_3_primary_action_label",
"fieldtype": "Data",
- "label": "Primary Action Label ",
+ "label": "Primary Action Label",
"reqd": 0
},
{
@@ -126,12 +174,156 @@
"__unsaved": 1,
"fieldname": "slide_3_primary_action",
"fieldtype": "Data",
- "label": "Primary Action ",
+ "label": "Primary Action",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "slide_3_content_align",
+ "fieldtype": "Select",
+ "label": "Content Align",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "slide_3_theme",
+ "fieldtype": "Select",
+ "label": "Slide Theme",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "slide_4",
+ "fieldtype": "Section Break",
+ "label": "Slide 4",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "slide_4_image",
+ "fieldtype": "Attach Image",
+ "label": "Image",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "slide_4_title",
+ "fieldtype": "Data",
+ "label": "Title",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "slide_4_subtitle",
+ "fieldtype": "Small Text",
+ "label": "Subtitle",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "slide_4_primary_action_label",
+ "fieldtype": "Data",
+ "label": "Primary Action Label",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "slide_4_primary_action",
+ "fieldtype": "Data",
+ "label": "Primary Action",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "slide_4_content_align",
+ "fieldtype": "Select",
+ "label": "Content Align",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "slide_4_theme",
+ "fieldtype": "Select",
+ "label": "Slide Theme",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "slide_5",
+ "fieldtype": "Section Break",
+ "label": "Slide 5",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "slide_5_image",
+ "fieldtype": "Attach Image",
+ "label": "Image",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "slide_5_title",
+ "fieldtype": "Data",
+ "label": "Title",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "slide_5_subtitle",
+ "fieldtype": "Small Text",
+ "label": "Subtitle",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "slide_5_primary_action_label",
+ "fieldtype": "Data",
+ "label": "Primary Action Label",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "slide_5_primary_action",
+ "fieldtype": "Data",
+ "label": "Primary Action",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "slide_5_content_align",
+ "fieldtype": "Select",
+ "label": "Content Align",
+ "reqd": 0
+ },
+ {
+ "__islocal": 1,
+ "__unsaved": 1,
+ "fieldname": "slide_5_theme",
+ "fieldtype": "Select",
+ "label": "Slide Theme",
"reqd": 0
}
],
"idx": 0,
- "modified": "2020-11-17 15:23:48.584868",
+ "modified": "2020-11-18 17:09:31.323198",
"modified_by": "Administrator",
"module": "Shopping Cart",
"name": "Hero Slider",