+ {% if sub_categories %}
+
+
+ {{ _('Sub Categories') }}
+
+ {% for row in sub_categories%}
+
+
+ {% endif %}
+ {{ row.name }}
+
+
+ {% endfor %}
+
{% if items %}
{% for item in items %}
diff --git a/erpnext/www/shop-by-category/__init__.py b/erpnext/www/shop-by-category/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/erpnext/www/shop-by-category/category_card_section.html b/erpnext/www/shop-by-category/category_card_section.html
new file mode 100644
index 0000000000..532a198661
--- /dev/null
+++ b/erpnext/www/shop-by-category/category_card_section.html
@@ -0,0 +1,28 @@
+{%- macro card(title, image, type, url=None, text_primary=False) -%}
+
+
+{%- endmacro -%}
+
+
+
\ No newline at end of file
diff --git a/erpnext/www/shop-by-category/index.html b/erpnext/www/shop-by-category/index.html
new file mode 100644
index 0000000000..ac0b317665
--- /dev/null
+++ b/erpnext/www/shop-by-category/index.html
@@ -0,0 +1,60 @@
+{% extends "templates/web.html" %}
+{% block title %}{{ _('Shop by Category') }}{% endblock %}
+
+{% block head_include %}
+
+{% endblock %}
+
+{% block script %}
+
+{% endblock %}
+
+{% block page_content %}
+
+ {%- for row in data -%}
+ {%- set title = row.name -%}
+ {%- set image = row.get("image") -%}
+ {%- if title -%}
+ {{ card(title, image, type, row.get("route")) }}
+ {%- endif -%}
+ {%- endfor -%}
+
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/erpnext/www/shop-by-category/index.js b/erpnext/www/shop-by-category/index.js
new file mode 100644
index 0000000000..1b3116f5ba
--- /dev/null
+++ b/erpnext/www/shop-by-category/index.js
@@ -0,0 +1,12 @@
+$(() => {
+ $('.category-card').on('click', (e) => {
+ let category_type = e.currentTarget.dataset.type;
+ let category_name = e.currentTarget.dataset.name;
+
+ if (category_type != "item_group") {
+ let filters = {};
+ filters[category_type] = [category_name];
+ window.location.href = "/all-products?field_filters=" + JSON.stringify(filters);
+ }
+ });
+});
\ No newline at end of file
diff --git a/erpnext/www/shop-by-category/index.py b/erpnext/www/shop-by-category/index.py
new file mode 100644
index 0000000000..c295335cdf
--- /dev/null
+++ b/erpnext/www/shop-by-category/index.py
@@ -0,0 +1,73 @@
+import frappe
+from frappe import _
+
+sitemap = 1
+
+def get_context(context):
+ settings = frappe.get_doc("E Commerce Settings")
+ context.categories_enabled = settings.enable_field_filters
+
+ if context.categories_enabled:
+ categories = [row.fieldname for row in settings.filter_fields]
+ context.tabs = get_tabs(categories)
+
+ if settings.slideshow:
+ context.slideshow = get_slideshow(settings.slideshow)
+
+ context.no_cache = 1
+
+def get_slideshow(slideshow):
+ values = {
+ 'show_indicators': 1,
+ 'show_controls': 1,
+ 'rounded': 1,
+ 'slider_name': "Categories"
+ }
+ slideshow = frappe.get_doc("Website Slideshow", slideshow)
+ slides = slideshow.get({"doctype": "Website Slideshow Item"})
+ for index, slide in enumerate(slides):
+ values[f"slide_{index + 1}_image"] = slide.image
+ values[f"slide_{index + 1}_title"] = slide.heading
+ values[f"slide_{index + 1}_subtitle"] = slide.description
+ values[f"slide_{index + 1}_theme"] = slide.get("theme") or "Light"
+ values[f"slide_{index + 1}_content_align"] = slide.get("content_align") or "Centre"
+ values[f"slide_{index + 1}_primary_action"] = slide.url
+
+ return values
+
+def get_tabs(categories):
+ tab_values = {
+ 'title': _("Shop by Category"),
+ }
+
+ categorical_data = get_category_records(categories)
+ for index, tab in enumerate(categorical_data):
+ tab_values[f"tab_{index + 1}_title"] = frappe.unscrub(tab)
+ # pre-render cards for each tab
+ tab_values[f"tab_{index + 1}_content"] = frappe.render_template(
+ "erpnext/www/shop-by-category/category_card_section.html",
+ {"data": categorical_data[tab], "type": tab}
+ )
+ return tab_values
+
+def get_category_records(categories):
+ categorical_data = {}
+ for category in categories:
+ if category == "item_group":
+ categorical_data["item_group"] = frappe.db.sql("""
+ Select name, parent_item_group, is_group, image, route
+ from `tabItem Group`
+ where parent_item_group='All Item Groups'
+ and show_in_website=1""", as_dict=1)
+ else:
+ doctype = frappe.unscrub(category)
+ fields = ["name"]
+ if frappe.get_meta(doctype, cached=True).get_field("image"):
+ fields += ["image"]
+
+ categorical_data[category] = frappe.db.sql("""
+ Select {fields}
+ from `tab{doctype}`""".format(doctype=doctype, fields=",".join(fields)), as_dict=1)
+
+ return categorical_data
+
+ {% if tabs %}
+
+ {{ web_block(
+ "Section with Tabs",
+ values=tabs,
+ add_container=0,
+ add_top_padding=0,
+ add_bottom_padding=0
+ ) }}
+ {% endif %}
+
+