Commit f307b0a873174a79605e83e6baf9fc4dc8ab7cc7
1 parent
d23b8a4d
-
Showing
4 changed files
with
173 additions
and
45 deletions
Show diff stats
common/modules/product/models/Product.php
... | ... | @@ -154,7 +154,7 @@ class Product extends \yii\db\ActiveRecord |
154 | 154 | */ |
155 | 155 | public function getVariants() |
156 | 156 | { |
157 | - return $this->hasMany(ProductVariant::className(), ['product_id' => 'product_id']); | |
157 | + return $this->hasMany(ProductVariant::className(), ['product_id' => 'product_id'])->orderBy('product_variant_id'); | |
158 | 158 | } |
159 | 159 | |
160 | 160 | public function setVariants($variants) { | ... | ... |
composer.json
... | ... | @@ -41,7 +41,8 @@ |
41 | 41 | "kartik-v/yii2-widget-fileinput": "@dev", |
42 | 42 | "maxmirazh33/yii2-uploadable-cropable-image": "*", |
43 | 43 | "iutbay/yii2-imagecache": "*", |
44 | - "yurkinx/yii2-image": "dev-master" | |
44 | + "yurkinx/yii2-image": "dev-master", | |
45 | + "cics/yii2-video-embed-widget": "dev-master" | |
45 | 46 | }, |
46 | 47 | "require-dev": { |
47 | 48 | "yiisoft/yii2-codeception": "*", | ... | ... |
frontend/views/catalog/product.php
... | ... | @@ -18,7 +18,10 @@ $this->registerJs (' |
18 | 18 | |
19 | 19 | var checkData = function($index) |
20 | 20 | { |
21 | - var $source = $(".productLeftBar .product_mod > li").eq($index).find("a"); | |
21 | + var sourceNew = $(".productLeftBar .product_mod > li").eq($index); | |
22 | + $(".productLeftBar .product_mod > li").removeClass("active") | |
23 | + sourceNew.addClass("active"); | |
24 | + var $source = sourceNew.find("a"); | |
22 | 25 | var $target = $(".productLeftBar .cost_box"); |
23 | 26 | |
24 | 27 | $("#cost").text($source.data("cost")); |
... | ... | @@ -102,7 +105,7 @@ $this->registerJs (" |
102 | 105 | data-cost="<?= $variant->price ?>" |
103 | 106 | data-old_cost="<?= $variant->price_old ?>" data-id="<?= $variant->product_variant_id ?>" data-art="<?= $variant->sku ?>" |
104 | 107 | data-color="<?= $variant->name ?>" |
105 | - data-image="<?= \common\components\artboximage\ArtboxImageHelper::getImageSrc($variant->imageUrl, 'list') ?>" | |
108 | + data-image="<?= \common\components\artboximage\ArtboxImageHelper::getImageSrc($variant->imageUrl, 'product_view') ?>" | |
106 | 109 | data-imageoriginal="<?= $variant->imageUrl ?>" |
107 | 110 | title="<?= $product->fullname ?>"> |
108 | 111 | <?= \common\components\artboximage\ArtboxImageHelper::getImage($variant->imageUrl, 'product_variant')?> |
... | ... | @@ -113,15 +116,17 @@ $this->registerJs (" |
113 | 116 | </ul> |
114 | 117 | <div class="both"></div> |
115 | 118 | |
116 | - <div class="cost_box"> | |
119 | + <div class="cost_box product_read_ _qqq_"> | |
117 | 120 | <div class='params'>код: <span id='art'></span><br/> цвет: <span id='color'></span></div> |
118 | - <div class="w"> | |
119 | - <strike><span id='old_cost'>0</span> грн.</strike><br/> | |
120 | - <span class="cost"><span id='cost'>0</span> <span class="valute">грн.</span></span> | |
121 | + <div class="product_read_price"> | |
122 | + <div class="w"> | |
123 | + <strike><span id='old_cost'>0</span> грн.</strike> | |
124 | + <span class="cost"><span id='cost'>0</span> <span class="valute">грн.</span></span> | |
125 | + </div> | |
126 | + <input type='hidden' id='product_id'/> | |
127 | + <a href="#" rel='product' class="link_buy fl">В Корзину</a> | |
128 | + <div class="both"></div> | |
121 | 129 | </div> |
122 | - <input type='hidden' id='product_id'/> | |
123 | - <a href="#" rel='product' class="link_buy fl">В Корзину</a> | |
124 | - <div class="both"></div> | |
125 | 130 | </div> |
126 | 131 | <?php /* |
127 | 132 | <div class="product_service"> |
... | ... | @@ -151,7 +156,13 @@ $this->registerJs (" |
151 | 156 | <?= $product->description ?> |
152 | 157 | </div> |
153 | 158 | </li> |
154 | - | |
159 | + <?php if(!empty($product->video)) :?> | |
160 | + <li><a href="#">Видео</a> | |
161 | + <div class="info product-thumb-video"> | |
162 | + <?= \cics\widgets\VideoEmbed::widget(['responsive' => false, 'url' => $product->video]); ?> | |
163 | + </div> | |
164 | + </li> | |
165 | + <?php endif?> | |
155 | 166 | </ul> |
156 | 167 | </div> |
157 | 168 | |
... | ... | @@ -164,7 +175,7 @@ $this->registerJs (" |
164 | 175 | <ul class="product_colors"> |
165 | 176 | <?php foreach ($product->images as $image): ?> |
166 | 177 | <li><a href="<?= $image->imageUrl ?>" rel="shadowbox[gal]"> |
167 | - <?= \common\components\artboximage\ArtboxImageHelper::getImage($image->imageUrl, 'product_view')?> | |
178 | + <?= \common\components\artboximage\ArtboxImageHelper::getImage($image->imageUrl, 'product_trumb2')?> | |
168 | 179 | </a></li> |
169 | 180 | <?php endforeach; ?> |
170 | 181 | </ul> | ... | ... |
frontend/web/css/style.css
... | ... | @@ -4,9 +4,9 @@ body { padding:0;margin:0; |
4 | 4 | } |
5 | 5 | h1,h2,h3{margin:0px;padding:0px 0px 10px 0px;} |
6 | 6 | .fl{float:left;} |
7 | -.fotter .wrap .fr{float:right; width: 180px; height: 50px; position: relative;} | |
7 | +.fotter .wrap .fr{float:right; width: 180px; height: 50px; position: relative;font-size: 12px;} | |
8 | 8 | .fotter .wrap .fr img{position: absolute; top: 50%; margin-top: -10px; right: 0;} |
9 | -.fotter .wrap .fl {line-height: 50px;} | |
9 | +.fotter .wrap .fl {line-height: 50px;font-size: 12px;} | |
10 | 10 | .both{clear:both;} |
11 | 11 | h1{margin:10px 0;font-size:24px;} |
12 | 12 | h3{margin-bottom:30px;} |
... | ... | @@ -109,22 +109,36 @@ a.myorders{color:#f75d50} |
109 | 109 | } |
110 | 110 | .products ul{list-style:none;margin:0;padding:0;} |
111 | 111 | .products ul li.item{float:left;width:192px;margin:0 0 50px 0;text-align:center;position:relative;} |
112 | -.products ul li a.name{display:block;color:#333;font-size: 15px;text-decoration:none;margin:15px 0 0 0;height:35px;overflow: hidden; box-sizing: border-box;padding: 0 10px;} | |
112 | +.products ul li a.name{display:block;color:#799920;font-size: 15px;text-decoration:none;margin:15px 0 0 0;height:35px;overflow: hidden; box-sizing: border-box;padding: 0 10px;} | |
113 | +.products ul li a.name:hover {text-decoration: underline} | |
113 | 114 | .products ul li .info{text-align: left;} |
114 | 115 | .pn{border:none;} |
115 | 116 | |
116 | -.cost{color:#f75d50;font-size:18px;margin:0;padding:0;} | |
117 | -.cost span, .cost span.valute {font-size: 14px;} | |
117 | +.cost, .product_read_price #cost {color:#f75d50;font-size:18px;margin:0;padding:0;} | |
118 | +.cost span, .cost span.valute, .product_read_price .valute {font-size: 14px;} | |
118 | 119 | strike, strike span#old_cost{font-size:14px; color: #333} |
119 | -a.link_buy{font-size: 12px; display:block;margin:0 auto 10px auto;width:122px;height:29px;line-height:32px;text-transform: uppercase;color:#ffffff;text-decoration:none;font-weight:600;text-align:center; | |
120 | + | |
121 | + | |
122 | +.submit4m, a.link_buy { | |
120 | 123 | background: #95ba2f; |
121 | - border-radius: 4px; | |
124 | + border-radius:4px; | |
125 | + height: 29px; | |
126 | +} | |
127 | +a.link_buy { | |
128 | + font-size: 12px; | |
129 | + display:block; | |
130 | + margin:0 auto 10px auto; | |
131 | + width:122px; | |
132 | + line-height:32px; | |
133 | + text-transform: uppercase;color:#ffffff; | |
134 | + text-decoration:none;font-weight:600; | |
135 | + text-align:center; | |
122 | 136 | border-bottom: 3px solid #799920; |
123 | 137 | } |
124 | -a.link_buy:hover { | |
138 | +a.link_buy:hover, .submit4m:hover { | |
125 | 139 | border-bottom: 3px solid #95ba2f;; |
126 | 140 | } |
127 | -a.link_buy:active { | |
141 | +a.link_buy:active, .submit4m:active { | |
128 | 142 | background: #799920; |
129 | 143 | border-bottom: 3px solid #799920; |
130 | 144 | } |
... | ... | @@ -157,19 +171,19 @@ ul.why_list li.item6{background:url('../img/why_item6.png') left no-repeat;} |
157 | 171 | .bottom{background:#4d5458;padding:40px 0px;color:#ffffff;} |
158 | 172 | .bottom .leftbar{float:left;width:210px; } |
159 | 173 | .bottom ul{list-style:none;margin:0px;padding:0px;line-height: 23px;} |
160 | -.bottom ul a{color:#ffffff;font-size:16px;text-decoration:none;} | |
174 | +.bottom ul a{color:#ffffff;font-size:15px;text-decoration:none;} | |
161 | 175 | .bottom ul a:hover{color:#799920;} |
162 | 176 | |
163 | -.phones{padding-left:25px;background:url('../img/phone.png') left top no-repeat;margin-top:50px;line-height: 23px;} | |
177 | +.phones{padding-left:25px;background:url('../img/phone.png') left top no-repeat;margin-top:50px;line-height: 23px;font-size: 18px;} | |
164 | 178 | .map{padding:5px 0px 5px 25px;background:url('../img/map.png') left no-repeat; margin-bottom: 7px;} |
165 | 179 | a.more_map{color:#99a5ad;border-bottom:1px dotted #99a5ad;text-decoration:none;font-size:11px;text-align:center;} |
166 | 180 | |
167 | 181 | .bread-crumbs{padding:0 0 0 20px;border-bottom:1px solid #d2d2d2; height: 29px;} |
168 | 182 | .bread-crumbs ul{list-style:none;margin:0 0 0 0;padding:0; height: 29px;} |
169 | -.bread-crumbs ul li{float:left;padding-left:20px;height: 100%; line-height: 29px; color: #7d7d7d; position: relative} | |
183 | +.bread-crumbs ul li{float:left;padding-left:20px;height: 100%; line-height: 29px; color: #7d7d7d; position: relative; font-size: 12px;} | |
170 | 184 | .bread-crumbs ul li:first-child {padding-left: 0} |
171 | 185 | .bread-crumbs ul li a {font-size: 12px; display: block; color: #7d7d7d} |
172 | -.bread-crumbs ul li a:visited,.bread-crumbs ul li a:link{font-size:14px;color:#7d7d7d;text-decoration:underline;} | |
186 | +.bread-crumbs ul li a:visited,.bread-crumbs ul li a:link{color:#7d7d7d;text-decoration:underline;} | |
173 | 187 | .bread-crumbs ul li a:hover{color:#464646;text-decoration: none;} |
174 | 188 | .breadcrumb > li + li:before { |
175 | 189 | color: #ccc; |
... | ... | @@ -206,12 +220,12 @@ a.more_map{color:#99a5ad;border-bottom:1px dotted #99a5ad;text-decoration:none;f |
206 | 220 | margin: -6px 0 0 ; |
207 | 221 | top: 50%; |
208 | 222 | } |
209 | -.filters ul li a{color:#8fa951;text-decoration:none; font-size: 13px; line-height: 16px;} | |
223 | +.filters ul li a{color:#464646;text-decoration:none; font-size: 13px; line-height: 16px;} | |
210 | 224 | .filters ul li a:hover{text-decoration:underline;} |
211 | 225 | |
212 | -.productLeftBar{float:left;width:230px;padding-left:20px;margin-right:20px;} | |
213 | -.productRightBar{float:right;width:280px;margin-left:20px;} | |
214 | -.productLeftBar h1{font-size:27px;border-bottom:1px solid #d2d2d2;margin-bottom:10px;} | |
226 | +.productLeftBar{float:left;width:228px;margin-left:20px;margin-right:20px;} | |
227 | +.productRightBar{float:right;width:260px;margin:0 20px;} | |
228 | +.productLeftBar h1{font-size:24px;border-bottom:1px solid #d2d2d2;margin-bottom:10px;} | |
215 | 229 | |
216 | 230 | ul.product_mod{list-style:none;margin:10px 0 0 0;padding:0; float: left;} |
217 | 231 | ul.product_mod li{ |
... | ... | @@ -220,8 +234,20 @@ ul.product_mod li{ |
220 | 234 | height: 46px; |
221 | 235 | background: #fff; |
222 | 236 | border: 1px solid #d2d2d2; |
223 | - margin: 7px 7px 0 0; | |
237 | + margin: 5px 5px 0 0; | |
224 | 238 | text-align: center; |
239 | + position: relative; | |
240 | +} | |
241 | +ul.product_mod li.active:before { | |
242 | + width: 48px; | |
243 | + height: 48px; | |
244 | + position: absolute; | |
245 | + content: ''; | |
246 | + background: none; | |
247 | + border: 2px solid #95ba2f; | |
248 | + top: -1px; | |
249 | + left: -1px; | |
250 | + box-sizing: border-box; | |
225 | 251 | } |
226 | 252 | ul.product_mod li a{ |
227 | 253 | width: 46px; |
... | ... | @@ -229,6 +255,9 @@ ul.product_mod li a{ |
229 | 255 | display: table-cell; |
230 | 256 | vertical-align: middle; |
231 | 257 | } |
258 | +ul.product_mod li a:focus { | |
259 | + outline: none; | |
260 | +} | |
232 | 261 | ul.product_mod li img{ |
233 | 262 | vertical-align: middle; |
234 | 263 | max-width: 46px; |
... | ... | @@ -255,7 +284,7 @@ ul.product_colors li img{ |
255 | 284 | max-height: 98px; |
256 | 285 | vertical-align: middle; |
257 | 286 | } |
258 | -.productLeftBar .begin{text-transform: uppercase;font-weight:bold;} | |
287 | +.productLeftBar .begin{text-transform: uppercase;font-weight:bold; font-size: 12px;} | |
259 | 288 | |
260 | 289 | .cost_box{border-top:1px solid #d2d2d2;border-bottom:1px solid #d2d2d2;margin:10px 0px;padding:10px 0px;} |
261 | 290 | .cost_box .w{float:left;margin-right:20px;padding-top:5px;} |
... | ... | @@ -267,11 +296,11 @@ ul.product_colors li img{ |
267 | 296 | .product_service ul li.item3{background:url('../img/li3.png') left no-repeat;padding:3px 23px;} |
268 | 297 | |
269 | 298 | #nav_product{list-style:none;margin:0px;padding:0px;line-height:23px;} |
270 | -#nav_product li a{background:url('../img/li_plus.png') left no-repeat;padding:3px 15px;color:#000000;text-transform: uppercase;text-decoration:none;font-weight:bold;} | |
299 | +#nav_product li a{background:url('../img/li_plus.png') left no-repeat;padding:3px 15px;color:#000000;text-transform: uppercase;text-decoration:none;font-weight:bold; font-size: 12px;} | |
271 | 300 | #nav_product li a.active{background:url('../img/li_minus.png') left no-repeat;} |
272 | 301 | #nav_product li .info{display:none;border-bottom:1px solid #d2d2d2;padding:10px 0px;margin-bottom:10px;} |
273 | 302 | |
274 | - | |
303 | +#nav_product li .info, #nav_product li .info p {font-size: 12px; line-height: 16px;} | |
275 | 304 | .modal_box{ |
276 | 305 | position: fixed; |
277 | 306 | left: 0; |
... | ... | @@ -324,11 +353,11 @@ a.del:hover{color:#a52828;text-decoration: underline;} |
324 | 353 | |
325 | 354 | .total{text-align:right;color:#87476a;font-size:20px;margin:10px 0px;} |
326 | 355 | |
327 | -.submit4{margin-top:5px;border:none;padding:8px 13px;background:#95ba2f;border-radius:5px;color:#ffffff;text-transform: uppercase;text-decoration:none;font-size:14px;font-weight:bold;cursor:pointer;} | |
356 | +.submit4{margin-top:5px;border:none;padding:8px 13px;background:#95ba2f;border-radius:5px;color:#ffffff;text-transform: uppercase;text-decoration:none;font-size:14px;cursor:pointer;} | |
328 | 357 | .submit4:hover{background:#f75d50;} |
329 | 358 | |
330 | -.submit4m{border:none;padding:8px 13px;background:#95ba2f;border-radius:5px;color:#ffffff;text-transform: uppercase;text-decoration:none;font-size:12px;font-weight:bold;cursor:pointer;} | |
331 | -.submit4m:hover{background:#f75d50;} | |
359 | +.submit4m {font-family: Roboto;border:none;background:#95ba2f;border-radius:4px;color:#ffffff;text-transform: uppercase;font-size:10px;cursor:pointer; width:102px; height: 29px; border-bottom: 3px solid #799920; line-height: 29px;} | |
360 | +.submit4m:active,.submit4m:focus {outline: none} | |
332 | 361 | |
333 | 362 | .btn-primary{margin-top:5px;border:none;padding:8px 13px;background:#95ba2f;border-radius:5px;color:#ffffff;text-transform: uppercase;text-decoration:none;font-size:14px;font-weight:bold;cursor:pointer;} |
334 | 363 | .btn-primary:hover{background:#f75d50;} |
... | ... | @@ -383,11 +412,49 @@ ul.brends_list li{float:left;text-align:center;margin:0px 15px 20px 15px;} |
383 | 412 | .news_item img{margin-right:20px;} |
384 | 413 | .news_item a{font-size:16px;} |
385 | 414 | |
386 | -.pic{margin-right:20px;} | |
415 | +.pic{ | |
416 | + width: 392px; | |
417 | + height: 365px; | |
418 | +} | |
419 | +.pic a { | |
420 | + width: 392px; | |
421 | + height: 365px; | |
422 | + display: table-cell; | |
423 | + vertical-align: middle; | |
424 | +} | |
425 | +.pic a img { | |
426 | + max-width: 392px; | |
427 | + max-height: 365px; | |
428 | + vertical-align: middle; | |
429 | +} | |
430 | +input#subscribe-email::-webkit-input-placeholder { | |
431 | + color: #596065 | |
432 | +} | |
387 | 433 | |
388 | -#subscribe-sale{width:100px;float:left;margin-right:20px;} | |
389 | -.saletxt{width:150px;float:left;color:#ffffff;} | |
390 | -#subscribe-email{width:390px;} | |
434 | +input#subscribe-email::-moz-placeholder { | |
435 | + color: #596065 | |
436 | +} | |
437 | + | |
438 | + | |
439 | +input#subscribe-email:-ms-input-placeholder { | |
440 | + color: #596065 | |
441 | +} | |
442 | +input#subscribe-sale::-webkit-input-placeholder { | |
443 | + color: #596065 | |
444 | +} | |
445 | + | |
446 | +input#subscribe-sale::-moz-placeholder { | |
447 | + color: #596065 | |
448 | +} | |
449 | + | |
450 | + | |
451 | +input#subscribe-sale:-ms-input-placeholder { | |
452 | + color: #596065 | |
453 | +} | |
454 | +#subscribe-email, #subscribe-sale {color: #596065} | |
455 | +#subscribe-sale{width:100px;float:left;margin-right:20px;height: 28px;} | |
456 | +.saletxt{width:150px;float:left;color:#ffffff; font-size: 12px;} | |
457 | +#subscribe-email{width:370px;} | |
391 | 458 | |
392 | 459 | .txts{color:#9da9b1;font-size:18px;margin-bottom:20px;} |
393 | 460 | |
... | ... | @@ -442,9 +509,9 @@ ul.social {margin-top: 20px;} |
442 | 509 | .hide{display:none;} |
443 | 510 | |
444 | 511 | |
445 | - | |
512 | +.footer .fl{font-size: 12px;} | |
446 | 513 | .fotter{background: #484f55;height: 50px;color:#98a3ab;} |
447 | -.fotter a{color:#98a3ab; line-height: 50px; float: left;} | |
514 | +.fotter a{color:#98a3ab; line-height: 50px; float: left; font-size: 12px;} | |
448 | 515 | |
449 | 516 | |
450 | 517 | .view_products2{list-style: none;overflow:auto;height:400px;} |
... | ... | @@ -935,7 +1002,7 @@ a.active{font-weight:bold;text-decoration: underline;} |
935 | 1002 | |
936 | 1003 | #HOME_SLIDER .jssorb03 div.av:hover, #HOME_SLIDER .jssorb03 div.av:active, #HOME_SLIDER .jssorb03 .av { |
937 | 1004 | cursor: default; |
938 | - background: #333; | |
1005 | + background: #95BA2F; | |
939 | 1006 | } |
940 | 1007 | .special-products { |
941 | 1008 | padding-top: 30px; |
... | ... | @@ -1166,4 +1233,53 @@ ul.product-special li.promo:after { |
1166 | 1233 | } |
1167 | 1234 | .irs-min, .irs-max {display: none;} |
1168 | 1235 | .irs {height: 49px;} |
1169 | -.price_filter.first_price_li {margin-top: 8px;} | |
1170 | 1236 | \ No newline at end of file |
1237 | +.price_filter.first_price_li {margin-top: 8px;} | |
1238 | +.product_read_ .w{ | |
1239 | + width: 110px;overflow: hidden; | |
1240 | + float: left; | |
1241 | + margin: 0; | |
1242 | + padding-top: 0; | |
1243 | + white-space: nowrap; | |
1244 | + min-height: 32px; | |
1245 | +} | |
1246 | +.product_read_ .w strike, .product_read_ .w .cost { | |
1247 | + width: 100%; | |
1248 | + float: left; | |
1249 | + line-height: 15px; | |
1250 | +} | |
1251 | + | |
1252 | +.product_read_price .link_buy { | |
1253 | + width: 118px; | |
1254 | + position: absolute; | |
1255 | + top: 50%; | |
1256 | + right: 0; | |
1257 | + margin: -16px 0 0 0; | |
1258 | +} | |
1259 | +.product_read_price { position: relative; min-height: 32px;margin-top: 10px;} | |
1260 | +.special-products.products h3 {margin-bottom: 0;} | |
1261 | +.special-products.products li.item { | |
1262 | + margin-top: 30px; | |
1263 | +} | |
1264 | +.productLeftBar .cost_box { | |
1265 | + border-top: 0; | |
1266 | + padding: 10px 0 15px 0; | |
1267 | +} | |
1268 | +.productLeftBar .product_mod { | |
1269 | + width: 100%; | |
1270 | + float: left; | |
1271 | + border-bottom: 1px solid #d2d2d2; | |
1272 | + padding-bottom: 15px; | |
1273 | +} | |
1274 | +#login-form .btn-primary { | |
1275 | + padding: 0 13px; | |
1276 | + height: 28px; | |
1277 | +} | |
1278 | +.field-orders-delivery .control-label, .field-orders-payment .control-label, .field-orders-body .control-label { | |
1279 | + width: 100%; | |
1280 | + float: left; | |
1281 | +} | |
1282 | + | |
1283 | +.product-thumb-video iframe { | |
1284 | + width: 260px; | |
1285 | + height: auto; | |
1286 | +} | |
1171 | 1287 | \ No newline at end of file | ... | ... |