Popup Sepet İçeriği (Yardım)
-
Merhaba arkadaşlar.
Sitemde bazı düzenlemeler yapıyorum.
sepete tıkladığımda popup şeklinde açılan bir alan oluşturmak istiyorum. Kodları aynı altyapıyı kullanan farklı bir siteden çektim. bu kodların doğru çalışması için tek bir header da nasıl toplayabilirim.
teşekkürler.
sepet boşken header kodları :
<div class="icart">
<a href="javascript:void(0);">
<span><span id="CartContainer" style="position:absolute;visibility:hidden;"></span>
<input type="hidden" name="hiddenCart" id="hiddenCart" value="0"><span id="hiddenCartContainer">0</span></span></a>
<div class="icartContent">
<div id="icartListItemContainer"></div>
<div id="icartEmptyContainer"><div class="icartNoProduct">Alışveriş sepetinizde ürün bulunmamaktadır.</div></div>
<div class="icartTotalAmount">
<div class="icartPriceTotalAmount _clearfix"><span>Toplam</span><div>0.00 TL</div></div>
</div>
<div class="icartLink">
<a href="/index.php?do=catalog/order">SEPETE GİT</a>
</div>
</div>
sepet doluyken header kodları
<div class="icart">
<a href="javascript:void(0);" class="icartLinkActive">
<span><span id="CartContainer" style="position:absolute;visibility:hidden;"><div id="cartItem_334585_1" style="opacity: 1;"><div class="productOnCart" id="cartItem_inner_334585_1"></div></div></span><input type="hidden" name="hiddenCart" id="hiddenCart" value="1"><span id="hiddenCartContainer">1</span></span>
</a>
<div class="icartContent" style="display: block;">
<div id="icartListItemContainer"> <div class="icartListItem"> <div class="icartDelete"> <a href="javascript:void(0)" onclick="IdeaCartNewDeleteProduct('334585_1')"></a> </div> <div class="icartName"> <a href="/index.php?do=catalog/product&pid=83654" title="Ürün Adı">Ürün adı</a> </div> <div class="_clear"></div> <div class="icartNumber"> 1 Adet </div> <div class="icartPrice"> 1500,00 TL </div> <div class="_clear"></div> </div> </div>
<div id="icartEmptyContainer"></div>
<div class="icartTotalAmount">
<div class="icartPriceTotalAmount _clearfix"><span>Toplam</span><div>1500,00 TL</div></div>
</div>
<div class="icartLink">
<a href="/index.php?do=catalog/order">SEPETE GİT</a>
</div>
</div>
</div>
CSS Kodları :
.icart {
float:right;
position:relative;
margin:0 5px 0 0;
}
.icart > a {
width:45px;
height:45px;
display:block;
background:url(images/cart_icon.png) no-repeat 0 0 #eeeeee;
position:relative;
border-radius:4px;
}
.icart > a > span {
position:absolute;
top:-5px;
right:-5px;
width:20px;
height:20px;
box-shadow:0 0 0 2px #ffffff;
background:#f78702;
line-height:20px;
text-align:center;
color:#ffffff;
border-radius:4px;
}
.icart > a:hover,
.icart > a.icartLinkActive {
background:url(images/cart_icon.png) no-repeat 0 100% #00537d;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
.icartContent {
width:196px;
position:absolute;
top:44px;
right:-5px;
display:none;
z-index:50;
background:#ffffff;
border-radius:4px;
border:solid 1px #00537d;
padding:15px;
}
.icartListItem {
height:60px;
position:relative;
border-bottom:1px solid #d7d7d7;
margin:0 0 15px;
}
.icartDelete {
position:absolute;
right:0;
top:0;
}
.icartDelete > a {
width:20px;
height:20px;
display:block;
background:url(images/cart_delete.png) no-repeat 0 0;
}
.icartDelete > a:hover {
background-position:0 100%;
}
.icartName > a {
width:170px;
height:30px;
line-height:15px;
display:block;
color:#666666;
font-size:14px;
position:relative;
overflow:hidden;
}
.icartNumber {
float:left;
height:30px;
line-height:30px;
color:#aaaaaa;
font-size:14px;
}
.icartPrice {
float:right;
height:30px;
line-height:30px;
color:#00537d;
font-size:14px;
text-align:right;
}
.icartNoProduct {
height:40px;
line-height:19px;
color:#4b4b4b;
font-size:15px;
font-weight:400;
text-align:center;
padding:10px;
}
.icartTotalAmount {
margin:10px 0 0;
}
.icartPriceTotalAmount > span {
float:left;
color:#666666;
font-size:18px;
}
.icartPriceTotalAmount > div {
float:right;
color:#f78702;
font-size:18px;
}
.icartLink > a {
margin:15px 0 0;
height:45px;
line-height:45px;
background:#f78702;
color:#ffffff;
font-size:14px;
display:block;
text-align:center;
border-radius:4px;
}
.icartLink > a:hover {
background:#d27302;
}
