feat: add product category cards

This commit is contained in:
Shivam Mishra 2020-11-18 17:56:37 +05:30
parent b4946c31b4
commit 721251f09f
2 changed files with 62 additions and 19 deletions

View File

@ -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>

View File

@ -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",