Alexey Boroda / extrem-new

Commit 2d7ef0643be349f0a9a8406a5890b413bba7add5

Authored by Alexey Boroda
1 parent f72eba2b

added menu and products (without filters)

Showing 8 changed files with 184 additions and 185 deletions   Show diff stats
Inline Side-by-side
common/config/main.php
  Show/Hide comments   View file @2d7ef06
@@ -233,6 +233,12 @@ @@ -233,6 +233,12 @@
233 'height' => 221, 233 'height' => 221,
234 ], 234 ],
235 ], 235 ],
  236 + 'product_list_item' => [
  237 + 'resize' => [
  238 + 'width' => 308,
  239 + 'height' => 221,
  240 + ],
  241 + ],
236 ] 242 ]
237 ], 243 ],
238 'basket' => [ 244 'basket' => [
common/modules/product/models/Category.php
  Show/Hide comments   View file @2d7ef06
@@ -292,4 +292,13 @@ class Category extends \yii\db\ActiveRecord @@ -292,4 +292,13 @@ class Category extends \yii\db\ActiveRecord
292 'category_id' => 'parent_id', 292 'category_id' => 'parent_id',
293 ]); 293 ]);
294 } 294 }
  295 +
  296 + public function getGrandParent()
  297 + {
  298 + return $this->hasOne(Category::className(), [
  299 + 'category_id' => 'parent_id',
  300 + ])->viaTable('category', [
  301 + 'category_id' => 'parent_id',
  302 + ], function($query) { $query->from('category c2'); });
  303 + }
295 } 304 }
frontend/controllers/ProductController.php
  Show/Hide comments   View file @2d7ef06
1 <?php 1 <?php
2 2
3 namespace frontend\controllers; 3 namespace frontend\controllers;
4 - 4 +
  5 + use common\modules\product\models\Category;
5 use common\modules\product\models\Product; 6 use common\modules\product\models\Product;
  7 + use yii\data\ActiveDataProvider;
6 use yii\web\Controller; 8 use yii\web\Controller;
7 use yii\web\NotFoundHttpException; 9 use yii\web\NotFoundHttpException;
8 10
@@ -16,9 +18,26 @@ @@ -16,9 +18,26 @@
16 * Displays product list. 18 * Displays product list.
17 * @return string 19 * @return string
18 */ 20 */
19 - public function actionIndex() 21 + public function actionIndex($id)
20 { 22 {
21 - return $this->render('index'); 23 + $category = Category::find()
  24 + ->where([
  25 + 'category_id' => $id,
  26 + ])->one();
  27 + $query = Product::find()
  28 + ->joinWith(['categories.grandParent c3'])
  29 + ->with('variant')
  30 + ->where(['c3.category_id' => $id]);
  31 + $dataProvider = new ActiveDataProvider([
  32 + 'query' => $query,
  33 + 'pagination' => [
  34 + 'pageSize' => 15,
  35 + ],
  36 + ]);
  37 + return $this->render('index', [
  38 + 'dataProvider' => $dataProvider,
  39 + 'category' => $category,
  40 + ]);
22 } 41 }
23 42
24 /** 43 /**
frontend/views/layouts/main.php
  Show/Hide comments   View file @2d7ef06
@@ -56,15 +56,15 @@ $brands = Category::find() @@ -56,15 +56,15 @@ $brands = Category::find()
56 <ul> 56 <ul>
57 <li><a href="#">Бренды</a> 57 <li><a href="#">Бренды</a>
58 <div class="dropd_menu"> 58 <div class="dropd_menu">
59 - <div class="col-md-12"> 59 + <div class="inline_dropb">
60 <?php foreach ($brands as $brand) { ?> 60 <?php foreach ($brands as $brand) { ?>
61 - <div class="col-md-6">  
62 - <a href="<?php echo Url::to([ 61 + <div class="idp_el"><a href="<?php
  62 + echo Url::to([
63 'category/index', 63 'category/index',
64 'id' => $brand->category_id, 64 'id' => $brand->category_id,
65 - ]); ?>"><?php echo $brand->name; ?></a>  
66 - </div>  
67 - <?php } ?> 65 + ])
  66 + ?>"><?php echo $brand->name; ?></a></div>
  67 + <?php } ?>
68 </div> 68 </div>
69 <div style="clear:both;"></div> 69 <div style="clear:both;"></div>
70 </div> 70 </div>
frontend/views/product/_product_list.php 0 → 100644
  Show/Hide comments   View file @2d7ef06
  1 +<?php
  2 +
  3 +use common\components\artboximage\ArtboxImageHelper;
  4 +use common\modules\product\models\Product;
  5 +use yii\helpers\Url;
  6 +use yii\widgets\ListView;
  7 +
  8 +/**
  9 + * @var Product $model
  10 + * @var mixed $key
  11 + * @var integer $index
  12 + * @var ListView $widget
  13 + */
  14 +
  15 +?>
  16 +
  17 +<div class="col-md-4 col-sm-6">
  18 + <div class="tile_1">
  19 + <a href="<?php echo Url::to([
  20 + 'product/view',
  21 + 'product_id' => $model->product_id,
  22 + 'variant_id' => $model->variant->product_variant_id,
  23 + ])?>">
  24 + <div class="picture" style="background-image:url('<?php
  25 + echo ArtboxImageHelper::getImageSrc($model->getImageUrl(), 'product_list_item');
  26 + ?>');"></div>
  27 + <div class="title_1"><?php echo $model->name; ?></div>
  28 + <div class="title_2"><?php echo $model->variant->sku; ?></div>
  29 + </a>
  30 + </div>
  31 +</div>
