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> | ... | ... |