Website: Product Configurator and Bootstrap 4 (#15965)
- Refactored Homepage with customisable Hero Section
- New Homepage Section to add content on Homepage as cards or using Custom HTML
- Products page at "/all-products" with customisable filters
- Item Configure dialog to find an Item Variant filtered by attribute values
- Contact Us dialog on Item page
- Customisable Item page content using the Website Content field
diff --git a/erpnext/templates/pages/cart.html b/erpnext/templates/pages/cart.html
index fb0c05f..b301fc0 100644
--- a/erpnext/templates/pages/cart.html
+++ b/erpnext/templates/pages/cart.html
@@ -2,18 +2,25 @@
{% block title %} {{ _("Shopping Cart") }} {% endblock %}
-{% block header %}<h2>{{ _("My Cart") }}</h2>{% endblock %}
+{% block header %}<h1>{{ _("Shopping Cart") }}</h1>{% endblock %}
+<!--
{% block script %}
<script>{% include "templates/includes/cart.js" %}</script>
{% endblock %}
+-->
{% block header_actions %}
-{% if doc.items %}
-<button class="btn btn-primary btn-place-order btn-sm"
- type="button">
- {{ _("Place Order") }}</button>
+{% if doc.items and cart_settings.enable_checkout %}
+<button class="btn btn-primary btn-place-order" type="button">
+ {{ _("Place Order") }}
+</button>
+{% endif %}
+{% if doc.items and not cart_settings.enable_checkout %}
+<button class="btn btn-primary btn-request-for-quotation" type="button">
+ {{ _("Request for Quotation") }}
+</button>
{% endif %}
{% endblock %}
@@ -22,58 +29,89 @@
{% from "templates/includes/macros.html" import item_name_and_description %}
<div class="cart-container">
- <div id="cart-container">
- <div id="cart-error" class="alert alert-danger"
- style="display: none;"></div>
- <div id="cart-items">
- <div class="row cart-item-header text-muted">
- <div class="col-sm-8 col-xs-6 h6 text-uppercase">
- {{ _("Item") }}
- </div>
- <div class="col-sm-2 col-xs-3 text-center h6 text-uppercase">
- {{ _("Qty") }}
- </div>
- <div class="col-sm-2 col-xs-3 text-right h6 text-uppercase">
- {{ _("Subtotal") }}
- </div>
- </div>
- {% if doc.items %}
- <div class="cart-items">
- {% include "templates/includes/cart/cart_items.html" %}
- </div>
- {% else %}
- <p class="empty-cart">{{ _("Cart is Empty") }}</p>
- {% endif %}
- </div>
- {% if doc.items %}
- <!-- taxes -->
- <div class="row cart-taxes">
- <div class="col-sm-6"><!-- empty --></div>
- <div class="col-sm-6 text-right cart-tax-items">
+ <div id="cart-error" class="alert alert-danger" style="display: none;"></div>
+
+ {% if doc.items %}
+ <table class="table table-bordered mt-3">
+ <thead>
+ <tr>
+ <th width="60%">{{ _('Item') }}</th>
+ <th width="20%" class="text-right">{{ _('Quantity') }}</th>
+ {% if cart_settings.enable_checkout %}
+ <th width="20%" class="text-right">{{ _('Subtotal') }}</th>
+ {% endif %}
+ </tr>
+ </thead>
+ <tbody class="cart-items">
+ {% include "templates/includes/cart/cart_items.html" %}
+ </tbody>
+ {% if cart_settings.enable_checkout %}
+ <tfoot class="cart-tax-items">
{% include "templates/includes/order/order_taxes.html" %}
- </div>
- </div>
-
- {% if doc.tc_name %}
- <div class="cart-terms" style="display: none;" title={{doc.tc_name}}>
- {{doc.tc_name}}
- {{doc.terms}}
- </div>
- <div class="cart-link">
- <a href="#" onclick="show_terms();return false;">*{{ __("Terms and Conditions") }}</a>
- </div>
+ </tfoot>
{% endif %}
+ </table>
+ {% else %}
+ <p class="text-muted">{{ _('Your cart is Empty') }}</p>
+ {% endif %}
- <div class="cart-addresses">
- {% include "templates/includes/cart/cart_address.html" %}
+ {% if doc.items %}
+ {% if doc.tc_name %}
+ <div class="terms-and-conditions-link">
+ <a href class="link-terms-and-conditions" data-terms-name="{{ doc.tc_name }}">
+ {{ _("Terms and Conditions") }}
+ </a>
+ <script>
+ frappe.ready(() => {
+ $('.link-terms-and-conditions').click((e) => {
+ e.preventDefault();
+ const $link = $(e.target);
+ const terms_name = $link.attr('data-terms-name');
+ show_terms_and_conditions(terms_name);
+ })
+ });
+ function show_terms_and_conditions(terms_name) {
+ frappe.call('erpnext.shopping_cart.cart.get_terms_and_conditions', { terms_name })
+ .then(r => {
+ frappe.msgprint({
+ title: terms_name,
+ message: r.message
+ });
+ });
+ }
+ </script>
</div>
+ {% endif %}
- <p class="cart-footer text-right">
- <button class="btn btn-primary btn-place-order btn-sm" type="button">
- {{ _("Place Order") }}</button></p>
+ {% if cart_settings.enable_checkout %}
+ <div class="cart-addresses mt-5">
+ {% include "templates/includes/cart/cart_address.html" %}
+ </div>
+ {% endif %}
+ {% endif %}
+</div>
+
+<div class="row mt-5">
+ <div class="col-12">
+ {% if cart_settings.enable_checkout %}
+ <a href="/orders">
+ {{ _('See past orders') }}
+ </a>
+ {% else %}
+ <a href="/quotations">
+ {{ _('See past quotations') }}
+ </a>
{% endif %}
</div>
</div>
+{% endblock %}
+{% block base_scripts %}
+<!-- js should be loaded in body! -->
+<script type="text/javascript" src="/assets/frappe/js/lib/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="/assets/js/frappe-web.min.js"></script>
+<script type="text/javascript" src="/assets/js/control.min.js"></script>
+<script type="text/javascript" src="/assets/js/dialog.min.js"></script>
+<script type="text/javascript" src="/assets/js/bootstrap-4-web.min.js"></script>
{% endblock %}
diff --git a/erpnext/templates/pages/help.html b/erpnext/templates/pages/help.html
index 8c26852..1cfe358 100644
--- a/erpnext/templates/pages/help.html
+++ b/erpnext/templates/pages/help.html
@@ -11,7 +11,7 @@
value='{{ frappe.form_dict.q or ''}}'
{% if not frappe.form_dict.q%}placeholder="{{ _("What do you need help with?") }}"{% endif %}>
<input type='submit'
- class='btn btn-sm btn-default btn-search' value="{{ _("Search") }}">
+ class='btn btn-sm btn-light btn-search' value="{{ _("Search") }}">
</form>
</div>
diff --git a/erpnext/templates/pages/home.css b/erpnext/templates/pages/home.css
new file mode 100644
index 0000000..cf54766
--- /dev/null
+++ b/erpnext/templates/pages/home.css
@@ -0,0 +1,9 @@
+/* csslint ignore:start */
+{% if homepage.hero_image %}
+.hero-image {
+ background-image: url("{{ homepage.hero_image }}");
+ background-size: cover;
+ padding: 10rem 0;
+}
+{% endif %}
+/* csslint ignore:end */
\ No newline at end of file
diff --git a/erpnext/templates/pages/home.html b/erpnext/templates/pages/home.html
index f36b4e0..b67a465 100644
--- a/erpnext/templates/pages/home.html
+++ b/erpnext/templates/pages/home.html
@@ -1,75 +1,75 @@
{% extends "templates/web.html" %}
-{% from "erpnext/templates/includes/macros.html" import product_image_square %}
-{% block page_content %}
+{% from "erpnext/templates/includes/macros.html" import render_homepage_section %}
-<div class="row">
- <div class="col-sm-12">
- <div class="hero">
- <h1 class="text-center">{{ homepage.tag_line or '' }}</h1>
- <p class="text-center">{{ homepage.description or '' }}</p>
+{% block content %}
+<main>
+ {% if homepage.hero_section_based_on == 'Default' %}
+ <section class="hero-section border-bottom {%if homepage.hero_image%}hero-image{%endif%}">
+ <div class="container py-5">
+ <h1 class="d-none d-sm-block display-4">{{ homepage.tag_line }}</h1>
+ <h1 class="d-block d-sm-none">{{ homepage.tag_line }}</h1>
+ <h2 class="d-none d-sm-block">{{ homepage.description }}</h2>
+ <h3 class="d-block d-sm-none">{{ homepage.description }}</h3>
</div>
- {% if homepage.products %}
- <div class='featured-products-section' itemscope itemtype="http://schema.org/Product">
- <h5 class='featured-product-heading'>{{ _("Featured Products") }}</h5>
- <div class="featured-products">
- <div id="search-list" class="row" style="margin-top:40px;">
- {% for item in homepage.products %}
- <a class="product-link" href="{{ item.route|abs_url }}">
- <div class="col-sm-4 col-xs-4 product-image-wrapper">
- <div class="product-image-img">
- <!-- thumbnail not updated, and used as background image in item card -->
- {{ product_image_square(item.image) }}
- <div class="product-text" itemprop="name">{{ item.item_name }}</div>
- </div>
- </div>
- </a>
- {% endfor %}
+
+ <div class="container">
+ <a href="{{ explore_link }}" class="mb-5 btn btn-primary">{{ _('Explore') }}</a>
+ </div>
+ </section>
+ {% elif homepage.hero_section_based_on == 'Slideshow' and slideshow %}
+ <section class="hero-section">
+ {% include "templates/includes/slideshow.html" %}
+ </section>
+ {% elif homepage.hero_section_based_on == 'Homepage Section' %}
+ {{ render_homepage_section(homepage.hero_section_doc) }}
+ {% endif %}
+
+ {% if homepage.products %}
+ <section class="container section-products my-5">
+ <h3>{{ _('Products') }}</h3>
+
+ <div class="row">
+ {% for item in homepage.products %}
+ <div class="col-md-4 mb-4">
+ <div class="card h-100 justify-content-between">
+ <div class="website-image-lazy" data-class="card-img-top h-100" data-src="{{ item.image }}" data-alt="{{ item.item_name }}"></div>
+ <div class="card-body flex-grow-0">
+ <h5 class="card-title">{{ item.item_name }}</h5>
+ <a href="{{ item.route }}" class="card-link">{{ _('More details') }}</a>
+ </div>
</div>
</div>
- <div class="text-center padding">
- <a href="{{ homepage.products_url or "/products" }}" class="btn btn-primary all-products">
- {{ _("View All Products") }}</a></div>
+ {% endfor %}
</div>
- {% endif %}
- </div>
-</div>
-{% endblock %}
+ </section>
+ {% endif %}
-{% block style %}
-<style>
- .hero {
- padding-top: 50px;
- padding-bottom: 100px;
- }
+ {% if blogs %}
+ <section class="container my-5">
+ <h3>{{ _('Publications') }}</h3>
- .hero h1 {
- font-size: 40px;
- font-weight: 200;
- }
+ <div class="row">
+ {% for blog in blogs %}
+ <div class="col-md-4 mb-4">
+ <div class="card h-100">
+ <div class="card-body">
+ <h5 class="card-title">{{ blog.title }}</h5>
+ <p class="card-subtitle mb-2 text-muted">{{ _('By {0}').format(blog.blogger) }}</p>
+ <p class="card-text">{{ blog.blog_intro }}</p>
+ </div>
+ <div class="card-body flex-grow-0">
+ <a href="{{ blog.route }}" class="card-link">{{ _('Read blog') }}</a>
+ </div>
+ </div>
+ </div>
+ {% endfor %}
+ </div>
+ </section>
+ {% endif %}
- .home-login {
- margin-top: 30px;
- }
- .btn-login {
- width: 80px;
- }
-
- .featured-product-heading, .all-products {
- text-transform: uppercase;
- letter-spacing: 0.5px;
- font-size: 12px;
- font-weight: 500;
- }
-
- .all-products {
- font-weight: 300;
- padding-left: 25px;
- padding-right: 25px;
- padding-top: 10px;
- padding-bottom: 10px;
- }
-
-
-</style>
-{% endblock %}
+ {% for section in homepage_sections %}
+ {{ render_homepage_section(section) }}
+ {% endfor %}
+</main>
+{% endblock %}
\ No newline at end of file
diff --git a/erpnext/templates/pages/home.py b/erpnext/templates/pages/home.py
index 82d525a..4b688b1 100644
--- a/erpnext/templates/pages/home.py
+++ b/erpnext/templates/pages/home.py
@@ -15,15 +15,38 @@
if route:
item.route = '/' + route
- context.title = homepage.title or homepage.company
-
- # show atleast 3 products
- if len(homepage.products) < 3:
- for i in range(3 - len(homepage.products)):
- homepage.append('products', {
- 'item_code': 'product-{0}'.format(i),
- 'item_name': frappe._('Product {0}').format(i),
- 'route': '#'
- })
-
+ homepage.title = homepage.title or homepage.company
+ context.title = homepage.title
context.homepage = homepage
+
+ if homepage.hero_section_based_on == 'Homepage Section' and homepage.hero_section:
+ homepage.hero_section_doc = frappe.get_doc('Homepage Section', homepage.hero_section)
+
+ if homepage.slideshow:
+ doc = frappe.get_doc('Website Slideshow', homepage.slideshow)
+ context.slideshow = homepage.slideshow
+ context.slideshow_header = doc.header
+ context.slides = doc.slideshow_items
+
+ context.blogs = frappe.get_all('Blog Post',
+ fields=['title', 'blogger', 'blog_intro', 'route'],
+ filters={
+ 'published': 1
+ },
+ order_by='modified desc',
+ limit=3
+ )
+
+ # filter out homepage section which is used as hero section
+ homepage_hero_section = homepage.hero_section_based_on == 'Homepage Section' and homepage.hero_section
+ homepage_sections = frappe.get_all('Homepage Section',
+ filters=[['name', '!=', homepage_hero_section]] if homepage_hero_section else None,
+ order_by='section_order asc'
+ )
+ context.homepage_sections = [frappe.get_doc('Homepage Section', name) for name in homepage_sections]
+
+ context.metatags = context.metatags or frappe._dict({})
+ context.metatags.image = homepage.hero_image or None
+ context.metatags.description = homepage.description or None
+
+ context.explore_link = '/all-products'
diff --git a/erpnext/templates/pages/material_request_info.html b/erpnext/templates/pages/material_request_info.html
index ff3bd65..9d18989 100644
--- a/erpnext/templates/pages/material_request_info.html
+++ b/erpnext/templates/pages/material_request_info.html
@@ -12,7 +12,7 @@
{% endblock %}
{% block header_actions %}
-<a class='btn btn-xs btn-default' href='/printview?doctype={{ doc.doctype}}&name={{ doc.name }}&format={{ print_format }}' target="_blank" rel="noopener noreferrer">{{ _("Print") }}</a>
+<a class='btn btn-xs btn-light' href='/printview?doctype={{ doc.doctype}}&name={{ doc.name }}&format={{ print_format }}' target="_blank" rel="noopener noreferrer">{{ _("Print") }}</a>
{% endblock %}
{% block page_content %}
@@ -70,5 +70,5 @@
{% endif %}
{% endfor %}
</div>
-</div>
+</div>
{% endblock %}
\ No newline at end of file
diff --git a/erpnext/templates/pages/non_profit/leave-chapter.html b/erpnext/templates/pages/non_profit/leave-chapter.html
index 009c7af..bc4242f 100644
--- a/erpnext/templates/pages/non_profit/leave-chapter.html
+++ b/erpnext/templates/pages/non_profit/leave-chapter.html
@@ -9,7 +9,7 @@
<label for="leave">Why do you want to leave this chapter</label>
<input type="text" name="leave" class="form-control" id="leave">
</div>
- <button type="button" class="btn btn-default btn-leave" data-title= "{{ chapter.name }}" id="btn-leave">Submit
+ <button type="button" class="btn btn-light btn-leave" data-title= "{{ chapter.name }}" id="btn-leave">Submit
</button>
</form>
</div>
diff --git a/erpnext/templates/pages/order.html b/erpnext/templates/pages/order.html
index 64fd32a..67a8fed 100644
--- a/erpnext/templates/pages/order.html
+++ b/erpnext/templates/pages/order.html
@@ -8,23 +8,22 @@
{% block title %}{{ doc.name }}{% endblock %}
{% block header %}
- <h1>{{ doc.name }}</h1>
+ <h1 class="m-0">{{ doc.name }}</h1>
{% endblock %}
{% block header_actions %}
-<a class='btn btn-xs btn-default' href='/printview?doctype={{ doc.doctype}}&name={{ doc.name }}&format={{ print_format }}' target="_blank" rel="noopener noreferrer">{{ _("Print") }}</a>
+<a href='/printview?doctype={{ doc.doctype}}&name={{ doc.name }}&format={{ print_format }}' target="_blank" rel="noopener noreferrer">{{ _("Print") }}</a>
{% endblock %}
{% block page_content %}
<div class="row transaction-subheading">
- <div class="col-xs-6">
-
+ <div class="col-6">
<span class="indicator {{ doc.indicator_color or ("blue" if doc.docstatus==1 else "darkgrey") }}">
{{ _(doc.get('indicator_title')) or _(doc.status) or _("Submitted") }}
</span>
</div>
- <div class="col-xs-6 text-muted text-right small">
+ <div class="col-6 text-muted text-right small">
{{ frappe.utils.formatdate(doc.transaction_date, 'medium') }}
{% if doc.valid_till %}
<p>
@@ -34,16 +33,14 @@
</div>
</div>
-<p class='small' style='padding-top: 15px;'>
-{% if doc.doctype == 'Supplier Quotation' %}
- <b>{{ doc.supplier_name}}</b>
-{% else %}
- <b>{{ doc.customer_name}}</b>
-{% endif %}
-{% if doc.contact_display %}
- <br>
- {{ doc.contact_display }}
-{% endif %}
+<p class="small my-3">
+ {%- set party_name = doc.supplier_name if doc.doctype == 'Supplier Quotation' else doc.customer_name %}
+ <b>{{ party_name }}</b>
+
+ {% if doc.contact_display and doc.contact_display != party_name %}
+ <br>
+ {{ doc.contact_display }}
+ {% endif %}
</p>
{% if doc._header %}
@@ -55,7 +52,7 @@
<!-- items -->
<div class="order-item-table">
<div class="row order-items order-item-header text-muted">
- <div class="col-sm-6 col-xs-6 h6 text-uppercase">
+ <div class="col-sm-6 col-6 h6 text-uppercase">
{{ _("Item") }}
</div>
<div class="col-sm-3 col-xs-3 text-right h6 text-uppercase">
@@ -67,7 +64,7 @@
</div>
{% for d in doc.items %}
<div class="row order-items">
- <div class="col-sm-6 col-xs-6">
+ <div class="col-sm-6 col-6">
{{ item_name_and_description(d) }}
</div>
<div class="col-sm-3 col-xs-3 text-right">
@@ -85,11 +82,10 @@
</div>
<!-- taxes -->
- <div class="order-taxes row">
- <div class="col-sm-6"><!-- empty --></div>
- <div class="col-sm-6 text-right">
+ <div class="order-taxes d-flex justify-content-end">
+ <table>
{% include "erpnext/templates/includes/order/order_taxes.html" %}
- </div>
+ </table>
</div>
</div>
@@ -115,7 +111,7 @@
<div class="control-input">
<input class="form-control" type="number" min="0" max="{{ available_loyalty_points }}" id="loyalty-point-to-redeem">
</div>
- <p class="help-box small text-muted hidden-xs"> Available Points: {{ available_loyalty_points }} </p>
+ <p class="help-box small text-muted d-none d-sm-block"> Available Points: {{ available_loyalty_points }} </p>
</div>
</div>
{% endif %}
diff --git a/erpnext/templates/pages/product_search.html b/erpnext/templates/pages/product_search.html
index f9efd48..6a5425b 100644
--- a/erpnext/templates/pages/product_search.html
+++ b/erpnext/templates/pages/product_search.html
@@ -25,7 +25,7 @@
<div style="text-align: center;">
<div class="more-btn"
style="display: none; text-align: center;">
- <button class="btn btn-default">{{ _("More...") }}</button>
+ <button class="btn btn-light">{{ _("More...") }}</button>
</div>
</div>
</div>
diff --git a/erpnext/templates/pages/projects.html b/erpnext/templates/pages/projects.html
index baa2ae6..7e294e0 100644
--- a/erpnext/templates/pages/projects.html
+++ b/erpnext/templates/pages/projects.html
@@ -20,11 +20,11 @@
aria-valuemin="0" aria-valuemax="100" style="width:{{ doc.percent_complete|round|int }}%;">
</div>
</div>
-{% endif %}
+{% endif %}
<div class="clearfix">
<h4 style="float: left;">{{ _("Tasks") }}</h4>
- <a class="btn btn-secondary btn-default btn-sm" style="float: right; position: relative; top: 10px;" href='/tasks?new=1&project={{ doc.project_name }}'>{{ _("New task") }}</a>
+ <a class="btn btn-secondary btn-light btn-sm" style="float: right; position: relative; top: 10px;" href='/tasks?new=1&project={{ doc.project_name }}'>{{ _("New task") }}</a>
</div>
<p>
diff --git a/erpnext/templates/pages/task_info.html b/erpnext/templates/pages/task_info.html
index 6cfac28..6cd6a7e 100644
--- a/erpnext/templates/pages/task_info.html
+++ b/erpnext/templates/pages/task_info.html
@@ -20,7 +20,7 @@
<div class="page-header-actions-block" data-html-block="header-actions">
<button type="submit" class="btn btn-primary btn-sm btn-form-submit">
{{ __("Update") }}</button>
- <a href="tasks" class="btn btn-default btn-sm">
+ <a href="tasks" class="btn btn-light btn-sm">
{{ __("Cancel") }}</a>
</div>
</div>
@@ -91,7 +91,7 @@
{% endfor %}
</div>
<div class="comment-form-wrapper">
- <a class="add-comment btn btn-default btn-sm">{{ __("Add Comment") }}</a>
+ <a class="add-comment btn btn-light btn-sm">{{ __("Add Comment") }}</a>
<div style="display: none;" id="comment-form">
<p>{{ __("Add Comment") }}</p>
<form>