Promotion Frontend dynamic

public/css/shop.css

@@ -122,6 +122,10 @@ h4.product-title {
   font-size: 1.2rem;
   font-weight: bold;
   color: rgb(64, 65, 66);
+  line-height: 1.5rem;
+}
+.product-item-price .small{
+  font-size: 0.85rem;
 }
 .badge-cart {
   background: #659a87 !important;
@@ -163,13 +167,31 @@ h4.product-title {
   text-align: center;
 }
 .swiper-button-next, .swiper-button-prev {
+  background-color: #fff;
+  height: 100%;
+  padding: 15px;
+  top:0;
   color: rgb(119, 111, 95);
   outline: 0;
+  opacity: 0.75;
+}
+@media (min-width: 992px) {
+
+  .swiper-button-next, .swiper-button-prev {
+    padding: 25px;
+  }
+}
+.swiper-button-next, .swiper-rtl .swiper-button-prev{
+  right: 0;
+}
+.swiper-button-prev, .swiper-rtl .swiper-button-next {
+  left: 0;
 }
 .swiper-button-next:hover, .swiper-button-prev:hover {
   color: rgb(58, 61, 70);
+  opacity: 0.9;
 }
-.swiper-pagination-bullet {
+.pagination-bullet {
   outline: 0;
 }
 .swiper-pagination-bullet:hover {

public/js/iq-promotion-shop-cart.js

@@ -0,0 +1,153 @@
+
+function _log(msg){
+    console.log(msg);
+}
+
+var IqPromotionShopCart = {
+    btn_add_free: '.btn-add-free-product',
+    input_free: '.switcher-input',
+    btn_shop_add: '.btn-add-product-shop',
+    //btn_add: '.add-product-shop',
+    btn_remove: '.remove-product-shop',
+    //input_event: '.input-event-promotion-onchange',
+    btn_clear: '#clear-products-basket',
+    cart_input: '.cart-input-event-onchange',
+    remove_item: '.remove_item_form_cart',
+
+    url: null,
+    action: null,
+    cart_holder: '#promotion_cart_holder',
+
+    free_poduct_id: null,
+    shipping_option: null,
+
+   
+    init: function () {
+        var _self = this;
+        _self.url = $('input[name=load_url]').val();
+        _self.initElements();
+        return _self;
+    },
+    initElements: function (){
+        var _self = this;
+        //_log('init');
+        $(_self.btn_add_free).on('click', function(event) {
+            event.preventDefault();
+            $(this).find(_self.input_free).prop('checked', true);
+            _self.switchFreeProduct($(this).find(_self.input_free));
+        });
+        $(_self.btn_shop_add).on('click', function(event){
+            event.preventDefault();
+            _self.addShopProduct($(this));
+        });
+
+        $('input[name=switchers_shipping]').on('change', function(event){
+            event.preventDefault();
+            _self.switchShipping($(this));
+        });
+        _self.showInit();
+
+
+        /*$_self.update_poduct_price();*/
+
+    },
+    showInit: function (){
+        var _self = this;
+        $(_self.btn_clear).on('click', function (event){
+            event.preventDefault();
+            _self.performRequest({action: 'clear-cart'})
+                .done(_self.refreshItemsAndView)
+        });
+        $(_self.cart_input).on('change', function(event){
+            event.preventDefault();
+            _self.updateInputCart($(this));
+        });
+        $(_self.remove_item).on('click', function(event){
+            event.preventDefault();
+            _self.performRequest({product_id: $(this).data('product-id'), qty: 0, action: 'remove-shop-product'})
+            .done(_self.refreshItemsAndView);            
+        });
+    },
+    switchShipping: function(_ele){
+        var _self = this;
+        _self.shipping_option = _ele.val();
+        _self.performRequest({shipping_option: _self.shipping_option, action: 'switch-shipping'})
+            .done(_self.refreshItemsAndView);        
+    },
+    switchFreeProduct: function(_ele){
+        var _self = this;
+        if(_ele.prop('checked')){
+            if(_self.free_poduct_id != _ele.val()){
+                _self.free_poduct_id = _ele.val();
+                _self.performRequest({free_poduct_id: _self.free_poduct_id, action: 'switch-free-product'})
+                    .done(_self.refreshItemsAndView);        
+            }
+        }
+    },
+    addShopProduct: function(_ele){
+        var _self = this;
+        if(_ele.data('product_id')){
+            _self.performRequest({product_id: _ele.data('product_id'), action: 'add-shop-product'})
+                .done(_self.refreshItemsAndView);        
+        }
+    },
+
+    updateInputCart: function (_ele){
+        var _self = this;
+        var qty = parseInt(_ele.val());
+        qty = _self.checkNumber(qty);
+        _ele.val(qty);
+        _self.performRequest({product_id: _ele.data('product_id'), qty: qty, action: 'update-shop-product'})
+            .done(_self.refreshItemsAndView);            
+    },
+    checkNumber : function(number){
+        if(number < 0 || isNaN(number)){
+            return  0;
+        }
+        if(number >= 100){
+            return  100;
+        }
+        return number;
+    },
+    refreshItemsAndView: function (data){
+        var _self = IqPromotionShopCart;
+        //_log(data);
+        if(data.response.action == 'clear-cart'){
+            location.reload();
+        }
+        if(data.response.action == 'add-shop-product' || data.response.action == 'update-shop-product' || data.response.action == 'remove-shop-product'){
+            var qty = data.response.qty > 0 ? "x"+data.response.qty : 0;
+            $('#badge_cart_indicator_'+data.response.product_id).html(qty);
+        }
+        $(_self.cart_holder).html(data.html);
+        _self.showInit();
+    },
+    performRequest : function(data) {
+        var _self = this;
+        var url = _self.url;
+            _log(data);
+           // _log(url);
+        return $.ajax({
+            url: url,
+            data: data,
+            type: "POST",
+            dataType: "json",
+            cache: false,
+            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
+            encode: true,
+            headers: {
+                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+            }
+        })
+        .done(function (data) {
+            _log('performRequest');
+            _log(data);
+        }).fail(function (jqXHR, textStatus, errorThrown) {
+        console.log(jqXHR);
+        console.log(jqXHR.responseText);
+        console.log(textStatus);
+        console.log(errorThrown);
+        console.log("Sorry, there was a problem!");
+        });
+    }
+};