eCommerce app integration.

.gitignore

@@ -25,3 +25,6 @@ static/**/*
 front/images/catalog
 categories.xml
 products.xml
+pricelist.xlsx
+priceru.xml
+yandex.yml

front/js/.eslintrc

@@ -1,6 +1,6 @@
 {
   "extends": "airbnb-base",
-  "env": {
-    "jquery": true
+  "globals": {
+    "$": true
   }
 }

front/js/components/accordion.es6

@@ -1,6 +1,6 @@
 const accordion = (() => {
 
-  let getSavedItem = () => $('#' + localStorage.getItem(ITEM_KEY));
+  const getSavedItem = () => $('#' + localStorage.getItem(ITEM_KEY));
 
   const ITEM_KEY = 'activeItem';
   const DOM = {
@@ -9,7 +9,7 @@ const accordion = (() => {
     savedItem: getSavedItem(),
   };
 
-  let init = () => {
+  const init = () => {
     collapseAccordion();
     switchItem(DOM.savedItem);
     DOM.titles.click((event) => switchItem($(event.target)));
@@ -21,7 +21,7 @@ const accordion = (() => {
    *  -- inactive - slide up it, make active
    * @param $clickedItem - accordion item as jQuery object
    */
-  let switchItem = ($clickedItem) => {
+  const switchItem = ($clickedItem) => {
     if (!$clickedItem) {
       return
     }
@@ -35,32 +35,33 @@ const accordion = (() => {
     }
   };
 
-  let openItem = ($clickedItem) => {
-    let $to_switch = $clickedItem.next();
+  const openItem = ($clickedItem) => {
+    let $toSwitch = $clickedItem.next();
     collapseAccordion();
     $clickedItem.addClass('active');
-    $to_switch.stop().slideDown();
+    $toSwitch.stop().slideDown();
   };
 
-  let collapseItem = ($clickedItem) => {
-    let $to_switch = $clickedItem.next();
+  const collapseItem = ($clickedItem) => {
+    let $toSwitch = $clickedItem.next();
     $clickedItem.removeClass('active');
-    $to_switch.stop().slideUp();
+    $toSwitch.stop().slideUp();
     removeItem();
   };
 
-  let saveItem = ($item) => {
+  const saveItem = ($item) => {
     localStorage.setItem(ITEM_KEY, $item.attr('id'));
   };
 
-  let removeItem = ($item) => {
+  const removeItem = () => {
     localStorage.removeItem(ITEM_KEY);
   };
 
-  let collapseAccordion = () => {
+  const collapseAccordion = () => {
     DOM.titles.removeClass('active');
     DOM.panels.stop().slideUp();
   };
 
   init();
 })();
+

front/js/components/admin.es6

@@ -1,37 +1,41 @@
-const DOM = {
+const admin = (() => {
+  const DOM = {
   categoryPage: $('.model-category'),
   productPage: $('.model-product'),
 };
 
-const CONFIG = {
-  autoComplete: {
-    completeURL: '/admin-autocomplete/',
-    searchFieldId: '#searchbar',
-    minChars: 3,
-  },
-};
+  const CONFIG = {
+    autoComplete: {
+      completeURL: '/admin-autocomplete/',
+      searchFieldId: '#searchbar',
+      minChars: 3,
+    },
+  };
+
 
-let pageType = '';
+  let pageType = '';
 
-const autoComplete = new autoComplete({
-  selector: CONFIG.autoComplete.searchFieldId,
-  minChars: CONFIG.autoComplete.minChars,
-  source: (term, response) => {
-    $.getJSON(CONFIG.autoComplete.completeURL, {
-      q: term,
-      pageType: getCurrentPageType(),
-    }, (namesArray) => {
-      response(namesArray);
-    });
-  },
-});
+  const search = new autoComplete({
+    selector: CONFIG.autoComplete.searchFieldId,
+    minChars: CONFIG.autoComplete.minChars,
+    source: (term, response) => {
+      $.getJSON(CONFIG.autoComplete.completeURL, {
+        q: term,
+        pageType: getCurrentPageType(),
+      }, (namesArray) => {
+        response(namesArray);
+      });
+    },
+  });
 
-const getCurrentPageType = () => {
-  if (DOM.productPage.size() > 0) {
-    pageType = 'product';
-  } else {
-    pageType = 'category';
-  }
+  const getCurrentPageType = () => {
+    if (DOM.productPage.size() > 0) {
+      pageType = 'product';
+    } else {
+      pageType = 'category';
+    }
 
   return pageType;
 };
+})();
+

front/js/components/category.es6

@@ -1,12 +1,13 @@
 /**
  * Category Page module defines logic, operations and DOM for CategoryPage.
  */
-const categoryModule = (function () {
+const category = (() => {
   const DOM = {
     loadedProducts: $('.js-products-showed-count'),
     productsList: $('#products-wrapper'),
     viewType: $('#category-right'),
     loadMore: $('#btn-load-products'),
+    addToCart: $('.js-product-to-cart'),
     tileView: {
       $: $('.js-icon-mode-tile'),
       mode: 'tile',
@@ -23,27 +24,28 @@ const categoryModule = (function () {
     totalProductsCount: parseInt($('.js-total-products').first().text()),
   };
 
-  let init = () => {
+  const init = () => {
     setUpListeners();
     updateButtonState();
   };
 
   /**
    * Subscribing on events using mediator.
    */
-  let setUpListeners = () => {
+  const setUpListeners = () => {
     DOM.loadMore.click(loadProducts);
     DOM.sorting.change(changeSort);
     DOM.tileView.$.click(() => mediator.publish('onViewTypeChange', DOM.tileView.mode));
     DOM.listView.$.click(() => mediator.publish('onViewTypeChange', DOM.listView.mode));
+    DOM.addToCart.click((event) => buyProduct(event));
     mediator.subscribe('onViewTypeChange', updateViewType, sendViewType);
     mediator.subscribe('onProductsLoad', updateLoadedCount, updateProductsList, updateButtonState);
   };
 
   /**
    * Changes sorting option and re-renders the whole screen.
    */
-  let changeSort = () => location.href = sortingOption().attr('data-path');
+  const changeSort = () => location.href = sortingOption().attr('data-path');
 
   /**
    * Updates Products List DOM via appending html-list of loaded products
@@ -52,21 +54,21 @@ const categoryModule = (function () {
    * @param {Event} event
    * @param {string} products - HTML string of fetched product's list
    */
-  let updateProductsList = (event, products) => DOM.productsList.append(products);
+  const updateProductsList = (event, products) => DOM.productsList.append(products);
 
   /**
    * Updates loaded products counter by a simple logic:
    * 1) if we have less products left than we can fetch at a time, it means we have loaded them all,
    *    so we should set loaded count a value of total products
    * 2) otherwise, we simply add PRODUCTS_TO_FETCH to counter.
    */
-  let updateLoadedCount = () =>
+  const updateLoadedCount = () =>
     DOM.loadedProducts.text(loadedProductsCount() + Math.min(productsLeft(), CONFIG.productsToFetch));
 
   /**
    * Adds 'hidden' class to button if there are no more products to load.
    */
-  let updateButtonState = () => {
+  const updateButtonState = () => {
     if (productsLeft() === 0) {
       DOM.loadMore.addClass('hidden');
     }
@@ -79,7 +81,7 @@ const categoryModule = (function () {
    * @param {Event} event
    * @param {string} viewType: list|tile
    */
-  let updateViewType = (event, viewType) => {
+  const updateViewType = (event, viewType) => {
     DOM.viewType
       .removeClass('view-mode-tile view-mode-list')
       .addClass(`view-mode-${viewType}`);
@@ -96,7 +98,7 @@ const categoryModule = (function () {
   /**
    * Returns selected sorting option.
    */
-  let sortingOption = () => DOM.sorting.find(':selected');
+  const sortingOption = () => DOM.sorting.find(':selected');
 
   /**
    * Number of products remained un-fetched from back-end.
@@ -105,20 +107,20 @@ const categoryModule = (function () {
    *
    * @returns {Number} - number of products left to fetch
    */
-  let productsLeft = () => parseInt(CONFIG.totalProductsCount - loadedProductsCount());
+  const productsLeft = () => parseInt(CONFIG.totalProductsCount - loadedProductsCount());
 
   /**
    * Gets number of already loaded products
    *
    * @returns {int} - number of products which are loaded and presented in DOM
    */
-  let loadedProductsCount = () => parseInt(DOM.loadedProducts.first().text());
+  const loadedProductsCount = () => parseInt(DOM.loadedProducts.first().text());
 
   /**
    * Loads products from back-end using promise-like fetch object fetchProducts.
    * After products successfully loaded - publishes 'onProductLoad' event.
    */
-  let loadProducts = () => {
+  const loadProducts = () => {
     let categoryUrl = DOM.loadMore.attr('data-url');
     let offset = loadedProductsCount();
     let sorting = sortingOption().val();
@@ -128,5 +130,18 @@ const categoryModule = (function () {
       .then((products) => mediator.publish('onProductsLoad', products));
   };
 
+  const buyProduct = (event) => {
+    let buyInfo = (event) => {
+      let product = $(event.target);
+      let count = product.closest('.js-order').find('.js-product-count').val();
+      return {'count': parseInt(count),
+              'id': parseInt(product.attr('productId'))};
+    };
+
+    let {id, count} = buyInfo(event);
+    addToCart(id, count).then((data) => mediator.publish('onCartUpdate', data));
+  };
+
   init();
-}());
+})();
+

front/js/components/headerCart.es6

@@ -0,0 +1,42 @@
+const headerCart = (() => {
+  const DOM = {
+    cart: $('.js-cart-header'),
+    reset: '.js-reset-cart',
+    removeFromCart: '.js-cart-remove'
+  };
+
+  /**
+   * Remove product with the given id from cart.
+   * Trigger 'onCartUpdate' event afterwards.
+   * @param productId
+   */
+  const remove = (productId) => removeFromCart(productId)
+                                 .then((data) => mediator.publish('onCartUpdate', data));
+
+  /**
+   * Remove everything from cart.
+   * Trigger 'onCartUpdate' event afterwards.
+   */
+  const clear = () => flushCart().then((data) => mediator.publish('onCartUpdate', data));
+
+
+  /**
+   * Render new cart's html.
+   * @param event
+   * @param data
+   */
+  const render = (event, data) => {
+    DOM.cart.html(data['cart']);
+  };
+
+  const setUpListeners = () => {
+    // Since product's list in cart dropdown is dynamic, we bind events on static parent
+    DOM.cart.on('click', DOM.reset, () => clear());
+    DOM.cart.on('click', DOM.removeFromCart, (event) => remove(event.target.getAttribute('id')));
+    mediator.subscribe('onCartUpdate', render);
+  };
+
+  const init = () => setUpListeners();
+
+  init();
+})();