Form produits intégration prix par unité de référence (travail en cours)

ShopBundle/Controller/Admin/ProductFamilyController.php

                         'expanded' => true
                 ));
 
+                dump(floatval( $this->merchantUtils->getMerchantConfig('multiplying-factor')));
+                $formBuilder->add('multiplyingFactor', NumberType::class, array(
+                        'mapped'=> false,
+                        'data'=> floatval($this->merchantUtils->getMerchantConfig('multiplying-factor')),
+                ));
+
                 $formBuilder->add('propertyOrganicLabel', ChoiceType::class, array(
                         'choices' => array(
                                 'field.ProductFamily.organicLabelOptions.ab' => 'ab',

ShopBundle/Form/ProductType.php

 
                 $builder->add('buyingPriceByRefUnit', NumberType::class, array(
                         'label' => 'Prix d\'achat',
-                        'required'=>false,
-                        'mapped' => false
+                        'required'=>false
                 ));
 
                 $builder->add('buyingPriceByRefUnitWithTax', NumberType::class, array(
                 ));
 
                 $builder->add('priceByRefUnit', NumberType::class, array(
-                        'required'=>false,
-                        'mapped' => false
+                        'required'=>false
                 ));
 
                 $builder->add('priceByRefUnitWithTax', NumberType::class, array(

ShopBundle/Model/OrderAmountMin.php

         /**
          * @ORM\Column(type="float")
          */
-        private $orderAmountMin;
+        protected $orderAmountMin;
 
         public function getOrderAmountMin(): ?float
         {

ShopBundle/Model/ProductFamily.php

         /**
          * @ORM\Column(type="string", length=255, nullable=true)
          */
-        private $warningMessageType;
+        protected $warningMessageType;
 
         /**
          * @ORM\Column(type="text", nullable=true)

ShopBundle/Model/ProductPropertyTrait.php

         /**
          * @ORM\Column(type="float", nullable=true)
          */
-        protected $quantity = 1; //par défaut valeur à 1
+        protected $quantity;
 
         /**
          * @ORM\Column(type="float", nullable=true)

ShopBundle/Resources/public/css/backend/custom.css

 
 /* ProductFamily */
 
+.field-unit-quantity{border-bottom: 2px dotted #eee; padding-bottom: 10px; margin-bottom: 20px;}
+
 .new-productfamily #nav-params,
 .edit-productfamily #nav-params {
     margin-bottom: 30px ;
 .autoresize textarea{height: auto; min-height: 38px;}
 
 
+
     /* ORDER */
 
 .table-order-summary{width: 100%;}
 .product-form-modal{display: none;}
 .product-form.modal .form-check-label{font-style: italic; color: #666; text-align: left;}
 .products-collection-table .inherited{color: #888; font-style: italic; font-weight: initial;}
-.products-collection-table td{}
+.products-collection-table td{position: relative;}
+.products-collection-table .btn-empty-field{position: absolute; right: 3px; font-size: 0.7rem; top: 5px; padding: 0px;}
 #lc-product-family-edit .products-collection-table {table-layout:fixed;}
 #lc-product-family-edit .products-collection-table tr{border-bottom: 1px solid #dee2e6;}
 #lc-product-family-edit .products-collection-table th{font-size:13px; border-left: 1px solid #dee2e6; border-top: 1px solid #dee2e6; text-align: center;}

ShopBundle/Resources/public/js/backend/script/default/utils.js

     return parseFloat(parseFloat(priceWithoutTax) * ((taxRate/100) + 1)).toFixed(2);
 }
 
+
+function formatNumber(number, toFixed){
+    return Number(number).toFixed(toFixed);
+}
+
 /**
  * Formate un prix en l'arrondissant et en ajoutant le sigle de la monnaie
  *

ShopBundle/Resources/public/js/backend/script/default/vuejs-mixins.js

         },
         methods: {
             init: function () {
+                if (this.behaviorPriceValue == 'by-piece') {
+                    this.initByPiece();
+                } else if (this.behaviorPriceValue == 'by-reference-unit') {
+                    this.initByRefUnit();
+                }
+            },
+            initByPiece: function () {
                 this.buyingPriceUpdated();
                 this.priceUpdated();
-                this.unitUpdated();
             },
 
-            priceUpdated: function () {
-                if(this.price) {
-                    this.setPriceWithTax();
-                    this.setMultiplyingFactor();
-                    this.setPriceByRefUnit();
-                    this.setPriceByRefUnitWithTax();
-                }
+            initByRefUnit: function () {
+                this.buyingPriceByRefUnitUpdated();
+                this.priceByRefUnitUpdated();
             },
 
 
             buyingPriceUpdated: function () {
-                if(this.buyingPrice) {
+                if (this.buyingPrice) {
+                    this.buyingPrice = formatNumber(this.buyingPrice, 4)
                     this.setBuyingPriceWithTax();
-                    this.setMultiplyingFactor();
+                    //Mise à jour dans le panel price
+                    if (this.priceValue == null) {
+                        this.setPriceFromMultiplyingFactor();
+                        this.priceUpdated();
+                    } else {
+                        this.setMultiplyingFactor();
+                    }
                     this.setBuyingPriceByRefUnit();
                     this.setBuyingPriceByRefUnitWithTax();
                 }
             },
 
-            unitUpdated: function () {
-                /*if(this.unit) {
+            buyingPriceByRefUnitUpdated: function () {
+                if (this.buyingPriceByRefUnit) {
+                    this.buyingPriceByRefUnit = formatNumber(this.buyingPriceByRefUnit, 4)
+                    this.setBuyingPriceByRefUnitWithTax();
+                    if (this.priceByRefUnitValue == null) {
+                        this.setPriceByRefUnitFromMultiplyingFactor();
+                        this.priceByRefUnitUpdated();
+                    } else {
+                        this.setMultiplyingFactor();
+                    }
+                    this.setBuyingPriceFromBuyingPriceByRefUnit();
+                    this.setBuyingPriceWithTax();
+                }
+            },
+
+
+            priceUpdated: function () {
+                if (this.price) {
+                    this.price = formatNumber(this.priceByRefUnit, 4)
+                    this.setPriceWithTax();
+                    this.setMultiplyingFactor();
                     this.setPriceByRefUnit();
                     this.setPriceByRefUnitWithTax();
-                    //this.setBuyingPriceByRefUnit();
-                    //this.setBuyingPriceByRefUnitWithTax();
-                }*/
+                }
             },
-            quantityUpdated: function () {
-                /*if(this.quantity ) {
-                    if(this.behaviorPriceValue == 'by-piece'){
-                        this.setPriceByRefUnit();
-                        this.setPriceByRefUnitWithTax();
-                 */
-                if(this.behaviorPriceValue == 'by-reference-unit'){
-                        this.setPriceFromPriceByRefUnit();
-                        this.setPriceWithTax();
-                        //this.priceUpdated();
+            priceByRefUnitUpdated: function () {
+                if (this.priceByRefUnit) {
+                    this.priceByRefUnit = formatNumber(this.priceByRefUnit, 4)
+                    this.setPriceByRefUnitWithTax();
+                    this.setMultiplyingFactor();
+                    this.setPriceFromPriceByRefUnit();
+                    this.setPriceWithTax();
                 }
-
-                    // this.setBuyingPriceByRefUnit();
-                    // this.setBuyingPriceByRefUnitWithTax();
             },
 
 //Toutes les fonctions ci-dessous ne font que mettre à jour les price et buyingPrice
             buyingPriceWithTaxUpdated: function () {
+                this.buyingPriceWithTax = formatNumber(this.buyingPriceWithTax, 2)
                 this.setBuyingPriceFromBuyingPriceWithTax();
                 this.buyingPriceUpdated();
             },
-            buyingPriceByRefUnitUpdated: function () {
-                this.setBuyingPriceFromBuyingPriceByRefUnit();
-                this.buyingPriceUpdated();
-            },
             buyingPriceByRefUnitWithTaxUpdated: function () {
+                this.buyingPriceByRefUnitWithTax = formatNumber(this.buyingPriceByRefUnitWithTax, 2)
+
                 this.setBuyingPriceByRefUnitFromBuyingPriceByRefUnitWithTax();
                 this.buyingPriceByRefUnitUpdated();
             },
-            multiplyingFactorUpdated: function () {
-                this.setPriceFromMultiplyingFactor();
-                this.priceUpdated();
-            },
+
             priceWithTaxUpdated: function () {
+                this.priceWithTax = formatNumber(this.priceWithTax, 2)
                 this.setPriceFromPriceWithTax();
                 this.priceUpdated();
             },
-            priceByRefUnitUpdated: function () {
-                this.setPriceFromPriceByRefUnit();
-                this.priceUpdated();
-            },
+
             priceByRefUnitWithTaxUpdated: function () {
+                this.priceByRefUnitWithTax = formatNumber(this.priceByRefUnitWithTax, 2)
                 this.setPriceByRefUnitFromTax();
                 this.priceByRefUnitUpdated();
             },
 
 
-            //SETTER
-            setBuyingPriceFromBuyingPriceByRefUnit:function(){
-                this.buyingPrice = parseFloat((this.buyingPriceByRefUnit * this.quantityValue) / this.unitCoefficient).toFixed(2);
+            unitUpdated: function () {
+                this.quantityUpdated();
             },
+            quantityUpdated: function () {
+                if(this.quantity) {
+                    if (this.behaviorPriceValue == 'by-piece') {
+                        this.setBuyingPriceByRefUnit();
+                        this.setBuyingPriceByRefUnitWithTax();
+                        this.setPriceByRefUnit();
+                        this.setPriceByRefUnitWithTax();
+                    } else if (this.behaviorPriceValue == 'by-reference-unit') {
+                        this.setPriceFromPriceByRefUnit();
+                        this.setPriceWithTax();
+                        this.setBuyingPriceFromBuyingPriceByRefUnit();
+                        this.setBuyingPriceWithTax();
+                    }
+                }
+            },
+            multiplyingFactorUpdated: function () {
+                if (this.behaviorPriceValue == 'by-piece') {
+                    this.setPriceFromMultiplyingFactor();
+                    this.setPriceWithTax();
+                } else if (this.behaviorPriceValue == 'by-reference-unit') {
+                    this.setPriceByRefUnitFromMultiplyingFactor();
+                    this.setPriceByRefUnitWithTax();
+                }
+            },
+//NEW VERSION
+
             setBuyingPriceFromBuyingPriceWithTax: function () {
                 if (this.buyingPriceWithTax) {
-                    this.buyingPriceWithTax = parseFloat(this.buyingPriceWithTax.replace(',', '.')).toFixed(2);
                     this.buyingPrice = getPrice(this.buyingPriceWithTax, this.supplierTaxRateValue);
                 }
             },
             setBuyingPriceWithTax: function () {
                 if (this.buyingPrice) {
-                    this.buyingPrice = parseFloat(this.buyingPrice.replace(',', '.')).toFixed(3);
                     this.buyingPriceWithTax = getPriceWithTax(this.buyingPrice, this.supplierTaxRateValue);
                 }
             },
+
+            setPriceFromMultiplyingFactor: function () {
+                this.price = getPrice(this.buyingPriceValue * this.multiplyingFactor, this.taxRateValue);
+            },
+            setPriceWithTax() {
+                if (this.price) {
+                    this.priceWithTax = getPriceWithTax(this.price, this.taxRateValue);
+                }
+            },
+
+            setPriceByRefUnitFromMultiplyingFactor: function () {
+                this.priceByRefUnit = getPrice(this.buyingPriceByRefUnitValue * this.multiplyingFactorValue, this.taxRateValue);
+            },
+
+            //SETTER
+            setBuyingPriceFromBuyingPriceByRefUnit: function () {
+                this.buyingPrice = parseFloat((this.buyingPriceByRefUnit * this.quantityValue) / this.unitCoefficient).toFixed(4);
+            },
+
             setBuyingPriceByRefUnitFromBuyingPriceByRefUnitWithTax: function () {
                 if (this.buyingPriceByRefUnitWithTax) {
-                    this.buyingPriceByRefUnitWithTax = parseFloat(this.buyingPriceByRefUnitWithTax.replace(',', '.')).toFixed(2);
                     this.buyingPriceByRefUnit = getPrice(this.buyingPriceByRefUnitWithTax, this.supplierTaxRateValue);
                 }
             },
             setBuyingPriceByRefUnit: function () {
                 if (this.unitCoefficient && this.quantityValue) {
-                    this.buyingPriceByRefUnit = parseFloat((this.buyingPriceValue / this.quantityValue) * this.unitCoefficient).toFixed(2);
+                    this.buyingPriceByRefUnit = parseFloat((this.buyingPriceValue / this.quantityValue) * this.unitCoefficient).toFixed(4);
                 }
             },
             setBuyingPriceByRefUnitWithTax: function () {
                 if (this.buyingPriceByRefUnit) {
-                    this.buyingPriceByRefUnit = parseFloat(this.buyingPriceByRefUnit.replace(',', '.')).toFixed(3);
                     this.buyingPriceByRefUnitWithTax = getPriceWithTax(this.buyingPriceByRefUnit, this.supplierTaxRateValue);
                 }
             },
             setMultiplyingFactor: function () {
-                if (this.priceWithTax || this.buyingPrice) {
-                    this.multiplyingFactor = parseFloat(this.priceWithTaxValue / this.buyingPriceValue).toFixed(3);
+                if (this.behaviorPriceValue == 'by-piece') {
+                    if (this.priceWithTax || this.buyingPrice) {
+                        this.multiplyingFactor = parseFloat(this.priceWithTaxValue / this.buyingPriceValue).toFixed(4);
+                    }
+                } else if (this.behaviorPriceValue == 'by-reference-unit') {
+                    if (this.priceByRefUnitWithTax || this.buyingPriceByRefUnit) {
+                        this.multiplyingFactor = parseFloat(this.priceByRefUnitWithTaxValue / this.buyingPriceByRefUnitValue).toFixed(4);
+                    }
                 }
             },
             setPriceByRefUnitFromTax: function () {
                 if (this.priceByRefUnitWithTax) {
-                    this.priceByRefUnitWithTax = parseFloat(this.priceByRefUnitWithTax.replace(',', '.')).toFixed(2);
                     this.priceByRefUnit = getPrice(this.priceByRefUnitWithTax, this.taxRateValue);
                 }
             },
             setPriceByRefUnit: function () {
                 if (this.unitCoefficient && this.quantityValue) {
-                    this.priceByRefUnit = parseFloat((this.priceValue / this.quantityValue) * this.unitCoefficient).toFixed(2);
+                    this.priceByRefUnit = parseFloat((this.priceValue / this.quantityValue) * this.unitCoefficient).toFixed(4);
                 }
             },
-            setPriceByRefUnitWithTax: function () {
-                if (this.unitCoefficient && this.quantityValue) {
-                    this.priceByRefUnitWithTax = parseFloat((this.priceWithTaxValue / this.quantityValue) * this.unitCoefficient).toFixed(2);
+            setPriceByRefUnitWithTax() {
+                if (this.priceByRefUnit) {
+                    this.priceByRefUnitWithTax = getPriceWithTax(this.priceByRefUnit, this.taxRateValue);
                 }
             },
-
-            setPriceFromMultiplyingFactor: function () {
-                this.price =  getPrice(this.buyingPriceValue * this.multiplyingFactor, this.taxRateValue);
-            },
             setPriceFromPriceByRefUnit: function () {
-                this.price = parseFloat((this.priceByRefUnitValue * this.quantityValue) / this.unitCoefficient).toFixed(2);
+                this.price = parseFloat((this.priceByRefUnitValue * this.quantityValue) / this.unitCoefficient).toFixed(4);
             },
             setPriceFromPriceWithTax: function () {
-                if (typeof this.priceWithTax != "number") {
-                    this.priceWithTax = parseFloat(this.priceWithTax.replace(',', '.'));
-                }
-                this.priceWithTax = this.priceWithTax.toFixed(2);
                 this.price = getPrice(this.priceWithTax, this.taxRateValue);
             },
-            setPriceWithTax() {
-                if (this.price) {
-                    this.price = parseFloat(this.price.replace(',', '.')).toFixed(3);
-                    this.priceWithTax = getPriceWithTax(this.price, this.taxRateValue);
-                }
-            },
+            emptyPrice:function () {
+                this.price=null;
+                this.priceInherited = true;
+            }
         },
         watch: {}
 

ShopBundle/Resources/public/js/backend/script/productfamily/vuejs-product-family.js

     props: ['template', 'keyForm'],
     data() {
         return Object.assign({
-            behaviorPrice:null,
+            behaviorPrice: 'by-piece',
             activeProducts: false,
         }, window.productUnitPriceValues);
 
         buyingPriceWithTaxValue: function () {
             return this.buyingPriceWithTax;
         },
+        buyingPriceByRefUnitValue:function(){
+            return this.buyingPriceByRefUnit;
+        },
+        buyingPriceByRefUnitWithTaxValue:function(){
+            return this.buyingPriceByRefUnitWithTax;
+        },
+        multiplyingFactorValue:function(){
+            return this.multiplyingFactor;
+        },
         priceWithTaxValue: function () {
             return this.priceWithTax;
         },
         priceValue: function () {
             return this.price;
         },
+        priceByRefUnitValue:function(){
+            return this.priceByRefUnit;
+        },
+        priceByRefUnitWithTaxValue:function(){
+            return this.priceByRefUnitWithTax;
+        },
         quantityValue: function () {
             return this.quantity;
         },
     },
     watch: {
         taxRate: function () {
-            this.setBuyingPriceWithTax();
-            this.setPriceWithTax();
-            this.setMultiplyingFactor();
-            this.setPriceByUnitRefWithTax();
+            //this.setBuyingPriceWithTax();
+            //this.setPriceWithTax();
+            //this.setMultiplyingFactor();
+            //this.setPriceByUnitRefWithTax();
         },
         supplierTaxRate: function () {
-            this.setBuyingPriceWithTax();
+            //this.setBuyingPriceWithTax();
         }
     }
 });
             if (this.buyingPriceWithTax) return this.buyingPriceWithTax;
             else return this.productFamily.buyingPriceWithTax;
         },
+        buyingPriceByRefUnitValue:function(){
+            if (this.buyingPriceByRefUnit) return this.buyingPriceByRefUnit;
+            else return this.productFamily.buyingPriceByRefUnit;
+        },
+        buyingPriceByRefUnitWithTaxValue:function(){
+            if (this.buyingPriceByRefUnitWithTax) return this.buyingPriceByRefUnitWithTax;
+            else return this.productFamily.buyingPriceByRefUnitWithTax;
+        },
+        multiplyingFactorValue:function(){
+            if (this.multiplyingFactor) return this.multiplyingFactor;
+            else return this.productFamily.multiplyingFactor;
+        },
         priceWithTaxValue: function () {
             if (this.priceWithTax) return this.priceWithTax;
             else return this.productFamily.priceWithTax;
         },
         behaviorPriceValue:function(){
             return this.productFamily.behaviorPrice;
+        },
+        finalPriceWithTax:function () {
+            return  getPriceWithTax(parseFloat((this.priceByRefUnitValue * this.quantityValue) / this.unitCoefficient).toFixed(4), this.taxRateValue);
         }
     },
     data() {
     mounted: function () {
          //INIT VAR
         updateSortableProducts();
-        this.setUnitSelect2();
+        //this.setUnitSelect2();
 
 
         //METHOD
-        this.updateProductForm();
-        this.updateProductView();
+        //this.updateProductForm();
+        //this.updateProductView();
     },
     methods: {
         setUnitSelect2:function(){
         availableQuantityUpdated:function(){},
         availableQuantityDefaultUpdated:function(){},
         propertyExpirationDateUpdated:function(){},
-        updateLine: function(){
-            this.init();
-        },
+
         updateProductForm: function () {
             this.init();
         },
-
-        updateProductView: function () {
-
-
-            /*if (this.unitValue == 'piece') {
-                $('.priceByRefUnit').hide();
-            } else {
-                $('.priceByRefUnit').show();
-            }
-            if (this.productFamily.behaviorCountStock == 'by-product-family' || this.productFamily.behaviorCountStock == 'by-quantity') {
-                $('.products-collection-table').find('.stock').hide();
-            } else {
-                $('.products-collection-table').find('.stock').show();
-                $('#product-item-' + this.keyForm).find('.stock').html(this.availableQuantity + ' / ' + this.unitReference);
-            }*/
-        },
         saveProductForm: function () {
-            this.updateProductView();
             $('#form-product-modal-' + this.keyForm).modal('hide');
         },
         deleteProductForm: function () {
                 propertyNoveltyExpirationDateActive: false,
 
                 formProductArray: [],
-                currentSection: 'general',
+                currentSection: 'price',
                 sectionsArray: [
                     {
                         name: 'general',
             if (typeof this.$refs.productForm !== 'undefined') {
                 for (i = 0; i < this.$refs.productForm.length; i++) {
                     this.$refs.productForm[i].updateProductForm();
-                    this.$refs.productForm[i].updateProductView();
                 }
             }
         },

ShopBundle/Resources/translations/lcshop.fr.yaml

         addresses: Livraisons & facturation
         main: Général
         products: Déclinaisons
-        price: Prix
+        priceAndUnit: Tarifs / Unités / Quantités
         categories: Catégories
         unit: Unité & quantité
         tax: TVA
         productsTypeHelp: 'Volume / Pods / Varieté / Parfum ...'
         buyingPrice: Prix d'achat
         multiplyingFactor: Coefficiant multiplicateur
+        multiplyingFactorHelp: La mise à jour de ce champ modifiera le prix de vente HT et TTC
         priceByRefUnit: Prix de vente / unité de référence
+        buyingPriceByRefUnit: Prix d'achat / unité de référence
         availableQuantity: Quantité disponible
         availableQuantityDefault: Quantité disponible par défaut
         quantity: Quantité

ShopBundle/Resources/views/backend/default/block/macros.html.twig

 
     {% if fieldDisplay == false %}{% set fieldDisplay = fieldName %}{% endif %}
 
-    <td {{ attr|raw }} colspan="{{ colspan }}" class="{{ fieldName }}" v-on:click="{{ fieldName }}Inherited = true">
-        <div v-show="{{ fieldName }}Inherited == false">
+    <td {{ attr|raw }} colspan="{{ colspan }}" class="{{ fieldName }}" >
+        <div v-show="{{ fieldName }}Inherited == false" v-on:click="{{ fieldName }}Inherited = true">
             <div v-if="{{ fieldName }}">
                 {% verbatim %}{{ {% endverbatim %}{{ fieldDisplay }} {% verbatim %}}}{% endverbatim %}{{ displaySuffix }}
             </div>
         <div v-show="{{ fieldName }}Inherited == true">
             {{ form_widget(field, {'attr' : {'v-model' :  fieldName , 'v-on:focusout': fieldName~'Inherited = false', '@change' : fieldName~'Updated'}}) }}
         </div>
+        <button v-show="{{ fieldName }}" v-on:click="{{ fieldName }} = null; {{ fieldName }}Inherited = false; " class="btn btn-empty-field" type="button"> <i class="fa fa-undo"></i> </button>
     </td>
 {% endmacro %}
 

ShopBundle/Resources/views/backend/productfamily/form.html.twig

                 {% if formValues.behaviorExpirationDate %}behaviorExpirationDate: "{{ formValues.behaviorExpirationDate }}",{% endif %}
                 {% if formValues.propertyExpirationDate %}propertyExpirationDate: "{{ formValues.propertyExpirationDate|date('d/m/Y') }}",{% endif %}
             };
+            multiplyingFactor = "{{ form.multiplyingFactor.vars.value }}"
             window.productUnitPriceValues = {
                 {% if formValues.activeProducts %}activeProducts: "{{ formValues.activeProducts }}",{% endif %}
                 {% if formValues.behaviorPrice %}behaviorPrice: "{{ formValues.behaviorPrice }}",{% endif %}
+                {% if form.multiplyingFactor.vars.value %}multiplyingFactor: parseFloat(multiplyingFactor.replace(',', '.')),{% endif %}
                 {% if formValues.unit %}unit: parseInt({{ formValues.unit.id }}),{% endif %}
                 {% if formValues.quantity %}quantity: parseFloat({{ formValues.quantity }}),{% endif %}
                 {% if formValues.taxRate %}taxRate: parseInt({{ formValues.taxRate.id }}),{% endif %}
                 {% if formValues.price %}price: parseFloat({{ formValues.price }}).toFixed(3),{% endif %}
+                {% if formValues.priceByRefUnit %}priceByRefUnit: parseFloat({{ formValues.priceByRefUnit }}).toFixed(3),{% endif %}
                 {% if formValues.buyingPrice %}buyingPrice: parseFloat({{ formValues.buyingPrice }}).toFixed(3),{% endif %}
+                {% if formValues.buyingPriceByRefUnit %}buyingPriceByRefUnit: parseFloat({{ formValues.buyingPriceByRefUnit }}).toFixed(3),{% endif %}
                 {% if formValues.supplierTaxRate %}supplierTaxRate: parseInt({{ formValues.supplierTaxRate.id }}),{% endif %}
                 {% if form.supplierTaxRate.vars.value != 0 %}differentSupplierTaxRate: true{% endif %}
             }

ShopBundle/Resources/views/backend/productfamily/panel_price.html.twig

             {{ form_row(form.behaviorAddToCart) }}
         </div>
 
-        <div class="col-12 form-group">
+        <div class="col-12 form-group" v-show="activeProducts == true">
             {{ form_label(form.behaviorPrice) }}
             {% for field in form.behaviorPrice %}
                 {{ form_widget(field, {"attr" : {"v-model" : 'behaviorPrice'}}) }}
         </div>
         {{ macros.endCard(true) }}
 
-        {{ macros.startCard(0, 'ProductFamily.unit','light') }}
-        <div class="col-12">
-            {{ form_row(form.unit, {"attr":{'v-model': 'unit', '@change': "unitUpdated"}}) }}
-        </div>
-
-        <div class="col-12">
-            <div class="form-group field-weight">
-                {{ form_label(form.quantity) }}
-                <div class="form-widget">
-                    <div class="input-group">
-                        {{ form_widget(form.quantity, {'attr' : {'v-model': 'quantity', '@change': "quantityUpdated"}}) }}
-                        <div class="input-group-append">
-                            <span class="input-group-text">${ unitWording }</span>
-                        </div>
-                    </div>
-                    {{ form_help(form.quantity) }}
-                </div>
-            </div>
-        </div>
-
-        {{ macros.endCard(true) }}
-
         {{ macros.startCard(0, 'ProductFamily.tax','light') }}
         <div class="col-12">
             {{ form_row(form.taxRate, {'attr': {'v-model':'taxRate'}}) }}
 
         {{ macros.endCard() }}
 
-        {{ macros.startCard(8, 'ProductFamily.price','light') }}
+        {{ macros.startCard(8, 'ProductFamily.priceAndUnit','light') }}
+
+
+        <div class="col-12 field-unit-quantity">
+            <div class="row">
+                <div class="col-6">
+                    {{ form_row(form.unit, {"attr":{'v-model': 'unit', '@change': "unitUpdated"}}) }}
+                </div>
 
+                <div class="col-6">
+                    <div class="form-group field-weight">
+                        {{ form_label(form.quantity) }}
+                        <div class="form-widget">
+                            <div class="input-group">
+                                {{ form_widget(form.quantity, {'attr' : {'v-model': 'quantity', '@change': "quantityUpdated"}}) }}
+                                <div class="input-group-append">
+                                    <span class="input-group-text">${ unitWording }</span>
+                                </div>
+                            </div>
+                            {{ form_help(form.quantity) }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
 
         {{ macros.priceField(form.buyingPrice, form.buyingPriceWithTax, 'buyingPrice', 'by-piece') }}
 

ShopBundle/Resources/views/backend/productfamily/panel_products.html.twig

         {{ macros.productField(2, product.priceByRefUnitWithTax, 'priceByRefUnitWithTax',false, '€', 'v-show="productFamily.behaviorPrice == \'by-reference-unit\'"') }}
 
         <td colspan="2" v-show="productFamily.behaviorPrice == 'by-reference-unit'">
-            {% verbatim %}{{ priceWithTaxValue }}{% endverbatim %}€
+            {% verbatim %}{{ finalPriceWithTax }}{% endverbatim %}€
         </td>
         {{ macros.productField(2, product.price, 'price', false, '€', 'v-show="productFamily.behaviorPrice == \'by-piece\'"') }}
         {{ macros.productField(2, product.priceWithTax, 'priceWithTax', false, '€', 'v-show="productFamily.behaviorPrice == \'by-piece\'"') }}
             {% if product.vars.value.title %}title: "{{ product.vars.value.title }}",{% endif %}
             {% if product.vars.value.quantity %}quantity: "{{ product.vars.value.quantity }}",{% endif %}
             {% if product.vars.value.unit %}unit: {{ product.vars.value.unit.id }},{% endif %}
-            {% if product.vars.value.buyingPrice %}buyingPrice: "{{ product.vars.value.buyingPrice }}",{% endif %}
+            {% if product.vars.value.buyingPrice %}buyingPrice: parseFloat({{ product.vars.value.buyingPrice }}).toFixed(3),{% endif %}
+            {% if product.vars.value.buyingPriceByRefUnit %}buyingPriceByRefUnit: parseFloat({{ product.vars.value.buyingPriceByRefUnit }}).toFixed(3),{% endif %}
             {% if product.vars.value.price %}price: parseFloat({{ product.vars.value.price }}).toFixed(3),{% endif %}
+            {% if product.vars.value.priceByRefUnit %}priceByRefUnit: parseFloat({{ product.vars.value.priceByRefUnit }}).toFixed(3),{% endif %}
             {% if product.vars.value.availableQuantity %}availableQuantity: parseInt({{ product.vars.value.availableQuantity }}),{% endif %}
             {% if product.vars.value.availableQuantityDefault %}availableQuantityDefault: parseInt({{ product.vars.value.availableQuantityDefault }}),{% endif %}
             {#{% if product.vars.value.expirationDate %}expirationDate: "{{ product.vars.value.expirationDate|date('d/m/Y') }}"{% endif %}#}