#526 Update HTML data format (#553)

Fix data prop names

Apply linter rules

front/js/components/category.es6

@@ -86,7 +86,7 @@
 
   function reloadPageWithSorting() {
     const tags = helpers.getUrlEndpointParam('tags');
-    const selectedSorting = getSelectedSortingOption().attr('data-path').trim();
+    const selectedSorting = getSelectedSortingOption().data('path').trim();
     if (tags === '') {
       window.location.href = selectedSorting;
     } else {
@@ -164,11 +164,11 @@
       const quantity = $product.closest('.js-order').find('.js-product-count').val();
 
       return {
-        id: parseInt($product.attr('productId'), 10),
-        name: $product.attr('productName'),
+        id: parseInt($product.data('product-id'), 10),
+        name: $product.data('product-name'),
         quantity: parseInt(quantity, 10),
         category: DOM.$h1.data('name'),
-        brand: $product.attr('productBrand'),
+        brand: $product.data('product-brand'),
       };
     };
 

front/js/components/headerCart.es6

@@ -23,13 +23,13 @@
    * Remove product with the given id from cart.
    */
   function remove(event) {
-    const productId = $(event.target).attr('data-id');
-    const productCount = $(event.target).attr('data-count');
+    const id = $(event.target).data('product-id');
+    const quantity = $(event.target).data('product-count');
 
-    server.removeFromCart(productId)
+    server.removeFromCart(id)
       .then((data) => {
         mediator.publish('onCartUpdate', data);
-        mediator.publish('onProductRemove', [productId, productCount]);
+        mediator.publish('onProductRemove', [{ id, quantity }]);
       });
   }
 
@@ -40,8 +40,8 @@
     const productsData = $(DOM.removeFromCart).map((_, el) => {
       const $el = $(el);
       return {
-        id: $el.attr('data-id'),
-        quantity: $el.attr('data-count'),
+        id: $el.data('product-id'),
+        quantity: $el.data('product-count'),
       };
     }).get();
     server.flushCart()

front/js/components/order.es6

@@ -9,7 +9,6 @@
     submit: '#submit-order',
     fullForm: '#order-form-full',
     productCount: '.js-prod-count',
-    productPrice: '.js-product-price',
     remove: '.js-remove',
     paymentOptions: 'input[name=payment_type]',
     defaultPaymentOptions: 'input[for=id_payment_type_0]',
@@ -54,18 +53,11 @@
      * Bind events to parent's elements, because of dynamic elements.
      */
     DOM.$order.on('click', DOM.submit, submitOrder);
-    DOM.$order.on('click', DOM.remove, event => removeProduct(getElAttr(event, 'productId'), getElAttr(event, 'productCount')));
+    DOM.$order.on('click', DOM.remove, removeProduct);
     DOM.$order.on('change', DOM.productCount, helpers.debounce(changeProductCount, 250));
     DOM.$order.on('keyup', 'input', event => storeInput($(event.target)));
   }
 
-  /**
-   * Return element's attribute value by attr name.
-   */
-  function getElAttr(event, attrName) {
-    return event.currentTarget.getAttribute(attrName);
-  }
-
   /**
    * Init google cities autocomplete.
    */
@@ -126,11 +118,14 @@
   /**
    * Remove Product from Cart.
    */
