Website Product Image
This commit is contained in:
parent
93b3a37a3b
commit
da858cc587
@ -11,7 +11,7 @@ error_report_email = "support@erpnext.com"
|
||||
app_include_js = "assets/js/erpnext.min.js"
|
||||
app_include_css = "assets/css/erpnext.css"
|
||||
web_include_js = "assets/js/erpnext-web.min.js"
|
||||
web_include_css = "assets/css/shopping-cart-web.css"
|
||||
web_include_css = "assets/erpnext/css/website.css"
|
||||
|
||||
after_install = "erpnext.setup.install.after_install"
|
||||
|
||||
|
@ -1,120 +1,97 @@
|
||||
.erpnext-footer {
|
||||
margin: 11px auto;
|
||||
text-align: center;
|
||||
margin: 11px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.show-all-reports {
|
||||
margin-top: 5px;
|
||||
font-size: 11px;
|
||||
margin-top: 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* toolbar */
|
||||
.toolbar-splash {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: -10px auto;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: -10px auto;
|
||||
}
|
||||
|
||||
/* pos */
|
||||
.pos {
|
||||
}
|
||||
|
||||
.pos-item {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
height: 0px;
|
||||
padding-bottom: 38%;
|
||||
width: 30%;
|
||||
margin: 1.6%;
|
||||
border: 1px solid #d1d8dd;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
height: 0px;
|
||||
padding-bottom: 38%;
|
||||
width: 30%;
|
||||
margin: 1.6%;
|
||||
border: 1px solid #d1d8dd;
|
||||
}
|
||||
|
||||
.pos-item-text {
|
||||
padding: 0px 5px;
|
||||
padding: 0px 5px;
|
||||
}
|
||||
|
||||
.pos-item .item-code {
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.pos-item .no-image {
|
||||
background-color: #fafbfc;
|
||||
border: 1px dashed #d1d8dd;
|
||||
background-color: #fafbfc;
|
||||
border: 1px dashed #d1d8dd;
|
||||
}
|
||||
|
||||
.pos-item-image {
|
||||
padding-bottom: 100%;
|
||||
background-size: cover;
|
||||
border: 1px solid transparent;
|
||||
padding-bottom: 100%;
|
||||
background-size: cover;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.pos-item-area {
|
||||
border: 1px solid #d1d8dd;
|
||||
border-top: none;
|
||||
border: 1px solid #d1d8dd;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.pos-item-toolbar {
|
||||
padding: 10px 0px;
|
||||
border-bottom: 1px solid #d1d8dd;
|
||||
padding: 10px 0px;
|
||||
border-bottom: 1px solid #d1d8dd;
|
||||
}
|
||||
|
||||
.item-list-area {
|
||||
padding: 15px 0px;
|
||||
padding: 15px 0px;
|
||||
}
|
||||
|
||||
.pos-toolbar, .pos-bill-toolbar {
|
||||
padding: 10px 0px;
|
||||
border-bottom: 1px solid #d1d8dd;
|
||||
height: 51px;
|
||||
.pos-toolbar,
|
||||
.pos-bill-toolbar {
|
||||
padding: 10px 0px;
|
||||
border-bottom: 1px solid #d1d8dd;
|
||||
height: 51px;
|
||||
}
|
||||
|
||||
.pos-item-toolbar .form-group {
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.pos-bill-wrapper {
|
||||
border: 1px solid #d1d8dd;
|
||||
border-top: none;
|
||||
margin-right: -1px;
|
||||
border: 1px solid #d1d8dd;
|
||||
border-top: none;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.pos-bill {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
.pos-bill-row {
|
||||
margin: 0px;
|
||||
padding: 7px 0px;
|
||||
border-top: 1px solid #d1d8dd;
|
||||
margin: 0px;
|
||||
padding: 7px 0px;
|
||||
border-top: 1px solid #d1d8dd;
|
||||
}
|
||||
|
||||
.pos-bill-header {
|
||||
border: none !important;
|
||||
background-color: #f5f7fa;
|
||||
border: none !important;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.pos-item-qty {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pos-qty-row > div {
|
||||
padding: 5px 0px;
|
||||
padding: 5px 0px;
|
||||
}
|
||||
|
||||
.pos-qty-btn {
|
||||
margin-top: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 120%;
|
||||
margin-top: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.pos .search-area .form-group {
|
||||
max-width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.pos .tax-table {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
@ -1,11 +0,0 @@
|
||||
.item-main-image {
|
||||
max-width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
.web-long-description {
|
||||
font-size: 18px;
|
||||
line-height: 200%;
|
||||
}
|
||||
.item-stock {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
50
erpnext/public/css/website.css
Normal file
50
erpnext/public/css/website.css
Normal file
@ -0,0 +1,50 @@
|
||||
.web-long-description {
|
||||
font-size: 18px;
|
||||
line-height: 200%;
|
||||
}
|
||||
.item-stock {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
.product-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
.product-image-wrapper {
|
||||
max-width: 300px;
|
||||
margin: auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.product-image {
|
||||
height: 0px;
|
||||
padding: 0px 0px 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.product-image-square {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding: 50% 0px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
.product-image.missing-image {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding: 50% 0px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
border-radius: 0.5em;
|
||||
border: 1px dashed #d1d8dd;
|
||||
position: relative;
|
||||
}
|
||||
.product-image.missing-image .octicon {
|
||||
font-size: 32px;
|
||||
color: #d1d8dd;
|
||||
}
|
||||
.product-text {
|
||||
padding: 15px 0px;
|
||||
}
|
@ -45,22 +45,16 @@ $.extend(shopping_cart, {
|
||||
|
||||
set_cart_count: function() {
|
||||
var cart_count = getCookie("cart_count");
|
||||
var $cart = $("#website-post-login").find('[data-label="Cart"]');
|
||||
var $cart = $('.dropdown [data-label="Cart"]');
|
||||
var $badge = $cart.find(".badge");
|
||||
var $cog = $("#website-post-login").find(".dropdown-toggle");
|
||||
var $cog_count = $cog.find(".cart-count");
|
||||
if(cart_count) {
|
||||
if($badge.length === 0) {
|
||||
var $badge = $('<span class="badge pull-right"></span>').prependTo($cart.find("a"));
|
||||
var $badge = $('<span class="badge pull-right"></span>')
|
||||
.prependTo($cart.find("a").addClass("badge-hover"));
|
||||
}
|
||||
$badge.html(cart_count);
|
||||
if($cog_count.length === 0) {
|
||||
var $cog_count = $('<sup class="cart-count"></span>').insertAfter($cog.find(".icon-cog"));
|
||||
}
|
||||
$cog_count.html(cart_count);
|
||||
} else {
|
||||
$badge.remove();
|
||||
$cog_count.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
121
erpnext/public/less/erpnext.less
Normal file
121
erpnext/public/less/erpnext.less
Normal file
@ -0,0 +1,121 @@
|
||||
.erpnext-footer {
|
||||
margin: 11px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.show-all-reports {
|
||||
margin-top: 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* toolbar */
|
||||
.toolbar-splash {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: -10px auto;
|
||||
}
|
||||
|
||||
/* pos */
|
||||
.pos {
|
||||
}
|
||||
|
||||
.pos-item {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
height: 0px;
|
||||
padding-bottom: 38%;
|
||||
width: 30%;
|
||||
margin: 1.6%;
|
||||
border: 1px solid #d1d8dd;
|
||||
}
|
||||
|
||||
.pos-item-text {
|
||||
padding: 0px 5px;
|
||||
}
|
||||
|
||||
.pos-item .item-code {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.pos-item .no-image {
|
||||
background-color: #fafbfc;
|
||||
border: 1px dashed #d1d8dd;
|
||||
}
|
||||
|
||||
.pos-item-image {
|
||||
padding-bottom: 100%;
|
||||
background-size: cover;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.pos-item-area {
|
||||
border: 1px solid #d1d8dd;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.pos-item-toolbar {
|
||||
padding: 10px 0px;
|
||||
border-bottom: 1px solid #d1d8dd;
|
||||
}
|
||||
|
||||
.item-list-area {
|
||||
padding: 15px 0px;
|
||||
}
|
||||
|
||||
.pos-toolbar, .pos-bill-toolbar {
|
||||
padding: 10px 0px;
|
||||
border-bottom: 1px solid #d1d8dd;
|
||||
height: 51px;
|
||||
}
|
||||
|
||||
.pos-item-toolbar .form-group {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.pos-bill-wrapper {
|
||||
border: 1px solid #d1d8dd;
|
||||
border-top: none;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.pos-bill {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
.pos-bill-row {
|
||||
margin: 0px;
|
||||
padding: 7px 0px;
|
||||
border-top: 1px solid #d1d8dd;
|
||||
}
|
||||
|
||||
.pos-bill-header {
|
||||
border: none !important;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.pos-item-qty {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pos-qty-row > div {
|
||||
padding: 5px 0px;
|
||||
}
|
||||
|
||||
.pos-qty-btn {
|
||||
margin-top: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.pos .search-area .form-group {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.pos .tax-table {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
53
erpnext/public/less/website.less
Normal file
53
erpnext/public/less/website.less
Normal file
@ -0,0 +1,53 @@
|
||||
@border-color: #d1d8dd;
|
||||
|
||||
.web-long-description {
|
||||
font-size: 18px;
|
||||
line-height: 200%;
|
||||
}
|
||||
.item-stock {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.product-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-image-wrapper {
|
||||
max-width: 300px;
|
||||
margin: auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.product-image {
|
||||
height: 0px;
|
||||
padding: 0px 0px 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.product-image-square {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding: 50% 0px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
.product-image.missing-image {
|
||||
.product-image-square;
|
||||
border: 1px dashed @border-color;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.product-image.missing-image .octicon {
|
||||
font-size: 32px;
|
||||
color: @border-color;
|
||||
}
|
||||
|
||||
.product-text {
|
||||
padding: 15px 0px;
|
||||
}
|
@ -25,7 +25,7 @@ def clear_cart_count(login_manager):
|
||||
if show_cart_count():
|
||||
frappe.local.cookie_manager.delete_cookie("cart_count")
|
||||
|
||||
def update_website_params(context):
|
||||
def update_website_context(context):
|
||||
cart_enabled = is_cart_enabled()
|
||||
context["shopping_cart_enabled"] = cart_enabled
|
||||
|
||||
@ -44,6 +44,6 @@ def update_my_account_context(context):
|
||||
{"label": _("Orders"), "url": "orders"},
|
||||
{"label": _("Invoices"), "url": "invoices"},
|
||||
{"label": _("Shipments"), "url": "shipments"},
|
||||
{"label": _("Issues"), "url": "tickets"},
|
||||
# {"label": _("Issues"), "url": "tickets"},
|
||||
{"label": _("Addresses"), "url": "addresses"},
|
||||
])
|
||||
|
@ -1,6 +1,7 @@
|
||||
frappe.listview_settings['Item'] = {
|
||||
add_fields: ["item_name", "stock_uom", "item_group", "image", "variant_of",
|
||||
"has_variants", "end_of_life", "is_sales_item"],
|
||||
|
||||
get_indicator: function(doc) {
|
||||
if(doc.end_of_life < frappe.datetime.get_today()) {
|
||||
return [__("Expired"), "grey", "end_of_life,<,Today"]
|
||||
|
@ -3,25 +3,19 @@
|
||||
{% block header %}<h2>{{ title }}</h2>{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% from "erpnext/templates/includes/macros.html" import product_image %}
|
||||
<div class="item-content">
|
||||
{% include 'templates/includes/product_search_box.html' %}
|
||||
<div class="product-page-content" itemscope itemtype="http://schema.org/Product">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="col-sm-5">
|
||||
{% if slideshow %}
|
||||
{% include "templates/includes/slideshow.html" %}
|
||||
{% else %}
|
||||
{% if website_image %}
|
||||
<image itemprop="image" class="item-main-image"
|
||||
src="{{ website_image }}" />
|
||||
{% else %}
|
||||
<div class="img-area">
|
||||
{% include 'templates/includes/product_missing_image.html' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{{ product_image(website_image, "product-full-image") }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-sm-7">
|
||||
<!-- <h3 itemprop="name" style="margin-top: 0px;">{{ item_name }}</h3> -->
|
||||
<div itemprop="description">
|
||||
{{ web_long_description or description or _("No description given") }}
|
||||
|
@ -39,33 +39,12 @@ $(function() {
|
||||
|
||||
{% block style %}
|
||||
<style>
|
||||
.product-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-image-wrapper {
|
||||
max-width: 300px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 100%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid transparent;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.product-image.missing-image {
|
||||
border: 1px dashed {{ border_color or "#d1d8dd" }};
|
||||
border: 1px dashed {{ theme.border_color or "#d1d8dd" }};
|
||||
}
|
||||
|
||||
.product-text {
|
||||
padding: 15px 0px;
|
||||
.product-image.missing-image .octicon {
|
||||
color: {{ theme.border_color or "#d1d8dd" }};
|
||||
}
|
||||
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
@ -105,8 +105,7 @@ $.extend(shopping_cart, {
|
||||
|
||||
render_item_row: function($cart_items, doc) {
|
||||
doc.image_html = doc.website_image ?
|
||||
'<div style="height: 120px; overflow: hidden;"><img src="' + doc.website_image + '" /></div>' :
|
||||
'{% include "templates/includes/product_missing_image.html" %}';
|
||||
'<div style="height: 120px; overflow: hidden;"><img src="' + doc.website_image + '" /></div>': "";
|
||||
|
||||
if(doc.description === doc.item_name) doc.description = "";
|
||||
|
||||
@ -265,7 +264,7 @@ $.extend(shopping_cart, {
|
||||
.html(msg || frappe._("Something went wrong!"))
|
||||
.toggle(true);
|
||||
} else {
|
||||
window.location.href = "order?name=" + encodeURIComponent(r.message);
|
||||
window.location.href = "/orders/" + encodeURIComponent(r.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
17
erpnext/templates/includes/macros.html
Normal file
17
erpnext/templates/includes/macros.html
Normal file
@ -0,0 +1,17 @@
|
||||
{% macro product_image_square(website_image, css_class="") %}
|
||||
<div class="product-image product-image-square {% if not website_image -%} missing-image {%- endif %} {{ css_class }}"
|
||||
{% if website_image -%} style="background-image: url({{ website_image }});" {%- endif %}>
|
||||
{% if not website_image -%}<i class="centered octicon octicon-device-camera"></i>{%- endif %}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro product_image(website_image, css_class="") %}
|
||||
<div class="product-image {% if not website_image -%} missing-image {%- endif %} {{ css_class }}">
|
||||
{% if website_image -%}
|
||||
<img src="{{ website_image }}" class="img-responsive">
|
||||
{%- else -%}
|
||||
<i class="centered octicon octicon-device-camera"></i>
|
||||
{%- endif %}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
@ -1,8 +1,8 @@
|
||||
{% from "erpnext/templates/includes/macros.html" import product_image_square %}
|
||||
|
||||
<a class="product-link" href="{{ route or page_name }}">
|
||||
<div class="col-sm-2 product-image-wrapper">
|
||||
<div class="product-image {% if not website_image -%}missing-image{%- endif %}"
|
||||
{% if website_image -%} style="background-image: url({{ website_image }});" {%- endif %}>
|
||||
</div>
|
||||
<div class="col-sm-2 col-xs-4 product-image-wrapper">
|
||||
{{ product_image_square(website_image) }}
|
||||
<div class="product-text small">{{ item_name }}</div>
|
||||
</div>
|
||||
</a>
|
||||
|
@ -1 +0,0 @@
|
||||
<div class="missing-image"><i class="icon-camera"></i></div>
|
Loading…
x
Reference in New Issue
Block a user