Commit f4ab266e5c73ae9630680a2a3abb3426508256b1
1 parent
5b00d8c6
qwerty
Showing
10 changed files
with
461 additions
and
10 deletions
Show diff stats
.gitignore
app/assets/AppAsset.php
| @@ -19,6 +19,7 @@ class AppAsset extends AssetBundle | @@ -19,6 +19,7 @@ class AppAsset extends AssetBundle | ||
| 19 | public $baseUrl = '@web'; | 19 | public $baseUrl = '@web'; |
| 20 | public $css = [ | 20 | public $css = [ |
| 21 | 'css/style.css', | 21 | 'css/style.css', |
| 22 | + 'css/new-style.css', | ||
| 22 | ]; | 23 | ]; |
| 23 | public $js = [ | 24 | public $js = [ |
| 24 | ]; | 25 | ]; |
app/views/layouts/main.php
| @@ -17,6 +17,7 @@ $this->registerJs(" | @@ -17,6 +17,7 @@ $this->registerJs(" | ||
| 17 | $this->registerJs(" | 17 | $this->registerJs(" |
| 18 | $('.call').call({token:'".Yii::$app->request->getCsrfToken()."'}); | 18 | $('.call').call({token:'".Yii::$app->request->getCsrfToken()."'}); |
| 19 | ", View::POS_READY, 'call'); | 19 | ", View::POS_READY, 'call'); |
| 20 | +$this->registerJsFile(Yii::$app->request->baseUrl.'/js/new-basket.js',['position'=>View::POS_HEAD,'depends'=>['yii\web\YiiAsset']]); | ||
| 20 | ?> | 21 | ?> |
| 21 | <?php $this->beginPage() ?> | 22 | <?php $this->beginPage() ?> |
| 22 | <!DOCTYPE html> | 23 | <!DOCTYPE html> |
| @@ -80,6 +81,101 @@ $this->registerJs(" | @@ -80,6 +81,101 @@ $this->registerJs(" | ||
| 80 | 81 | ||
| 81 | </div> | 82 | </div> |
| 82 | 83 | ||
| 84 | +<div id="overlay" style="display: block;"></div> | ||
| 85 | +<div id="new-basket-modal" class="new-basket-modal" style="display: block"> | ||
| 86 | + <div class="site"> | ||
| 87 | + <div class="style basket-modal-wr"> | ||
| 88 | + <div class="style title-basket-modal"> | ||
| 89 | + Корзина | ||
| 90 | + </div> | ||
| 91 | + <div class="style table-basket-wrapp"> | ||
| 92 | + <table cellspacing="0" cellpadding="0" border="0" class="table-basket"> | ||
| 93 | + <tr> | ||
| 94 | + <td class="basket-modal-img"> | ||
| 95 | + <a href="#"> | ||
| 96 | + <!-- 90x120px--> | ||
| 97 | + <img src="img/basket/basket-1.jpg" alt=""> | ||
| 98 | + </a> | ||
| 99 | + </td> | ||
| 100 | + <td> | ||
| 101 | + <div class="b-cat-title"> | ||
| 102 | + <span class="b-cat">Огурец </span> | ||
| 103 | + <a href="#">Авелла (Аваланж) F1</a> | ||
| 104 | + </div> | ||
| 105 | + <div class="b-price-item">цена 22.90 грн</div> | ||
| 106 | + <div class="remove-wrapp"> | ||
| 107 | + <span><b>удалить</b></span> | ||
| 108 | + </div> | ||
| 109 | + </td> | ||
| 110 | + <td class="basket-modal-count"> | ||
| 111 | + <div style="display: inline-block"> | ||
| 112 | + <span class="b-count-txt">Количество</span> | ||
| 113 | + <div class="input-count-wrapp quantity-wr"> | ||
| 114 | + <input type="text" value="2"> | ||
| 115 | + <div> | ||
| 116 | + <span class="plus"></span> | ||
| 117 | + <span class="minus"></span> | ||
| 118 | + </div> | ||
| 119 | + </div> | ||
| 120 | + </div> | ||
| 121 | + </td> | ||
| 122 | + <td class="b-price-item-total">цена 45.80 грн</td> | ||
| 123 | + </tr> | ||
| 124 | + | ||
| 125 | + <tr> | ||
| 126 | + <td class="basket-modal-img"> | ||
| 127 | + <a href="#"> | ||
| 128 | + <!-- 90x120px--> | ||
| 129 | + <img src="img/basket/basket-1.jpg" alt=""> | ||
| 130 | + </a> | ||
| 131 | + </td> | ||
| 132 | + <td> | ||
| 133 | + <div class="b-cat-title"> | ||
| 134 | + <span class="b-cat">Огурец </span> | ||
| 135 | + <a href="#">Авелла (Аваланж) F1</a> | ||
| 136 | + </div> | ||
| 137 | + <div class="b-price-item">цена 22.90 грн</div> | ||
| 138 | + <div class="remove-wrapp"> | ||
| 139 | + <span><b>удалить</b></span> | ||
| 140 | + </div> | ||
| 141 | + </td> | ||
| 142 | + <td class="basket-modal-count"> | ||
| 143 | + <div style="display: inline-block"> | ||
| 144 | + <span class="b-count-txt">Количество</span> | ||
| 145 | + <div class="input-count-wrapp quantity-wr"> | ||
| 146 | + <input class="prod_count" type="text" value="1"> | ||
| 147 | + <div> | ||
| 148 | + <span class="plus"></span> | ||
| 149 | + <span class="minus"></span> | ||
| 150 | + </div> | ||
| 151 | + </div> | ||
| 152 | + </div> | ||
| 153 | + </td> | ||
| 154 | + <td class="b-price-item-total">цена 45.80 грн</td> | ||
| 155 | + </tr> | ||
| 156 | + | ||
| 157 | + </table> | ||
| 158 | + | ||
| 159 | + <div class="style b-total-price-block-wr"> | ||
| 160 | +<!-- не выводить ".b-total-price-block-txt" если общая сумма корзины больше 100грн--> | ||
| 161 | + <div class="b-total-price-block-txt"> | ||
| 162 | + Внимание!<br /> Минимальная сумма заказача 100 грн. | ||
| 163 | + </div> | ||
| 164 | + <div class="b-total-price-block-num"> | ||
| 165 | + Общая сумма: 137,4 грн. | ||
| 166 | + </div> | ||
| 167 | + </div> | ||
| 168 | + | ||
| 169 | + <div class="style buttons-b-wr"> | ||
| 170 | + <a class="link-to-basket" href="#">оформить заказ</a> | ||
| 171 | + <a class="close-basket" href="#">продолжить покупки</a> | ||
| 172 | + </div> | ||
| 173 | + </div> | ||
| 174 | + </div> | ||
| 175 | + </div> | ||
| 176 | + <div class="basket-close"></div> | ||
| 177 | +</div> | ||
| 178 | + | ||
| 83 | <?php $this->endBody() ?> | 179 | <?php $this->endBody() ?> |
| 84 | 180 | ||
| 85 | <script> | 181 | <script> |
app/views/products/show.php
| @@ -157,7 +157,7 @@ $this->registerJs(" | @@ -157,7 +157,7 @@ $this->registerJs(" | ||
| 157 | </div> | 157 | </div> |
| 158 | <div class="boy_box"> | 158 | <div class="boy_box"> |
| 159 | <input type='hidden' id='product_id' /> | 159 | <input type='hidden' id='product_id' /> |
| 160 | - <a href="#" rel='product' class="buy fr">Купить</a> | 160 | + <a href="#" rel='product' class="buy fr modal-link" data-form="new-basket-modal">Купить</a> |
| 161 | <div class="fl txtfb">цена <span id="cost">0</span> грн</div><div class="both"></div> | 161 | <div class="fl txtfb">цена <span id="cost">0</span> грн</div><div class="both"></div> |
| 162 | </div> | 162 | </div> |
| 163 | <div class="info"> | 163 | <div class="info"> |
app/widgets/views/_product_view.php
| @@ -64,15 +64,8 @@ | @@ -64,15 +64,8 @@ | ||
| 64 | ) ?>" class="name"><?= $item->name ?></a> | 64 | ) ?>" class="name"><?= $item->name ?></a> |
| 65 | <div class="cost">цена <?= $item->cost->cost ?> грн</div> | 65 | <div class="cost">цена <?= $item->cost->cost ?> грн</div> |
| 66 | <a | 66 | <a |
| 67 | - href="<?= Url::to( | ||
| 68 | - [ | ||
| 69 | - 'products/show', | ||
| 70 | - 'translit_rubric' => $item->catalog->translit, | ||
| 71 | - 'translit' => $item->translit, | ||
| 72 | - 'id' => $item->id, | ||
| 73 | - ] | ||
| 74 | - ) ?>" | ||
| 75 | - class="buy t_buy_btn" | 67 | + href="#" |
| 68 | + class="buy t_buy_btn new-btn-modal-basket modal-link" data-form="new-basket-modal" | ||
| 76 | > | 69 | > |
| 77 | Купить | 70 | Купить |
| 78 | </a> | 71 | </a> |
| 1 | +$border-basket: #b7b7b7; | ||
| 2 | +$violetBasketColor: #87476a; | ||
| 3 | +$greenColor: #59a926; | ||
| 4 | +.style { | ||
| 5 | + width: 100%; | ||
| 6 | + float: left; | ||
| 7 | +} | ||
| 8 | +.new-basket-modal { | ||
| 9 | + position: absolute; | ||
| 10 | + width: 100% !important; | ||
| 11 | + left: 0; | ||
| 12 | + top: 0; | ||
| 13 | + z-index: 99998; | ||
| 14 | + margin-left: 0 !important; | ||
| 15 | + font-family: Arial; | ||
| 16 | + text-align: center; | ||
| 17 | + * { | ||
| 18 | + box-sizing: border-box; | ||
| 19 | + } | ||
| 20 | + .site { | ||
| 21 | + display: inline-block; | ||
| 22 | + text-align: left; | ||
| 23 | + position: relative; | ||
| 24 | + z-index: 3; | ||
| 25 | + } | ||
| 26 | +} | ||
| 27 | +.basket-close { | ||
| 28 | + z-index: 2; | ||
| 29 | + position: absolute; | ||
| 30 | + width: 100%; | ||
| 31 | + height: 100%; | ||
| 32 | + left: 0; | ||
| 33 | + top: 0; | ||
| 34 | +} | ||
| 35 | +#overlay { | ||
| 36 | + position: fixed; | ||
| 37 | + z-index: 999; | ||
| 38 | + width: 100%; | ||
| 39 | + height: 100%; | ||
| 40 | + background: #000; | ||
| 41 | + opacity: 0.85; | ||
| 42 | + top: 0; | ||
| 43 | + left: 0; | ||
| 44 | +} | ||
| 45 | + | ||
| 46 | + | ||
| 47 | +.basket-modal-wr { | ||
| 48 | + padding: 27px 0 30px 0; | ||
| 49 | + background: #fff; | ||
| 50 | + border-radius: 4px; | ||
| 51 | +} | ||
| 52 | + | ||
| 53 | +.title-basket-modal{ | ||
| 54 | + border-bottom: 1px solid $border-basket; | ||
| 55 | + font-size: 20px; | ||
| 56 | + font-weight: 700; | ||
| 57 | + padding: 0 20px; | ||
| 58 | + color: $violetBasketColor; | ||
| 59 | + padding-bottom: 14px; | ||
| 60 | +} | ||
| 61 | + | ||
| 62 | +.table-basket-wrapp { | ||
| 63 | + padding: 0 20px 0 20px; | ||
| 64 | +} | ||
| 65 | + | ||
| 66 | +.table-basket { | ||
| 67 | + font-size: 15px; | ||
| 68 | + width:100%; | ||
| 69 | + a { | ||
| 70 | + font-size: 15px; | ||
| 71 | + } | ||
| 72 | + tr { | ||
| 73 | + td { | ||
| 74 | + padding-top: 20px; | ||
| 75 | + padding-bottom: 20px; | ||
| 76 | + vertical-align: middle; | ||
| 77 | + border-bottom: 1px solid $border-basket; | ||
| 78 | + &.basket-modal-img { | ||
| 79 | + width: 120px; | ||
| 80 | + a { | ||
| 81 | + | ||
| 82 | + | ||
| 83 | + } | ||
| 84 | + img { | ||
| 85 | + max-width: 110px; | ||
| 86 | + } | ||
| 87 | + } | ||
| 88 | + | ||
| 89 | + &.b-price-item-total{ | ||
| 90 | + text-align: right; | ||
| 91 | + font-weight: 700; | ||
| 92 | + color: $violetBasketColor; | ||
| 93 | + width: 180px; | ||
| 94 | + } | ||
| 95 | + &.basket-modal-count { | ||
| 96 | + width: 165px; | ||
| 97 | + } | ||
| 98 | + | ||
| 99 | + } | ||
| 100 | + } | ||
| 101 | +} | ||
| 102 | + | ||
| 103 | + | ||
| 104 | +.b-cat-title { | ||
| 105 | + a { | ||
| 106 | + color: $greenColor; | ||
| 107 | + font-weight: 700; | ||
| 108 | + text-decoration: none; | ||
| 109 | + &:hover { | ||
| 110 | + text-decoration: underline; | ||
| 111 | + } | ||
| 112 | + } | ||
| 113 | +} | ||
| 114 | + | ||
| 115 | +.b-count-txt { | ||
| 116 | + float: left; | ||
| 117 | + color: $violetBasketColor; | ||
| 118 | + font-size: 14px; | ||
| 119 | + font-weight: 700; | ||
| 120 | + line-height: 31px; | ||
| 121 | +} | ||
| 122 | +.input-count-wrapp { | ||
| 123 | + position: relative; | ||
| 124 | + width: 72px; | ||
| 125 | + margin-left: 10px; | ||
| 126 | + float: left; | ||
| 127 | + input { | ||
| 128 | + width: 100%; | ||
| 129 | + height: 31px; | ||
| 130 | + padding-right: 22px; | ||
| 131 | + padding-left: 14px; | ||
| 132 | + border: 1px solid $border-basket; | ||
| 133 | + border-radius: 4px; | ||
| 134 | + outline: none !important; | ||
| 135 | + } | ||
| 136 | + div { | ||
| 137 | + position: absolute; | ||
| 138 | + top: 0; | ||
| 139 | + right: 0; | ||
| 140 | + width: 22px; | ||
| 141 | + height: 100%; | ||
| 142 | + } | ||
| 143 | + span { | ||
| 144 | + display: block; | ||
| 145 | + position: absolute; | ||
| 146 | + right: 5px; | ||
| 147 | + top: 6px; | ||
| 148 | + width: 12px; | ||
| 149 | + background-image: url("../img/basket/arrows-b-p.png"); | ||
| 150 | + background-repeat: no-repeat; | ||
| 151 | + background-position: 50% 0; | ||
| 152 | + background-size: 8px 4px; | ||
| 153 | + height: 10px; | ||
| 154 | + cursor: pointer; | ||
| 155 | + &.plus { | ||
| 156 | + | ||
| 157 | + border-bottom: 1px solid $border-basket; | ||
| 158 | + } | ||
| 159 | + &.minus { | ||
| 160 | + background-image: url("../img/basket/arrows-b-m.png"); | ||
| 161 | + top: auto; | ||
| 162 | + bottom: 6px; | ||
| 163 | + height: 4px; | ||
| 164 | + } | ||
| 165 | + } | ||
| 166 | +} | ||
| 167 | +.b-cat { | ||
| 168 | + color: #464646; | ||
| 169 | + | ||
| 170 | +} | ||
| 171 | + | ||
| 172 | +.b-price-item { | ||
| 173 | + color: $violetBasketColor; | ||
| 174 | + margin-top: 3px; | ||
| 175 | +} | ||
| 176 | + | ||
| 177 | +.remove-wrapp { | ||
| 178 | + margin-top: 26px; | ||
| 179 | + span { | ||
| 180 | + position: relative; | ||
| 181 | + padding-left: 24px; | ||
| 182 | + font-size: 13px; | ||
| 183 | + cursor: pointer; | ||
| 184 | + b { | ||
| 185 | + | ||
| 186 | + color: #464646; | ||
| 187 | + text-decoration: underline; | ||
| 188 | + font-weight: normal; | ||
| 189 | + } | ||
| 190 | + &:before { | ||
| 191 | + width: 15px; | ||
| 192 | + height: 16px; | ||
| 193 | + position: absolute; | ||
| 194 | + left: 0; | ||
| 195 | + top: 50%; | ||
| 196 | + margin-top: -8px; | ||
| 197 | + content: ''; | ||
| 198 | + background: url("../img/basket/ico-remove-b.jpg") 50% 50% no-repeat; | ||
| 199 | + } | ||
| 200 | + &:hover { | ||
| 201 | + b { | ||
| 202 | + text-decoration: none; | ||
| 203 | + } | ||
| 204 | + } | ||
| 205 | + } | ||
| 206 | +} | ||
| 207 | + | ||
| 208 | + | ||
| 209 | +.b-total-price-block-txt { | ||
| 210 | + float: left; | ||
| 211 | + color: #db1111; | ||
| 212 | + font-size: 13px; | ||
| 213 | + line-height: 16px; | ||
| 214 | + padding-top: 28px; | ||
| 215 | +} | ||
| 216 | + | ||
| 217 | +.b-total-price-block-num { | ||
| 218 | + float: right; | ||
| 219 | + color: $violetBasketColor; | ||
| 220 | + font-size: 20px; | ||
| 221 | + padding-top: 27px; | ||
| 222 | +} | ||
| 223 | + | ||
| 224 | +.buttons-b-wr { | ||
| 225 | + margin-top: 4px; | ||
| 226 | + a { | ||
| 227 | + margin-top: 15px; | ||
| 228 | + padding: 0 15px; | ||
| 229 | + margin-left: 15px; | ||
| 230 | + float: right; | ||
| 231 | + display: block; | ||
| 232 | + height: 31px; | ||
| 233 | + border: 1px solid $greenColor; | ||
| 234 | + text-align: center; | ||
| 235 | + line-height: 31px; | ||
| 236 | + font-size: 15px; | ||
| 237 | + text-transform: uppercase; | ||
| 238 | + border-radius: 3px; | ||
| 239 | + text-decoration: none !important; | ||
| 240 | + color: $greenColor; | ||
| 241 | + &.link-to-basket { | ||
| 242 | + background: $greenColor; | ||
| 243 | + color: #fff; | ||
| 244 | + } | ||
| 245 | + &:hover { | ||
| 246 | + color: #f1bc2e; | ||
| 247 | + } | ||
| 248 | + } | ||
| 249 | +} | ||
| 250 | + | ||
| 251 | +@media (max-width: 767px) { | ||
| 252 | + .table-basket { | ||
| 253 | + | ||
| 254 | + tr { | ||
| 255 | + td { | ||
| 256 | + display: block; | ||
| 257 | + border-bottom: 0; | ||
| 258 | + | ||
| 259 | + width: 100% !important; | ||
| 260 | + float: left; | ||
| 261 | + text-align: center !important; | ||
| 262 | + padding-top: 0; | ||
| 263 | + &:last-child { | ||
| 264 | + border-bottom: 1px solid $border-basket; | ||
| 265 | + } | ||
| 266 | + &:first-child { | ||
| 267 | + margin-top: 20px; | ||
| 268 | + } | ||
| 269 | + } | ||
| 270 | + } | ||
| 271 | + } | ||
| 272 | + .b-total-price-block-txt, .b-total-price-block-num { | ||
| 273 | + text-align: center; | ||
| 274 | + width: 100%; | ||
| 275 | + } | ||
| 276 | + .buttons-b-wr { | ||
| 277 | + text-align: center; | ||
| 278 | + a { | ||
| 279 | + margin-left: 7px; | ||
| 280 | + margin-right: 7px; | ||
| 281 | + display: inline-block; | ||
| 282 | + float: none; | ||
| 283 | + } | ||
| 284 | + } | ||
| 285 | +} | ||
| 0 | \ No newline at end of file | 286 | \ No newline at end of file |
6.43 KB
1.24 KB
index.php
| @@ -9,4 +9,8 @@ require(__DIR__ . '/app/vendor/yiisoft/yii2/Yii.php'); | @@ -9,4 +9,8 @@ require(__DIR__ . '/app/vendor/yiisoft/yii2/Yii.php'); | ||
| 9 | 9 | ||
| 10 | $config = require(__DIR__ . '/app/config/web.php'); | 10 | $config = require(__DIR__ . '/app/config/web.php'); |
| 11 | 11 | ||
| 12 | +if (file_exists(__DIR__ . '/app/config/main-local.php')) { | ||
| 13 | + $config = \yii\helpers\ArrayHelper::merge($config, require (__DIR__ . '/app/config/main-local.php')); | ||
| 14 | +} | ||
| 15 | + | ||
| 12 | (new yii\web\Application($config))->run(); | 16 | (new yii\web\Application($config))->run(); |
| 1 | +$(document).ready(function() { | ||
| 2 | + modalForms(); | ||
| 3 | + closeForms(); | ||
| 4 | + function modalForms() { | ||
| 5 | + $('body').on('click', '.modal-link', function (e) { | ||
| 6 | + e.preventDefault(); | ||
| 7 | + | ||
| 8 | + | ||
| 9 | + | ||
| 10 | + var idForm = $(this).data('form'); | ||
| 11 | + var pos = ($(window).scrollTop()) + 30; | ||
| 12 | + | ||
| 13 | + if($(this).hasClass('pos-top')){ | ||
| 14 | + pos = 30; | ||
| 15 | + } | ||
| 16 | + | ||
| 17 | + $('#overlay').fadeIn(400, | ||
| 18 | + function(){ | ||
| 19 | + $('#'+idForm).css('display', 'block').animate({opacity: 1, top: pos}, 200); | ||
| 20 | + } | ||
| 21 | + ); | ||
| 22 | + }) | ||
| 23 | + } | ||
| 24 | + | ||
| 25 | + | ||
| 26 | + function closeForms() { | ||
| 27 | + $('#modal_close, #overlay, .close-basket, .basket-close').click( function(){ | ||
| 28 | + $('.forms_, .new-basket-modal').animate({opacity: 0, top: '0'}, 200,function(){ | ||
| 29 | + $(this).css('display', 'none'); | ||
| 30 | + $(this).prev("#overlay").css('display', 'none'); | ||
| 31 | + $('#overlay').fadeOut(400); | ||
| 32 | + }); | ||
| 33 | + $('#success_form').animate({opacity: 0, top: '0'}, 200,function(){ | ||
| 34 | + $(this).css('display', 'none'); | ||
| 35 | + $(this).prev("#overlay").css('display', 'none'); | ||
| 36 | + $(this).css({top:'50%'}); | ||
| 37 | + }); | ||
| 38 | + }); | ||
| 39 | + } | ||
| 40 | + | ||
| 41 | + $(document).on('click', '.quantity-wr span', changeBasket); | ||
| 42 | + $(document).on('keypress', '.quantity-wr input', setControl); | ||
| 43 | + | ||
| 44 | + function changeBasket(e) { | ||
| 45 | + e.preventDefault(); | ||
| 46 | + | ||
| 47 | + var input = $(this).parent().parent().find('input'); | ||
| 48 | + var oldVal = input.val(); | ||
| 49 | + console.log(oldVal) | ||
| 50 | + if ($(this).hasClass('minus')) { | ||
| 51 | + | ||
| 52 | + if (oldVal > 1) { | ||
| 53 | + oldVal--; | ||
| 54 | + input.val(oldVal); | ||
| 55 | + } | ||
| 56 | + } else { | ||
| 57 | + oldVal++; | ||
| 58 | + input.val(oldVal); | ||
| 59 | + | ||
| 60 | + } | ||
| 61 | + } | ||
| 62 | + function setControl(e) { | ||
| 63 | + if (e.which == 13) { | ||
| 64 | + $(this) | ||
| 65 | + .trigger('change'); | ||
| 66 | + return false; | ||
| 67 | + } else if (!(e.which == 8 || (e.which > 47 && e.which < 58))) { | ||
| 68 | + return false; | ||
| 69 | + } | ||
| 70 | + } | ||
| 71 | +}) | ||
| 0 | \ No newline at end of file | 72 | \ No newline at end of file |