-  function removeProduct(productId, count) {
-    server.removeFromCart(productId)
+  function removeProduct(event) {
+    const $target = $(event.currentTarget);
+    const id = $target.data('product-id');
+    const quantity = $target.data('product-count');
+    server.removeFromCart(id)
       .then((data) => {
         mediator.publish('onCartUpdate', data);
-        mediator.publish('onProductRemove', [productId, count]);
+        mediator.publish('onProductRemove', [{ id, quantity }]);
       });
   }
 
@@ -139,14 +134,15 @@
    * Handle Product's count change in Cart with delay.
    */
   function changeProductCount(event) {
-    const productId = getElAttr(event, 'productId');
-    const countDiff = event.target.value - getElAttr(event, 'productLastCount');
+    const $target = $(event.currentTarget);
+    const id = $target.data('product-id');
+    const countDiff = event.target.value - $target.data('last-count');
     const data = {
-      id: productId,
+      id,
       quantity: Math.abs(countDiff),
     };
 
-    server.changeInCart(productId, event.target.value)
+    server.changeInCart(id, event.target.value)
       .then((newData) => {
         mediator.publish('onCartUpdate', newData);
         mediator.publish(countDiff > 0 ? 'onProductAdd' : 'onProductRemove', [data]);

front/js/components/product.es6

@@ -25,7 +25,7 @@
     $successModalText: $('.js-feedback-success'),
   };
 
-  const productId = DOM.$addToCart.attr('data-id');
+  const productId = DOM.$addToCart.data('id');
 
   const init = () => {
     setUpListeners();
@@ -77,7 +77,7 @@
     $.fancybox(
       DOM.$fancybox,
       {
-        index: DOM.$imageBig.attr('data-index'),
+        index: DOM.$imageBig.data('index'),
         helpers: {
           overlay: {
             locked: false,
@@ -119,7 +119,7 @@
    */
   function productImgSwitch(event) {
     const targetSrc = $(event.target).attr('src');
-    const dataIndex = $(event.target).attr('data-index');
+    const dataIndex = $(event.target).data('index');
 
     if (targetSrc !== DOM.$imageBig.attr('src')) {
       DOM.$imageBig.attr({

front/js/shared/tracking.es6

@@ -51,9 +51,9 @@
     mediator.subscribe('onProductAdd', (_, data) => {
       yaTracker.add([data]);
     });
-    mediator.subscribe('onProductRemove', (_, id, quantity) => {
+    mediator.subscribe('onProductRemove', (_, data) => {
       reachGoal('DELETE_PRODUCT');
-      yaTracker.remove([{ id, quantity }]);
+      yaTracker.remove([data]);
     });
     mediator.subscribe('onProductDetail', (_, data) => yaTracker.detail([data]));
     mediator.subscribe('onBackCallSend', () => reachGoal('BACK_CALL_SEND'));

templates/catalog/category_products.html

@@ -3,7 +3,7 @@
 {% load user_agents %}
 
 {% for product, image, brand in products_data %}
-  <div class="product-card col-xs-6 col-md-4" productId="{{ product.id }}"
+  <div class="product-card col-xs-6 col-md-4" data-product-id="{{ product.id }}"
        itemscope itemtype="https://schema.org/Product">
     <meta property="name" itemprop="name" content="{{ product.name }}">
     <div class="category-image-wrapper">
@@ -38,13 +38,10 @@
       <div class="js-order order row">
         <input class="col-xs-4 input-number category-prods-count js-product-count js-touchspin"
                type="number" value="1">
-        {% comment %}
-          @todo #504:15m Rename `productId` like format of properties to `data-product-id`.
-        {% endcomment %}
         <button class="btn btn-blue btn-category-buy js-product-to-cart"
-                productId="{{ product.id }}" productPrice="{{ product.price }}"
-                productName="{{ product.name }}"
-                productBrand="{% if brand %}{{ brand.name }}{% endif %}">
+                data-product-id="{{ product.id }}" data-product-price="{{ product.price }}"
+                data-product-name="{{ product.name }}"
+                data-product-brand="{% if brand %}{{ brand.name }}{% endif %}">
           Купить
         </button>
       </div>

templates/ecommerce/header_cart.html

@@ -39,7 +39,7 @@
             <span class="basket-count js-basket-count">{{ position.quantity }} шт.</span> =
             <span class="basket-sum js-basket-sum">{{ position.total_price|humanize_price }} руб.</span>
           </div>
-          <i class="basket-remove js-cart-remove fa fa-close" data-id="{{ id }}" data-count="{{ position.quantity }}" title="Удалить товар"></i>
+          <i class="basket-remove js-cart-remove fa fa-close" data-product-id="{{ id }}" data-product-count="{{ position.quantity }}" title="Удалить товар"></i>
         </li>
       {% endfor %}
     </ul>

templates/ecommerce/order/table_form.html

@@ -43,14 +43,14 @@ <h1>Оформление заказа</h1>
             </div>
             <input class="prod-count input-number js-prod-count js-touchspin"
                    value="{{ position.quantity }}" type="number"
-                   name="prod-count" productId="{{ id }}" productLastCount="{{ position.quantity }}">
+                   name="prod-count" data-product-id="{{ id }}" data-last-count="{{ position.quantity }}">
           </div>
           <div class="div-table-cell order-table-product-price text-center js-product-price"
-               productId="{{ id }}" productPrice="{{ position.price }}">
+              data-product-id="{{ id }}" data-product-price="{{ position.price }}">
             {{ position.price|humanize_price }} руб.
           </div>
           <div class="div-table-cell text-center">
-            <div class="order-list-remove-item js-remove" productId="{{ id }}" productCount="{{ position.quantity }}" title="Убрать из заказа">
+            <div class="order-list-remove-item js-remove" data-product-id="{{ id }}" data-product-count="{{ position.quantity }}" title="Убрать из заказа">
               <i class="fa fa-close"></i>
             </div>
           </div>