frontend/views/product/index.php
  Show/Hide comments   View file @2d7ef06
1 <?php 1 <?php
2 2
  3 +/**
  4 + * @var ActiveDataProvider $dataProvider
  5 + * @var View $this
  6 + * @var Category $category
  7 + */
  8 +use common\modules\product\models\Category;
  9 +use yii\data\ActiveDataProvider;
  10 +use yii\web\View;
  11 +use yii\widgets\ListView;
  12 +
  13 +$this->title = $category->first_text;
  14 +$this->params['breadcrumbs'][] = $this->title;
  15 +
3 ?> 16 ?>
4 17
5 <div class="col-md-12"> 18 <div class="col-md-12">
@@ -185,177 +198,13 @@ @@ -185,177 +198,13 @@
185 </div> 198 </div>
186 <div class="col-md-9"> 199 <div class="col-md-9">
187 <div class="blocks_2"> 200 <div class="blocks_2">
188 - <div class="col-md-4 col-sm-6">  
189 - <div class="tile_1">  
190 - <a href="#">  
191 - <div class="picture" style="background-image:url('images/t2_01.jpg');"></div>  
192 - <div class="title_1">Jab Anstoetz Fabric</div>  
193 - <div class="title_2">Германия</div>  
194 - </a>  
195 - </div>  
196 - </div>  
197 - <div class="col-md-4 col-sm-6">  
198 - <div class="tile_1">  
199 - <a href="#">  
200 - <div class="picture" style="background-image:url('images/t2_02.jpg');"></div>  
201 - <div class="title_1">Armani/Casa</div>  
202 - <div class="title_2">Италия</div>  
203 - </a>  
204 - </div>  
205 - </div>  
206 - <div class="col-md-4 col-sm-6">  
207 - <div class="tile_1">  
208 - <a href="#">  
209 - <div class="picture" style="background-image:url('images/t2_03.jpg');"></div>  
210 - <div class="title_1">Sipri</div>  
211 - <div class="title_2">Италия</div>  
212 - </a>  
213 - </div>  
214 - </div>  
215 - <div class="col-md-4 col-sm-6">  
216 - <div class="tile_1">  
217 - <a href="#">  
218 - <div class="picture" style="background-image:url('images/t2_04.jpg');"></div>  
219 - <div class="title_1">Carlucci</div>  
220 - <div class="title_2">Германия</div>  
221 - </a>  
222 - </div>  
223 - </div>  
224 - <div class="col-md-4 col-sm-6">  
225 - <div class="tile_1">  
226 - <a href="#">  
227 - <div class="picture" style="background-image:url('images/t2_05.jpg');"></div>  
228 - <div class="title_1">Chivasso</div>  
229 - <div class="title_2">Германия</div>  
230 - </a>  
231 - </div>  
232 - </div>  
233 - <div class="col-md-4 col-sm-6">  
234 - <div class="tile_1">  
235 - <a href="#">  
236 - <div class="picture" style="background-image:url('images/t2_06.jpg');"></div>  
237 - <div class="title_1">Soleil Bleu</div>  
238 - <div class="title_2">Германия</div>  
239 - </a>  
240 - </div>  
241 - </div>  
242 - <div class="col-md-4 col-sm-6">  
243 - <div class="tile_1">  
244 - <a href="#">  
245 - <div class="picture" style="background-image:url('images/t2_07.jpg');"></div>  
246 - <div class="title_1">Paravox</div>  
247 - <div class="title_2">Германия</div>  
248 - </a>  
249 - </div>  
250 - </div>  
251 - <div class="col-md-4 col-sm-6">  
252 - <div class="tile_1">  
253 - <a href="#">  
254 - <div class="picture" style="background-image:url('images/t2_08.jpg');"></div>  
255 - <div class="title_1">Marburg</div>  
256 - <div class="title_2">Германия</div>  
257 - </a>  
258 - </div>  
259 - </div>  
260 - <div class="col-md-4 col-sm-6">  
261 - <div class="tile_1">  
262 - <a href="#">  
263 - <div class="picture" style="background-image:url('images/t2_09.jpg');"></div>  
264 - <div class="title_1">Rasch Textile</div>  
265 - <div class="title_2">Германия</div>  
266 - </a>  
267 - </div>  
268 - </div>  
269 - <div class="col-md-4 col-sm-6">  
270 - <div class="tile_1">  
271 - <a href="#">  
272 - <div class="picture" style="background-image:url('images/t2_10.jpg');"></div>  
273 - <div class="title_1">J&V</div>  
274 - <div class="title_2">Италия</div>  
275 - </a>  
276 - </div>  
277 - </div>  
278 - <div class="col-md-4 col-sm-6">  
279 - <div class="tile_1">  
280 - <a href="#">  
281 - <div class="picture" style="background-image:url('images/t2_11.jpg');"></div>  
282 - <div class="title_1">BN</div>  
283 - <div class="title_2">Италия</div>  
284 - </a>  
285 - </div>  
286 - </div>  
287 - <div class="col-md-4 col-sm-6">  
288 - <div class="tile_1">  
289 - <a href="#">  
290 - <div class="picture" style="background-image:url('images/t2_12.jpg');"></div>  
291 - <div class="title_1">Elitis</div>  
292 - <div class="title_2">Франция</div>  
293 - </a>  
294 - </div>  
295 - </div>  
296 - <div class="col-md-4 col-sm-6">  
297 - <div class="tile_1">  
298 - <a href="#">  
299 - <div class="picture" style="background-image:url('images/t2_13.jpg');"></div>  
300 - <div class="title_1">Arte</div>  
301 - <div class="title_2">Бельгия</div>  
302 - </a>  
303 - </div>  
304 - </div>  
305 - <div class="col-md-4 col-sm-6">  
306 - <div class="tile_1">  
307 - <a href="#">  
308 - <div class="picture" style="background-image:url('images/t2_14.jpg');"></div>  
309 - <div class="title_1">Wallquest</div>  
310 - <div class="title_2">Америка</div>  
311 - </a>  
312 - </div>  
313 - </div>  
314 - <div class="col-md-4 col-sm-6">  
315 - <div class="tile_1">  
316 - <a href="#">  
317 - <div class="picture" style="background-image:url('images/t2_15.jpg');"></div>  
318 - <div class="title_1">Studio 465</div>  
319 - <div class="title_2">Америка</div>  
320 - </a>  
321 - </div>  
322 - </div>  
323 201
324 - <div class="col-md-12 col-xs-12 col-sm-12">  
325 - <div class="blocks b2">  
326 - <div class="labels">  
327 - <div class="line2">Текстильные</div>  
328 - </div>  
329 - </div>  
330 - </div> 202 + <?php echo ListView::widget([
  203 + 'dataProvider' => $dataProvider,
  204 + 'itemView' => '_product_list',
  205 + 'layout' => '{items}{pager}',
  206 + ])?>
