[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:
Benoit Socias
2021-03-26 15:41:13 +00:00
parent fc34260bee
commit 429f9b70af
6 changed files with 0 additions and 243 deletions
@@ -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"/>
@@ -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>
-6
View File
@@ -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">