#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

@@ -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.
    */

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);
       });
   }

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,
   };
 })();

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

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

templates/ecommerce/order/success.html

@@ -12,7 +12,7 @@ <h1>Спасибо, Ваш заказ оплачен!</h1>
     {% else %}
       <h1>Заказ принят</h1>
     {% endif %}
-    <div class="page-info-message">
+    <div class="page-info-message js-purchased-order" data-id="{{ order.fake_order_number }}" data-positions="{{ positions_json }}">
       <p>Номер вашего заказа {{ order.fake_order_number }}</p>
       <p>{% time_to_call %}</p>
       {% if order.phone %}