Commit 2d7ef0643be349f0a9a8406a5890b413bba7add5

Authored by Alexey Boroda
1 parent f72eba2b

added menu and products (without filters)

common/config/main.php
... ... @@ -233,6 +233,12 @@
233 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 244 'basket' => [
... ...
common/modules/product/models/Category.php
... ... @@ -292,4 +292,13 @@ class Category extends \yii\db\ActiveRecord
292 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
1 1 <?php
2 2  
3 3 namespace frontend\controllers;
4   -
  4 +
  5 + use common\modules\product\models\Category;
5 6 use common\modules\product\models\Product;
  7 + use yii\data\ActiveDataProvider;
6 8 use yii\web\Controller;
7 9 use yii\web\NotFoundHttpException;
8 10  
... ... @@ -16,9 +18,26 @@
16 18 * Displays product list.
17 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
... ... @@ -56,15 +56,15 @@ $brands = Category::find()
56 56 <ul>
57 57 <li><a href="#">Бренды</a>
58 58 <div class="dropd_menu">
59   - <div class="col-md-12">
  59 + <div class="inline_dropb">
60 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 63 'category/index',
64 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 68 </div>
69 69 <div style="clear:both;"></div>
70 70 </div>
... ...
frontend/views/product/_product_list.php 0 → 100644
  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
1 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 18 <div class="col-md-12">
... ... @@ -185,177 +198,13 @@
185 198 </div>
186 199 <div class="col-md-9">
187 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 208 </div>
360 209 </div>
361 210 </div>
... ...
frontend/web/css/style.css
... ... @@ -801,7 +801,7 @@ footer .socbuts a:hover{
801 801 }
802 802 .tile_1 .title_2, .tile_2 .title_2{font-size: 10px;}
803 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 805 content: '';
806 806 position: absolute;
807 807 width: 100%;
... ... @@ -813,10 +813,11 @@ footer .socbuts a:hover{
813 813 background-repeat: no-repeat;
814 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 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 821 top:0;
821 822 }
822 823 .tile_2 .title_1{
... ... @@ -1303,6 +1304,13 @@ a.active{
1303 1304 font-weight: 600;
1304 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 1314 .title_or{
1307 1315 font-family: 'Open Sans', sans-serif;
1308 1316 font-size: 24px;
... ... @@ -1501,7 +1509,7 @@ p.right{text-align: right;}
1501 1509 }
1502 1510 .collection .head img{
1503 1511 max-width:960px;
1504   - /*width:100%;*/
  1512 + width:100%;
1505 1513 }
1506 1514 .cols{max-width: 960px;margin: 40px auto 25px;}
1507 1515 .cols a{
... ... @@ -1556,13 +1564,14 @@ p.right{text-align: right;}
1556 1564 background-color: #e9e6e6;
1557 1565 top: 62px;
1558 1566 z-index: 30;
1559   - padding: 10px 30px 45px;
  1567 + padding: 20px 10px;
1560 1568 display: none;
1561 1569 }
1562 1570 .dropd_menu:before {
1563 1571 position: absolute;
1564 1572 content: '';
1565 1573 width: 17%;
  1574 + min-width: 150px;
1566 1575 height: 45px;
1567 1576 background-color: rgba(255, 0, 0, 0);
1568 1577 left: 0;
... ... @@ -1643,6 +1652,78 @@ p.right{text-align: right;}
1643 1652 background-color: #d2d2d2;
1644 1653 }
1645 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 1728 @media (min-width: 1200px){
1648 1729 .nav_up{
... ...
source/index.html
... ... @@ -30,7 +30,11 @@
30 30 <ul>
31 31 <li><a href="#">Бренды</a>
32 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 38 <div class="title">Бренды обоев</div>
35 39 <div class="col-md-3">
36 40 <ul><a href="#">JAB ANSTOETZ FABRICS</a>
... ... @@ -75,7 +79,7 @@
75 79 <li><a href="#">Contact</a></li>
76 80 </ul>
77 81 </div>
78   - </div>
  82 + </div>-->
79 83 <div style="clear:both;"></div>
80 84 </div>
81 85 </li>
... ...