Öncelikle sosyofikir olarak bu temayı( Shopping Cart)  türkçe döküman olarak paylaşmaktan gurur duyuyorum. Galiba Blogger'da ilk kez "sepete ekle" ve "paypal denetimi" gibi özellikleri içinde barındıran bir tema var. Shopping Cart temasından bahsediyorum..





 Başka blog servisleri mesela wordpress gibi olanlar "Düzenlenebilen alanlar" oluşturmuşlar bu da  yazınıza ekstra tanımlama, ücret, stok gibi bir çok kısmı içbir html koduna gerek kalmadan kendi içerisinde oluşturuyor siz sadece gerekli alanları yazıyorsunuz. Blogger bu tip bir özelliğe sahip değil. Bu yüzden biz sosyofikir olarak bloggerda bu özelliği bir "tablo metodu" halinde kullanmaya karar verdik.



shopping cart teması, shopping car themes, kayıt şablonu, sosyofikir

Bu temayı hala indirmediyseniz buraya tıklayarak öncelikle temayı indirebilirsiniz.
 Öncelikle aşağıdaki yolu izleyerek şu kodları yapıştırın
TARİH FORMATI AYARLAMA

Ayarlar==> Biçimlendirme
Şimdi  aşağıdaki resimdeki gibi Tarih formatını ayarlayın 

shopping cart teması, shopping car themes, kayıt şablonu, sosyofikir



Örneğin: Perşembe, Mart 22 gibi önce gün sonra ay gelecek şekilde.
Şimdi yine Ayarlar==> Biçimlendirme sayfasında aşağıya doğru geldiğinizde "Kayıt Şablonu"diye bir yer var. Bu yazınızn şablonunu oluşturmanızı sağlayan bir sistem. Buraya aşağıdaki kodu yapıştırın.



<table border="1" style="width: 660px;">


<tbody>


<tr>


<th class="item_thumb" id="thumb" width="45%"><a href="http://3.bp.blogspot.com/-k1EQIca2tCw/TdtZUjHTeGI/AAAAAAAACAs/vNwQwZAVkaI/s1600/blue.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="http://3.bp.blogspot.com/-k1EQIca2tCw/TdtZUjHTeGI/AAAAAAAACAs/vNwQwZAVkaI/s400/blue.gif" style="cursor: hand; cursor: pointer; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;" /></a></th>


<td><input class="item_add" type="button" value="Sepete Ekle" /></td>


</tr>


<tr>


<th><b>Ürün Adı</b></th>


<td class="item_name">Ürün İsmi Buraya Gelecek</td>


</tr>


<tr>


<th><b>Ücret</b></th>


<td class="item_price">99.99 TL</td>


</tr>


<tr>


<th><b>Tanımlama</b></th>


<td class="item_Description">Ürün tanımınız buraya gelecek.</td>


</tr>


<tr>


<th><b>Stok Durumu</b></th>


<td>Stok Sayısı</td>


</tr>


<tr>


<th><b>Fazlası</b></th>


<td>Ürün ile ilgili daha fazla resim, özellikleri</td>


</tr>


</tbody>


</table>

shopping cart teması, shopping car themes, kayıt şablonu, sosyofikir



Kodu ekledikten sonra sayfa böyle olmalı Kayıt Şablonu'na eklemelisiniz.
   Bu kodu yapıştırdıysanız bir sonraki aşamaya geçebiliriz.
                                       YAZI EDİTÖRÜNÜ AYARLAMA VE DÜZENLEME
    Şimdi Yeni bir yazı ekleme kısmından yazı editörüne gelin. Yani normal yazı yazar gibi şöyle bir şablon göreceksiniz.

shopping cart teması, shopping car themes, kayıt şablonu, sosyofikir



Bu demektir ki bu kısıma kadar olan adımları doğru uyguladınız. İsterseniz varsayılan resmi silebilirsiniz. Resimleri orta boy olarak kullanmanızı öneriyoruz. 

