Virtuemart 3.Kortelės produkto puslapyje

PDFSpausdintiEl. paštas

Pirmadienis, 06 Balandis 2015 11:13 Parašė Rimvydas Peržiūrų: 2580

( 3 Balsai )
Virtuemart 3.Kortelės produkto puslapyje - 5.0 out of 5, based on 3 votes

Jei produkto aprašyme yra daug įvairios informacijos patogiau ją suskaidyt ir pateikti vartotojui kortelėse taip vadinamuose "tabuose". Daugumoje interneto parduotuvių TVS tai jau yra numatyta pagal nutylėjimą tačiau VM to dar nėra todėl dabar imsim ir tai padarysim. Pateikiamame pvz. bus tik dvi kortelės: Prekės aprašymas ir Techninės charakteristikos kurioje atvaizduosim customs fields informaciją. Šiaip kortelių kiekis neribojamas galima talpint tai ko jums reikia pvz. dar pridėt "tabą" su komentarais ir t.t.

Perskirstome VM šabloną ir atidarome failą:

templates/naudojamas_sablonas/html/com_virtuemart/productdetalies/default.php

Susirandame kodą:

1
2
3
 <?php
echo $this->loadTemplate('reviews');
?>

ir virš jo talpiname šį kodo gabaliuką:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<section class="tabs">
<input id="tab_1" type="radio" name="tab" checked="checked" />
<input id="tab_2" type="radio" name="tab" />
 
<label for="tab_1" id="tab_l1">Aprašymas</label><!--Pavadinimas pirmos korteles-->
<label for="tab_2" id="tab_l2">Techninės charakteristikos</label><!--Pavadinimas antros kortelės-->
 
<div style="clear:both"></div>
<div class="tabs_cont">
<div id="tab_c1"><!--Tabas pirmas-->
<div class="product_desc">
<?php echo $this->product->product_desc; ?>
</div>   
</div>
 
<div id="tab_c2"><!--Tabas antras-->
<?php
echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'onbot'));
echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'related_products','class'=> 'product-related-products','customTitle' => true ));
echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'related_categories','class'=> 'product-related-categories'));
?>       
</div>
 
</div>
</section>   
 
Toliau sukuriame kortelių stilius. Naudojamo šablono css failo pabaigoje talpiname tai:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/*-------*/
.tabs {
font-size: 14px;
margin: 20px auto 0;
overflow: hidden;
position: relative;
}
.tabs label {
background: none repeat scroll 0 0 #76B4F2;/
color: #fff;
cursor: pointer;
display: block;
float: left;
height: 45px;
line-height: 45px;
padding: 0 15px;
position: relative;
text-align: center;
top: 1px;
width: auto;
}
.tabs input {
position: absolute;
left: -9999px;
}
#tab_1:checked ~ #tab_l1,
#tab_2:checked ~ #tab_l2,
#tab_3:checked ~ #tab_l3,
#tab_4:checked ~ #tab_l4 {
background: none repeat scroll 0 0 #0077B3;
border-color: #fff;
color: #fff;
top: 0;
z-index: 3;
}
.tabs_cont {
background: #fff;
height: auto;
padding: 10px 15px;
position: relative;
z-index: 2;
}
.tabs_cont > div {
position: absolute;
left: -9999px;
top: 0;
opacity: 0;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
#tab_1:checked ~ .tabs_cont #tab_c1,
#tab_2:checked ~ .tabs_cont #tab_c2,
#tab_3:checked ~ .tabs_cont #tab_c3,
#tab_4:checked ~ .tabs_cont #tab_c4 {
position: static;
left: 0;
cpacity: 1;
}

 

Dabar liko ištrinti kodą kuris atvaizduoja aprašymą ne kortelėse:

1
2
 <span class="title"><?php echo vmText::_('COM_VIRTUEMART_PRODUCT_DESC_TITLE') ?></span>
<?php echo $this->product->product_desc; ?>

 

Išsaugome ir tikrinam rezultatą. :)


Aptarkite šį straipsnį forume
Norėdami dalyvauti diskusijoje turite prisijungti arba užsiregistruoti .

Joomla123.lt is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.
The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries.