From d5c180351466e30cbfea0990514e199327bf648f Mon Sep 17 00:00:00 2001 From: Artemiy Date: Wed, 22 Aug 2018 17:45:59 +0300 Subject: [PATCH] #524 jsecommerce purchase (#532) * Add order's data to success.html * Create publishPurchase for success.html. Remove old purchase publishing * Self-review fixes * Apply linter rules --- front/js/components/order.es6 | 13 +----------- front/js/components/product.es6 | 8 +++---- front/js/shared/configs.es6 | 5 +++++ front/js/shared/tracking.es6 | 29 +++++++++++++------------- shopelectro/views/ecommerce.py | 16 +++++++++++++- templates/ecommerce/order/success.html | 2 +- 6 files changed, 39 insertions(+), 34 deletions(-) diff --git a/front/js/components/order.es6 b/front/js/components/order.es6 index 98effe06..520d0ada 100644 --- a/front/js/components/order.es6 +++ b/front/js/components/order.es6 @@ -48,7 +48,7 @@ 'onCartUpdate', renderTable, fillSavedInputs, touchSpinReinit, restoreSelectedPayment, cityAutocomplete, ); - $(DOM.fullForm).submit(() => mediator.publish('onOrderSend', [getProductsData()])); + $(DOM.fullForm).submit(() => mediator.publish('onOrderSend')); /** * Bind events to parent's elements, because of dynamic elements. @@ -59,17 +59,6 @@ DOM.$order.on('keyup', 'input', event => storeInput($(event.target))); } - function getProductsData() { - return $(DOM.productRows).map((_, el) => { - const $el = $(el); - return { - name: $el.find('.js-product-link').text(), - quantity: $el.find(DOM.productCount).val(), - price: parseInt($el.find(DOM.productPrice).attr('productPrice'), 10), - }; - }).get(); - } - /** * Return element's attribute value by attr name. */ diff --git a/front/js/components/product.es6 b/front/js/components/product.es6 index 8e7ded4f..8ebc1982 100644 --- a/front/js/components/product.es6 +++ b/front/js/components/product.es6 @@ -92,16 +92,14 @@ */ function oneClick() { helpers.setDisabledState(DOM.$oneClick, 'Ожидайте...'); - - const data = getProductData(); - const { id, quantity } = data; + const { id, quantity } = getProductData(); server.oneClickBuy(id, quantity, DOM.$phone.val()) .then(() => { - mediator.publish('onOneClickBuy', [data]); + mediator.publish('onOneClickBuy'); // Set timeout to wait handling of onOneClickBuy setTimeout(() => { - window.location.href = '/shop/order-success'; + window.location.href = configs.hrefs.orderSuccess; }, 100); }); } diff --git a/front/js/shared/configs.es6 b/front/js/shared/configs.es6 index be3789c3..4a4a8544 100644 --- a/front/js/shared/configs.es6 +++ b/front/js/shared/configs.es6 @@ -11,6 +11,10 @@ const configs = (() => { // Ignore ESLintBear (no-unused-vars) touchspin: '.js-touchspin', }; + const hrefs = { + orderSuccess: '/shop/order-success', + }; + const labels = { callTime: 'callTime', phone: 'phone', @@ -140,5 +144,6 @@ const configs = (() => { // Ignore ESLintBear (no-unused-vars) labels, initScrollbar, initTouchspin, + hrefs, }; })(); diff --git a/front/js/shared/tracking.es6 b/front/js/shared/tracking.es6 index 0b2fff46..c1f3a632 100644 --- a/front/js/shared/tracking.es6 +++ b/front/js/shared/tracking.es6 @@ -12,6 +12,7 @@ $goToProductLink: $('.js-browse-product'), $downloadPrice: $('.js-download-price'), $downloadPriceInFooter: $('.js-download-price-footer'), + $purchasedOrder: $('.js-purchased-order'), }; // Sync container for yaTracker @@ -27,33 +28,21 @@ const yaTracker = new YATracker(window.dataLayer, 'RUB'); // Ignore ESLintBear (no-undef) const gaTracker = new GATracker(ga, 'ecommerce'); // Ignore ESLintBear (block-scoped-var) - // @todo #504:60m Send `purchase` event to YA and GA after a success purchase. - // This will allow us to send order's id. Currently we send the event after - // submitting of the purchase button with the dummy order's id. - // See the parent issue for a detail. - // @todo #504:30m Send info about product's brand to YA and GA. - // Use a dummy order's id, because we do not wait complete processing of - // purchase request. - const orderData = { id: 1 }; - const init = () => { setUpListeners(); + publishPurchase(); }; function setUpListeners() { - mediator.subscribe('onOneClickBuy', (_, productsData) => { + mediator.subscribe('onOneClickBuy', () => { reachGoal('CMN_BUY_SEND'); reachGoal('FAST_BUY_SEND'); - yaTracker.purchase([productsData], orderData); - gaTracker.purchase([productsData], orderData); }); - mediator.subscribe('onOrderSend', (_, products) => { + mediator.subscribe('onOrderSend', () => { reachGoal('CMN_BUY_SEND'); reachGoal('FULL_BUY_SEND'); - yaTracker.purchase(products, orderData); - gaTracker.purchase(products, orderData); }); mediator.subscribe('onCartClear', (_, products) => { yaTracker.remove(products); @@ -88,6 +77,16 @@ }); } + function publishPurchase() { + if (!DOM.$purchasedOrder.length) return; + const orderData = { id: DOM.$purchasedOrder.data('id') }; + const orderPositions = DOM.$purchasedOrder.data('positions') + .map(val => val.fields); + + yaTracker.purchase(orderPositions, orderData); + gaTracker.purchase(orderPositions, orderData); + } + function reachGoal(goal) { /** * AdBlock-like services can block an yaCounter, so to prevent diff --git a/shopelectro/views/ecommerce.py b/shopelectro/views/ecommerce.py index d8001540..d9b2510f 100644 --- a/shopelectro/views/ecommerce.py +++ b/shopelectro/views/ecommerce.py @@ -1,4 +1,5 @@ from django.conf import settings +from django.core import serializers from django.http import HttpResponse, JsonResponse from django.shortcuts import get_object_or_404, render from django.views.decorators.http import require_POST @@ -47,7 +48,20 @@ class FlushCart(ec_views.FlushCart): class OrderSuccess(ec_views.OrderSuccess): - order = Order + order = Order.objects.all().prefetch_related('positions') + + def get_context_data(self, **kwargs): + context = super().get_context_data(**kwargs) + positions_json = serializers.serialize( + 'json', + context['order'].positions.all(), + fields=['name', 'quantity', 'price'], + ) + + return { + **context, + 'positions_json': positions_json, + } @require_POST diff --git a/templates/ecommerce/order/success.html b/templates/ecommerce/order/success.html index 220a4576..527bede0 100644 --- a/templates/ecommerce/order/success.html +++ b/templates/ecommerce/order/success.html @@ -12,7 +12,7 @@

Спасибо, Ваш заказ оплачен!

{% else %}

Заказ принят

{% endif %} -
+

Номер вашего заказа {{ order.fake_order_number }}

{% time_to_call %}

{% if order.phone %}