qwerty

Виталий
1 parent 5b00d8c6
Showing 10 changed files with 461 additions and 10 deletions Show diff stats
.gitignore
app/assets/AppAsset.php
app/views/layouts/main.php
app/views/products/show.php
app/widgets/views/_product_view.php
css/new-style.scss
img/basket/basket-1.jpg
img/basket/ico-remove-b.jpg
index.php
js/new-basket.js
@@ -30,3 +30,4 @@ phpunit.phar
 /files/*
 upload.tar.gz
 app/config/db.php
+app/config/main-local.php
 \ No newline at end of file
@@ -19,6 +19,7 @@ class AppAsset extends AssetBundle
     public $baseUrl = '@web';
     public $css = [
         'css/style.css',
+        'css/new-style.css',
     ];
     public $js = [
     ];
@@ -17,6 +17,7 @@ $this-&gt;registerJs(&quot;
 $this->registerJs("
     $('.call').call({token:'".Yii::$app->request->getCsrfToken()."'});
 ", View::POS_READY, 'call');
+$this->registerJsFile(Yii::$app->request->baseUrl.'/js/new-basket.js',['position'=>View::POS_HEAD,'depends'=>['yii\web\YiiAsset']]);
 ?>
 <?php $this->beginPage() ?>
 <!DOCTYPE html>
@@ -80,6 +81,101 @@ $this-&gt;registerJs(&quot;
  
 </div>
  
+<div id="overlay" style="display: block;"></div>
+<div id="new-basket-modal" class="new-basket-modal" style="display: block">
+    <div class="site">
+        <div class="style basket-modal-wr">
+            <div class="style title-basket-modal">
+                Корзина
+            </div>
+            <div class="style table-basket-wrapp">
+                <table cellspacing="0" cellpadding="0" border="0" class="table-basket">
+                    <tr>
+                        <td class="basket-modal-img">
+                            <a href="#">
+                                <!-- 90x120px-->
+                                <img src="img/basket/basket-1.jpg" alt="">
+                            </a>
+                        </td>
+                        <td>
+                            <div class="b-cat-title">
+                                <span class="b-cat">Огурец </span>
+                                <a href="#">Авелла (Аваланж) F1</a>
+                            </div>
+                            <div class="b-price-item">цена 22.90 грн</div>
+                            <div class="remove-wrapp">
+                                <span><b>удалить</b></span>
+                            </div>
+                        </td>
+                        <td class="basket-modal-count">
+                            <div style="display: inline-block">
+                                <span class="b-count-txt">Количество</span>
+                                <div class="input-count-wrapp quantity-wr">
+                                    <input type="text" value="2">
+                                    <div>
+                                        <span class="plus"></span>
+                                        <span class="minus"></span>
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="b-price-item-total">цена 45.80 грн</td>
+                    </tr>
+
+                    <tr>
+                        <td class="basket-modal-img">
+                            <a href="#">
+                                <!-- 90x120px-->
+                                <img src="img/basket/basket-1.jpg" alt="">
+                            </a>
+                        </td>
+                        <td>
+                            <div class="b-cat-title">
+                                <span class="b-cat">Огурец </span>
+                                <a href="#">Авелла (Аваланж) F1</a>
+                            </div>
+                            <div class="b-price-item">цена 22.90 грн</div>
+                            <div class="remove-wrapp">
+                                <span><b>удалить</b></span>
+                            </div>
+                        </td>
+                        <td class="basket-modal-count">
+                            <div style="display: inline-block">
+                                <span class="b-count-txt">Количество</span>
+                                <div class="input-count-wrapp quantity-wr">
+                                    <input class="prod_count" type="text" value="1">
+                                    <div>
+                                        <span class="plus"></span>
+                                        <span class="minus"></span>
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="b-price-item-total">цена 45.80 грн</td>
+                    </tr>
+
+                </table>
+
+                <div class="style b-total-price-block-wr">
+<!--                    не выводить ".b-total-price-block-txt" если общая сумма корзины больше 100грн-->
+                    <div class="b-total-price-block-txt">
+                        Внимание!<br /> Минимальная сумма заказача 100 грн.
+                    </div>
+                    <div class="b-total-price-block-num">
+                        Общая сумма: 137,4 грн.
+                    </div>
+                </div>
+
+                <div class="style buttons-b-wr">
+                    <a class="link-to-basket" href="#">оформить заказ</a>
+                    <a class="close-basket" href="#">продолжить покупки</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="basket-close"></div>
+</div>
+
 <?php $this->endBody() ?>
  
 <script>
@@ -157,7 +157,7 @@ $this-&gt;registerJs(&quot;
 						</div>
 						<div class="boy_box">
 							<input type='hidden' id='product_id' />
-                                                        <a href="#" rel='product' class="buy fr">Купить</a>
+                                                        <a href="#" rel='product' class="buy fr modal-link" data-form="new-basket-modal">Купить</a>
 							<div class="fl txtfb">цена <span id="cost">0</span> грн</div><div class="both"></div>
 						</div>
 						<div class="info">
@@ -64,15 +64,8 @@
     ) ?>" class="name"><?= $item->name ?></a>
     <div class="cost">цена <?= $item->cost->cost ?> грн</div>
     <a
-        href="<?= Url::to(
-            [
-                'products/show',
-                'translit_rubric' => $item->catalog->translit,
-                'translit'        => $item->translit,
-                'id'              => $item->id,
-            ]
-        ) ?>"
-        class="buy t_buy_btn"
+        href="#"
+        class="buy t_buy_btn new-btn-modal-basket modal-link" data-form="new-basket-modal"
     >
         Купить
     </a>
+$border-basket: #b7b7b7;
+$violetBasketColor: #87476a;
+$greenColor: #59a926;
+.style {
+  width: 100%;
+  float: left;
+}
+.new-basket-modal {
+  position: absolute;
+  width: 100% !important;
+  left: 0;
+  top: 0;
+  z-index: 99998;
+  margin-left: 0 !important;
+  font-family: Arial;
+  text-align: center;
+  * {
+    box-sizing: border-box;
+  }
+  .site {
+    display: inline-block;
+    text-align: left;
+    position: relative;
+    z-index: 3;
+  }
+}
+.basket-close {
+  z-index: 2;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+#overlay {
+  position: fixed;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: 0.85;
+  top: 0;
+  left: 0;
+}
+
+
+.basket-modal-wr {
+   padding: 27px 0 30px 0;
+  background: #fff;
+  border-radius: 4px;
+}
+
+.title-basket-modal{
+  border-bottom: 1px solid $border-basket;
+  font-size: 20px;
+  font-weight: 700;
+  padding: 0 20px;
+  color: $violetBasketColor;
+  padding-bottom: 14px;
+}
+
+.table-basket-wrapp {
+  padding: 0 20px 0 20px;
+}
+
+.table-basket {
+  font-size: 15px;
+  width:100%;
+  a {
+    font-size: 15px;
+  }
+  tr {
+    td {
+      padding-top: 20px;
+      padding-bottom: 20px;
+      vertical-align: middle;
+      border-bottom: 1px solid $border-basket;
+      &.basket-modal-img {
+        width: 120px;
+        a {
+
+
+        }
+        img {
+          max-width: 110px;
+        }
+      }
+
+      &.b-price-item-total{
+        text-align: right;
+        font-weight: 700;
+        color: $violetBasketColor;
+        width: 180px;
+      }
+      &.basket-modal-count {
+        width: 165px;
+      }
+
+    }
+  }
+}
+
+
+.b-cat-title {
+ a {
+   color: $greenColor;
+   font-weight: 700;
+   text-decoration: none;
+   &:hover {
+     text-decoration: underline;
+   }
+ }
+}
+
+.b-count-txt {
+  float: left;
+  color: $violetBasketColor;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 31px;
+}
+.input-count-wrapp {
+  position: relative;
+  width: 72px;
+  margin-left: 10px;
+  float: left;
+  input {
+    width: 100%;
+    height: 31px;
+    padding-right: 22px;
+    padding-left: 14px;
+    border: 1px solid $border-basket;
+    border-radius: 4px;
+    outline: none !important;
+  }
+  div {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 22px;
+    height: 100%;
+  }
+  span {
+    display: block;
+    position: absolute;
+    right: 5px;
+    top: 6px;
+    width: 12px;
+    background-image: url("../img/basket/arrows-b-p.png");
+    background-repeat: no-repeat;
+    background-position: 50% 0;
+    background-size: 8px 4px;
+    height: 10px;
+    cursor: pointer;
+    &.plus {
+
+      border-bottom: 1px solid $border-basket;
+    }
+    &.minus {
+      background-image: url("../img/basket/arrows-b-m.png");
+      top: auto;
+      bottom: 6px;
+      height: 4px;
+    }
+  }
+}
+.b-cat {
+  color: #464646;
+
+}
+
+.b-price-item {
+  color: $violetBasketColor;
+  margin-top: 3px;
+}
+
+.remove-wrapp {
+  margin-top: 26px;
+  span {
+    position: relative;
+    padding-left: 24px;
+    font-size: 13px;
+    cursor: pointer;
+    b {
+
+      color: #464646;
+      text-decoration: underline;
+      font-weight: normal;
+    }
+    &:before {
+      width: 15px;
+      height: 16px;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      margin-top: -8px;
+      content: '';
+      background: url("../img/basket/ico-remove-b.jpg") 50% 50% no-repeat;
+    }
+    &:hover {
+      b {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+
+.b-total-price-block-txt {
+  float: left;
+  color: #db1111;
+  font-size: 13px;
+  line-height: 16px;
+  padding-top: 28px;
+}
+
+.b-total-price-block-num {
+  float: right;
+  color: $violetBasketColor;
+  font-size: 20px;
+  padding-top: 27px;
+}
+
+.buttons-b-wr {
+  margin-top: 4px;
+  a {
+    margin-top: 15px;
+    padding: 0 15px;
+    margin-left: 15px;
+    float: right;
+    display: block;
+    height: 31px;
+    border: 1px solid $greenColor;
+    text-align: center;
+    line-height: 31px;
+    font-size: 15px;
+    text-transform: uppercase;
+    border-radius: 3px;
+    text-decoration: none !important;
+    color: $greenColor;
+    &.link-to-basket {
+      background: $greenColor;
+      color: #fff;
+    }
+    &:hover {
+     color: #f1bc2e;
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  .table-basket {
+
+    tr {
+      td {
+        display: block;
+        border-bottom: 0;
+
+        width: 100% !important;
+        float: left;
+        text-align: center !important;
+        padding-top: 0;
+        &:last-child {
+          border-bottom: 1px solid $border-basket;
+        }
+        &:first-child {
+          margin-top: 20px;
+        }
+      }
+    }
+  }
+  .b-total-price-block-txt, .b-total-price-block-num {
+      text-align: center;
+    width: 100%;
+  }
+  .buttons-b-wr {
+    text-align: center;
+    a {
+      margin-left: 7px;
+      margin-right: 7px;
+      display: inline-block;
+      float: none;
+    }
+  }
+}
 \ No newline at end of file
@@ -9,4 +9,8 @@ require(__DIR__ . &#39;/app/vendor/yiisoft/yii2/Yii.php&#39;);
  
 $config = require(__DIR__ . '/app/config/web.php');
  
+if (file_exists(__DIR__ . '/app/config/main-local.php')) {
+    $config = \yii\helpers\ArrayHelper::merge($config, require (__DIR__ . '/app/config/main-local.php'));
+}
+
 (new yii\web\Application($config))->run();
+$(document).ready(function() {
+    modalForms();
+    closeForms();
+    function modalForms() {
+        $('body').on('click', '.modal-link', function (e) {
+            e.preventDefault();
+
+
+
+            var idForm = $(this).data('form');
+            var pos = ($(window).scrollTop()) + 30;
+
+            if($(this).hasClass('pos-top')){
+                pos = 30;
+            }
+
+            $('#overlay').fadeIn(400,
+                function(){
+                    $('#'+idForm).css('display', 'block').animate({opacity: 1, top: pos}, 200);
+                }
+            );
+        })
+    }
+
+
+    function closeForms() {
+        $('#modal_close, #overlay, .close-basket, .basket-close').click( function(){
+            $('.forms_, .new-basket-modal').animate({opacity: 0, top: '0'}, 200,function(){
+                $(this).css('display', 'none');
+                $(this).prev("#overlay").css('display', 'none');
+                $('#overlay').fadeOut(400);
+            });
+            $('#success_form').animate({opacity: 0, top: '0'}, 200,function(){
+                $(this).css('display', 'none');
+                $(this).prev("#overlay").css('display', 'none');
+                $(this).css({top:'50%'});
+            });
+        });
+    }
+
+    $(document).on('click', '.quantity-wr span', changeBasket);
+    $(document).on('keypress', '.quantity-wr input', setControl);
+
+    function changeBasket(e) {
+        e.preventDefault();
+
+        var input = $(this).parent().parent().find('input');
+        var oldVal = input.val();
+        console.log(oldVal)
+        if ($(this).hasClass('minus')) {
+
+            if (oldVal > 1) {
+                oldVal--;
+                input.val(oldVal);
+            }
+        } else {
+            oldVal++;
+            input.val(oldVal);
+
+        }
+    }
+    function setControl(e) {
+        if (e.which == 13) {
+            $(this)
+                .trigger('change');
+            return false;
+        } else if (!(e.which == 8 || (e.which > 47 && e.which < 58))) {
+            return false;
+        }
+    }
+})
 \ No newline at end of file