feat: shopping cart page
diff --git a/erpnext/templates/includes/cart.js b/erpnext/templates/includes/cart.js
index c6dfd35..0de0267 100644
--- a/erpnext/templates/includes/cart.js
+++ b/erpnext/templates/includes/cart.js
@@ -14,7 +14,7 @@
},
bind_events: function() {
- shopping_cart.bind_address_select();
+ shopping_cart.bind_address_picker_dialog();
shopping_cart.bind_place_order();
shopping_cart.bind_request_quotation();
shopping_cart.bind_change_qty();
@@ -23,28 +23,76 @@
shopping_cart.bind_coupon_code();
},
- bind_address_select: function() {
- $(".cart-addresses").on('click', '.address-card', function(e) {
- const $card = $(e.currentTarget);
- const address_type = $card.closest('[data-address-type]').attr('data-address-type');
- const address_name = $card.closest('[data-address-name]').attr('data-address-name');
- return frappe.call({
- type: "POST",
- method: "erpnext.shopping_cart.cart.update_cart_address",
- freeze: true,
- args: {
- address_type,
- address_name
- },
- callback: function(r) {
- if(!r.exc) {
- $(".cart-tax-items").html(r.message.taxes);
- }
- }
- });
+ bind_address_picker_dialog: function() {
+ const d = this.get_update_address_dialog();
+ this.parent.find('.btn-change-address').on('click', (e) => {
+ const type = $(e.currentTarget).parents('.address-container').attr('data-address-type');
+ $(d.get_field('address_picker').wrapper).html(
+ this.get_address_template(type)
+ );
+ d.show();
});
},
+ get_update_address_dialog() {
+ return new frappe.ui.Dialog({
+ title: "Select Address",
+ fields: [{
+ 'fieldtype': 'HTML',
+ 'fieldname': 'address_picker',
+ }],
+ primary_action_label: __('Set Address'),
+ primary_action: () => {
+ const $card = d.$wrapper.find('.address-card.active');
+ const address_type = $card.closest('[data-address-type]').attr('data-address-type');
+ const address_name = $card.closest('[data-address-name]').attr('data-address-name');
+ frappe.call({
+ type: "POST",
+ method: "erpnext.shopping_cart.cart.update_cart_address",
+ freeze: true,
+ args: {
+ address_type,
+ address_name
+ },
+ callback: function(r) {
+ d.hide();
+ if(!r.exc) {
+ $(".cart-tax-items").html(r.message.taxes);
+ shopping_cart.parent.find(
+ `.address-container[data-address-type="${address_type}"]`
+ ).html(r.message.address);
+ }
+ }
+ });
+ }
+ });
+ },
+
+ get_address_template(type) {
+ return {
+ shipping: `<div class="mb-3" data-section="shipping-address">
+ <div class="row no-gutters" data-fieldname="shipping_address_name">
+ {% for address in shipping_addresses %}
+ <div class="mr-3 mb-3 w-100" data-address-name="{{address.name}}" data-address-type="shipping"
+ {% if doc.shipping_address_name == address.name %} data-active {% endif %}>
+ {% include "templates/includes/cart/address_picker_card.html" %}
+ </div>
+ {% endfor %}
+ </div>
+ </div>`,
+ billing: `<div class="mb-3" data-section="billing-address">
+ <div class="row no-gutters" data-fieldname="customer_address">
+ {% for address in billing_addresses %}
+ <div class="mr-3 mb-3 w-100" data-address-name="{{address.name}}" data-address-type="billing"
+ {% if doc.shipping_address_name == address.name %} data-active {% endif %}>
+ {% include "templates/includes/cart/address_picker_card.html" %}
+ </div>
+ {% endfor %}
+ </div>
+ </div>`,
+ }[type];
+ },
+
bind_place_order: function() {
$(".btn-place-order").on("click", function() {
shopping_cart.place_order(this);
@@ -221,6 +269,7 @@
frappe.ready(function() {
$(".cart-icon").hide();
+ shopping_cart.parent = $(".cart-container");
shopping_cart.bind_events();
});
diff --git a/erpnext/templates/includes/cart/address_card.html b/erpnext/templates/includes/cart/address_card.html
index 646210e..667144b 100644
--- a/erpnext/templates/includes/cart/address_card.html
+++ b/erpnext/templates/includes/cart/address_card.html
@@ -1,12 +1,17 @@
<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 class="btn btn-sm btn-default btn-change-address" style="position: absolute; right: 0; top: 0;">
+ {{ _('Change') }}
</div>
- <div class="card-body">
- <h5 class="card-title">{{ address.title }}</h5>
- <p class="card-text text-muted">
+ <div class="card-body p-0">
+ <div class="card-title">{{ address.title }}</div>
+ <div class="card-text mb-2">
{{ address.display }}
- </p>
- <a href="/addresses?name={{address.name}}" class="card-link">{{ _('Edit') }}</a>
+ </div>
+ <a href="/addresses?name={{address.name}}" class="card-link">
+ <svg class="icon icon-sm">
+ <use href="#icon-edit"></use>
+ </svg>
+ {{ _('Edit') }}
+ </a>
</div>
</div>
diff --git a/erpnext/templates/includes/cart/address_picker_card.html b/erpnext/templates/includes/cart/address_picker_card.html
new file mode 100644
index 0000000..2334ea2
--- /dev/null
+++ b/erpnext/templates/includes/cart/address_picker_card.html
@@ -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.title }}</h5>
+ <p class="card-text text-muted">
+ {{ address.display }}
+ </p>
+ <a href="/addresses?name={{address.name}}" class="card-link">{{ _('Edit') }}</a>
+ </div>
+</div>
\ No newline at end of file
diff --git a/erpnext/templates/includes/cart/cart_address.html b/erpnext/templates/includes/cart/cart_address.html
index aa25c88..3c8267c 100644
--- a/erpnext/templates/includes/cart/cart_address.html
+++ b/erpnext/templates/includes/cart/cart_address.html
@@ -14,31 +14,39 @@
</div>
</div>
{% endif %}
-<div class="mb-3" data-section="shipping-address">
- <h6 class="text-uppercase">{{ _("Shipping Address") }}</h6>
+<div class="mb-3 frappe-card p-5" data-section="shipping-address">
+ <h6>{{ _("Shipping Address") }}</h6>
+ <hr>
+ {% for address in shipping_addresses %}
+ {% if doc.shipping_address_name == address.name %}
<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}}" data-address-type="shipping" {% if doc.shipping_address_name == address.name %} data-active {% endif %}>
- {% include "templates/includes/cart/address_card.html" %}
- </div>
- {% endfor %}
+ <div class="w-100 address-container" data-address-name="{{address.name}}" data-address-type="shipping" data-active>
+ {% include "templates/includes/cart/address_card.html" %}
+ </div>
</div>
+ {% endif %}
+ {% endfor %}
</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}}" data-address-type="billing" {% if doc.customer_address == address.name %} data-active {% endif %}>
- {% include "templates/includes/cart/address_card.html" %}
- </div>
- {% endfor %}
- </div>
+<div class="checkbox ml-1 mb-2">
+ <label for="input_same_billing">
+ <input type="checkbox" id="input_same_billing" checked>
+ <span class="label-area">{{ _('Billing Address is same as Shipping Address') }}</span>
+ </label>
</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 class="mb-3 frappe-card p-5" data-section="billing-address">
+ <h6>{{ _("Billing Address") }}</h6>
+ <hr>
+ {% for address in billing_addresses %}
+ {% if doc.customer_address == address.name %}
+ <div class="row no-gutters" data-fieldname="customer_address">
+ <div class="w-100 address-container" data-address-name="{{address.name}}" data-address-type="billing" data-active>
+ {% include "templates/includes/cart/address_card.html" %}
+ </div>
+ </div>
+ {% endif %}
+ {% endfor %}
</div>
-<button class="btn btn-outline-primary btn-sm mt-3 btn-new-address">{{ _("Add a new address") }}</button>
+<button class="btn btn-outline-primary btn-sm mt-1 btn-new-address bg-white">{{ _("Add a new address") }}</button>
<script>
frappe.ready(() => {
@@ -55,6 +63,7 @@
});
$('.btn-new-address').click(() => {
+ console.log('clicked');
const d = new frappe.ui.Dialog({
title: __('New Address'),
fields: [
@@ -168,5 +177,12 @@
function toggle_billing_address_section(flag) {
$('[data-section="billing-address"]').toggle(flag);
}
+
+ $('.btn-change-address').click(() => {
+ // const d = new frappe.ui.Dialog({
+ // })
+
+ // d.show();
+ });
});
</script>
diff --git a/erpnext/templates/includes/cart/cart_address_picker.html b/erpnext/templates/includes/cart/cart_address_picker.html
new file mode 100644
index 0000000..72cc5f5
--- /dev/null
+++ b/erpnext/templates/includes/cart/cart_address_picker.html
@@ -0,0 +1,4 @@
+<div class="mb-3 frappe-card p-5" data-section="shipping-address">
+ <h6>{{ _("Shipping Address") }}</h6>
+</div>
+
diff --git a/erpnext/templates/includes/cart/cart_items.html b/erpnext/templates/includes/cart/cart_items.html
index ca5744b..75441c4 100644
--- a/erpnext/templates/includes/cart/cart_items.html
+++ b/erpnext/templates/includes/cart/cart_items.html
@@ -1,15 +1,15 @@
{% for d in doc.items %}
<tr data-name="{{ d.name }}">
<td>
- <div class="font-weight-bold">
+ <div class="item-title mb-1">
{{ d.item_name }}
</div>
- <div>
+ <div class="item-subtitle">
{{ d.item_code }}
</div>
{%- set variant_of = frappe.db.get_value('Item', d.item_code, 'variant_of') %}
{% if variant_of %}
- <span class="text-muted">
+ <span class="item-subtitle">
{{ _('Variant of') }} <a href="{{frappe.db.get_value('Item', variant_of, 'route')}}">{{ variant_of }}</a>
</span>
{% endif %}
@@ -20,20 +20,20 @@
<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>
+ <button class="btn 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 }}">
+ <input class="form-control text-center cart-qty" 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>
+ <button class="btn cart-btn" data-dir="up">+</button>
</span>
</div>
</td>
{% if cart_settings.enable_checkout %}
- <td class="text-right">
+ <td class="text-right item-subtotal">
<div>
{{ d.get_formatted('amount') }}
</div>
- <span class="text-muted">
+ <span class="item-rate">
{{ _('Rate:') }} {{ d.get_formatted('rate') }}
</span>
</td>
diff --git a/erpnext/templates/includes/macros.html b/erpnext/templates/includes/macros.html
index 74c84ba..0adfbc9 100644
--- a/erpnext/templates/includes/macros.html
+++ b/erpnext/templates/includes/macros.html
@@ -90,6 +90,10 @@
<div class="card {{ align_items_class }}">
{% if image %}
<img class="card-img" src="{{ image }}" alt="{{ title }}">
+ {% else %}
+ <div class="card-img-top no-image">
+ {{ frappe.utils.get_abbr(title) }}
+ </div>
{% endif %}
{{ item_card_body(title, description, url, rate, category, is_featured, align) }}
</div>
diff --git a/erpnext/templates/includes/navbar/navbar_items.html b/erpnext/templates/includes/navbar/navbar_items.html
index 4daf0e7..133d99e 100644
--- a/erpnext/templates/includes/navbar/navbar_items.html
+++ b/erpnext/templates/includes/navbar/navbar_items.html
@@ -2,9 +2,11 @@
{% block navbar_right_extension %}
<li class="shopping-cart cart-icon hidden">
- <a href="/cart" class="nav-link">
- {{ _("Cart") }}
- <span class="badge badge-primary" id="cart-count"></span>
+ <a class="nav-link" href="/cart">
+ <svg class="icon icon-lg">
+ <use href="#icon-assets"></use>
+ </svg>
+ <span class="badge badge-primary cart-badge" id="cart-count"></span>
</a>
</li>
{% endblock %}
\ No newline at end of file
diff --git a/erpnext/templates/includes/order/order_taxes.html b/erpnext/templates/includes/order/order_taxes.html
index ebec838..d2c458e 100644
--- a/erpnext/templates/includes/order/order_taxes.html
+++ b/erpnext/templates/includes/order/order_taxes.html
@@ -29,12 +29,12 @@
{{ _("Discount") }}
</th>
<th class="text-right tot_quotation_discount">
- {% set tot_quotation_discount = [] %}
- {%- for item in doc.items -%}
- {% if tot_quotation_discount.append((((item.price_list_rate * item.qty)
- * item.discount_percentage) / 100)) %}{% endif %}
- {% endfor %}
- {{ frappe.utils.fmt_money((tot_quotation_discount | sum),currency=doc.currency) }}
+ {% set tot_quotation_discount = [] %}
+ {%- for item in doc.items -%}
+ {% if tot_quotation_discount.append((((item.price_list_rate * item.qty)
+ * item.discount_percentage) / 100)) %}{% endif %}
+ {% endfor %}
+ {{ frappe.utils.fmt_money((tot_quotation_discount | sum),currency=doc.currency) }}
</th>
</tr>
{% endif %}
@@ -47,51 +47,52 @@
{{ _("Total Amount") }}
</th>
<th class="text-right">
- <span>
- {% set total_amount = [] %}
- {%- for item in doc.items -%}
- {% if total_amount.append((item.price_list_rate * item.qty)) %}{% endif %}
- {% endfor %}
- {{ frappe.utils.fmt_money((total_amount | sum),currency=doc.currency) }}
- </span>
+ <span>
+ {% set total_amount = [] %}
+ {%- for item in doc.items -%}
+ {% if total_amount.append((item.price_list_rate * item.qty)) %}{% endif %}
+ {% endfor %}
+ {{ frappe.utils.fmt_money((total_amount | sum),currency=doc.currency) }}
+ </span>
</th>
</tr>
<tr>
- <th class="text-right" colspan="2">
- {{ _("Applied Coupon Code") }}
- </th>
- <th class="text-right">
- <span>
- {%- for row in frappe.get_all(doctype="Coupon Code",
- fields=["coupon_code"], filters={ "name":doc.coupon_code}) -%}
- <span>{{ row.coupon_code }}</span>
- {% endfor %}
- </span>
- </th>
+ <th class="text-right" colspan="2">
+ {{ _("Applied Coupon Code") }}
+ </th>
+ <th class="text-right">
+ <span>
+ {%- for row in frappe.get_all(doctype="Coupon Code",
+ fields=["coupon_code"], filters={ "name":doc.coupon_code}) -%}
+ <span>{{ row.coupon_code }}</span>
+ {% endfor %}
+ </span>
+ </th>
</tr>
<tr>
- <th class="text-right" colspan="2">
- {{ _("Discount") }}
- </th>
- <th class="text-right">
- <span>
- {% set tot_SO_discount = [] %}
- {%- for item in doc.items -%}
- {% if tot_SO_discount.append((((item.price_list_rate * item.qty)
- * item.discount_percentage) / 100)) %}{% endif %}
- {% endfor %}
- {{ frappe.utils.fmt_money((tot_SO_discount | sum),currency=doc.currency) }}
- </span>
- </th>
+ <th class="text-right" colspan="2">
+ {{ _("Discount") }}
+ </th>
+ <th class="text-right">
+ <span>
+ {% set tot_SO_discount = [] %}
+ {%- for item in doc.items -%}
+ {% if tot_SO_discount.append((((item.price_list_rate * item.qty)
+ * item.discount_percentage) / 100)) %}{% endif %}
+ {% endfor %}
+ {{ frappe.utils.fmt_money((tot_SO_discount | sum),currency=doc.currency) }}
+ </span>
+ </th>
</tr>
{% endif %}
{% endif %}
<tr>
- <th class="text-right" colspan="2">
+ <th></th>
+ <th class="item-grand-total">
{{ _("Grand Total") }}
</th>
- <th class="text-right">
+ <th class="text-right item-grand-total">
{{ doc.get_formatted("grand_total") }}
</th>
</tr>
diff --git a/erpnext/templates/pages/cart.html b/erpnext/templates/pages/cart.html
index 3033d15..2cabf5a 100644
--- a/erpnext/templates/pages/cart.html
+++ b/erpnext/templates/pages/cart.html
@@ -2,7 +2,7 @@
{% block title %} {{ _("Shopping Cart") }} {% endblock %}
-{% block header %}<h1>{{ _("Shopping Cart") }}</h1>{% endblock %}
+{% block header %}<h3 class="shopping-cart-header mt-2 mb-6">{{ _("Shopping Cart") }}</h1>{% endblock %}
<!--
{% block script %}
@@ -18,94 +18,119 @@
{% from "templates/includes/macros.html" import item_name_and_description %}
+{% if doc.items %}
<div class="cart-container">
- <div id="cart-error" class="alert alert-danger" style="display: none;"></div>
+ <div class="row m-0">
+ <div class="col-md-8 frappe-card p-5">
+ <div>
+ <div id="cart-error" class="alert alert-danger" style="display: none;"></div>
+ <div class="cart-items-header">
+ {{ _('Items') }}
+ </div>
+ <table class="table mt-3 cart-table">
+ <thead>
+ <tr>
+ <th width="60%">{{ _('Item') }}</th>
+ <th width="20%">{{ _('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" %}
+ </tfoot>
+ {% endif %}
+ </table>
+ </div>
+ <div class="row">
+ <div class="col-4">
+ {% if cart_settings.enable_checkout %}
+ <a class="btn btn-outline-primary" href="/orders">
+ {{ _('See past orders') }}
+ </a>
+ {% else %}
+ <a class="btn btn-outline-primary" href="/quotations">
+ {{ _('See past quotations') }}
+ </a>
+ {% endif %}
+ </div>
+ <div class="col-8">
+ {% if doc.items %}
+ <div class="place-order-container">
+ {% if cart_settings.enable_checkout %}
+ <button class="btn btn-primary btn-place-order" type="button">
+ {{ _("Place Order") }}
+ </button>
+ {% else %}
+ <button class="btn btn-primary btn-request-for-quotation" type="button">
+ {{ _("Request for Quotation") }}
+ </button>
+ {% endif %}
+ </div>
+ {% endif %}
+ </div>
+ </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" %}
- </tfoot>
- {% endif %}
- </table>
- {% else %}
- <p class="text-muted">{{ _('Your cart is Empty') }}</p>
- {% endif %}
- {% if doc.items %}
- <div class="place-order-container">
- {% if cart_settings.enable_checkout %}
- <button class="btn btn-primary btn-place-order" type="button">
- {{ _("Place Order") }}
- </button>
- {% else %}
- <button class="btn btn-primary btn-request-for-quotation" type="button">
- {{ _("Request for Quotation") }}
- </button>
+ {% 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 %}
</div>
- {% endif %}
- {% 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 class="col-md-4">
+ <div class="cart-addresses">
+ {% include "templates/includes/cart/cart_address.html" %}
+ </div>
</div>
- {% endif %}
-
- <div class="cart-addresses mt-5">
- {% include "templates/includes/cart/cart_address.html" %}
+ {% endif %}
</div>
- {% endif %}
</div>
-
-<div class="row mt-5">
- <div class="col-12">
- {% if cart_settings.enable_checkout %}
- <a href="/orders">
+{% else %}
+<div class="cart-empty frappe-card">
+ <div class="cart-empty-state">
+ <img src="/assets/erpnext/images/ui-states/cart-empty-state.png" alt="Empty State">
+ </div>
+ <div class="cart-empty-message mt-4">{{ _('Your cart is Empty') }}</p>
+ {% if cart_settings.enable_checkout %}
+ <a class="btn btn-outline-primary" href="/orders">
{{ _('See past orders') }}
</a>
{% else %}
- <a href="/quotations">
+ <a class="btn btn-outline-primary" href="/quotations">
{{ _('See past quotations') }}
</a>
- {% endif %}
- </div>
+ {% endif %}
</div>
+{% endif %}
{% endblock %}