Burada gördüğünüz gibi Ürün adı, Ücreti(Price), Tanımlama(Description),Stok Durumu, Fazlası(Misc) gibi alanlar mevcut bunları istediğiniz gibi düzenleyebilirsiniz.   Zaten herşeyi belli ettim orada düzenlemek istediğiniz kısımları kafanıza göre düzenleyebilirsiniz..

Paypal E-mail Ayarlama
Eğer paypal üzerinden alış-verişlerinizi yapmak istiyorsanız emailiniz de varsa aşağıdaki gibi adımları uygulayarak paypa emailinizle siteizi birbirine bağlayabilirsiniz..

1.ADIM: TASARIM > HTML'Yİ DÜZENLE ctrl+ F tuşuna tıklayarak aşağıdaki kodu arayın.


simpleCart.email
Bu kodu bulduktan sonra şöyle bir kod dizisi göreceksiniz orada..


<script type='text/javascript'> simpleCart.email = &quot;admin@sosyofikir.com&quot;; simpleCart.checkoutTo = PayPal; simpleCart.currency = TL; simpleCart.cartHeaders = [&quot;thumb_image&quot; , &quot;Quantity_input&quot; , &quot;Total&quot;, &quot;remove&quot; ]; </script>
Yani şöyle görünecek ;


shopping cart teması, shopping car themes, kayıt şablonu, sosyofikir


 Burayı kendi hesap bilgilerinize göre düzenleyin. admin@sosyofikir.com yazan kısmı kendi paypal mail adresiniz ile düzenleyin. Daa sonra Şablonu kaydet deyip çıkın
paypal




 Bir pop-up penceresi şeklinde çıkacak paypal penceresi, sitenizde böyle görünecek.

Paypal heabı kullanmıyorum E-mail kontak formu oluşturmak istiyorum diyorsanız. 

"Sepete Ekle" butonunu email iletişim ( kontak) formunuza bağlayabilirsiniz. Öncelikle
 Kontacr.com  adresine bağlanın ve yeni bir üyelik alın (register for a new account).  Kontacr sitesine üye olduktan sonra kaydırma çubuğunu alağı doğru indirdiğinizde “Ajax Embed Widget" veya Buttons Code” gibi bir bölüm göreceksniz. burada sizin Kontacr ID'niz mevcut örn: :- id=39782; bu kodu kopyalayaın  ve aşağıdaki adımları uygulayın. 

1.Adım: Tasarım > Html'yi Düzenle
ctrl+f ile şu kodu arayın </head> daha sonrasında bu kodun hemen altına aşağıdaki kodu yapıştırın.


<script type="text/javascript" src="http://kontactr.com/kpu/kontactr.js"></script>
Daha sonrasında aşağıdaki kod dizisini CTRL + F İLE ARATIN.
input.item_add{
    bottom: 9px;
    font-size: 11px;
    position: absolute;
    right: 15px;
    width: 90px;
}
 Bu temada iki adet input.item_add mevcut. Ama aradaki fark CSS'ye bakarken daha önce olan kodu bulmanız yani sayfanın daa öncesinde bulduğunuz  (CSS kısmından önceki input.item_add ile başlayan kod dizisi bulmanız gereken) Bu kod dizisini aşağıdaki kod dizisi ile değiştirin.
span.item_add{
    bottom: 9px;
    font-size: 11px;
    position: absolute;
    right: 15px;
    width: 90px;
}
 Şimdi sıra geldi ikinci input.item_add kısmına (CSS Kodunun altında bulunacak bu 2.input,tem_add)


input.item_add {
    font-size: 17px;
    height: 40px;
    margin: 5px 0 0 140px;
    position: relative;
    width: 120px;
}

Bu kod dizisinini aşağıdaki kod dizisi ile değiştirin.
span.item_add {
    font-size: 17px;
    height: 40px;
    margin: 5px 0 0 140px;
    position: relative;
    width: 120px;
}
Şimdi Tasarımı Kaydet deyin ve Ayarlar > Biçimlendirme kısmına gidin.

Daha önceden kayıt şablonuna bir kod eklemiştik hatırladınız mı?


<table border="1" style="width: 660px;">


<tbody>


<tr>


