Ganipara JS v1.0
Ganipara JS API'si ile 3.parti bir websitesi, blog vb benzeri bir siteye alışveriş sepeti özelliği kazandırabilirsiniz. Bu API ile 3.parti web sitesindeki kullanıcılara alışveriş yapma imkanı tanıyın
Başlarken
Bir websiteniz var bu ve bu websitesinden ürün satmak istiyorsunuz. Ancak mevcut websitenizi çeşitli kaygılardani düşüncelerden dolayı bir eticaret yazılımı ile değiştirmek istemiyorsunuz. Belki bir sanatçısınız ve bir sanatçıya yakışan özel tasarım bir websiteniz var ve bunu sitenizi eticaret sitesi görünümlü bir hale getirmek istemiyorsunuz. Merak etmeyin; Ganipara ile mevcut websitenizin tasarıma dokunmadan ürünleri kendi websitenizden kolaylıkla satabilirsiniz.
Ganipara JS API
Aşağıdaki kodu websitenizin <head></head> alanı içerisinde bir yere yerleştirin. Bu kodun içerisinde 'shop_id' değeri Ganipara mağazanızın alt alan adi ile değiştirilmelidir. Örneğin ganipara mağazanız benimmagazam.ganipara.com adresinde hizmet veriyorsa 'shop_id' değeri olarak "benimmagazam" değeri kullanılmalıdır.
Bu javascript kodu websitenizin Ganipara alt yapısını kullanmasına olanak verir. Gerekli kütüphaneler asenkron bir şekilde yüklendiğinden web sitenizde herhangibir yavaşlamaya neden olmayacaktır.
<script>
var ganipara = ganipara || {};
var _gpv = _gpv || [];
_gpv.push(['shop_id', 'ankara']);
// Ekstra parametreler buraya eklenebilir.
(function (a, b) {
a.onerror = function () {
};
var d = function () {
var a = b.createElement("script"), c = b.getElementsByTagName("script")[0];
a.src = "https://cdn.ganipara.com/script/api/v1.0/lib.js";
a.async = !0;
c.parentNode.insertBefore(a, c)
};
a.addEventListener ? a.addEventListener("load", d, !1) : a.attachEvent("onload", d)
})(window, document);
</script>
Ganipara JS API'si yüklerken bazı farklı parametrelerde kullanılabilir. Bu parametreler _gpv.push(['anahtar','deger']) şeklinde tanımlanır. Aşağıda kullanılabilen parametreleri inceleyebilirsiniz.
| Paremetre | Tür | Varsayılan |
|---|---|---|
| skip_css JS kütüphanesi Ganipara CSS dosyasını yüklesin mi? Eğer kullanıcılara sepeti websitenizde bir pencere (modal) içerisinde göstermek isterseniz veya Ganipara butonlarını kullanmak istiyorsanız CSS dosyasının yüklenmesi gerekmektedir. |
Boolean | true |
| skip_jquery JS kütüphanesi jQuery kütüphanesini yüklesin mi? Ganipara JS kütüphanesi jQuery kütüphanesine ihtiyaç duymaktadır. Eğer websitenizde jQuery kullanmıyorsanız kütüphane otomatik olarak yükleme işlemini yapar. Eğer kullanıyorsanız bu parametreyi 'false' yapabilirsiniz. Ganipara JS kütüphanesi gerekli jQuery versiyonun bulunamaması durumunda bu seçenekten bağımsız olarak jQuery kütüphanesini yükler. Yüklenen jQuery kütüphanesi varsa mevcut jQuery kütüphanesi ile çakışma yapmaz |
Boolean | false |
| skip_baselib JS kütüphanesi Ganipara temeş kütüphanesini yüklesin mi? Eğer kullanıcılara sepeti websitenizde bir pencere (modal) içerisinde göstermek isterseniz veya hazır javascript metotlarını kullanmak isterseniz. |
Boolean | false |
| debug JS kütüphanesi console'a veri göndersin mi? Test amaçlı kullanım için uygundur. |
Boolean | false |
Hazır Bildirimi
Ganipara JS kütüphanesi websitenize yüklendikten bir javascript olayı ile sayfayı bilgilendirilir.
jQuery ile "Ganipara Hazır" olayını yakalamak için
<script>
$(document).on('GaniparaReady', function () {
// Console bildirimi. Deneme amaçlıdır.
console.log("GaniparaReady ");
// .jq_getCart sınıfını taşıyan bir dom nesnesine tıklanınca
GPjQuery(".jq_getCart").click(function () {
// Sepeti çek
ganipara.getCart(function (response) {
// Console bildirimi. Deneme amaçlıdır.
console.log(response);
});
});
});
</script>
Eğer jQuery kullanmıyorsanız "Ganipara Hazır" olayı aşağıdaki şekilde yakalanabilir.
<script>
function GaniparaOnReady() {
// Sepet verisini çek
var mycart = ganipara.getCart();
// Ganipara olayını kayıt et.
// Sepet penceresi (modal) kapanınca fonksiyonu çalıştır.
ganipara.register("onGPBoxClose", function () {
// Yapılacak işlemler
})
}
</script>
Olaylar (Event)
Ganipara JS kütüphanesi çeşitli durumlarda olayları tetikler. Aşağıda olayların listesini ve açıklamasını bulabilirsiniz.
| Olay | Açıklama |
|---|---|
onItemAdd |
Sepete ürün eklenmesinden sonra tetiklenir |
onItemUpdate |
Sepetteki ürünün güncellenmesi ile tetiklenir |
onItemRemove |
Sepetten ürünün çıkarılması ile tetiklenir |
onCart |
Sepette bir değişlik olduğu zaman tetiklenir |
onCartUpdate |
Sepette ürün güncellediği zaman tetiklenir |
onCartClear |
Sepetin boşaltılması ile tetiklenir |
onError |
Bir işlem sırasında hata oluşması durumunda tetiklenir |
onGPBoxClose |
Ganipara penceresinin (modal) kapanması durumunda tetiklenir |
Ganipara olaylarına aşağıdaki gibi kayıt olabilirsiniz
<script>
function GaniparaOnReady() {
// Ürüne sepet eklenince
ganipara.register("onItemAdd", function () {
// Yapılacak işlemler
})
}
</script>
Methodlar (Method)
Ganipara JS kütüphanesi methodlarının listesini ve açıklamasını bulabilirsiniz.
| Olay | Açıklama |
|---|---|
getCartURL |
Ganipara sepet adresini çek Örnek ganipara.getCartURL(function(response){ }); |
getCart |
Sepet verisini çek Örnek ganipara.getCart(function(response){ }); |
updateItem |
Sepetteki ürünü güncelle Örnek ganipara.updateItem(rowid,quantity,function(response){ }); |
removeItem |
Sepetten ürünü çıkar Örnek ganipara.removeItem(rowid,function(response){ }); |
clear |
Sepeti temizle Örnek ganipara.clear(function(response){ }); |
addItem |
Sepete ürün ekle Örnek ganipara.addItem(product_hash,quantity,function(response){ console.log(response); }); |
checkout |
Checout sayfasının adresini al Örnek ganipara.checkout(function(response){ console.log(response); }); |
formatMoney |
Rakamı para formatı ile formatla Örnek ganipara.formatMoney(10); |
Ganipara methodlarını aşağıdaki gibi kullanabilirsiniz.
Aşağıda methodların döndürdüğü verilere örnek bulabilirsiniz.
| ganipara.getCart() | JSON |
{
"items":[
{
"id":"product_226||AV5RTV1203",
"rowid":"73063b3ceb0a57585166b5ac7dc4ed3b",
"type":"product",
"sku":"",
"image":"url",
"name":"TANGIBLE1386089716",
"price":"12.00",
"price_formatted":"12.00 TL",
"quantity":"1",
"variant_id":"",
"hash":"PRODUCT-BUUTHP-H81Y1203",
"cargo_unit":"0.00",
"require_shipping":true,
"subtotal":12,
"subtotal_formatted":"12.00 TL"
}
],
"require_shipping":true,
"total":12,
"total_formatted":"12.00 TL",
"total_items":1,
"total_cargo_unit":0
}
| ganipara.checkout() | JSON |
Result: response
{
"status":true,
"url":"http://checkout.ganipara.com/...."
}
| ganipara.clear(function(response){}) | JSON |
| ganipara.addItem(product_hash,quantity,function(response){}) | JSON |
| ganipara.removeItem(rowid,function(response){}) | JSON |
| ganipara.updateItem(rowid,quantity,function(response){}) | JSON |
Result: response
{
"status":true,
"shop_id":"ankara",
"cart":"168lnlnjv2vnvrnk"
}
| ganipara.getCartURL() | METIN |
"http://ankara.ganipara.com/cart/view/?cart_id=168lnlnjv2vnvrnk"
| ganipara.formatMoney(10) | METIN |
"10.00"
Eylem (Action)
Eğer bir işlemin Ganipara penceresi (modal) içerisinde yapılmasını istiyorsanız bu durumda "action" methodunu kullanabilirsiniz.
| Olay | Açıklama |
|---|---|
viewCart |
Sepeti Ganipara penceresi (modal) içerisinde göster Örnek ganipara.action('viewCart'); |
getCart |
Ürünü ekle ve sepeti Ganipara penceresi (modal) içerisinde göster Örnek ganipara.action('addProductCart','PRODUCT-YRJ7HR-A4KU0922'); return false;" |
Eylemleri javascript içerisinde yada HTML etiketi içerisinde kullanabilirsiniz
Aşağıda HTML etiketi ile kullanım örneğini bulabilirsiniz
<!-- Sepeti Ganipara pencersinde göster -->
<a href="javascript://" onclick="ganipara.action('viewCart'); return false;" rel="nofollow">Sepeti Göster</a>
<!-- Ürünü ekle ve sepeti Ganipara pencersinde göster -->
<a href="https://magazakimligi.ganipara.com/products/add_to_cart/PRODUCT-YRJ7HR-A4KU0922" onclick="ganipara.action('addProductCart','PRODUCT-YRJ7HR-A4KU0922'); return false;" rel="nofollow">Sepete Ekle</a>
Butonlar
Eğer Ganipara butonlarını kullanmak isterseniz <a> etiketine "gp-btn" sınıfını atayabilirsiniz.
Buna ek olarak aşağıdaki sınıflarla özelleştirme yapılabilir
| CSS Sınıfı | Açıklama |
|---|---|
gp-btn-large |
Büyük buton |
gp-btn-green |
Yeşil renk |
gp-btn-blue |
Mavi renk |
gp-btn-orange |
Turuncu renk |
gp-btn-red |
Kırmızı renk |
gp-btn-black |
Siyah renk |
gp-btn-grey |
Gri renk |