2021-05-17 15:14:41 +00:00
|
|
|
erpnext.ProductGrid = class {
|
|
|
|
/* Options:
|
|
|
|
- items: Items
|
|
|
|
- settings: E Commerce Settings
|
|
|
|
- products_section: Products Wrapper
|
|
|
|
- preference: If preference is not grid view, render but hide
|
|
|
|
*/
|
|
|
|
constructor(options) {
|
|
|
|
Object.assign(this, options);
|
|
|
|
|
|
|
|
if (this.preference !== "Grid View") {
|
|
|
|
this.products_section.addClass("hidden");
|
|
|
|
}
|
|
|
|
|
2021-05-24 20:05:22 +00:00
|
|
|
this.products_section.empty();
|
2021-05-17 15:14:41 +00:00
|
|
|
this.make();
|
|
|
|
}
|
|
|
|
|
|
|
|
make() {
|
|
|
|
let me = this;
|
|
|
|
let html = ``;
|
|
|
|
|
|
|
|
this.items.forEach(item => {
|
|
|
|
let title = item.web_item_name || item.item_name || item.item_code || "";
|
2021-07-11 21:58:33 +00:00
|
|
|
title = title.length > 90 ? title.substr(0, 90) + "..." : title;
|
2021-05-17 15:14:41 +00:00
|
|
|
|
|
|
|
html += `<div class="col-sm-4 item-card"><div class="card text-left">`;
|
|
|
|
html += me.get_image_html(item, title);
|
|
|
|
html += me.get_card_body_html(item, title, me.settings);
|
|
|
|
html += `</div></div>`;
|
2021-05-17 15:57:42 +00:00
|
|
|
});
|
2021-05-17 15:14:41 +00:00
|
|
|
|
|
|
|
let $product_wrapper = this.products_section;
|
|
|
|
$product_wrapper.append(html);
|
|
|
|
}
|
|
|
|
|
|
|
|
get_image_html(item, title) {
|
|
|
|
let image = item.website_image || item.image;
|
|
|
|
|
2021-05-17 15:57:42 +00:00
|
|
|
if (image) {
|
2021-05-17 15:14:41 +00:00
|
|
|
return `
|
|
|
|
<div class="card-img-container">
|
|
|
|
<a href="/${ item.route || '#' }" style="text-decoration: none;">
|
|
|
|
<img class="card-img" src="${ image }" alt="${ title }">
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
} else {
|
|
|
|
return `
|
2021-06-08 14:10:26 +00:00
|
|
|
<div class="card-img-container">
|
|
|
|
<a href="/${ item.route || '#' }" style="text-decoration: none;">
|
|
|
|
<div class="card-img-top no-image">
|
|
|
|
${ frappe.get_abbr(title) }
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
</div>
|
2021-05-17 15:14:41 +00:00
|
|
|
`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
get_card_body_html(item, title, settings) {
|
|
|
|
let body_html = `
|
2021-07-11 21:58:33 +00:00
|
|
|
<div class="card-body text-left card-body-flex" style="width:100%">
|
2021-07-13 20:06:50 +00:00
|
|
|
<div style="margin-top: 1rem; display: flex;">
|
2021-05-17 15:14:41 +00:00
|
|
|
`;
|
2021-07-11 21:58:33 +00:00
|
|
|
body_html += this.get_title(item, title);
|
|
|
|
|
|
|
|
// get floating elements
|
|
|
|
if (!item.has_variants) {
|
|
|
|
if (settings.enable_wishlist) {
|
|
|
|
body_html += this.get_wishlist_icon(item);
|
|
|
|
}
|
|
|
|
if (settings.enabled) {
|
|
|
|
body_html += this.get_cart_indicator(item);
|
|
|
|
}
|
2021-05-17 15:14:41 +00:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2021-07-13 20:06:50 +00:00
|
|
|
body_html += `</div>`;
|
2021-05-17 15:14:41 +00:00
|
|
|
body_html += `<div class="product-category">${ item.item_group || '' }</div>`;
|
|
|
|
|
|
|
|
if (item.formatted_price) {
|
|
|
|
body_html += this.get_price_html(item);
|
|
|
|
}
|
|
|
|
|
2021-07-11 21:58:33 +00:00
|
|
|
body_html += this.get_stock_availability(item, settings);
|
2021-05-17 15:14:41 +00:00
|
|
|
body_html += this.get_primary_button(item, settings);
|
|
|
|
body_html += `</div>`; // close div on line 49
|
|
|
|
|
|
|
|
return body_html;
|
|
|
|
}
|
|
|
|
|
2021-07-11 21:58:33 +00:00
|
|
|
get_title(item, title) {
|
2021-05-17 15:14:41 +00:00
|
|
|
let title_html = `
|
|
|
|
<a href="/${ item.route || '#' }">
|
|
|
|
<div class="product-title">
|
|
|
|
${ title || '' }
|
2021-07-11 21:58:33 +00:00
|
|
|
</div>
|
|
|
|
</a>
|
2021-05-17 15:14:41 +00:00
|
|
|
`;
|
2021-05-17 15:57:42 +00:00
|
|
|
return title_html;
|
2021-05-17 15:14:41 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
get_wishlist_icon(item) {
|
|
|
|
let icon_class = item.wished ? "wished" : "not-wished";
|
|
|
|
return `
|
2021-07-11 21:58:33 +00:00
|
|
|
<div class="like-action ${ item.wished ? "like-action-wished" : ''}"
|
2021-08-09 15:30:31 +00:00
|
|
|
data-item-code="${ item.item_code }">
|
2021-05-17 15:14:41 +00:00
|
|
|
<svg class="icon sm">
|
|
|
|
<use class="${ icon_class } wish-icon" href="#icon-heart"></use>
|
|
|
|
</svg>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
2021-07-11 21:58:33 +00:00
|
|
|
get_cart_indicator(item) {
|
|
|
|
return `
|
|
|
|
<div class="cart-indicator ${item.in_cart ? '' : 'hidden'}" data-item-code="${ item.item_code }">
|
|
|
|
1
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
2021-05-17 15:14:41 +00:00
|
|
|
get_price_html(item) {
|
|
|
|
let price_html = `
|
|
|
|
<div class="product-price">
|
|
|
|
${ item.formatted_price || '' }
|
|
|
|
`;
|
|
|
|
|
|
|
|
if (item.formatted_mrp) {
|
|
|
|
price_html += `
|
2021-07-11 21:58:33 +00:00
|
|
|
<small class="striked-price">
|
|
|
|
<s>${ item.formatted_mrp ? item.formatted_mrp.replace(/ +/g, "") : "" }</s>
|
2021-05-17 15:14:41 +00:00
|
|
|
</small>
|
2021-07-11 21:58:33 +00:00
|
|
|
<small class="ml-1 product-info-green">
|
2021-05-17 15:14:41 +00:00
|
|
|
${ item.discount } OFF
|
|
|
|
</small>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
price_html += `</div>`;
|
|
|
|
return price_html;
|
|
|
|
}
|
|
|
|
|
2021-07-11 21:58:33 +00:00
|
|
|
get_stock_availability(item, settings) {
|
2021-08-09 07:55:13 +00:00
|
|
|
if (settings.show_stock_availability && !item.has_variants && !item.in_stock) {
|
2021-09-01 09:27:50 +00:00
|
|
|
return `<span class="out-of-stock mb-2 mt-1">${ __("Out of stock") }</span>`;
|
2021-07-11 21:58:33 +00:00
|
|
|
}
|
|
|
|
return ``;
|
|
|
|
}
|
|
|
|
|
2021-05-17 15:14:41 +00:00
|
|
|
get_primary_button(item, settings) {
|
|
|
|
if (item.has_variants) {
|
|
|
|
return `
|
|
|
|
<a href="/${ item.route || '#' }">
|
|
|
|
<div class="btn btn-sm btn-explore-variants w-100 mt-4">
|
|
|
|
${ __('Explore') }
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
`;
|
2021-07-11 21:58:33 +00:00
|
|
|
} else if (settings.enabled && (settings.allow_items_not_in_stock || item.in_stock)) {
|
2021-05-17 15:14:41 +00:00
|
|
|
return `
|
|
|
|
<div id="${ item.name }" class="btn
|
2021-07-11 21:58:33 +00:00
|
|
|
btn-sm btn-primary btn-add-to-cart-list
|
2021-09-01 09:27:50 +00:00
|
|
|
w-100 mt-2 ${ item.in_cart ? 'hidden' : '' }"
|
2021-05-17 15:14:41 +00:00
|
|
|
data-item-code="${ item.item_code }">
|
2021-07-11 21:58:33 +00:00
|
|
|
<span class="mr-2">
|
|
|
|
<svg class="icon icon-md">
|
|
|
|
<use href="#icon-assets"></use>
|
|
|
|
</svg>
|
|
|
|
</span>
|
2021-05-17 15:14:41 +00:00
|
|
|
${ __('Add to Cart') }
|
|
|
|
</div>
|
2021-07-11 21:58:33 +00:00
|
|
|
|
|
|
|
<a href="/cart">
|
|
|
|
<div id="${ item.name }" class="btn
|
|
|
|
btn-sm btn-primary btn-add-to-cart-list
|
|
|
|
w-100 mt-4 go-to-cart-grid
|
|
|
|
${ item.in_cart ? '' : 'hidden' }"
|
|
|
|
data-item-code="${ item.item_code }">
|
|
|
|
${ __('Go to Cart') }
|
|
|
|
</div>
|
|
|
|
</a>
|
2021-05-17 15:14:41 +00:00
|
|
|
`;
|
2021-06-01 07:14:49 +00:00
|
|
|
} else {
|
|
|
|
return ``;
|
2021-05-17 15:14:41 +00:00
|
|
|
}
|
|
|
|
}
|
2021-05-17 15:57:42 +00:00
|
|
|
};
|