331 207
332 - <div class="col-md-4 col-sm-6">  
333 - <div class="tile_1">  
334 - <a href="#">  
335 - <div class="picture" style="background-image:url('images/t2_16.jpg');"></div>  
336 - <div class="title_1">Sangiorgio</div>  
337 - <div class="title_2">Италия</div>  
338 - </a>  
339 - </div>  
340 - </div>  
341 - <div class="col-md-4 col-sm-6">  
342 - <div class="tile_1">  
343 - <a href="#">  
344 - <div class="picture" style="background-image:url('images/t2_17.jpg');"></div>  
345 - <div class="title_1">Calcutta / Asanderus</div>  
346 - <div class="title_2">Бельгия</div>  
347 - </a>  
348 - </div>  
349 - </div>  
350 - <div class="col-md-4 col-sm-6">  
351 - <div class="tile_1">  
352 - <a href="#">  
353 - <div class="picture" style="background-image:url('images/t2_18.jpg');"></div>  
354 - <div class="title_1">Zuber and Cie</div>  
355 - <div class="title_2">Франция</div>  
356 - </a>  
357 - </div>  
358 - </div>  
359 </div> 208 </div>
360 </div> 209 </div>
361 </div> 210 </div>
frontend/web/css/style.css
  Show/Hide comments   View file @2d7ef06
