mirror of
https://github.com/frappe/erpnext.git
synced 2026-06-02 03:39:11 +00:00
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
This commit is contained in:
Faris Ansari
@@ -1,143 +0,0 @@
|
||||
{% extends "templates/web.html" %}
|
||||
|
||||
{% block title %} {{ title }} {% endblock %}
|
||||
|
||||
{% block breadcrumbs %}
|
||||
{% include "templates/includes/breadcrumbs.html" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block page_content %}
|
||||
{% from "erpnext/templates/includes/macros.html" import product_image %}
|
||||
<div class="item-content">
|
||||
<div class="product-page-content" itemscope itemtype="http://schema.org/Product">
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
{% if slideshow %}
|
||||
{% set slideshow_items = frappe.get_list(doctype="Website Slideshow Item", fields=["image"], filters={ "parent": doc.slideshow }) %}
|
||||
<div class="col-md-1">
|
||||
{%- for slideshow_item in slideshow_items -%}
|
||||
{% set image_src = slideshow_item['image'] %}
|
||||
{% if image_src %}
|
||||
<div class="item-alternative-image border">
|
||||
<img src="{{ image_src }}" height="50" weight="50" />
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="item-image">
|
||||
{% set first_image = slideshow_items[0]['image'] %}
|
||||
{{ product_image(first_image, "product-full-image") }}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="col-md-6">
|
||||
{{ product_image(website_image, "product-full-image") }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="col-sm-6">
|
||||
<h2 itemprop="name">{{ item_name }}</h2>
|
||||
<p class="text-muted">
|
||||
{{ _("Item Code") }}: <span itemprop="productID">{{ variant and variant.name or name }}</span>
|
||||
</p>
|
||||
<br>
|
||||
<div class="item-attribute-selectors">
|
||||
{% if has_variants and attributes %}
|
||||
|
||||
{% for d in attributes %}
|
||||
{% if attribute_values[d.attribute] -%}
|
||||
<div class="item-view-attribute {% if (attribute_values[d.attribute] | len)==1 -%} hidden {%- endif %}"
|
||||
style="margin-bottom: 10px;">
|
||||
<h6 class="text-muted">{{ _(d.attribute) }}</h6>
|
||||
<select class="form-control"
|
||||
style="max-width: 140px"
|
||||
data-attribute="{{ d.attribute }}">
|
||||
{% for value in attribute_values[d.attribute] %}
|
||||
<option value="{{ value }}"
|
||||
{% if selected_attributes and selected_attributes[d.attribute]==value -%}
|
||||
selected
|
||||
{%- elif disabled_attributes and value in disabled_attributes.get(d.attribute, []) -%}
|
||||
disabled
|
||||
{%- endif %}>
|
||||
{{ _(value) }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
{%- endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
|
||||
<h4 class="item-price hide" itemprop="price"></h4>
|
||||
<div class="item-stock hide" itemprop="availability"></div>
|
||||
</div>
|
||||
<div class="item-cart hide">
|
||||
<div id="item-spinner">
|
||||
<span style="display: inline-block">
|
||||
<div class="input-group number-spinner">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default cart-btn" data-dir="dwn">
|
||||
–</button>
|
||||
</span>
|
||||
<input class="form-control text-right cart-qty" value="1">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default cart-btn" data-dir="up" style="margin-left:-2px;">
|
||||
+</button>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div id="item-add-to-cart">
|
||||
<button class="btn btn-primary btn-sm">
|
||||
{{ _("Add to Cart") }}</button>
|
||||
</div>
|
||||
<div id="item-update-cart" style="display: none;">
|
||||
<a href="/cart" class='btn btn-sm btn-default'>
|
||||
<i class='octicon octicon-check'></i>
|
||||
{{ _("View in Cart") }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row item-website-description margin-top">
|
||||
<div class="col-md-12">
|
||||
<div class="h6 text-uppercase">{{ _("Description") }}</div>
|
||||
<div itemprop="description" class="item-desc">
|
||||
{{ web_long_description or description or _("No description given") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if website_specifications -%}
|
||||
<div class="row item-website-specification margin-top">
|
||||
<div class="col-md-12">
|
||||
<div class="h6 text-uppercase">{{ _("Specifications") }}</div>
|
||||
|
||||
<table class="table">
|
||||
{% for d in website_specifications -%}
|
||||
<tr>
|
||||
<td class="text-muted" style="width: 30%;">{{ d.label }}</td>
|
||||
<td>{{ d.description }}</td>
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{%- endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
{% include "templates/includes/product_page.js" %}
|
||||
|
||||
{% if variant_info %}
|
||||
window.variant_info = {{ variant_info }};
|
||||
{% else %}
|
||||
window.variant_info = null;
|
||||
{% endif %}
|
||||
</script>
|
||||
{% endblock %}
|
||||
32
erpnext/templates/generators/item/item.html
Normal file
32
erpnext/templates/generators/item/item.html
Normal file
@@ -0,0 +1,32 @@
|
||||
{% extends "templates/web.html" %}
|
||||
|
||||
{% block title %} {{ title }} {% endblock %}
|
||||
|
||||
{% block breadcrumbs %}
|
||||
{% include "templates/includes/breadcrumbs.html" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block page_content %}
|
||||
{% from "erpnext/templates/includes/macros.html" import product_image %}
|
||||
<div class="item-content">
|
||||
<div class="product-page-content" itemscope itemtype="http://schema.org/Product">
|
||||
<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" %}
|
||||
|
||||
{{ doc.website_content or '' }}
|
||||
</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 %}
|
||||
67
erpnext/templates/generators/item/item_add_to_cart.html
Normal file
67
erpnext/templates/generators/item/item_add_to_cart.html
Normal file
@@ -0,0 +1,67 @@
|
||||
{% if shopping_cart and shopping_cart.cart_settings.enabled %}
|
||||
|
||||
{% set cart_settings = shopping_cart.cart_settings %}
|
||||
{% set product_info = shopping_cart.product_info %}
|
||||
|
||||
<div class="item-cart row mt-2" data-variant-item-code="{{ item_code }}">
|
||||
<div class="col-md-12">
|
||||
{% if cart_settings.show_price and product_info.price %}
|
||||
<h4>
|
||||
{{ product_info.price.formatted_price_sales_uom }}
|
||||
<small class="text-muted">({{ product_info.price.formatted_price }} / {{ product_info.uom }})</small>
|
||||
</h4>
|
||||
{% endif %}
|
||||
{% if cart_settings.show_stock_availability %}
|
||||
<div>
|
||||
{% if product_info.in_stock == 0 %}
|
||||
<span class="text-danger">
|
||||
{{ _('Not in stock') }}
|
||||
</span>
|
||||
{% elif product_info.in_stock == 1 %}
|
||||
<span class="text-success">
|
||||
{{ _('In stock') }}
|
||||
{% if product_info.show_stock_qty and product_info.stock_qty %}
|
||||
({{ product_info.stock_qty[0][0] }})
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="mt-3">
|
||||
<a href="/cart"
|
||||
class="btn btn-light btn-view-in-cart {% if not product_info.qty %}hidden{% endif %}"
|
||||
role="button"
|
||||
>
|
||||
{{ _("View in Cart") }}
|
||||
</a>
|
||||
<button
|
||||
data-item-code="{{item_code}}"
|
||||
class="btn btn-outline-primary btn-add-to-cart {% if product_info.qty %}hidden{% endif %}"
|
||||
>
|
||||
{{ _("Add to Cart") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
frappe.ready(() => {
|
||||
$('.page_content').on('click', '.btn-add-to-cart', (e) => {
|
||||
const $btn = $(e.currentTarget);
|
||||
$btn.prop('disabled', true);
|
||||
const item_code = $btn.data('item-code');
|
||||
erpnext.shopping_cart.update_cart({
|
||||
item_code,
|
||||
qty: 1,
|
||||
callback(r) {
|
||||
$btn.prop('disabled', false);
|
||||
if (r.message) {
|
||||
$('.btn-add-to-cart, .btn-view-in-cart').toggleClass('hidden');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endif %}
|
||||
23
erpnext/templates/generators/item/item_configure.html
Normal file
23
erpnext/templates/generators/item/item_configure.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{% if shopping_cart and shopping_cart.cart_settings.enabled %}
|
||||
{% set cart_settings = shopping_cart.cart_settings %}
|
||||
|
||||
<div class="mt-3">
|
||||
{% if cart_settings.show_configure_button | int %}
|
||||
<button class="btn btn-primary btn-configure"
|
||||
data-item-code="{{ doc.name }}"
|
||||
data-item-name="{{ doc.item_name }}"
|
||||
>
|
||||
{{ _('Configure') }}
|
||||
</button>
|
||||
{% endif %}
|
||||
{% if cart_settings.show_contact_us_button | int %}
|
||||
<button class="btn btn-link btn-inquiry" data-item-code="{{ doc.name }}">
|
||||
{{ _('Contact Us') }}
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
<script>
|
||||
{% include "templates/generators/item/item_configure.js" %}
|
||||
{% include "templates/generators/item/item_inquiry.js" %}
|
||||
</script>
|
||||
{% endif %}
|
||||
318
erpnext/templates/generators/item/item_configure.js
Normal file
318
erpnext/templates/generators/item/item_configure.js
Normal file
@@ -0,0 +1,318 @@
|
||||
class ItemConfigure {
|
||||
constructor(item_code, item_name) {
|
||||
this.item_code = item_code;
|
||||
this.item_name = item_name;
|
||||
|
||||
this.get_attributes_and_values()
|
||||
.then(attribute_data => {
|
||||
this.attribute_data = attribute_data;
|
||||
this.show_configure_dialog();
|
||||
});
|
||||
}
|
||||
|
||||
show_configure_dialog() {
|
||||
const fields = this.attribute_data.map(a => {
|
||||
return {
|
||||
fieldtype: 'Select',
|
||||
label: a.attribute,
|
||||
fieldname: a.attribute,
|
||||
options: a.values.map(v => {
|
||||
return {
|
||||
label: v,
|
||||
value: v
|
||||
};
|
||||
}),
|
||||
change: (e) => {
|
||||
this.on_attribute_selection(e);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
this.dialog = new frappe.ui.Dialog({
|
||||
title: __('Configure {0}', [this.item_name]),
|
||||
fields,
|
||||
on_hide: () => {
|
||||
set_continue_configuration();
|
||||
}
|
||||
});
|
||||
|
||||
this.attribute_data.forEach(a => {
|
||||
const field = this.dialog.get_field(a.attribute);
|
||||
const $a = $(`<a href>${__("Clear")}</a>`);
|
||||
$a.on('click', (e) => {
|
||||
e.preventDefault();
|
||||
this.dialog.set_value(a.attribute, '');
|
||||
});
|
||||
field.$wrapper.find('.help-box').append($a);
|
||||
});
|
||||
|
||||
this.append_status_area();
|
||||
this.dialog.show();
|
||||
|
||||
this.dialog.set_values(JSON.parse(localStorage.getItem(this.get_cache_key())));
|
||||
|
||||
$('.btn-configure').prop('disabled', false);
|
||||
}
|
||||
|
||||
on_attribute_selection(e) {
|
||||
if (e) {
|
||||
const changed_fieldname = $(e.target).data('fieldname');
|
||||
this.show_range_input_if_applicable(changed_fieldname);
|
||||
} else {
|
||||
this.show_range_input_for_all_fields();
|
||||
}
|
||||
|
||||
const values = this.dialog.get_values();
|
||||
if (Object.keys(values).length === 0) {
|
||||
this.clear_status();
|
||||
localStorage.removeItem(this.get_cache_key());
|
||||
return;
|
||||
}
|
||||
|
||||
// save state
|
||||
localStorage.setItem(this.get_cache_key(), JSON.stringify(values));
|
||||
|
||||
// show
|
||||
this.set_loading_status();
|
||||
|
||||
this.get_next_attribute_and_values(values)
|
||||
.then(data => {
|
||||
const {
|
||||
valid_options_for_attributes,
|
||||
} = data;
|
||||
|
||||
this.set_item_found_status(data);
|
||||
|
||||
for (let attribute in valid_options_for_attributes) {
|
||||
const valid_options = valid_options_for_attributes[attribute];
|
||||
const options = this.dialog.get_field(attribute).df.options;
|
||||
const new_options = options.map(o => {
|
||||
o.disabled = !valid_options.includes(o.value);
|
||||
return o;
|
||||
});
|
||||
|
||||
this.dialog.set_df_property(attribute, 'options', new_options);
|
||||
this.dialog.get_field(attribute).set_options();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
show_range_input_for_all_fields() {
|
||||
this.dialog.fields.forEach(f => {
|
||||
this.show_range_input_if_applicable(f.fieldname);
|
||||
});
|
||||
}
|
||||
|
||||
show_range_input_if_applicable(fieldname) {
|
||||
const changed_field = this.dialog.get_field(fieldname);
|
||||
const changed_value = changed_field.get_value();
|
||||
if (changed_value && changed_value.includes(' to ')) {
|
||||
// possible range input
|
||||
let numbers = changed_value.split(' to ');
|
||||
numbers = numbers.map(number => parseFloat(number));
|
||||
|
||||
if (!numbers.some(n => isNaN(n))) {
|
||||
numbers.sort((a, b) => a - b);
|
||||
if (changed_field.$input_wrapper.find('.range-selector').length) {
|
||||
return;
|
||||
}
|
||||
const parent = $('<div class="range-selector">')
|
||||
.insertBefore(changed_field.$input_wrapper.find('.help-box'));
|
||||
const control = frappe.ui.form.make_control({
|
||||
df: {
|
||||
fieldtype: 'Int',
|
||||
label: __('Enter value betweeen {0} and {1}', [numbers[0], numbers[1]]),
|
||||
change: () => {
|
||||
const value = control.get_value();
|
||||
if (value < numbers[0] || value > numbers[1]) {
|
||||
control.$wrapper.addClass('was-validated');
|
||||
control.set_description(
|
||||
__('Value must be between {0} and {1}', [numbers[0], numbers[1]]));
|
||||
control.$input[0].setCustomValidity('error');
|
||||
} else {
|
||||
control.$wrapper.removeClass('was-validated');
|
||||
control.set_description('');
|
||||
control.$input[0].setCustomValidity('');
|
||||
this.update_range_values(fieldname, value);
|
||||
}
|
||||
}
|
||||
},
|
||||
render_input: true,
|
||||
parent
|
||||
});
|
||||
control.$wrapper.addClass('mt-3');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
update_range_values(attribute, range_value) {
|
||||
this.range_values = this.range_values || {};
|
||||
this.range_values[attribute] = range_value;
|
||||
}
|
||||
|
||||
show_remaining_optional_attributes() {
|
||||
// show all attributes if remaining
|
||||
// unselected attributes are all optional
|
||||
const unselected_attributes = this.dialog.fields.filter(df => {
|
||||
const value_selected = this.dialog.get_value(df.fieldname);
|
||||
return !value_selected;
|
||||
});
|
||||
const is_optional_attribute = df => {
|
||||
const optional_attributes = this.attribute_data
|
||||
.filter(a => a.optional).map(a => a.attribute);
|
||||
return optional_attributes.includes(df.fieldname);
|
||||
};
|
||||
if (unselected_attributes.every(is_optional_attribute)) {
|
||||
unselected_attributes.forEach(df => {
|
||||
this.dialog.fields_dict[df.fieldname].$wrapper.show();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
set_loading_status() {
|
||||
this.dialog.$status_area.html(`
|
||||
<div class="alert alert-warning d-flex justify-content-between align-items-center" role="alert">
|
||||
${__('Loading...')}
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
set_item_found_status(data) {
|
||||
const html = this.get_html_for_item_found(data);
|
||||
this.dialog.$status_area.html(html);
|
||||
}
|
||||
|
||||
clear_status() {
|
||||
this.dialog.$status_area.empty();
|
||||
}
|
||||
|
||||
get_html_for_item_found({ filtered_items_count, filtered_items, exact_match, product_info }) {
|
||||
const exact_match_message = __('1 exact match.');
|
||||
const one_item = exact_match.length === 1 ?
|
||||
exact_match[0] :
|
||||
filtered_items_count === 1 ?
|
||||
filtered_items[0] : '';
|
||||
|
||||
const item_add_to_cart = one_item ? `
|
||||
<div class="alert alert-success d-flex justify-content-between align-items-center" role="alert">
|
||||
<div>
|
||||
<div>${one_item} ${product_info && product_info.price ? '(' + product_info.price.formatted_price_sales_uom + ')' : ''}</div>
|
||||
</div>
|
||||
<a href data-action="btn_add_to_cart" data-item-code="${one_item}">
|
||||
${__('Add to cart')}
|
||||
</a>
|
||||
</div>
|
||||
`: '';
|
||||
|
||||
const items_found = filtered_items_count === 1 ?
|
||||
__('{0} item found.', [filtered_items_count]) :
|
||||
__('{0} items found.', [filtered_items_count]);
|
||||
|
||||
const item_found_status = `
|
||||
<div class="alert alert-warning d-flex justify-content-between align-items-center" role="alert">
|
||||
<span>
|
||||
${exact_match.length === 1 ? '' : items_found}
|
||||
${exact_match.length === 1 ? `<span>${exact_match_message}</span>` : ''}
|
||||
</span>
|
||||
<a href data-action="btn_clear_values">
|
||||
${__('Clear values')}
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return `
|
||||
${item_add_to_cart}
|
||||
${item_found_status}
|
||||
`;
|
||||
}
|
||||
|
||||
btn_add_to_cart(e) {
|
||||
if (frappe.session.user !== 'Guest') {
|
||||
localStorage.removeItem(this.get_cache_key());
|
||||
}
|
||||
const item_code = $(e.currentTarget).data('item-code');
|
||||
const additional_notes = Object.keys(this.range_values || {}).map(attribute => {
|
||||
return `${attribute}: ${this.range_values[attribute]}`;
|
||||
}).join('\n');
|
||||
erpnext.shopping_cart.update_cart({
|
||||
item_code,
|
||||
additional_notes,
|
||||
qty: 1
|
||||
});
|
||||
this.dialog.hide();
|
||||
}
|
||||
|
||||
btn_clear_values() {
|
||||
this.dialog.fields_list.forEach(f => {
|
||||
f.df.options = f.df.options.map(option => {
|
||||
option.disabled = false;
|
||||
return option;
|
||||
});
|
||||
});
|
||||
this.dialog.clear();
|
||||
this.on_attribute_selection();
|
||||
}
|
||||
|
||||
append_status_area() {
|
||||
this.dialog.$status_area = $('<div class="status-area">');
|
||||
this.dialog.$wrapper.find('.modal-body').prepend(this.dialog.$status_area);
|
||||
this.dialog.$wrapper.on('click', '[data-action]', (e) => {
|
||||
e.preventDefault();
|
||||
const $target = $(e.currentTarget);
|
||||
const action = $target.data('action');
|
||||
const method = this[action];
|
||||
method.call(this, e);
|
||||
});
|
||||
this.dialog.$body.css({ maxHeight: '75vh', overflow: 'auto', overflowX: 'hidden' });
|
||||
}
|
||||
|
||||
get_next_attribute_and_values(selected_attributes) {
|
||||
return this.call('erpnext.portal.product_configurator.utils.get_next_attribute_and_values', {
|
||||
item_code: this.item_code,
|
||||
selected_attributes
|
||||
});
|
||||
}
|
||||
|
||||
get_attributes_and_values() {
|
||||
return this.call('erpnext.portal.product_configurator.utils.get_attributes_and_values', {
|
||||
item_code: this.item_code
|
||||
});
|
||||
}
|
||||
|
||||
get_cache_key() {
|
||||
return `configure:${this.item_code}`;
|
||||
}
|
||||
|
||||
call(method, args) {
|
||||
// promisified frappe.call
|
||||
return new Promise((resolve, reject) => {
|
||||
frappe.call(method, args)
|
||||
.then(r => resolve(r.message))
|
||||
.fail(reject);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function set_continue_configuration() {
|
||||
const $btn_configure = $('.btn-configure');
|
||||
const { itemCode } = $btn_configure.data();
|
||||
|
||||
if (localStorage.getItem(`configure:${itemCode}`)) {
|
||||
$btn_configure.text(__('Continue Configuration'));
|
||||
} else {
|
||||
$btn_configure.text(__('Configure'));
|
||||
}
|
||||
}
|
||||
|
||||
frappe.ready(() => {
|
||||
const $btn_configure = $('.btn-configure');
|
||||
if (!$btn_configure.length) return;
|
||||
const { itemCode, itemName } = $btn_configure.data();
|
||||
|
||||
set_continue_configuration();
|
||||
|
||||
$btn_configure.on('click', () => {
|
||||
$btn_configure.prop('disabled', true);
|
||||
new ItemConfigure(itemCode, itemName);
|
||||
});
|
||||
});
|
||||
22
erpnext/templates/generators/item/item_details.html
Normal file
22
erpnext/templates/generators/item/item_details.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<div class="col-md-8">
|
||||
<!-- title -->
|
||||
<h1 itemprop="name">
|
||||
{{ item_name }}
|
||||
</h1>
|
||||
<p class="text-muted">
|
||||
<span>{{ _("Item Code") }}:</span>
|
||||
<span itemprop="productID">{{ doc.name }}</span>
|
||||
</p>
|
||||
<!-- description -->
|
||||
<div itemprop="description">
|
||||
{{ doc.web_long_description or doc.description or _("No description given") | safe }}
|
||||
</div>
|
||||
|
||||
{% if has_variants %}
|
||||
<!-- configure template -->
|
||||
{% include "templates/generators/item/item_configure.html" %}
|
||||
{% else %}
|
||||
<!-- add variant to cart -->
|
||||
{% include "templates/generators/item/item_add_to_cart.html" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
107
erpnext/templates/generators/item/item_image.html
Normal file
107
erpnext/templates/generators/item/item_image.html
Normal file
@@ -0,0 +1,107 @@
|
||||
<div class="col-md-4 h-100">
|
||||
{% if slides %}
|
||||
{{ product_image(slides[0].image, 'product-image') }}
|
||||
<div class="item-slideshow">
|
||||
{% for item in slides %}
|
||||
<img class="item-slideshow-image mt-2 {% if loop.first %}active{% endif %}"
|
||||
src="{{ item.image }}" alt="{{ item.heading }}">
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- Simple image slideshow -->
|
||||
<script>
|
||||
frappe.ready(() => {
|
||||
$('.page_content').on('click', '.item-slideshow-image', (e) => {
|
||||
const $img = $(e.currentTarget);
|
||||
const link = $img.prop('src');
|
||||
const $product_image = $('.product-image');
|
||||
$product_image.find('a').prop('href', link);
|
||||
$product_image.find('img').prop('src', link);
|
||||
|
||||
$('.item-slideshow-image').removeClass('active');
|
||||
$img.addClass('active');
|
||||
});
|
||||
})
|
||||
</script>
|
||||
{% else %}
|
||||
{{ product_image(website_image or image or 'no-image.jpg') }}
|
||||
{% endif %}
|
||||
|
||||
<!-- Simple image preview -->
|
||||
|
||||
<div class="image-zoom-view" style="display: none;">
|
||||
<button type="button" class="close" aria-label="Close">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.website-image {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-zoom-view {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 1080;
|
||||
}
|
||||
|
||||
.image-zoom-view img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.image-zoom-view button {
|
||||
position: absolute;
|
||||
right: 3rem;
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
.image-zoom-view svg {
|
||||
color: var(--white);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
frappe.ready(() => {
|
||||
const $zoom_wrapper = $('.image-zoom-view');
|
||||
|
||||
$('.website-image').on('click', (e) => {
|
||||
e.preventDefault();
|
||||
const $img = $(e.target);
|
||||
const src = $img.prop('src');
|
||||
if (!src) return;
|
||||
show_preview(src);
|
||||
});
|
||||
|
||||
$zoom_wrapper.on('click', 'button', hide_preview);
|
||||
|
||||
$(document).on('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
hide_preview();
|
||||
}
|
||||
});
|
||||
|
||||
function show_preview(src) {
|
||||
$zoom_wrapper.show();
|
||||
const $img = $(`<img src="${src}">`)
|
||||
$zoom_wrapper.append($img);
|
||||
}
|
||||
|
||||
function hide_preview() {
|
||||
$zoom_wrapper.find('img').remove();
|
||||
$zoom_wrapper.hide();
|
||||
}
|
||||
})
|
||||
</script>
|
||||
70
erpnext/templates/generators/item/item_inquiry.js
Normal file
70
erpnext/templates/generators/item/item_inquiry.js
Normal file
@@ -0,0 +1,70 @@
|
||||
frappe.ready(() => {
|
||||
const d = new frappe.ui.Dialog({
|
||||
title: __('Contact Us'),
|
||||
fields: [
|
||||
{
|
||||
fieldtype: 'Data',
|
||||
label: __('Full Name'),
|
||||
fieldname: 'lead_name',
|
||||
reqd: 1
|
||||
},
|
||||
{
|
||||
fieldtype: 'Data',
|
||||
label: __('Organization Name'),
|
||||
fieldname: 'company_name',
|
||||
},
|
||||
{
|
||||
fieldtype: 'Data',
|
||||
label: __('Email'),
|
||||
fieldname: 'email_id',
|
||||
options: 'Email',
|
||||
reqd: 1
|
||||
},
|
||||
{
|
||||
fieldtype: 'Data',
|
||||
label: __('Subject'),
|
||||
fieldname: 'subject',
|
||||
reqd: 1
|
||||
},
|
||||
{
|
||||
fieldtype: 'Text',
|
||||
label: __('Message'),
|
||||
fieldname: 'message',
|
||||
reqd: 1
|
||||
}
|
||||
],
|
||||
primary_action: send_inquiry,
|
||||
primary_action_label: __('Send')
|
||||
});
|
||||
|
||||
function send_inquiry() {
|
||||
const values = d.get_values();
|
||||
const doc = Object.assign({}, values);
|
||||
delete doc.subject;
|
||||
delete doc.message;
|
||||
|
||||
d.hide();
|
||||
|
||||
frappe.call('erpnext.shopping_cart.cart.create_lead_for_item_inquiry', {
|
||||
lead: doc,
|
||||
subject: values.subject,
|
||||
message: values.message
|
||||
}).then(r => {
|
||||
if (r.message) {
|
||||
d.clear();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('.btn-inquiry').click((e) => {
|
||||
const $btn = $(e.target);
|
||||
const item_code = $btn.data('item-code');
|
||||
d.set_value('subject', 'Inquiry about ' + item_code);
|
||||
if (!['Administrator', 'Guest'].includes(frappe.session.user)) {
|
||||
d.set_value('email_id', frappe.session.user);
|
||||
d.set_value('lead_name', frappe.get_cookie('full_name'));
|
||||
}
|
||||
|
||||
d.show();
|
||||
});
|
||||
});
|
||||
16
erpnext/templates/generators/item/item_specifications.html
Normal file
16
erpnext/templates/generators/item/item_specifications.html
Normal file
@@ -0,0 +1,16 @@
|
||||
{% if doc.website_specifications -%}
|
||||
<div class="row item-website-specification mt-5">
|
||||
<div class="col-md-12">
|
||||
<h6 class="text-uppercase text-muted">{{ _("Specifications") }}</h6>
|
||||
|
||||
<table class="table table-bordered">
|
||||
{% for d in doc.website_specifications -%}
|
||||
<tr>
|
||||
<td class="text-muted" style="width: 30%;">{{ d.label }}</td>
|
||||
<td>{{ d.description }}</td>
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{%- endif %}
|
||||
@@ -9,29 +9,32 @@
|
||||
{% include "templates/includes/slideshow.html" %}
|
||||
{% endif %}
|
||||
{% if description %}<!-- description -->
|
||||
<div itemprop="description">{{ description or ""}}</div>
|
||||
<div class="mb-3" itemprop="description">{{ description or ""}}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
{% if items %}
|
||||
<div id="search-list" {% if not products_as_list -%} class="row" {%- endif %}>
|
||||
{% for i in range(0, page_length) %}
|
||||
{% if items[i] %}
|
||||
{{ items[i] }}
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
{% if items %}
|
||||
<div id="search-list">
|
||||
{% for i in range(0, page_length) %}
|
||||
{% if items[i] %}
|
||||
{%- set item = items[i] %}
|
||||
{% include "erpnext/www/all-products/item_row.html" %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="item-group-nav-buttons">
|
||||
{% if frappe.form_dict.start|int > 0 %}
|
||||
<a class="btn btn-outline-secondary" href="/{{ pathname }}?start={{ frappe.form_dict.start|int - page_length }}">{{ _("Prev") }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="text-center item-group-nav-buttons">
|
||||
{% if frappe.form_dict.start|int > 0 %}
|
||||
<a class="btn btn-default" href="/{{ pathname }}?start={{ frappe.form_dict.start|int - page_length }}">{{ _("Prev") }}</a>
|
||||
{% endif %}
|
||||
{% if items|length > page_length %}
|
||||
<a class="btn btn-default" href="/{{ pathname }}?start={{ frappe.form_dict.start|int + page_length }}">{{ _("Next") }}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% if items|length > page_length %}
|
||||
<a class="btn btn-outline-secondary" href="/{{ pathname }}?start={{ frappe.form_dict.start|int + page_length }}">{{ _("Next") }}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-muted">{{ _("No items listed") }}.</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -1,12 +1,12 @@
|
||||
<div class="web-list-item">
|
||||
<a href="/addresses?name={{ doc.name | urlencode }}" class="no-decoration">
|
||||
<div class="web-list-item mb-3">
|
||||
<a href="/addresses?name={{ doc.name | urlencode }}" class="no-underline text-reset">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<div class="col-3">
|
||||
<span class="indicator {{ "red" if doc.address_type=="Office" else "green" if doc.address_type=="Billing" else "blue" if doc.address_type=="Shipping" else "darkgrey" }}">{{ doc.address_title }}</span>
|
||||
</div>
|
||||
<div class="col-xs-2"> {{ _(doc.address_type) }} </div>
|
||||
<div class="col-xs-2"> {{ doc.city }} </div>
|
||||
<div class="col-xs-5 text-right small text-muted">
|
||||
<div class="col-2"> {{ _(doc.address_type) }} </div>
|
||||
<div class="col-2"> {{ doc.city }} </div>
|
||||
<div class="col-5 text-right small text-muted">
|
||||
{{ frappe.get_doc(doc).get_display() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -16,41 +16,33 @@ $.extend(shopping_cart, {
|
||||
bind_events: function() {
|
||||
shopping_cart.bind_address_select();
|
||||
shopping_cart.bind_place_order();
|
||||
shopping_cart.bind_request_quotation();
|
||||
shopping_cart.bind_change_qty();
|
||||
shopping_cart.bind_change_notes();
|
||||
shopping_cart.bind_dropdown_cart_buttons();
|
||||
},
|
||||
|
||||
bind_address_select: function() {
|
||||
$(".cart-addresses").find('input[data-address-name]').on("click", function() {
|
||||
if($(this).prop("checked")) {
|
||||
var me = this;
|
||||
$(".cart-addresses").on('click', '.address-card', function(e) {
|
||||
const $card = $(e.currentTarget);
|
||||
const address_fieldname = $card.closest('[data-fieldname]').attr('data-fieldname');
|
||||
const address_name = $card.closest('[data-address-name]').attr('data-address-name');
|
||||
|
||||
// uncheck other shipping or billing addresses:
|
||||
if ( $(this).is('input[data-fieldname=customer_address]') ) {
|
||||
$('input[data-fieldname=customer_address]').not(this).prop('checked', false);
|
||||
} else {
|
||||
$('input[data-fieldname=shipping_address_name]').not(this).prop('checked', false);
|
||||
}
|
||||
|
||||
return frappe.call({
|
||||
type: "POST",
|
||||
method: "erpnext.shopping_cart.cart.update_cart_address",
|
||||
freeze: true,
|
||||
args: {
|
||||
address_fieldname: $(this).attr("data-fieldname"),
|
||||
address_name: $(this).attr("data-address-name")
|
||||
},
|
||||
callback: function(r) {
|
||||
if(!r.exc) {
|
||||
$(".cart-tax-items").html(r.message.taxes);
|
||||
}
|
||||
return frappe.call({
|
||||
type: "POST",
|
||||
method: "erpnext.shopping_cart.cart.update_cart_address",
|
||||
freeze: true,
|
||||
args: {
|
||||
address_fieldname,
|
||||
address_name
|
||||
},
|
||||
callback: function(r) {
|
||||
if(!r.exc) {
|
||||
$(".cart-tax-items").html(r.message.taxes);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
bind_place_order: function() {
|
||||
@@ -59,12 +51,18 @@ $.extend(shopping_cart, {
|
||||
});
|
||||
},
|
||||
|
||||
bind_request_quotation: function() {
|
||||
$('.btn-request-for-quotation').on('click', function() {
|
||||
shopping_cart.request_quotation(this);
|
||||
});
|
||||
},
|
||||
|
||||
bind_change_qty: function() {
|
||||
// bind update button
|
||||
$(".cart-items").on("change", ".cart-qty", function() {
|
||||
var item_code = $(this).attr("data-item-code");
|
||||
var newVal = $(this).val();
|
||||
shopping_cart.shopping_cart_update(item_code, newVal);
|
||||
shopping_cart.shopping_cart_update({item_code, qty: newVal});
|
||||
});
|
||||
|
||||
$(".cart-items").on('click', '.number-spinner button', function () {
|
||||
@@ -82,7 +80,21 @@ $.extend(shopping_cart, {
|
||||
}
|
||||
input.val(newVal);
|
||||
var item_code = input.attr("data-item-code");
|
||||
shopping_cart.shopping_cart_update(item_code, newVal);
|
||||
shopping_cart.shopping_cart_update({item_code, qty: newVal});
|
||||
});
|
||||
},
|
||||
|
||||
bind_change_notes: function() {
|
||||
$('.cart-items').on('change', 'textarea', function() {
|
||||
const $textarea = $(this);
|
||||
const item_code = $textarea.attr('data-item-code');
|
||||
const qty = $textarea.closest('tr').find('.cart-qty').val();
|
||||
const notes = $textarea.val();
|
||||
shopping_cart.shopping_cart_update({
|
||||
item_code,
|
||||
qty,
|
||||
additional_notes: notes
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
@@ -150,7 +162,32 @@ $.extend(shopping_cart, {
|
||||
.html(msg || frappe._("Something went wrong!"))
|
||||
.toggle(true);
|
||||
} else {
|
||||
window.location.href = "/orders/" + encodeURIComponent(r.message);
|
||||
window.open('/orders/' + encodeURIComponent(r.message), '_blank');
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
request_quotation: function(btn) {
|
||||
return frappe.call({
|
||||
type: "POST",
|
||||
method: "erpnext.shopping_cart.cart.request_for_quotation",
|
||||
btn: btn,
|
||||
callback: function(r) {
|
||||
if(r.exc) {
|
||||
var msg = "";
|
||||
if(r._server_messages) {
|
||||
msg = JSON.parse(r._server_messages || []).join("<br>");
|
||||
}
|
||||
|
||||
$("#cart-error")
|
||||
.empty()
|
||||
.html(msg || frappe._("Something went wrong!"))
|
||||
.toggle(true);
|
||||
} else {
|
||||
window.open('/printview?doctype=Quotation&name=' + r.message, '_blank');
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
12
erpnext/templates/includes/cart/address_card.html
Normal file
12
erpnext/templates/includes/cart/address_card.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<div class="card address-card h-100">
|
||||
<div class="check" style="position: absolute; right: 15px; top: 15px;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{ address.name }}</h5>
|
||||
<p class="card-text text-muted">
|
||||
{{ address.display }}
|
||||
</p>
|
||||
<a href="/addresses?name={{address.name}}" class="card-link">{{ _('Edit') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,26 +1,141 @@
|
||||
{% from "erpnext/templates/includes/cart/cart_macros.html" import show_address %}
|
||||
<div class="row">
|
||||
{% if addresses|length == 1%}
|
||||
{% set select_address = True %}
|
||||
{% endif %}
|
||||
<div class="col-sm-6">
|
||||
<div class="h6 text-uppercase">{{ _("Shipping Address") }}</div>
|
||||
<div id="cart-shipping-address" class="panel-group"
|
||||
data-fieldname="shipping_address_name">
|
||||
{% for address in shipping_addresses %}
|
||||
{{ show_address(address, doc, "shipping_address_name", select_address) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<a class="btn btn-default btn-sm" href="/addresses">
|
||||
{{ _("Manage Addresses") }}</a>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="h6 text-uppercase">{{ _("Billing Address") }}</div>
|
||||
<div id="cart-billing-address" class="panel-group"
|
||||
data-fieldname="customer_address">
|
||||
{% for address in billing_addresses %}
|
||||
{{ show_address(address, doc, "customer_address", select_address) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if addresses | length == 1%}
|
||||
{% set select_address = True %}
|
||||
{% endif %}
|
||||
|
||||
<div class="mb-3" data-section="shipping-address">
|
||||
<h6 class="text-uppercase">{{ _("Shipping Address") }}</h6>
|
||||
<div class="row no-gutters" data-fieldname="shipping_address_name">
|
||||
{% for address in shipping_addresses %}
|
||||
<div class="mr-3 mb-3 w-25" data-address-name="{{address.name}}" {% if doc.shipping_address_name == address.name %} data-active {% endif %}>
|
||||
{% include "templates/includes/cart/address_card.html" %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3" data-section="billing-address">
|
||||
<h6 class="text-uppercase">{{ _("Billing Address") }}</h6>
|
||||
<div class="row no-gutters" data-fieldname="customer_address">
|
||||
{% for address in billing_addresses %}
|
||||
<div class="mr-3 mb-3 w-25" data-address-name="{{address.name}}" {% if doc.customer_address == address.name %} data-active {% endif %}>
|
||||
{% include "templates/includes/cart/address_card.html" %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="input_same_billing" checked>
|
||||
<label class="custom-control-label" for="input_same_billing">{{ _('Billing Address is same as Shipping Address') }}</label>
|
||||
</div>
|
||||
<button class="btn btn-outline-primary btn-sm mt-3 btn-new-address">{{ _("Add a new address") }}</button>
|
||||
|
||||
<script>
|
||||
frappe.ready(() => {
|
||||
$(document).on('click', '.address-card', (e) => {
|
||||
const $target = $(e.currentTarget);
|
||||
const $section = $target.closest('[data-section]');
|
||||
$section.find('.address-card').removeClass('active');
|
||||
$target.addClass('active');
|
||||
});
|
||||
|
||||
$('#input_same_billing').change((e) => {
|
||||
const $check = $(e.target);
|
||||
toggle_billing_address_section(!$check.is(':checked'));
|
||||
});
|
||||
|
||||
$('.btn-new-address').click(() => {
|
||||
const d = new frappe.ui.Dialog({
|
||||
title: __('New Address'),
|
||||
fields: [
|
||||
{
|
||||
label: __('Address Title'),
|
||||
fieldname: 'address_title',
|
||||
fieldtype: 'Data',
|
||||
reqd: 1
|
||||
},
|
||||
{
|
||||
label: __('Address Type'),
|
||||
fieldname: 'address_type',
|
||||
fieldtype: 'Select',
|
||||
options: [
|
||||
'Billing',
|
||||
'Shipping'
|
||||
],
|
||||
reqd: 1
|
||||
},
|
||||
{
|
||||
label: __('Address Line 1'),
|
||||
fieldname: 'address_line1',
|
||||
fieldtype: 'Data',
|
||||
reqd: 1
|
||||
},
|
||||
{
|
||||
label: __('Address Line 2'),
|
||||
fieldname: 'address_line2',
|
||||
fieldtype: 'Data'
|
||||
},
|
||||
{
|
||||
label: __('City/Town'),
|
||||
fieldname: 'city',
|
||||
fieldtype: 'Data',
|
||||
reqd: 1
|
||||
},
|
||||
{
|
||||
label: __('State'),
|
||||
fieldname: 'state',
|
||||
fieldtype: 'Data'
|
||||
},
|
||||
{
|
||||
label: __('Pin Code'),
|
||||
fieldname: 'pincode',
|
||||
fieldtype: 'Data'
|
||||
},
|
||||
{
|
||||
label: __('Country'),
|
||||
fieldname: 'country',
|
||||
fieldtype: 'Data',
|
||||
reqd: 1
|
||||
},
|
||||
],
|
||||
primary_action_label: __('Save'),
|
||||
primary_action: (values) => {
|
||||
frappe.call('erpnext.shopping_cart.cart.add_new_address', { doc: values })
|
||||
.then(r => {
|
||||
d.hide();
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
d.show();
|
||||
});
|
||||
|
||||
function setup_state() {
|
||||
const shipping_address = $('[data-section="shipping-address"]')
|
||||
.find('[data-address-name][data-active]').attr('data-address-name');
|
||||
|
||||
const billing_address = $('[data-section="billing-address"]')
|
||||
.find('[data-address-name][data-active]').attr('data-address-name');
|
||||
|
||||
$('#input_same_billing').prop('checked', shipping_address === billing_address).trigger('change');
|
||||
|
||||
if (!shipping_address && !billing_address) {
|
||||
$('#input_same_billing').prop('checked', true).trigger('change');
|
||||
}
|
||||
|
||||
if (shipping_address) {
|
||||
$(`[data-section="shipping-address"] [data-address-name="${shipping_address}"] .address-card`).addClass('active');
|
||||
}
|
||||
if (billing_address) {
|
||||
$(`[data-section="billing-address"] [data-address-name="${billing_address}"] .address-card`).addClass('active');
|
||||
}
|
||||
}
|
||||
|
||||
setup_state();
|
||||
|
||||
function toggle_billing_address_section(flag) {
|
||||
$('[data-section="billing-address"]').toggle(flag);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,31 +1,42 @@
|
||||
{% from "erpnext/templates/includes/order/order_macros.html" import item_name_and_description %}
|
||||
{% from "erpnext/templates/includes/order/order_macros.html" import item_name_and_description_cart %}
|
||||
|
||||
{% for d in doc.items %}
|
||||
<div class="row checkout">
|
||||
<div class="col-sm-8 col-xs-6 col-name-description">
|
||||
{{ item_name_and_description(d) }}
|
||||
</div>
|
||||
<div class="col-sm-2 col-xs-3 text-right col-qty">
|
||||
<span style="display: inline-block">
|
||||
<div class="input-group number-spinner">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default cart-btn" data-dir="dwn">
|
||||
–</button>
|
||||
</span>
|
||||
<input class="form-control text-right cart-qty"
|
||||
value = "{{ d.get_formatted('qty') }}"
|
||||
data-item-code="{{ d.item_code }}">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default cart-btn" data-dir="up" style="margin-left:-2px;">
|
||||
+</button>
|
||||
</span>
|
||||
</div>
|
||||
<tr data-name="{{ d.name }}">
|
||||
<td>
|
||||
<div class="font-weight-bold">
|
||||
{{ d.item_name }}
|
||||
</div>
|
||||
<div>
|
||||
{{ d.item_code }}
|
||||
</div>
|
||||
{%- set variant_of = frappe.db.get_value('Item', d.item_code, 'variant_of') %}
|
||||
{% if variant_of %}
|
||||
<span class="text-muted">
|
||||
{{ _('Variant of') }} <a href="{{frappe.db.get_value('Item', variant_of, 'route')}}">{{ variant_of }}</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-sm-2 col-xs-3 text-right col-amount">
|
||||
{{ d.get_formatted("amount") }}
|
||||
<p class="text-muted small item-rate">{{ _("Rate") }} {{ d.get_formatted("rate") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<div class="mt-2">
|
||||
<textarea data-item-code="{{d.item_code}}" class="form-control" rows="2" placeholder="{{ _('Add notes') }}">{{d.additional_notes or ''}}</textarea>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<div class="input-group number-spinner">
|
||||
<span class="input-group-prepend d-none d-sm-inline-block">
|
||||
<button class="btn btn-outline-secondary cart-btn" data-dir="dwn">–</button>
|
||||
</span>
|
||||
<input class="form-control text-right cart-qty border-secondary" value="{{ d.get_formatted('qty') }}" data-item-code="{{ d.item_code }}">
|
||||
<span class="input-group-append d-none d-sm-inline-block">
|
||||
<button class="btn btn-outline-secondary cart-btn" data-dir="up">+</button>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
{% if cart_settings.enable_checkout %}
|
||||
<td class="text-right">
|
||||
<div>
|
||||
{{ d.get_formatted('amount') }}
|
||||
</div>
|
||||
<span class="text-muted">
|
||||
{{ _('Rate:') }} {{ d.get_formatted('rate') }}
|
||||
</span>
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
{% if not hide_footer_signup %}
|
||||
<div class='input-group input-group-sm pull-right footer-subscribe'>
|
||||
<input class="form-control" type="text" id="footer-subscribe-email"
|
||||
placeholder="{{ _('Your email address') }}...">
|
||||
<span class='input-group-btn'>
|
||||
<button class="btn btn-default" type="button"
|
||||
id="footer-subscribe-button">{{ _("Get Updates") }}</button>
|
||||
</span>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control border-secondary"
|
||||
id="footer-subscribe-email"
|
||||
placeholder="{{ _('Your email address...') }}"
|
||||
aria-label="{{ _('Your email address...') }}"
|
||||
aria-describedby="footer-subscribe-button">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary"
|
||||
type="button" id="footer-subscribe-button">{{ _("Get Updates") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,2 +1 @@
|
||||
<a href="https://erpnext.com?source=website_footer" target="_blank" class="text-muted">
|
||||
Powered by ERPNext</a>
|
||||
<a href="https://erpnext.com?source=website_footer" target="_blank" class="text-muted">Powered by ERPNext</a>
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
{% macro product_image_square(website_image, css_class="") %}
|
||||
{% if website_image -%}
|
||||
<meta itemprop="image" content="{{ frappe.utils.quoted(website_image) | abs_url }}"></meta>
|
||||
{%- endif %}
|
||||
<div class="product-image product-image-square
|
||||
{% if not website_image -%} missing-image {%- endif %} {{ css_class }}"
|
||||
{% if website_image -%}
|
||||
@@ -11,12 +8,8 @@
|
||||
{% endmacro %}
|
||||
|
||||
{% macro product_image(website_image, css_class="") %}
|
||||
<div class="product-image {% if not website_image -%} missing-image {%- endif %} {{ css_class }}">
|
||||
{% if website_image -%}
|
||||
<a href="{{ frappe.utils.quoted(website_image) }}">
|
||||
<img itemprop="image" src="{{ frappe.utils.quoted(website_image) | abs_url }}" class="img-responsive">
|
||||
</a>
|
||||
{%- endif %}
|
||||
<div class="border text-center rounded h-100 {{ css_class }}" style="overflow: hidden;">
|
||||
<img itemprop="image" class="website-image h-100 w-100" src="{{ frappe.utils.quoted(website_image or 'no-image.jpg') | abs_url }}">
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
@@ -33,3 +26,35 @@
|
||||
{%- endif %}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro render_homepage_section(section) %}
|
||||
|
||||
{% if section.section_based_on == 'Custom HTML' and section.section_html %}
|
||||
{{ section.section_html }}
|
||||
{% elif section.section_based_on == 'Cards' %}
|
||||
<section class="container my-5">
|
||||
<h3>{{ section.name }}</h3>
|
||||
|
||||
<div class="row">
|
||||
{% for card in section.section_cards %}
|
||||
<div class="col-md-{{ section.column_value }} mb-4">
|
||||
<div class="card h-100 justify-content-between">
|
||||
{% if card.image %}
|
||||
<div class="website-image-lazy" data-class="card-img-top h-100" data-src="{{ card.image }}" data-alt="{{ card.title }}"></div>
|
||||
{% endif %}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{ card.title }}</h5>
|
||||
<p class="card-subtitle mb-2 text-muted">{{ card.subtitle or '' }}</p>
|
||||
<p class="card-text">{{ card.content | truncate(140, True) }}</p>
|
||||
</div>
|
||||
<div class="card-body flex-grow-0">
|
||||
<a href="{{ card.route }}" class="card-link">{{ _('More details') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{% endmacro %}
|
||||
@@ -1,12 +1,10 @@
|
||||
{% extends 'frappe/templates/includes/navbar/navbar_items.html' %}
|
||||
|
||||
{% block navbar_right_extension %}
|
||||
<li class="shopping-cart hidden">
|
||||
<div class="cart-icon">
|
||||
<a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin">
|
||||
{{ _("Cart") }} <span class="badge-wrapper" id="cart-count"></span>
|
||||
</a>
|
||||
<div id="cart-overlay" class="dropdown-menu shopping-cart-menu"></div>
|
||||
</div>
|
||||
<li class="shopping-cart cart-icon hidden">
|
||||
<a href="/cart" class="nav-link">
|
||||
{{ _("Cart") }}
|
||||
<span class="badge badge-primary" id="cart-count"></span>
|
||||
</a>
|
||||
</li>
|
||||
{% endblock %}
|
||||
@@ -9,7 +9,9 @@
|
||||
</div>
|
||||
<div class="col-xs-8 col-sm-10">
|
||||
{{ d.item_code }}
|
||||
<div class="text-muted small item-description">{{ d.description }}</div>
|
||||
<div class="text-muted small item-description">
|
||||
{{ html2text(d.description) | truncate(140) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
@@ -25,14 +27,14 @@
|
||||
{{ d.item_name|truncate(25) }}
|
||||
<div class="input-group number-spinner">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default cart-btn" data-dir="dwn">
|
||||
<button class="btn btn-light cart-btn" data-dir="dwn">
|
||||
–</button>
|
||||
</span>
|
||||
<input class="form-control text-right cart-qty"
|
||||
value = "{{ d.get_formatted('qty') }}"
|
||||
data-item-code="{{ d.item_code }}">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default cart-btn" data-dir="up">
|
||||
<button class="btn btn-light cart-btn" data-dir="up">
|
||||
+</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -1,24 +1,32 @@
|
||||
{% if doc.taxes %}
|
||||
<div class="row tax-net-total-row">
|
||||
<div class="col-xs-6 text-right">{{ _("Net Total") }}</div>
|
||||
<div class="col-xs-6 text-right">
|
||||
{{ doc.get_formatted("net_total") }}</div>
|
||||
</div>
|
||||
<tr>
|
||||
<td class="text-right" colspan="2">
|
||||
{{ _("Net Total") }}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
{{ doc.get_formatted("net_total") }}
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
|
||||
{% for d in doc.taxes %}
|
||||
{% if d.base_tax_amount > 0 %}
|
||||
<div class="row tax-row">
|
||||
<div class="col-xs-6 text-right">{{ d.description }}</div>
|
||||
<div class="col-xs-6 text-right">
|
||||
{{ d.get_formatted("base_tax_amount") }}</div>
|
||||
</div>
|
||||
<tr>
|
||||
<td class="text-right" colspan="2">
|
||||
{{ d.description }}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
{{ d.get_formatted("base_tax_amount") }}
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="row tax-grand-total-row">
|
||||
<div class="col-xs-6 text-right text-uppercase h6 text-muted">{{ _("Grand Total") }}</div>
|
||||
<div class="col-xs-6 text-right">
|
||||
<span class="tax-grand-total bold">
|
||||
{{ doc.get_formatted("grand_total") }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<tr>
|
||||
<th class="text-right" colspan="2">
|
||||
{{ _("Grand Total") }}
|
||||
</th>
|
||||
<th class="text-right">
|
||||
{{ doc.get_formatted("grand_total") }}
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
@@ -1,215 +0,0 @@
|
||||
// Copyright (c) 2015, Frappe Technologies Pvt. Ltd. and Contributors
|
||||
// License: GNU General Public License v3. See license.txt
|
||||
|
||||
frappe.ready(function() {
|
||||
window.item_code = $('[itemscope] [itemprop="productID"]').text().trim();
|
||||
var qty = 0;
|
||||
|
||||
frappe.call({
|
||||
type: "POST",
|
||||
method: "erpnext.shopping_cart.product_info.get_product_info_for_website",
|
||||
args: {
|
||||
item_code: get_item_code()
|
||||
},
|
||||
callback: function(r) {
|
||||
if(r.message) {
|
||||
if(r.message.cart_settings.enabled) {
|
||||
$(".item-cart, .item-price, .item-stock").toggleClass("hide", (!!!r.message.product_info.price || !!!r.message.product_info.in_stock));
|
||||
}
|
||||
if(r.message.cart_settings.show_price) {
|
||||
$(".item-price").toggleClass("hide", false);
|
||||
}
|
||||
if(r.message.cart_settings.show_stock_availability) {
|
||||
$(".item-stock").toggleClass("hide", false);
|
||||
}
|
||||
if(r.message.product_info.price) {
|
||||
$(".item-price")
|
||||
.html(r.message.product_info.price.formatted_price_sales_uom + "<div style='font-size: small'>\
|
||||
(" + r.message.product_info.price.formatted_price + " / " + r.message.product_info.uom + ")</div>");
|
||||
|
||||
if(r.message.product_info.in_stock==0) {
|
||||
$(".item-stock").html("<div style='color: red'> <i class='fa fa-close'></i> {{ _("Not in stock") }}</div>");
|
||||
}
|
||||
else if(r.message.product_info.in_stock==1) {
|
||||
var qty_display = "{{ _("In stock") }}";
|
||||
if (r.message.product_info.show_stock_qty) {
|
||||
qty_display += " ("+r.message.product_info.stock_qty+")";
|
||||
}
|
||||
$(".item-stock").html("<div style='color: green'>\
|
||||
<i class='fa fa-check'></i> "+qty_display+"</div>");
|
||||
}
|
||||
|
||||
if(r.message.product_info.qty) {
|
||||
qty = r.message.product_info.qty;
|
||||
toggle_update_cart(r.message.product_info.qty);
|
||||
} else {
|
||||
toggle_update_cart(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
$("#item-add-to-cart button").on("click", function() {
|
||||
frappe.provide('erpnext.shopping_cart');
|
||||
|
||||
erpnext.shopping_cart.update_cart({
|
||||
item_code: get_item_code(),
|
||||
qty: $("#item-spinner .cart-qty").val(),
|
||||
callback: function(r) {
|
||||
if(!r.exc) {
|
||||
toggle_update_cart(1);
|
||||
qty = 1;
|
||||
}
|
||||
},
|
||||
btn: this,
|
||||
});
|
||||
});
|
||||
|
||||
$("#item-spinner").on('click', '.number-spinner button', function () {
|
||||
var btn = $(this),
|
||||
input = btn.closest('.number-spinner').find('input'),
|
||||
oldValue = input.val().trim(),
|
||||
newVal = 0;
|
||||
|
||||
if (btn.attr('data-dir') == 'up') {
|
||||
newVal = parseInt(oldValue) + 1;
|
||||
} else if (btn.attr('data-dir') == 'dwn') {
|
||||
if (parseInt(oldValue) > 1) {
|
||||
newVal = parseInt(oldValue) - 1;
|
||||
}
|
||||
else {
|
||||
newVal = parseInt(oldValue);
|
||||
}
|
||||
}
|
||||
input.val(newVal);
|
||||
});
|
||||
|
||||
$("[itemscope] .item-view-attribute .form-control").on("change", function() {
|
||||
try {
|
||||
var item_code = encodeURIComponent(get_item_code());
|
||||
|
||||
} catch(e) {
|
||||
// unable to find variant
|
||||
// then chose the closest available one
|
||||
|
||||
var attribute = $(this).attr("data-attribute");
|
||||
var attribute_value = $(this).val();
|
||||
var item_code = find_closest_match(attribute, attribute_value);
|
||||
|
||||
if (!item_code) {
|
||||
frappe.msgprint(__("Cannot find a matching Item. Please select some other value for {0}.", [attribute]))
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
if (window.location.search == ("?variant=" + item_code) || window.location.search.includes(item_code)) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.href = window.location.pathname + "?variant=" + item_code;
|
||||
});
|
||||
|
||||
// change the item image src when alternate images are hovered
|
||||
$(document.body).on('mouseover', '.item-alternative-image', (e) => {
|
||||
const $alternative_image = $(e.currentTarget);
|
||||
const src = $alternative_image.find('img').prop('src');
|
||||
$('.item-image img').prop('src', src);
|
||||
});
|
||||
});
|
||||
|
||||
var toggle_update_cart = function(qty) {
|
||||
$("#item-add-to-cart").toggle(qty ? false : true);
|
||||
$("#item-update-cart")
|
||||
.toggle(qty ? true : false)
|
||||
.find("input").val(qty);
|
||||
$("#item-spinner").toggle(qty ? false : true);
|
||||
}
|
||||
|
||||
function get_item_code() {
|
||||
var variant_info = window.variant_info;
|
||||
if(variant_info) {
|
||||
var attributes = get_selected_attributes();
|
||||
var no_of_attributes = Object.keys(attributes).length;
|
||||
|
||||
for(var i in variant_info) {
|
||||
var variant = variant_info[i];
|
||||
|
||||
if (variant.attributes.length < no_of_attributes) {
|
||||
// the case when variant has less attributes than template
|
||||
continue;
|
||||
}
|
||||
|
||||
var match = true;
|
||||
for(var j in variant.attributes) {
|
||||
if(attributes[variant.attributes[j].attribute]
|
||||
!= variant.attributes[j].attribute_value
|
||||
) {
|
||||
match = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(match) {
|
||||
return variant.name;
|
||||
}
|
||||
}
|
||||
throw "Unable to match variant";
|
||||
} else {
|
||||
return window.item_code;
|
||||
}
|
||||
}
|
||||
|
||||
function find_closest_match(selected_attribute, selected_attribute_value) {
|
||||
// find the closest match keeping the selected attribute in focus and get the item code
|
||||
|
||||
var attributes = get_selected_attributes();
|
||||
|
||||
var previous_match_score = 0;
|
||||
var previous_no_of_attributes = 0;
|
||||
var matched;
|
||||
|
||||
var variant_info = window.variant_info;
|
||||
for(var i in variant_info) {
|
||||
var variant = variant_info[i];
|
||||
var match_score = 0;
|
||||
var has_selected_attribute = false;
|
||||
|
||||
for(var j in variant.attributes) {
|
||||
if(attributes[variant.attributes[j].attribute]===variant.attributes[j].attribute_value) {
|
||||
match_score = match_score + 1;
|
||||
|
||||
if (variant.attributes[j].attribute==selected_attribute && variant.attributes[j].attribute_value==selected_attribute_value) {
|
||||
has_selected_attribute = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (has_selected_attribute
|
||||
&& ((match_score > previous_match_score) || (match_score==previous_match_score && previous_no_of_attributes < variant.attributes.length))) {
|
||||
previous_match_score = match_score;
|
||||
matched = variant;
|
||||
previous_no_of_attributes = variant.attributes.length;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
if (matched) {
|
||||
for (var j in matched.attributes) {
|
||||
var attr = matched.attributes[j];
|
||||
$('[itemscope]')
|
||||
.find(repl('.item-view-attribute .form-control[data-attribute="%(attribute)s"]', attr))
|
||||
.val(attr.attribute_value);
|
||||
}
|
||||
|
||||
return matched.name;
|
||||
}
|
||||
}
|
||||
|
||||
function get_selected_attributes() {
|
||||
var attributes = {};
|
||||
$('[itemscope]').find(".item-view-attribute .form-control").each(function() {
|
||||
attributes[$(this).attr('data-attribute')] = $(this).val();
|
||||
});
|
||||
return attributes;
|
||||
}
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
9
erpnext/templates/pages/home.css
Normal file
9
erpnext/templates/pages/home.css
Normal file
@@ -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 */
|
||||
@@ -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 %}
|
||||
@@ -15,15 +15,38 @@ def get_context(context):
|
||||
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'
|
||||
|
||||
@@ -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 %}
|
||||
@@ -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>
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -25,7 +25,7 @@ frappe.ready(function() {
|
||||
<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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user