feat: add product category cards
This commit is contained in:
parent
b4946c31b4
commit
721251f09f
@ -0,0 +1,53 @@
|
|||||||
|
{%- macro card(title, image, url, text_primary=False) -%}
|
||||||
|
{%- set align_class = resolve_class({
|
||||||
|
'text-right': text_primary,
|
||||||
|
'text-centre': align == 'Center',
|
||||||
|
'text-left': align == 'Left',
|
||||||
|
}) -%}
|
||||||
|
<div class="card h-100">
|
||||||
|
{% if image %}
|
||||||
|
<img class="card-img-top" src="{{ image }}" alt="{{ title }}">
|
||||||
|
{% endif %}
|
||||||
|
<div class="card-body text-center text-muted small">
|
||||||
|
{{ title or '' }}
|
||||||
|
</div>
|
||||||
|
<a href="{{ url or '#' }}" class="stretched-link"></a>
|
||||||
|
</div>
|
||||||
|
{%- endmacro -%}
|
||||||
|
|
||||||
|
<div class="section-with-cards">
|
||||||
|
{%- if title -%}
|
||||||
|
<h2 class="section-title">{{ title }}</h2>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- if subtitle -%}
|
||||||
|
<p class="section-description">{{ subtitle }}</p>
|
||||||
|
{%- endif -%}
|
||||||
|
<!-- {%- set card_size = card_size or 'Small' -%} -->
|
||||||
|
<div class="{{ resolve_class({'mt-6': title}) }}">
|
||||||
|
<div class="card-grid">
|
||||||
|
{%- for index in ['1', '2', '3', '4', '5', '6', '7', '8'] -%}
|
||||||
|
{%- set category = values['category_' + index] -%}
|
||||||
|
{%- if category -%}
|
||||||
|
{%- set category = frappe.get_doc("Item Group", category) -%}
|
||||||
|
{{ card(category.name, category.image, category.route) }}
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endfor -%}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.card-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 15px;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
box-shadow: 0px 16px 45px 6px rgba(0, 0, 0, 0.08), 0px 8px 10px -10px rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
|
</style>
|
@ -5,78 +5,68 @@
|
|||||||
"doctype": "Web Template",
|
"doctype": "Web Template",
|
||||||
"fields": [
|
"fields": [
|
||||||
{
|
{
|
||||||
"__unsaved": 1,
|
|
||||||
"fieldname": "title",
|
"fieldname": "title",
|
||||||
"fieldtype": "Data",
|
"fieldtype": "Data",
|
||||||
"label": "Title",
|
"label": "Title",
|
||||||
"reqd": 1
|
"reqd": 1
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"__unsaved": 1,
|
|
||||||
"fieldname": "subtitle",
|
"fieldname": "subtitle",
|
||||||
"fieldtype": "Data",
|
"fieldtype": "Data",
|
||||||
"label": "Subtitle",
|
"label": "Subtitle",
|
||||||
"reqd": 0
|
"reqd": 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"__unsaved": 1,
|
"fieldname": "category_1",
|
||||||
"fieldname": "category_1_group",
|
|
||||||
"fieldtype": "Link",
|
"fieldtype": "Link",
|
||||||
"label": "Item Group",
|
"label": "Item Group",
|
||||||
"options": "Item Group",
|
"options": "Item Group",
|
||||||
"reqd": 0
|
"reqd": 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"__unsaved": 1,
|
"fieldname": "category_2",
|
||||||
"fieldname": "category_2_group",
|
|
||||||
"fieldtype": "Link",
|
"fieldtype": "Link",
|
||||||
"label": "Item Group",
|
"label": "Item Group",
|
||||||
"options": "Item Group",
|
"options": "Item Group",
|
||||||
"reqd": 0
|
"reqd": 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"__unsaved": 1,
|
"fieldname": "category_3",
|
||||||
"fieldname": "category_3_group",
|
|
||||||
"fieldtype": "Link",
|
"fieldtype": "Link",
|
||||||
"label": "Item Group",
|
"label": "Item Group",
|
||||||
"options": "Item Group",
|
"options": "Item Group",
|
||||||
"reqd": 0
|
"reqd": 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"__unsaved": 1,
|
"fieldname": "category_4",
|
||||||
"fieldname": "category_4_group",
|
|
||||||
"fieldtype": "Link",
|
"fieldtype": "Link",
|
||||||
"label": "Item Group",
|
"label": "Item Group",
|
||||||
"options": "Item Group",
|
"options": "Item Group",
|
||||||
"reqd": 0
|
"reqd": 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"__unsaved": 1,
|
"fieldname": "category_5",
|
||||||
"fieldname": "category_5_group",
|
|
||||||
"fieldtype": "Link",
|
"fieldtype": "Link",
|
||||||
"label": "Item Group",
|
"label": "Item Group",
|
||||||
"options": "Item Group",
|
"options": "Item Group",
|
||||||
"reqd": 0
|
"reqd": 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"__unsaved": 1,
|
"fieldname": "category_6",
|
||||||
"fieldname": "category_6_group",
|
|
||||||
"fieldtype": "Link",
|
"fieldtype": "Link",
|
||||||
"label": "Item Group",
|
"label": "Item Group",
|
||||||
"options": "Item Group",
|
"options": "Item Group",
|
||||||
"reqd": 0
|
"reqd": 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"__unsaved": 1,
|
"fieldname": "category_7",
|
||||||
"fieldname": "category_7_group",
|
|
||||||
"fieldtype": "Link",
|
"fieldtype": "Link",
|
||||||
"label": "Item Group",
|
"label": "Item Group",
|
||||||
"options": "Item Group",
|
"options": "Item Group",
|
||||||
"reqd": 0
|
"reqd": 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"__unsaved": 1,
|
"fieldname": "category_8",
|
||||||
"fieldname": "category_8_group",
|
|
||||||
"fieldtype": "Link",
|
"fieldtype": "Link",
|
||||||
"label": "Item Group",
|
"label": "Item Group",
|
||||||
"options": "Item Group",
|
"options": "Item Group",
|
||||||
@ -84,7 +74,7 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"idx": 0,
|
"idx": 0,
|
||||||
"modified": "2020-11-17 15:27:36.250460",
|
"modified": "2020-11-18 17:26:28.726260",
|
||||||
"modified_by": "Administrator",
|
"modified_by": "Administrator",
|
||||||
"module": "Shopping Cart",
|
"module": "Shopping Cart",
|
||||||
"name": "Product Category Cards",
|
"name": "Product Category Cards",
|
||||||
|
Loading…
Reference in New Issue
Block a user