<th class="item_thumb" id="thumb" width="45%"><a href="http://3.bp.blogspot.com/-k1EQIca2tCw/TdtZUjHTeGI/AAAAAAAACAs/vNwQwZAVkaI/s1600/blue.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="http://3.bp.blogspot.com/-k1EQIca2tCw/TdtZUjHTeGI/AAAAAAAACAs/vNwQwZAVkaI/s400/blue.gif" style="cursor: hand; cursor: pointer; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;" /></a></th>


<td><span class="item_add"><script type="text/javascript"> id=39782; t=1; ctxt="Order Now"; </script>


<script type="text/javascript" src="http://kontactr.com/kpu/kontactr.js"></script></span></td>


</tr>


<tr>


<th><b>Ürün Adı</b></th>


<td class="item_name">Ürün İsmi Buraya Gelecek</td>


</tr>


<tr>


<th><b>Ücret</b></th>


<td class="item_price">99.99 TL</td>


</tr>


<tr>


<th><b>Tanımlama</b></th>


<td class="item_Description">Ürün tanımınız buraya gelecek.</td>


</tr>


<tr>


<th><b>Stok Durumu</b></th>


<td>Stok Sayısı</td>


</tr>


<tr>


<th><b>Fazlası</b></th>


<td>Ürün ile ilgili daha fazla resim, özellikleri</td>


</tr>


</tbody>


</table>




Oradaki kod dizisini bu kod dizisi ile değiştirin. Daha sonra orada kırmızı ile işaretlenmiş olan id=39782; bu Id'yi Kontacr.com'dan aldığınız üyelik ID'niz ile değiştirin. Ve "Ayarları Kaydet" düğmesine tıklayın.
Son olarak TASARIM > HTML'Yİ DÜZENLE sekmesine tıklayınız.
 Aşağıdaki kodu bulunuz.
<script src='http://introbloggerscripts.googlecode.com/files/cart.js' type='text/javascript'/>


Bu kodu bulduktan sonra hemen alttaki kod ile değiştirin.
<script src='http://shopppingcart.googlecode.com/files/simplecart.js' type='text/javascript'/>


Kaynakça


İngilizce tema'nın orjinal sitesi için burayı tıklayınız.


Tema ile ilgili bir sıkıntınız olursa ben burada cevaplamaya hazırım.
Yorumlarınızı bekliyorum.
Paylaşın:

Lütfen Yorum Yapınız:

9 yorum var.

  1. alış veriş sitesi acmak isteyenler için güzel bir tema

    YanıtlaSil
  2. dosyayı indiriyoruz ama kısayol çıkıyor xml kodu yok..yardımcı olursanız sevinirim.hasanpaxis@gmail.com

    YanıtlaSil
  3. Bence gurur duymakta haklısınız çünkü başarılı bir yapım ve anlatım olmuş bir çok kişinin işine yarıyacaktır. tebrikler.

    YanıtlaSil
  4. @2 ye haklı kısayol çıkıyor admin ilgilen lütfen

    YanıtlaSil
  5. indirme linkiniz çalışmıyor içinde sadece readme ve reklamınız mevcut...

    YanıtlaSil
  6. Satın al dedikten sonra cıkan sayfada solda seçenekler kısmında html kodları yer alıyor. Orda bir hata var paypal sayfasında, ilgilenir misiniz?

    YanıtlaSil
  7. sitede belirtilen ürünler TL fiyatlı görünürken ödemeye geçtiğinizde paypalda USD olarak çıkıyor. Scripti düzenlemeniz gerekiyor sanırım. Sanırım JS de TRY tanımlı değil.

    YanıtlaSil
  8. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  9. http://catalogspot-revo.blogspot.com/ bu temayı kullanmak istiyorum ama sitede satış olmayacak o yüzden satışa yönelik yerleri iletişim olarak yani ürün talep formu gibi mailime göndermelerini istiyorum nasıl yapabilirim?

    Şidmiden teşekkürler.

    YanıtlaSil

Türkçe dil kurallarına lütfen dikkat edelim.
Yorumunuz en kısa sürede yayınlanacaktır..
Yorumlarınız bizim için değerlidir.