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