Commit 2d7ef0643be349f0a9a8406a5890b413bba7add5
1 parent
f72eba2b
added menu and products (without filters)
Showing
8 changed files
with
184 additions
and
185 deletions
Show diff stats
common/config/main.php
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> | ... | ... |
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> | ... | ... |