[IMP] website, website_sale: remove recently viewed products
Before this commit recently viewed products included below the single product details were a specific snippet. After this commit recently viewed products has been removed and cross-product drop areas have been added to the product page. task-2453416 https://github.com/odoo/odoo/pull/65554 See https://github.com/odoo/upgrade/pull/2153
This commit is contained in:
@@ -113,7 +113,6 @@
|
||||
<t t-if="debug" t-snippet="website.s_dynamic_snippet" t-thumbnail="/website/static/src/img/snippets_thumbs/s_dynamic_snippet.svg"/>
|
||||
<t t-if="debug" t-snippet="website.s_dynamic_snippet_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_dynamic_carousel.svg"/>
|
||||
<t id="sale_products_hook"/>
|
||||
<t id="sale_recently_viewed_product_hook"/>
|
||||
<t id="sale_product_search_section_hook"/>
|
||||
<t id="blog_posts_hook"/>
|
||||
<t id="event_local_events_hook"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.1 KiB |
@@ -1,182 +1,7 @@
|
||||
odoo.define('website_sale.recently_viewed', function (require) {
|
||||
|
||||
var concurrency = require('web.concurrency');
|
||||
var config = require('web.config');
|
||||
var core = require('web.core');
|
||||
var publicWidget = require('web.public.widget');
|
||||
var utils = require('web.utils');
|
||||
var wSaleUtils = require('website_sale.utils');
|
||||
|
||||
var qweb = core.qweb;
|
||||
|
||||
publicWidget.registry.productsRecentlyViewedSnippet = publicWidget.Widget.extend({
|
||||
selector: '.s_wsale_products_recently_viewed',
|
||||
xmlDependencies: ['/website_sale/static/src/xml/website_sale_recently_viewed.xml'],
|
||||
disabledInEditableMode: false,
|
||||
read_events: {
|
||||
'click .js_add_cart': '_onAddToCart',
|
||||
'click .js_remove': '_onRemove',
|
||||
},
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
*/
|
||||
init: function () {
|
||||
this._super.apply(this, arguments);
|
||||
this._dp = new concurrency.DropPrevious();
|
||||
this.uniqueId = _.uniqueId('o_carousel_recently_viewed_products_');
|
||||
this._onResizeChange = _.debounce(this._addCarousel, 100);
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
start: function () {
|
||||
this._dp.add(this._fetch()).then(this._render.bind(this));
|
||||
$(window).resize(() => {
|
||||
this._onResizeChange();
|
||||
});
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
destroy: function () {
|
||||
this._super(...arguments);
|
||||
this.$el.addClass('d-none');
|
||||
this.$el.find('.slider').html('');
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Private
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_fetch: function () {
|
||||
return this._rpc({
|
||||
route: '/shop/products/recently_viewed',
|
||||
}).then(res => {
|
||||
var products = res['products'];
|
||||
|
||||
// In edit mode, if the current visitor has no recently viewed
|
||||
// products, use demo data.
|
||||
if (this.editableMode && (!products || !products.length)) {
|
||||
return {
|
||||
'products': [{
|
||||
id: 0,
|
||||
website_url: '#',
|
||||
display_name: 'Product 1',
|
||||
price: '$ <span class="oe_currency_value">750.00</span>',
|
||||
}, {
|
||||
id: 0,
|
||||
website_url: '#',
|
||||
display_name: 'Product 2',
|
||||
price: '$ <span class="oe_currency_value">750.00</span>',
|
||||
}, {
|
||||
id: 0,
|
||||
website_url: '#',
|
||||
display_name: 'Product 3',
|
||||
price: '$ <span class="oe_currency_value">750.00</span>',
|
||||
}, {
|
||||
id: 0,
|
||||
website_url: '#',
|
||||
display_name: 'Product 4',
|
||||
price: '$ <span class="oe_currency_value">750.00</span>',
|
||||
}],
|
||||
};
|
||||
}
|
||||
|
||||
return res;
|
||||
});
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_render: function (res) {
|
||||
var products = res['products'];
|
||||
var mobileProducts = [], webProducts = [], productsTemp = [];
|
||||
_.each(products, function (product) {
|
||||
if (productsTemp.length === 4) {
|
||||
webProducts.push(productsTemp);
|
||||
productsTemp = [];
|
||||
}
|
||||
productsTemp.push(product);
|
||||
mobileProducts.push([product]);
|
||||
});
|
||||
if (productsTemp.length) {
|
||||
webProducts.push(productsTemp);
|
||||
}
|
||||
|
||||
this.mobileCarousel = $(qweb.render('website_sale.productsRecentlyViewed', {
|
||||
uniqueId: this.uniqueId,
|
||||
productFrame: 1,
|
||||
productsGroups: mobileProducts,
|
||||
}));
|
||||
this.webCarousel = $(qweb.render('website_sale.productsRecentlyViewed', {
|
||||
uniqueId: this.uniqueId,
|
||||
productFrame: 4,
|
||||
productsGroups: webProducts,
|
||||
}));
|
||||
this._addCarousel();
|
||||
this.$el.toggleClass('d-none', !(products && products.length));
|
||||
},
|
||||
/**
|
||||
* Add the right carousel depending on screen size.
|
||||
* @private
|
||||
*/
|
||||
_addCarousel: function () {
|
||||
var carousel = config.device.size_class <= config.device.SIZES.SM ? this.mobileCarousel : this.webCarousel;
|
||||
this.$('.slider').html(carousel).css('display', ''); // Removing display is kept for compatibility (it was hidden before)
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Handlers
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Add product to cart and reload the carousel.
|
||||
* @private
|
||||
* @param {Event} ev
|
||||
*/
|
||||
_onAddToCart: function (ev) {
|
||||
var self = this;
|
||||
var $card = $(ev.currentTarget).closest('.card');
|
||||
this._rpc({
|
||||
route: "/shop/cart/update_json",
|
||||
params: {
|
||||
product_id: $card.find('input[data-product-id]').data('product-id'),
|
||||
add_qty: 1
|
||||
},
|
||||
}).then(function (data) {
|
||||
wSaleUtils.updateCartNavBar(data);
|
||||
var $navButton = $('header .o_wsale_my_cart').first();
|
||||
var fetch = self._fetch();
|
||||
var animation = wSaleUtils.animateClone($navButton, $(ev.currentTarget).parents('.o_carousel_product_card'), 25, 40);
|
||||
Promise.all([fetch, animation]).then(function (values) {
|
||||
self._render(values[0]);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove product from recently viewed products.
|
||||
* @private
|
||||
* @param {Event} ev
|
||||
*/
|
||||
_onRemove: function (ev) {
|
||||
var self = this;
|
||||
var $card = $(ev.currentTarget).closest('.card');
|
||||
this._rpc({
|
||||
route: "/shop/products/recently_viewed_delete",
|
||||
params: {
|
||||
product_id: $card.find('input[data-product-id]').data('product-id'),
|
||||
},
|
||||
}).then(function (data) {
|
||||
self._render(data);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
publicWidget.registry.productsRecentlyViewedUpdate = publicWidget.Widget.extend({
|
||||
selector: '#product_detail',
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates xml:space="preserve">
|
||||
<!-- Recently Viewed Products Carousel -->
|
||||
<t t-name="website_sale.productsRecentlyViewed">
|
||||
<div t-att-id="uniqueId" class="carousel slide o_not_editable" data-interval="false">
|
||||
<div class="carousel-inner">
|
||||
<t t-foreach="productsGroups" t-as="products">
|
||||
<div t-attf-class="carousel-item #{!products_index and 'active' or ''}">
|
||||
<div class="row">
|
||||
<t t-foreach="products" t-as="product">
|
||||
<div t-attf-class="o_carousel_product_card_wrap col-md-#{12 / productFrame}">
|
||||
<div class="o_carousel_product_card card h-100">
|
||||
<input type="hidden" name="product-id" t-att-data-product-id="product.id"/>
|
||||
<a class="o_carousel_product_img_link" t-att-href="product.website_url">
|
||||
<img class="o_carousel_product_card_img_top card-img-top" t-attf-src="/web/image/product.product/#{product.id}#{productFrame == 1 ? '/image_256' : '/image_512'}" t-att-alt="product.display_name"/>
|
||||
</a>
|
||||
<i class="fa fa-trash o_carousel_product_remove js_remove"></i>
|
||||
<div class="o_carousel_product_card_body card-body border-top">
|
||||
<a t-att-href="product.website_url" class="text-decoration-none">
|
||||
<h6 class="card-title mb-0 text-truncate" t-raw="product.display_name"/>
|
||||
</a>
|
||||
<t t-if="product.rating" t-raw="product.rating"/>
|
||||
</div>
|
||||
<div class="o_carousel_product_card_footer card-footer d-flex align-items-center">
|
||||
<div class="d-block font-weight-bold" t-raw="product.price"/>
|
||||
<button type="button" role="button" class="btn btn-primary js_add_cart ml-auto" title="Add to Cart">
|
||||
<i class="fa fa-fw fa-shopping-cart"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
<t t-if='productsGroups.length > 1'>
|
||||
<a class="o_carousel_product_control carousel-control-prev" t-att-href="'#' + uniqueId" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="o_carousel_product_control carousel-control-next" t-att-href="'#' + uniqueId" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
@@ -1,22 +1,10 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template id="s_products_recently_viewed" name="Viewed Products">
|
||||
<section class="s_wsale_products_recently_viewed o_snippet_invisible pt24 pb24 d-none" style="min-height: 400px;">
|
||||
<div class="container">
|
||||
<h3 class="text-center mb32">Recently Viewed Products</h3>
|
||||
<div class="slider o_not_editable"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template id="snippets" inherit_id="website.snippets" name="e-commerce snippets">
|
||||
<xpath expr="//t[@id='sale_products_hook']" position="replace">
|
||||
<t t-snippet="website_sale.s_dynamic_snippet_products" t-thumbnail="/website_sale/static/src/img/snippets_thumbs/s_products_recently_viewed.svg"/>
|
||||
</xpath>
|
||||
<xpath expr="//t[@id='sale_recently_viewed_product_hook']" position="replace">
|
||||
<t t-snippet="website_sale.s_products_recently_viewed" t-thumbnail="/website_sale/static/src/img/snippets_thumbs/s_products_recently_viewed.svg"/>
|
||||
</xpath>
|
||||
<xpath expr="//t[@id='sale_product_search_section_hook']" position="replace">
|
||||
<t t-snippet="website_sale.s_products_searchbar" t-thumbnail="/website_sale/static/src/img/snippets_thumbs/s_products_searchbar.svg"/>
|
||||
</xpath>
|
||||
|
||||
@@ -729,12 +729,6 @@
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="recently_viewed_products_product" inherit_id="website_sale.product" active="False" customize_show="True" name="Recently Viewed Products" priority="16">
|
||||
<xpath expr="//div[@t-field='product.website_description']" position="after">
|
||||
<t t-snippet-call="website_sale.s_products_recently_viewed"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<!-- Product options: OpenChatter -->
|
||||
<template id="product_comment" inherit_id="website_sale.product" active="False" customize_show="True" name="Discussion and Rating" priority="15">
|
||||
<xpath expr="//div[@t-field='product.website_description']" position="after">
|
||||
|
||||
Reference in New Issue
Block a user