@@ -801,7 +801,7 @@ footer .socbuts a:hover{ @@ -801,7 +801,7 @@ footer .socbuts a:hover{
801 } 801 }
802 .tile_1 .title_2, .tile_2 .title_2{font-size: 10px;} 802 .tile_1 .title_2, .tile_2 .title_2{font-size: 10px;}
803 .tile_1 a, .tile_1 a:hover, .tile_2 a, .tile_2 a:hover, .tile3 a:hover, .tile4 a:hover{color:#414143!important;} 803 .tile_1 a, .tile_1 a:hover, .tile_2 a, .tile_2 a:hover, .tile3 a:hover, .tile4 a:hover{color:#414143!important;}
804 -.tile_1 .picture:after, .tile_2 .picture:after, .tile3 .picture:after, .tile4 .picture:after, .cols a:after{ 804 +.tile_1 .picture:after, .tile_2 .picture:after, .tile3 .picture:after, .tile4 .picture:after, .cols a:after, .actions_cont .picture:after{
805 content: ''; 805 content: '';
806 position: absolute; 806 position: absolute;
807 width: 100%; 807 width: 100%;
@@ -813,10 +813,11 @@ footer .socbuts a:hover{ @@ -813,10 +813,11 @@ footer .socbuts a:hover{
813 background-repeat: no-repeat; 813 background-repeat: no-repeat;
814 background-color: rgba(255, 255, 255, 0.83); 814 background-color: rgba(255, 255, 255, 0.83);
815 } 815 }
816 -.tile3 .picture, .tile4 .picture{ 816 +.actions_cont .picture{overflow:hidden; }
  817 +.tile3 .picture, .tile4 .picture, .actions_cont .picture{
817 position: relative; 818 position: relative;
818 } 819 }
819 -.tile_1 a:hover .picture:after, .tile_2 a:hover .picture:after, .tile3 a:hover .picture:after, .tile4 a:hover .picture:after, .cols a:hover:after{ 820 +.tile_1 a:hover .picture:after, .tile_2 a:hover .picture:after, .tile3 a:hover .picture:after, .tile4 a:hover .picture:after, .cols a:hover:after, .actions_cont a:hover .picture:after{
820 top:0; 821 top:0;
821 } 822 }
822 .tile_2 .title_1{ 823 .tile_2 .title_1{
@@ -1303,6 +1304,13 @@ a.active{ @@ -1303,6 +1304,13 @@ a.active{
1303 font-weight: 600; 1304 font-weight: 600;
1304 color: #000000; 1305 color: #000000;
1305 } 1306 }
  1307 +.title8{
  1308 + font-size: 24px;
  1309 + text-align: center;
  1310 + text-transform: uppercase;
  1311 + font-family: 'Lato-Light';
  1312 + margin-bottom: 17px;
  1313 +}
1306 .title_or{ 1314 .title_or{
1307 font-family: 'Open Sans', sans-serif; 1315 font-family: 'Open Sans', sans-serif;
1308 font-size: 24px; 1316 font-size: 24px;
@@ -1501,7 +1509,7 @@ p.right{text-align: right;} @@ -1501,7 +1509,7 @@ p.right{text-align: right;}
1501 } 1509 }
1502 .collection .head img{ 1510 .collection .head img{
1503 max-width:960px; 1511 max-width:960px;
1504 - /*width:100%;*/ 1512 + width:100%;
1505 } 1513 }
1506 .cols{max-width: 960px;margin: 40px auto 25px;} 1514 .cols{max-width: 960px;margin: 40px auto 25px;}
1507 .cols a{ 1515 .cols a{
@@ -1556,13 +1564,14 @@ p.right{text-align: right;} @@ -1556,13 +1564,14 @@ p.right{text-align: right;}
1556 background-color: #e9e6e6; 1564 background-color: #e9e6e6;
1557 top: 62px; 1565 top: 62px;
1558 z-index: 30; 1566 z-index: 30;
1559 - padding: 10px 30px 45px; 1567 + padding: 20px 10px;
1560 display: none; 1568 display: none;
1561 } 1569 }
1562 .dropd_menu:before { 1570 .dropd_menu:before {
1563 position: absolute; 1571 position: absolute;
1564 content: ''; 1572 content: '';
1565 width: 17%; 1573 width: 17%;
  1574 + min-width: 150px;
1566 height: 45px; 1575 height: 45px;
1567 background-color: rgba(255, 0, 0, 0); 1576 background-color: rgba(255, 0, 0, 0);
1568 left: 0; 1577 left: 0;
@@ -1643,6 +1652,78 @@ p.right{text-align: right;} @@ -1643,6 +1652,78 @@ p.right{text-align: right;}
1643 background-color: #d2d2d2; 1652 background-color: #d2d2d2;
1644 } 1653 }
1645 .pagination .active a{color:#000!important;background-color:white!important;} 1654 .pagination .active a{color:#000!important;background-color:white!important;}
  1655 +
  1656 +.action{max-width:260px;margin-bottom: 10px;}
  1657 +.action img{width:100%; max-width:227px;}
  1658 +.a_down{
  1659 + display: flex;
  1660 + align-items: center;
  1661 + margin: 11px 0px;
  1662 +}
  1663 +.a_down .price{
  1664 + font-family: 'Lato-Bold';
  1665 + font-size: 18px;
  1666 + width: 68px;
  1667 + border-top: 1px solid #aaaaaa;
  1668 + text-align: center;
  1669 + border-bottom: 1px solid #aaaaaa;
  1670 + height: 36px;
  1671 + display: flex;
  1672 + justify-content: center;
  1673 + align-items: center;
  1674 +}
  1675 +.a_down .line1{
  1676 + font-size: 15px;
  1677 + font-family: 'Lato-Light';
  1678 + font-weight: 600;
  1679 +}
  1680 +.a_down .line2{font-size: 9.42px;}
  1681 +.a_down .titles{margin-left: 15px;}
  1682 +.actions_cont{
  1683 + display: flex;
  1684 + flex-wrap: wrap;
  1685 + justify-content: center;
  1686 + overflow: hidden;
  1687 +}
  1688 +.down.act_d{
  1689 + width: 960px;
  1690 + margin-left: auto;
  1691 + margin-right: auto;
  1692 +}
  1693 +.d_title{
  1694 + text-transform: uppercase;
  1695 + font-size: 18px;
  1696 + font-weight: 600;
  1697 +}
  1698 +.act_d{margin-top:66px;}
  1699 +.act_d p{color:#878686;font-family: 'Lato-Light';font-weight: 600;font-size:15px;letter-spacing: 0.4px;}
  1700 +
  1701 +/**/
  1702 +.dropd_menu:before {
  1703 + position: absolute;
  1704 + content: '';
  1705 + width: 17%;
  1706 + min-width: 150px;
  1707 + height: 45px;
  1708 + background-color: rgba(255, 0, 0, 0);
  1709 + left: 0;
  1710 + top: -30px;
  1711 +}
  1712 +.dropd_menu {
  1713 + width: initial!important;
  1714 +}
  1715 +.idp_el{
  1716 + display: inline-block;
  1717 +}
  1718 +.idp_el a{
  1719 + padding: 0!important;
  1720 + margin-right: 40px!important;
  1721 + text-align: left!important;
  1722 +}
  1723 +.inline_dropb{
  1724 + padding-left: 38px;
  1725 +}
  1726 +
1646 /**/ 1727 /**/
1647 @media (min-width: 1200px){ 1728 @media (min-width: 1200px){
1648 .nav_up{ 1729 .nav_up{
@@ -30,7 +30,11 @@ @@ -30,7 +30,11 @@
30 <ul> 30 <ul>
31 <li><a href="#">Бренды</a> 31 <li><a href="#">Бренды</a>
32 <div class="dropd_menu"> 32 <div class="dropd_menu">
33 - <div class="col-md-12"> 33 + <div class="inline_dropb">
  34 + <div class="idp_el"><a href="#">Бренды обоев</a></div>
  35 + <div class="idp_el"><a href="#">Бренды текстиля</a></div>
  36 + </div>
  37 + <!--<div class="col-md-12">
34 <div class="title">Бренды обоев</div> 38 <div class="title">Бренды обоев</div>
35 <div class="col-md-3"> 39 <div class="col-md-3">
36 <ul><a href="#">JAB ANSTOETZ FABRICS</a> 40 <ul><a href="#">JAB ANSTOETZ FABRICS</a>
@@ -75,7 +79,7 @@ @@ -75,7 +79,7 @@
75 <li><a href="#">Contact</a></li> 79 <li><a href="#">Contact</a></li>
76 </ul> 80 </ul>
77 </div> 81 </div>
78 - </div> 82 + </div>-->
79 <div style="clear:both;"></div> 83 <div style="clear:both;"></div>
80 </div> 84 </div>
81 </li> 85 </li>