feat: Product Details Tabbed Section and Add to Wishlist in Item Full Page
- Add to Wishlist button next to add to cart
- Beautified Product Specifications table section
- Product Specifications can be optionally in a tabbed section with custom tabs added
- Removed hard coded gray bg to allow custom theme overwrites
- Fixed resizing issues in Item Full Page view
- Cleaned up inline styles and ported to scss
diff --git a/erpnext/e_commerce/doctype/website_item/website_item.json b/erpnext/e_commerce/doctype/website_item/website_item.json
index 3a29906..3b11c0f 100644
--- a/erpnext/e_commerce/doctype/website_item/website_item.json
+++ b/erpnext/e_commerce/doctype/website_item/website_item.json
@@ -34,6 +34,9 @@
"copy_from_item_group",
"column_break_27",
"web_long_description",
+ "display_additional_information_section",
+ "show_tabbed_section",
+ "tabs",
"section_break_6",
"ranking",
"set_meta_tags",
@@ -234,7 +237,7 @@
"collapsible": 1,
"fieldname": "advanced_display_section",
"fieldtype": "Section Break",
- "label": "Advanced Display"
+ "label": "Advanced Display Content"
},
{
"fieldname": "display_section",
@@ -265,13 +268,31 @@
"no_copy": 1,
"options": "WEB-ITM-.####",
"print_hide": 1
+ },
+ {
+ "fieldname": "display_additional_information_section",
+ "fieldtype": "Section Break",
+ "label": "Display Additional Information"
+ },
+ {
+ "depends_on": "show_tabbed_section",
+ "fieldname": "tabs",
+ "fieldtype": "Table",
+ "label": "Tabs",
+ "options": "Website Item Tabbed Section"
+ },
+ {
+ "default": "0",
+ "fieldname": "show_tabbed_section",
+ "fieldtype": "Check",
+ "label": "Add Section with Tabs"
}
],
"has_web_view": 1,
"image_field": "image",
"index_web_pages_for_search": 1,
"links": [],
- "modified": "2021-02-18 13:23:18.286883",
+ "modified": "2021-03-18 20:37:54.955364",
"modified_by": "Administrator",
"module": "E-commerce",
"name": "Website Item",
diff --git a/erpnext/e_commerce/doctype/website_item/website_item.py b/erpnext/e_commerce/doctype/website_item/website_item.py
index 856b9b7..7424bc9 100644
--- a/erpnext/e_commerce/doctype/website_item/website_item.py
+++ b/erpnext/e_commerce/doctype/website_item/website_item.py
@@ -11,6 +11,7 @@
from frappe.website.website_generator import WebsiteGenerator
from frappe.utils import cstr, random_string, cint, flt
+from frappe.website.doctype.website_slideshow.website_slideshow import get_slideshow
from erpnext.setup.doctype.item_group.item_group import (get_parent_item_groups, invalidate_cache_for)
@@ -166,7 +167,6 @@
context.search_link = '/search'
context.parents = get_parent_item_groups(self.item_group, from_item=True)
- context.body_class = "product-page"
self.attributes = frappe.get_all("Item Variant Attribute",
fields=["attribute", "attribute_value"],
filters={"parent": self.item_code})
@@ -175,6 +175,11 @@
self.set_disabled_attributes(context)
self.set_metatags(context)
self.set_shopping_cart_data(context)
+ self.get_product_details_section(context)
+
+ context.wished = False
+ if frappe.db.exists("Wishlist Items", {"item_code": self.item_code, "parent": frappe.session.user}):
+ context.wished = True
return context
@@ -205,6 +210,12 @@
context[fieldname] = value
+ if self.slideshow:
+ if context.variant and context.variant.slideshow:
+ context.update(get_slideshow(context.variant))
+ else:
+ context.update(get_slideshow(self))
+
def set_attribute_context(self, context):
if self.has_variants:
attribute_values_available = {}
@@ -326,6 +337,30 @@
row.label = label
row.description = desc
+ def get_product_details_section(self, context):
+ """ Get section with tabs or website specifications. """
+ context.show_tabs = self.show_tabbed_section
+ if self.show_tabbed_section and self.tabs:
+ context.tabs = self.get_tabs()
+ else:
+ context.website_specifications = self.website_specifications
+
+ def get_tabs(self):
+ tab_values = {}
+ tab_values["tab_1_title"] = "Product Details"
+ tab_values["tab_1_content"] = frappe.render_template(
+ "templates/generators/item/item_specifications.html",
+ {
+ "website_specifications": self.website_specifications,
+ "show_tabs": self.show_tabbed_section
+ })
+
+ for row in self.tabs:
+ tab_values[f"tab_{row.idx + 1}_title"] = _(row.label)
+ tab_values[f"tab_{row.idx + 1}_content"] = row.content
+
+ return tab_values
+
def invalidate_cache_for_web_item(doc):
"""Invalidate Website Item Group cache and rebuild ItemVariantsCacheManager."""
from erpnext.stock.doctype.item.item import invalidate_item_variants_cache_for_website
diff --git a/erpnext/e_commerce/doctype/website_item_tabbed_section/__init__.py b/erpnext/e_commerce/doctype/website_item_tabbed_section/__init__.py
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/erpnext/e_commerce/doctype/website_item_tabbed_section/__init__.py
diff --git a/erpnext/e_commerce/doctype/website_item_tabbed_section/website_item_tabbed_section.json b/erpnext/e_commerce/doctype/website_item_tabbed_section/website_item_tabbed_section.json
new file mode 100644
index 0000000..6601dd8
--- /dev/null
+++ b/erpnext/e_commerce/doctype/website_item_tabbed_section/website_item_tabbed_section.json
@@ -0,0 +1,37 @@
+{
+ "actions": [],
+ "creation": "2021-03-18 20:32:15.321402",
+ "doctype": "DocType",
+ "editable_grid": 1,
+ "engine": "InnoDB",
+ "field_order": [
+ "label",
+ "content"
+ ],
+ "fields": [
+ {
+ "fieldname": "label",
+ "fieldtype": "Data",
+ "in_list_view": 1,
+ "label": "Label"
+ },
+ {
+ "fieldname": "content",
+ "fieldtype": "HTML Editor",
+ "in_list_view": 1,
+ "label": "Content"
+ }
+ ],
+ "index_web_pages_for_search": 1,
+ "istable": 1,
+ "links": [],
+ "modified": "2021-03-18 20:35:26.991192",
+ "modified_by": "Administrator",
+ "module": "E-commerce",
+ "name": "Website Item Tabbed Section",
+ "owner": "Administrator",
+ "permissions": [],
+ "sort_field": "modified",
+ "sort_order": "DESC",
+ "track_changes": 1
+}
\ No newline at end of file
diff --git a/erpnext/e_commerce/doctype/website_item_tabbed_section/website_item_tabbed_section.py b/erpnext/e_commerce/doctype/website_item_tabbed_section/website_item_tabbed_section.py
new file mode 100644
index 0000000..8459e62
--- /dev/null
+++ b/erpnext/e_commerce/doctype/website_item_tabbed_section/website_item_tabbed_section.py
@@ -0,0 +1,10 @@
+# -*- coding: utf-8 -*-
+# Copyright (c) 2021, Frappe Technologies Pvt. Ltd. and contributors
+# For license information, please see license.txt
+
+from __future__ import unicode_literals
+# import frappe
+from frappe.model.document import Document
+
+class WebsiteItemTabbedSection(Document):
+ pass
diff --git a/erpnext/e_commerce/doctype/wishlist/wishlist.json b/erpnext/e_commerce/doctype/wishlist/wishlist.json
index 7e2c674..653c656 100644
--- a/erpnext/e_commerce/doctype/wishlist/wishlist.json
+++ b/erpnext/e_commerce/doctype/wishlist/wishlist.json
@@ -31,37 +31,32 @@
"options": "Wishlist Items"
}
],
+ "in_create": 1,
"index_web_pages_for_search": 1,
"links": [],
- "modified": "2021-03-10 19:05:52.373601",
+ "modified": "2021-03-18 16:10:29.534522",
"modified_by": "Administrator",
"module": "E-commerce",
"name": "Wishlist",
"owner": "Administrator",
"permissions": [
{
- "create": 1,
- "delete": 1,
"email": 1,
"export": 1,
"print": 1,
"read": 1,
"report": 1,
"role": "System Manager",
- "share": 1,
- "write": 1
+ "share": 1
},
{
- "create": 1,
- "delete": 1,
"email": 1,
"export": 1,
"print": 1,
"read": 1,
"report": 1,
"role": "Stock Manager",
- "share": 1,
- "write": 1
+ "share": 1
}
],
"sort_field": "modified",
diff --git a/erpnext/e_commerce/doctype/wishlist/wishlist.py b/erpnext/e_commerce/doctype/wishlist/wishlist.py
index 83bdff6..eb86dc8 100644
--- a/erpnext/e_commerce/doctype/wishlist/wishlist.py
+++ b/erpnext/e_commerce/doctype/wishlist/wishlist.py
@@ -12,6 +12,10 @@
@frappe.whitelist()
def add_to_wishlist(item_code, price, formatted_price=None):
"""Insert Item into wishlist."""
+
+ if frappe.db.exists("Wishlist Items", {"item_code": item_code, "parent": frappe.session.user}):
+ return
+
web_item_data = frappe.db.get_value("Website Item", {"item_code": item_code},
["image", "website_warehouse", "name", "item_name", "item_group", "route"]
, as_dict=1)
@@ -44,7 +48,7 @@
@frappe.whitelist()
def remove_from_wishlist(item_code):
- if frappe.db.exists("Wishlist Items", {"item_code": item_code}):
+ if frappe.db.exists("Wishlist Items", {"item_code": item_code, "parent": frappe.session.user}):
frappe.db.sql("""
delete
from `tabWishlist Items`
diff --git a/erpnext/e_commerce/doctype/wishlist_items/wishlist_items.json b/erpnext/e_commerce/doctype/wishlist_items/wishlist_items.json
index 0b13273..6623921 100644
--- a/erpnext/e_commerce/doctype/wishlist_items/wishlist_items.json
+++ b/erpnext/e_commerce/doctype/wishlist_items/wishlist_items.json
@@ -24,6 +24,8 @@
],
"fields": [
{
+ "fetch_from": "website_item.item_code",
+ "fetch_if_empty": 1,
"fieldname": "item_code",
"fieldtype": "Link",
"in_list_view": 1,
@@ -106,12 +108,16 @@
"label": "Price"
},
{
+ "fetch_from": "item_code.item_group",
+ "fetch_if_empty": 1,
"fieldname": "item_group",
"fieldtype": "Link",
"label": "Item Group",
"options": "Item Group"
},
{
+ "fetch_from": "website_item.route",
+ "fetch_if_empty": 1,
"fieldname": "route",
"fieldtype": "Small Text",
"label": "Route"
@@ -125,7 +131,7 @@
"index_web_pages_for_search": 1,
"istable": 1,
"links": [],
- "modified": "2021-03-15 16:37:40.405333",
+ "modified": "2021-03-18 16:04:52.965613",
"modified_by": "Administrator",
"module": "E-commerce",
"name": "Wishlist Items",
diff --git a/erpnext/public/scss/shopping_cart.scss b/erpnext/public/scss/shopping_cart.scss
index 6a96e41..126c6fd 100644
--- a/erpnext/public/scss/shopping_cart.scss
+++ b/erpnext/public/scss/shopping_cart.scss
@@ -1,16 +1,13 @@
@import "frappe/public/scss/common/mixins";
+$wish-red: #F47A7A;
+
body.product-page {
background: var(--gray-50);
}
-
.item-breadcrumbs {
.breadcrumb-container {
- ol.breadcrumb {
- background-color: var(--gray-50) !important;
- }
-
a {
color: var(--gray-900);
}
@@ -140,6 +137,7 @@
.item-card {
padding: var(--padding-sm);
+ min-width: 250px;
}
}
@@ -189,14 +187,40 @@
min-height: 70vh;
.product-details {
- max-width: 40%;
- margin-left: -30px;
+ max-width: 50%;
.btn-add-to-cart {
font-size: var(--text-base);
}
}
+ .expand {
+ max-width: 100% !important; // expand in absence of slideshow
+ }
+
+ @media (max-width: 789px) {
+ .product-details {
+ max-width: 90% !important;
+
+ .btn-add-to-cart {
+ font-size: var(--text-base);
+ }
+ }
+ }
+
+ .btn-add-to-wishlist {
+ svg use {
+ stroke: var(--wish-red);
+ }
+ }
+
+ .btn-view-in-wishlist {
+ svg use {
+ fill: var(--wish-red);
+ stroke: none;
+ }
+ }
+
.product-title {
font-size: 24px;
font-weight: 600;
@@ -578,16 +602,16 @@
.not-wished {
cursor: pointer;
- stroke: #F47A7A !important;
+ stroke: var(--wish-red) !important;
&:hover {
- fill: #F47A7A;
+ fill: var(--wish-red);
}
}
.wished {
stroke: none;
- fill: #F47A7A !important;
+ fill: var(--wish-red) !important;
}
.list-row-checkbox {
@@ -663,12 +687,23 @@
}
.remove-wish {
+ position: absolute;
+ top:10px;
+ right: 20px;
+ border-radius: 50%;
+ border: 1px solid var(--gray-100);
+ width: 25px;
+ height: 25px;
+
&:hover {
background-color: var(--gray-100);
- border: 1px solid var(--icon-stroke);
}
}
.wish-removed {
display: none;
}
+
+.item-website-specification {
+ font-size: .875rem;
+}
diff --git a/erpnext/setup/doctype/item_group/item_group.py b/erpnext/setup/doctype/item_group/item_group.py
index b375711..c9924e1 100644
--- a/erpnext/setup/doctype/item_group/item_group.py
+++ b/erpnext/setup/doctype/item_group/item_group.py
@@ -126,7 +126,6 @@
context.no_breadcrumbs = False
context.title = self.website_title or self.name
- context.body_class = "product-page"
return context
diff --git a/erpnext/templates/generators/item/item.html b/erpnext/templates/generators/item/item.html
index 17f6880..eebfb92 100644
--- a/erpnext/templates/generators/item/item.html
+++ b/erpnext/templates/generators/item/item.html
@@ -9,17 +9,33 @@
{% endblock %}
{% block page_content %}
-<div class="product-container">
+<div class="product-container col-md-12">
{% from "erpnext/templates/includes/macros.html" import product_image %}
<div class="item-content">
<div class="product-page-content" itemscope itemtype="http://schema.org/Product">
+ <!-- Image, Description, Add to Cart -->
<div class="row mb-5">
{% include "templates/generators/item/item_image.html" %}
{% include "templates/generators/item/item_details.html" %}
</div>
- {% include "templates/generators/item/item_specifications.html" %}
+ <!-- Product Specifications Table Section -->
+ {% if show_tabs and tabs %}
+ <div class="category-tabs">
+ <!-- tabs -->
+ {{ web_block(
+ "Section with Tabs",
+ values=tabs,
+ add_container=0,
+ add_top_padding=0,
+ add_bottom_padding=0
+ ) }}
+ </div>
+ {% elif website_specifications %}
+ {% include "templates/generators/item/item_specifications.html"%}
+ {% endif %}
+ <!-- Advanced Custom Website Content -->
{{ doc.website_content or '' }}
</div>
</div>
diff --git a/erpnext/templates/generators/item/item_add_to_cart.html b/erpnext/templates/generators/item/item_add_to_cart.html
index 167c848..c7713c1 100644
--- a/erpnext/templates/generators/item/item_add_to_cart.html
+++ b/erpnext/templates/generators/item/item_add_to_cart.html
@@ -5,6 +5,7 @@
<div class="item-cart row mt-2" data-variant-item-code="{{ item_code }}">
<div class="col-md-12">
+ <!-- Price and Availability -->
{% if cart_settings.show_price and product_info.price %}
<div class="product-price">
{{ product_info.price.formatted_price_sales_uom }}
@@ -30,17 +31,21 @@
{% endif %}
</div>
{% endif %}
+
+ <!-- Add to Cart / View in Cart, Contact Us -->
<div class="mt-5 mb-5">
- {% if product_info.price and (cart_settings.allow_items_not_in_stock or product_info.in_stock) %}
+ <div style="display: flex;" class="mb-4">
+ <!-- Add to Cart -->
+ {% if product_info.price and (cart_settings.allow_items_not_in_stock or product_info.in_stock) %}
<a href="/cart"
- class="btn btn-light btn-view-in-cart {% if not product_info.qty %}hidden{% endif %}"
+ class="btn btn-light btn-view-in-cart hidden mr-2"
role="button"
>
{{ _("View in Cart") }}
</a>
<button
data-item-code="{{item_code}}"
- class="btn btn-primary btn-add-to-cart {% if product_info.qty %}hidden{% endif %} w-100"
+ class="btn btn-primary btn-add-to-cart w-50 mr-2"
>
<span class="mr-2">
<svg class="icon icon-md">
@@ -49,7 +54,37 @@
</span>
{{ _("Add to Cart") }}
</button>
- {% endif %}
+ {% endif %}
+
+ <!-- Add to Wishlist -->
+ <a href="/wishlist"
+ class="btn btn-view-in-wishlist hidden"
+ role="button"
+ >
+ <span class="mr-2">
+ <svg class="icon icon-md">
+ <use href="#icon-heart"></use>
+ </svg>
+ </span>
+ {{ _("View in Wishlist") }}
+ </a>
+
+ {% set price = product_info.get("price") or {} %}
+ <button
+ data-item-code="{{item_code}}"
+ data-price="{{ price.get('price_list_rate') or 0}}"
+ data-formatted-price="{{ price.get('formatted_price') or 0 }}"
+ class="btn btn-add-to-wishlist"
+ >
+ <span class="mr-2">
+ <svg class="icon icon-md">
+ <use href="#icon-heart"></use>
+ </svg>
+ </span>
+ {{ _("Add to Wishlist") }}
+ </button>
+ </div>
+
{% if cart_settings.show_contact_us_button %}
{% include "templates/generators/item/item_inquiry.html" %}
{% endif %}
@@ -60,6 +95,7 @@
<script>
frappe.ready(() => {
$('.page_content').on('click', '.btn-add-to-cart', (e) => {
+ // Bind action on add to cart button
const $btn = $(e.currentTarget);
$btn.prop('disabled', true);
const item_code = $btn.data('item-code');
@@ -74,6 +110,28 @@
}
});
});
+
+ $('.page_content').on('click', '.btn-add-to-wishlist', (e) => {
+ // Bind action on wishlist button
+ const $btn = $(e.currentTarget);
+ $btn.prop('disabled', true);
+
+ let args = {
+ item_code: $btn.data('item-code'),
+ price: $btn.data('price'),
+ formatted_price: $btn.data('formatted-price')
+ };
+ let failure_action = function() {
+ $btn.prop('disabled', false);
+ };
+ let success_action = function() {
+ $btn.prop('disabled', false);
+ erpnext.wishlist.set_wishlist_count();
+ $('.btn-add-to-wishlist, .btn-view-in-wishlist').toggleClass('hidden');
+
+ };
+ erpnext.wishlist.add_remove_from_wishlist("add", args, success_action, failure_action);
+ });
});
</script>
diff --git a/erpnext/templates/generators/item/item_details.html b/erpnext/templates/generators/item/item_details.html
index 3b77585..9559129 100644
--- a/erpnext/templates/generators/item/item_details.html
+++ b/erpnext/templates/generators/item/item_details.html
@@ -1,11 +1,12 @@
-<div class="col-md-7 product-details">
+{% set width_class = "expand" if not slides else "" %}
+<div class="col-md-7 product-details {{ width_class }}">
<!-- title -->
<h1 class="product-title" itemprop="name">
{{ item_name }}
</h1>
<p class="product-code">
<span>{{ _("Item Code") }}:</span>
- <span itemprop="productID">{{ doc.name }}</span>
+ <span itemprop="productID">{{ doc.item_code }}</span>
</p>
{% if has_variants %}
<!-- configure template -->
diff --git a/erpnext/templates/generators/item/item_image.html b/erpnext/templates/generators/item/item_image.html
index e9b0916..4de3b62 100644
--- a/erpnext/templates/generators/item/item_image.html
+++ b/erpnext/templates/generators/item/item_image.html
@@ -1,4 +1,5 @@
-<div class="col-md-5 h-100 d-flex">
+{% set column_size = 5 if slides else 4 %}
+<div class="col-md-{{ column_size }} h-100 d-flex mb-4">
{% if slides %}
<div class="item-slideshow d-flex flex-column mr-3">
{% for item in slides %}
diff --git a/erpnext/templates/generators/item/item_specifications.html b/erpnext/templates/generators/item/item_specifications.html
index d4dfa8e..1dccff9 100644
--- a/erpnext/templates/generators/item/item_specifications.html
+++ b/erpnext/templates/generators/item/item_specifications.html
@@ -1,10 +1,13 @@
-{% if doc.website_specifications -%}
-<div class="row item-website-specification mt-5">
- <div class="col-md-12">
- <table class="table table-bordered">
- {% for d in doc.website_specifications -%}
+{% if website_specifications -%}
+<div class="row mt-5 item-website-specification">
+ <div class="col-md-11">
+ {% if not show_tabs %}
+ <h2 class="product-title mb-5">Product Details</h2>
+ {% endif %}
+ <table class="table table-bordered table-hover">
+ {% for d in website_specifications -%}
<tr>
- <td class="text-muted" style="width: 30%;">{{ d.label }}</td>
+ <td class="text-muted" style="width: 30%; font-weight: bold;">{{ d.label }}</td>
<td>{{ d.description }}</td>
</tr>
{%- endfor %}
diff --git a/erpnext/templates/includes/macros.html b/erpnext/templates/includes/macros.html
index aec201e..77c5649 100644
--- a/erpnext/templates/includes/macros.html
+++ b/erpnext/templates/includes/macros.html
@@ -172,9 +172,7 @@
<a href="/{{ item.route or '#' }}" style="text-decoration: none;">
<img class="card-img" src="{{ item.image }}" alt="{{ title }}">
</a>
- <div class="remove-wish"
- style="position:absolute; top:10px; right: 20px; border-radius: 50%; border: 1px solid var(--gray-100); width: 25px; height: 25px;"
- data-item-code="{{ item.item_code }}">
+ <div class="remove-wish" data-item-code="{{ item.item_code }}">
<span style="padding-bottom: 2px;">
<svg class="icon sm remove-wish-icon" style="margin-bottom: 4px; margin-left: 0.5px;">
<use class="close" href="#icon-close"></use>
@@ -199,7 +197,7 @@
{%- endmacro -%}
{%- macro wishlist_card_body(item, settings) %}
-<div class="card-body text-center" style="width:100%">
+<div class="card-body text-center" style="width: 100%;">
<div style="margin-top: 16px;">
<div class="product-title">{{ item.item_name or item.item_code or ''}}</div>
</div>
diff --git a/erpnext/www/all-products/index.py b/erpnext/www/all-products/index.py
index d0871fc..618ec76 100644
--- a/erpnext/www/all-products/index.py
+++ b/erpnext/www/all-products/index.py
@@ -28,7 +28,6 @@
context.attribute_filters = filter_engine.get_attribute_filters()
context.e_commerce_settings = engine.settings
- context.body_class = "product-page"
context.page_length = engine.settings.products_per_page or 20
context.no_cache = 1
diff --git a/erpnext/www/shop-by-category/category_card_section.html b/erpnext/www/shop-by-category/category_card_section.html
index 532a198..56cb63a 100644
--- a/erpnext/www/shop-by-category/category_card_section.html
+++ b/erpnext/www/shop-by-category/category_card_section.html
@@ -2,10 +2,12 @@
<!-- style defined at shop-by-category index -->
<div class="card category-card" data-type="{{ type }}" data-name="{{ title }}">
{% if image %}
- <img class="card-img-top" src="{{ image }}" alt="{{ title }}" style="height:80%">
+ <img class="card-img-top" src="{{ image }}" alt="{{ title }}" style="height: 80%;">
{% else %}
<div class="placeholder-div">
- <span class="placeholder">AB</span>
+ <span class="placeholder">
+ {{ frappe.utils.get_abbr(title) }}
+ </span>
</div>
{% endif %}
<div class="card-body text-center text-muted">