collectaction-library

v1.1.5

Published

a day ago

CollectAction integration for mobile apps.

0High
0Medium
0Low

drvex

yapaytech

Comment Module

// Usage example

import { Stars } from "collectaction-library";

<Stars
  settings={{
    pid,
    firm_id: "0000",
    product_id: "0000001",
    size: "14",
    rating: true,
    review_comment_count: "review",
    camera: true,
    WebView: WebView,
  }}
/>;

Props

| Prop | Type | required | Default | Values | Note | | ----------------------- | ------- | -------- | ------- | -------------------------- | ------------------------------------------------------------------------ | | WebView | WebView | * | null | Any valid WebView instance | WebView bileşeni, uygulamanızda web içeriğini göstermek için kullanılır. | | pid | String | * | null | Any string | Collectaction panelinde bulunan pid bilgisi belirtilmelidir. | | firm_id | String | * | null | Any string | Firmanın benzersiz Trendyol kimlik numarası. | | product_name | String | * | null | Any string | Ürünün adı. | | product_image | String | * | null | Any valid URL | Ürünün resim URL'i. | | id | String | * | null | Any string | Ürünün benzersiz id numarası. | | camera | Boolean | | false | true, false | Kamera görselinin gösterilip gösterilmeyeceğini belirtir. | | rating_size | Integer | | 16 | Any integer | Değerlendirme puanının boyutunu belirler. | | rating_bold | Boolean | | false | true, false | Değerlendirme puanının kalın olup olmadığını belirtir. | | review_comment_count | String | | null | comment, review, null | Ürünün değerlendirme/yorum (rating/comment) bilgilerini gösterir. | | review_size | Integer | | 14 | Any integer | Ürünün değerlendirme/yorum boyutunu ayarlamak için kullanılır. | | star_size | Integer | | 16 | Any integer | Değerlendirme yıldızlarının boyutunu belirler. | | star_color | String | | orange | Any string | Değerlendirme yıldızlarının dıştaki rengini belirler. | | star_background_color | Integer | | gray | Any string | Değerlendirme yıldızlarının arkadaki rengini belirler. |

SizeRecommendation Module

// Usage example

import { SizeRecommendation } from "collectaction-library";

<SizeRecommendation
  settings={{
    firm_id: "000",
    id: "00001",  // veya product_id: "00001"
    fontSize: 14,
    backgroundColor: '#f5f5f5',
    borderColor: '#e0e0e0',
    iconSize: 20,
    iconType: 'aski',  //  'ayakkabi', 'aski', 'cetvel'
    borderNone: false,
  }}
/>;

Props

| Prop | Type | required | Default | Values | Note | | ----------------- | ------- | -------- | --------- | -------------------------- | ------------------------------------------------------------------------ | | firm_id | String | * | null | Any string | Firmanın benzersiz Trendyol kimlik numarası. | | id | String | * | null | Any string | Ürünün benzersiz id numarası. | | product_id | String | | null | Any string | Ürünün benzersiz id numarası | | fontSize | Integer | | 14 | Any integer | Beden önerisi metninin boyutunu belirler. | | backgroundColor | String | | '#f9f9f9' | Any valid color | Beden önerisi bileşeninin arka plan rengini belirler. | | borderColor | String | | '#e0e0e0' | Any valid color | Beden önerisi bileşeninin kenarlık rengini belirler. | | iconSize | Integer | | 24 | Any integer | Beden önerisi ikonunun boyutunu belirler. | | iconType | String | | 'aski' | 'ayakkabi', 'aski', 'cetvel' | Beden önerisi ikonunun tipini belirler. | | borderNone | Boolean | | false | true, false | Beden önerisi bileşeninin kenarlığının gösterilip gösterilmeyeceğini belirler. |

CategoryStars Module

// Usage example

import { CategoryStars } from "collectaction-library";

// Bileşeni oluştur
const categoryStarsRef = React.createRef();
<CategoryStars
  ref={categoryStarsRef}
  settings={{
    firm_id: "0001",
    ids: ["000002", "000012", "000022"],
    star_color: "orange",
    star_background_color: "gray",
    star_size: 16,
    rating_size: 14,
    rating_bold: true,
    show_rating: true,
    show_review_count: true,
    review_size: 12,
  }}
/>;

// Ürün listesinde her bir ürün için yıldızları göster
{products.map(product => (
  <View key={product.id}>
    <Text>{product.name}</Text>
    <View>
      {categoryStarsRef.current && categoryStarsRef.current.renderStarForProduct(product.id)}
    </View>
  </View>
))}

Props

Prop | Type | required | Default | Values | Note | ----------------------------- | ------- | -------- | ------- | -------------------------- | ------------------------------------------------------------------------ | firm_id | String | * | null | Any string | Firmanın benzersiz Trendyol kimlik numarası. | ids | Array | * | [] | Array of strings | Ürünlerin benzersiz id numaralarının dizisi. | star_color | String | | orange | Any string | Değerlendirme yıldızlarının dıştaki rengini belirler. | star_background_color | String | | gray | Any string | Değerlendirme yıldızlarının arkadaki rengini belirler. | star_size | Integer | | 16 | Any integer | Değerlendirme yıldızlarının boyutunu belirler. | rating_size | Integer | | 14 | Any integer | Değerlendirme puanının boyutunu belirler. | rating_bold | Boolean | | false | true, false | Değerlendirme puanının kalın olup olmadığını belirler. | rating_color | String | | #000000 | Any valid color | Değerlendirme puanının rengini belirler. | show_rating | Boolean | | false | true, false | Değerlendirme puanının gösterilip gösterilmeyeceğini belirler. | show_review_count | Boolean | | false | true, false | Değerlendirme sayısının gösterilip gösterilmeyeceğini belirler. | review_size | Integer | | 12 | Any integer | Değerlendirme sayısının boyutunu belirler. | review_color | String | | #000000 | Any valid color | Değerlendirme sayısının rengini belirler. | category_review_comment_count| String | | review | review, comment | Değerlendirme sayısı olarak gösterilecek değeri belirler (review: değerlendirme sayısı, comment: yorum sayısı). |

ReviewButton Module

// Usage example

import { ReviewButton } from "collectaction-library";

<ReviewButton
  settings={{
    pid: "your_pid",
    sid: 12345,
    uid: "user123",
    product_id: "product456",
    userFullName: "John Doe",
    id: "item789",
    orderNumber: "ORD-123456",
    absolute_url: "https://example.com/product/123",
    email: "[email protected]",
    productName: "Nike Run Star Legacy Cx Platform Festival Fashion Kadın Krem Sneaker",
    productImage: "https://example.com/images/product123.jpg",
    buttonStyle: { backgroundColor: "#000" },
    buttonTextStyle: { color: "#fff" },
  }}
/>;

Props

Prop | Type | required | Default | Values | Note | ------------------- | ------- | -------- | --------- | -------------------------- | ------------------------------------------------------------------------ | pid | String | * | null | Any string | Collectaction panelinde bulunan pid bilgisi. | sid | Number | * | null | Any number | session ID değeri. | uid | String | * | null | Any string | Kullanıcı ID'si. | product_id | String | * | null | Any string | Ürün ID'si. | userFullName | String | * | null | Any string | Kullanıcının tam adı. | id | String | * | null | Any string | Ürün ID'si. | orderNumber | String | * | null | Any string | Sipariş numarası. | absolute_url | String | * | null | Any valid URL | Ürün URL'i. | email | String | * | null | Any valid email | Kullanıcının e-posta adresi. | productName | String | * | null | Any string | Ürün adı. | productImage | String | * | null | Any valid URL | Ürün resmi URL'i. | buttonStyle | Object | | {} | Any valid style object | Yorum yazma butonunun stil özellikleri. | buttonTextStyle | Object | | {} | Any valid style object | Yorum yazma butonu metninin stil özellikleri. | starSize | Number | | 30 | Any number | Yıldızların boyutunu belirler. | starColor | String | | "#FF0000" | Any valid color | Dolu yıldızların rengini belirler. | emptyStarColor | String | | "#D3D3D3" | Any valid color | Boş yıldızların rengini belirler. | photoButtonColor | String | | "#000" | Any valid color | Fotoğraf ekleme butonunun rengini belirler. | radioButtonColor | String | | "#222" | Any valid color | "İsmim Görünsün" radio butonunun rengini belirler. | submitButtonColor | String | | "#222" | Any valid color | Gönder butonunun rengini belirler. | publishCriteriaLink | String | | "" | Any valid URL | Yayınlanma kriterleri linkini belirler. |

Yorum Düzenleme Özelliği

ReviewButton bileşeni, kullanıcının daha önce yorum yapıp yapmadığını kontrol eder ve eğer kullanıcı daha önce yorum yapmışsa:

"Yorum Yaz" butonu yerine "Yorumu Düzenle" butonu gösterilir
Modal açıldığında kullanıcının mevcut yorumu, yıldız derecelendirmesi ve fotoğrafları gösterilir
Kullanıcı yorumunu düzenleyip "Güncelle" butonuna tıklayarak yorumunu güncelleyebilir

Kullanıcının daha önce yorum yapıp yapmadığını kontrol etmek için iki farklı API endpoint'i kullanılır:

https://log.collectaction.com/api/getcomments/check - Belirli bir kullanıcının belirli bir ürün için yorum yapıp yapmadığını kontrol eder
https://log.collectaction.com/api/getcomments/specific - Kullanıcının tüm yorumlarını getirir

Başarılı Mesaj Modalı

ReviewButton bileşeni, kullanıcı yorumunu başarıyla gönderdiğinde bir başarı mesajı modalı gösterir. Bu modal, ekranın alt kısmında açılır, ekran genişliğini dolduracak şekilde tasarlanmıştır ve gönderilen yorum detaylarını (yorum metni, yıldız sayısı ve fotoğraflar) gösterir.

Fotoğraf Yükleme Özelliği

ReviewButton bileşeni, kullanıcıların yorumlarına fotoğraf eklemelerine olanak tanır. Fotoğraflar otomatik olarak https://cdnydm.com/permedia adresine yüklenir ve API'ye gönderilirken mediaFiles alanı olarak eklenir.

// API'ye gönderilen mediaFiles örneği
"mediaFiles": [
  {
    "height": "30",
    "width": "30",
    "id": "item789",
    "mediaType": "IMAGE",
    "thumbnailUrl": "https://cdnydm.com/permedia/example.png",
    "url": "https://cdnydm.com/permedia/example.png"
  }
]

Native Platformlarda Fotoğraf Seçme (Android/iOS)

Native platformlarda (Android/iOS) fotoğraf seçme işlemi için expo-image-picker kütüphanesini kullanmanız gerekmektedir. Aşağıdaki adımları izleyerek bu özelliği projenize ekleyebilirsiniz:

Expo Image Picker kütüphanesini yükleyin:

expo install expo-image-picker

Uygulamanızın ana dosyasında (örn. App.js) gerekli izinleri isteyin:

import * as ImagePicker from 'expo-image-picker';

useEffect(() => {
  (async () => {
    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (status !== 'granted') {
      alert('Fotoğraf seçebilmek için galeriye erişim izni gereklidir!');
    }
  })();
}, []);

ReviewButton bileşenini kullanırken, native platformlar için özel bir işleyici ekleyin:

<ReviewButton
  settings={{
    // Diğer ayarlar...
    onPickImage: async () => {
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        //allowsEditing: true, // resim seçimi sonrası kırpma vs yapılması isteniyor mu? 
        //aspect: [4, 3], // kırpma isteniyorsa, hangi oranda olsun 
        quality: 1,
      });
      
      if (!result.cancelled && !result.canceled) {
        // Seçilen fotoğrafı işle
        return {
          uri: result.uri || result.assets[0].uri,
          width: "30",
          height: "30",
        };
      }
      return null;
    }
  }}
/>

Bu şekilde, hem web hem de native platformlarda fotoğraf seçme işlemi sorunsuz çalışacaktır.

ReviewButton bileşenini için, fotoğraf yükleme işlemi de entegre olmuş halde örnek bir yapı


   <ReviewButton
              settings={{
                pid: "0001", // collectaction-pid
                sid: 12345,  // urun için benzersiz bir id 
                uid: "123",  // user id
                product_id: product.id, // urun için benzersiz bir id 
                userFullName: "John Doe", // kullanıcının bilgileri
                id: product.id, // urun için benzersiz bir id 
                orderNumber: "ORD-123456", // ürünü satın alan kullanıcının sipariş numarası
                absolute_url: "https://example.com/product/" + product.id, // urunun urli
                email: "[email protected]", // kullanıcının mail adresi
                productName: product.name, // ürünün bilgileri
                productImage: product.image, // ürünün sadece bir resmi
                buttonStyle: {  // buton css özellikleri
                  backgroundColor: "#000",
                  padding: 12,
                  borderRadius: 6,
                  marginTop: 10,
                  alignItems: 'center',
                  justifyContent: 'center'
                },
                buttonTextStyle: { // buton text css özellikleri
                  color: "#fff",
                  fontSize: 16,
                  fontWeight: 'bold'
                },
                starSize: 30, // yıldız boyutu
                starColor: "orange", // dolu yıldız rengi
                emptyStarColor: "lightgray", // boş yıldız rengi
                // Özel fotoğraf seçme işleyicisi kodları
                onPickImage: async () => {
                  console.log("Platform.OS:", Platform.OS);
                  
                  try {
                    // Mobil platformlarda normal işlem
                    // İzinleri kontrol et
                    console.log("Requesting permissions...");
                    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
                    console.log("Permission status:", status);
                    
                    if (status !== 'granted') {
                      Alert.alert('İzin Gerekli', 'Galeriye erişim izni gereklidir!');
                      return null;
                    }
                    
                    // Galeriyi aç
                    console.log("Launching image library...");
                    const result = await ImagePicker.launchImageLibraryAsync({
                      mediaTypes: ImagePicker.MediaTypeOptions.Images,
                      allowsEditing: true,
                      aspect: [4, 3],
                      quality: 1,
                    });
                    
                    console.log("Image picker result:", JSON.stringify(result));
                    
                    if (!result.canceled) {
                      return {
                        uri: result.assets[0].uri,
                        width: result.assets[0].width,
                        height: result.assets[0].height
                      };
                    } else {
                      console.log("Image selection canceled by user");
                    }
                    
                    return null;
                  } catch (error) {
                    console.log("Error picking image:", error);
                    console.log("Error details:", JSON.stringify(error));
                    Alert.alert(
                      "Hata",
                      "Fotoğraf seçilirken bir hata oluştu: " + error.message,
                      [{ text: "Tamam" }]
                    );
                    return null;
                  }
                }
              }}
            />

QuestionButton Module

// Usage example

import { QuestionButton } from "collectaction-library";

<QuestionButton
  settings={{
    pid: "your_pid",
    sid: 12345,
    uid: "user123",
    product_id: "product456",
    userFullName: "John Doe",
    answerMail: "[email protected]", // collectaction mail kurgusundaki mail adresi
    nameFirm: "example", // Firma adı
    absolute_url: "https://example.com/product/123",
    email: "[email protected]",
    productName: "product123",
    productImage: "https://example.com/images/product123.jpg",
    buttonStyle: { backgroundColor: "#000" },
    buttonTextStyle: { color: "#fff" },
    publishCriteriaLink: "https://example.com/yayin-kriterleri",
    userAgreementLink: "https://example.com/kullanici-sozlesmesi",
    privacyPolicyLink: "https://example.com/aydinlatma-metni"
  }}
/>;

Props

Prop | Type | required | Default | Values | Note | ------------------- | ------- | -------- | --------- | -------------------------- | ------------------------------------------------------------------------ | pid | String | * | null | Any string | Collectaction panelinde bulunan pid bilgisi. | sid | Number | * | null | Any number | session ID değeri. | uid | String | * | null | Any string | Kullanıcı ID'si. | product_id | String | * | null | Any string | Ürün ID'si. | userFullName | String | * | null | Any string | Kullanıcının tam adı. | answerMail | String | * | null | Any string | Collectaction kurgusundaki mail adresi | nameFirm | String | * | null | Any string | Firma adı. | absolute_url | String | * | null | Any valid URL | Ürün URL'i. | email | String | * | null | Any valid email | Kullanıcının e-posta adresi. | productName | String | * | null | Any string | Ürün adı. | productImage | String | * | null | Any valid URL | Ürün resmi URL'i. | buttonStyle | Object | | {} | Any valid style object | Soru sorma butonunun stil özellikleri. | buttonTextStyle | Object | | {} | Any valid style object | Soru sorma butonu metninin stil özellikleri. | radioButtonColor | String | | "#222" | Any valid color | "İsmim Görünsün" radio butonunun rengini belirler. | submitButtonColor | String | | "#222" | Any valid color | Gönder butonunun rengini belirler. | publishCriteriaLink | String | | "" | Any valid URL | Yayınlanma kriterleri linkini belirler. | userAgreementLink | String | | "" | Any valid URL | Kullanıcı sözleşmesi linkini belirler. | privacyPolicyLink | String | | "" | Any valid URL | Aydınlatma metni kriterleri linkini belirler. |

Başarılı Mesaj Modalı

QuestionButton bileşeni, kullanıcı sorusunu başarıyla gönderdiğinde bir başarı mesajı modalı gösterir. Bu modal, ekranın alt kısmında açılır, ekran genişliğini dolduracak şekilde tasarlanmıştır ve gönderilen soru metnini gösterir.

SocialProof Module (Kategori)

// Usage example

import { SocialProof } from "collectaction-library";

// Temel kullanım
<SocialProof
  settings={{
    firm_id: "123456",
    ids: ["product1", "product2", "product3"],
    text_size: 12,
    text_color: "#666666"
  }}
/>

// Özelleştirilmiş stil kullanımı
<SocialProof
  settings={{
    firm_id: "123456",
    ids: ["product1"],
    text_size: 11,
    text_color: "#333333",
    icon_size: 16,
    icon_margin: 6,
    containerStyle: {
      backgroundColor: "#f0f8ff",
      borderRadius: 8,
      padding: 8,
      marginVertical: 4,
      borderWidth: 1,
      borderColor: "#e0e0e0"
    },
    boxStyle: {
      justifyContent: "flex-start",
      alignItems: "center"
    },
    textStyle: {
      fontWeight: "500",
      fontFamily: "Arial"
    },
    iconStyle: {
      tintColor: "#007bff",
      opacity: 0.8
    }
  }}
/>

Props

| Prop | Type | required | Default | Values | Note | | ----------------- | ------- | -------- | --------- | -------------------------- | ------------------------------------------------------------------------ | | firm_id | String | * | null | Any string | Firmanın benzersiz Trendyol kimlik numarası. | | ids | Array | * | [] | Array of strings | Ürünlerin benzersiz id numaralarının dizisi. | | text_size | Integer | | 12 | Any integer | Sosyal kanıt metninin boyutunu belirler. | | text_color | String | | "#000000" | Any valid color | Sosyal kanıt metninin rengini belirler. | | icon_size | Integer | | 16 | Any integer | Sosyal kanıt ikonunun boyutunu belirler. | | icon_margin | Integer | | 6 | Any integer | İkon ile metin arasındaki boşluğu belirler. | | containerStyle | Object | | {} | Any valid style object | Ana container için özel stil özellikleri. | | boxStyle | Object | | {} | Any valid style object | İç animasyon container'ı için özel stil özellikleri. | | textStyle | Object | | {} | Any valid style object | Sosyal kanıt metni için özel stil özellikleri. | | iconStyle | Object | | {} | Any valid style object | Sosyal kanıt ikonu için özel stil özellikleri. |

Özellikler

Otomatik Slider Animasyonu

Sosyal kanıt verileri 3 saniye aralıklarla otomatik olarak değişir
Smooth fade in/out geçiş animasyonları (300ms)
4 farklı sosyal kanıt türü döngüsel olarak gösterilir

Sosyal Kanıt Türleri

Favori Sayısı: "X Kişi Favoriledi"
Günlük Satın Alma: "Bugün X Kişi Satın Aldı"
Sepet Sayısı: "X Kişinin Sepetinde"
Günlük Görüntülenme: "Bugün X Kişi Görüntüledi"

Stil Özelleştirme

Bileşen varsayılan olarak hiçbir stil ile gelmez. Tüm görsel özellikler props üzerinden kontrol edilir:

// Minimal kullanım (sadece gerekli veriler)
<SocialProof
  settings={{
    firm_id: "123456",
    ids: ["product1"]
  }}
/>

// Tam özelleştirilmiş kullanım
<SocialProof
  settings={{
    firm_id: "123456",
    ids: ["product1"],
    containerStyle: {
      backgroundColor: "#ffffff",
      borderRadius: 12,
      padding: 10,
      marginVertical: 5,
      borderWidth: 2,
      borderColor: "#007bff",
      shadowColor: "#000",
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 4,
      elevation: 3
    },
    boxStyle: {
      justifyContent: "center",
      alignItems: "center",
      minHeight: 30
    },
    textStyle: {
      fontSize: 14,
      fontWeight: "600",
      color: "#333333",
      textAlign: "center",
      fontFamily: "System"
    },
    iconStyle: {
      width: 20,
      height: 20,
      tintColor: "#007bff",
      marginRight: 8
    }
  }}
/>

API Entegrasyonu

Bileşen otomatik olarak aşağıdaki API endpoint'ini kullanır:

URL: https://micro.collectaction.com/api/trendyol_comment/category
Method: POST
Body: { firm_id, ids }

API'den dönen veri yapısı:

{
  "success": true,
  "result": [
    {
      "product_info": {
        "product_favorite": "133400",
        "product_order": "250",
        "product_basket": "1200",
        "product_pageview": "2700"
      }
    }
  ]
}

Kullanım Senaryoları

1. Ürün Listesi Sayfasında

{products.map(product => (
  <View key={product.id}>
    <SocialProof
      settings={{
        firm_id: "123456",
        ids: [product.id],
        containerStyle: styles.socialProofCard
      }}
    />
    <Text>{product.name}</Text>
  </View>
))}

2. Kategori Sayfasında (Çoklu Ürün)

<SocialProof
  settings={{
    firm_id: "123456",
    ids: categoryProductIds, // Kategori içindeki tüm ürün ID'leri
    containerStyle: styles.categoryProof
  }}
/>

SocialProofProductPage Module

// Usage example

import { SocialProofProductPage } from "collectaction-library";

// Temel kullanım
<SocialProofProductPage
  settings={{
    firm_id: "123456",
    id: "product123",
    text_size: 12,
    text_color: "#000000"
  }}
/>

// Özelleştirilmiş stil kullanımı
<SocialProofProductPage
  settings={{
    firm_id: "123456",
    id: "product123",
    text_size: 11,
    text_color: "#333333",
    icon_size: 16,
    icon_margin: 6,
    containerStyle: {
      backgroundColor: "#f0f8ff",
      borderRadius: 8,
      padding: 8,
      marginVertical: 4,
      borderWidth: 1,
      borderColor: "#e0e0e0"
    },
    boxStyle: {
      justifyContent: "flex-start",
      alignItems: "center"
    },
    textStyle: {
      fontWeight: "500"
    },
    iconStyle: {
      opacity: 0.8
    }
  }}
/>

Props

| Prop | Type | required | Default | Values | Note | | ----------------- | ------- | -------- | --------- | -------------------------- | ------------------------------------------------------------------------ | | firm_id | String | * | null | Any string | Firmanın benzersiz Trendyol kimlik numarası. | | id | String | * | null | Any string | Ürünün benzersiz id numarası. | | product_id | String | | null | Any string | Ürünün benzersiz id numarası (id ile aynı). | | text_size | Integer | | 12 | Any integer | Sosyal kanıt metninin boyutunu belirler. | | text_color | String | | "#000000" | Any valid color | Sosyal kanıt metninin rengini belirler. | | icon_size | Integer | | 16 | Any integer | Sosyal kanıt ikonunun boyutunu belirler. | | icon_margin | Integer | | 6 | Any integer | İkon ile metin arasındaki boşluğu belirler. | | containerStyle | Object | | {} | Any valid style object | Ana container için özel stil özellikleri. | | boxStyle | Object | | {} | Any valid style object | İç animasyon container'ı için özel stil özellikleri. | | textStyle | Object | | {} | Any valid style object | Sosyal kanıt metni için özel stil özellikleri. | | iconStyle | Object | | {} | Any valid style object | Sosyal kanıt ikonu için özel stil özellikleri. |

Özellikler

Otomatik Slider Animasyonu

Birden fazla sosyal kanıt verisi varsa 2.5 saniye aralıklarla otomatik olarak değişir
Smooth fade in/out geçiş animasyonları (200ms)
Yalnızca değeri olan (sıfırdan farklı) metrikler gösterilir

Sosyal Kanıt Türleri

Favori Sayısı: "X Kişi Favoriledi"
Günlük Satın Alma: "Bugün X Kişi Satın Aldı"
Sepet Sayısı: "X Kişinin Sepetinde"
Günlük Görüntülenme: "Bugün X Kişi Görüntüledi"

API Entegrasyonu

Bileşen otomatik olarak aşağıdaki API endpoint'ini kullanır:

URL: https://micro.collectaction.com/api/trendyol_comment/getMetrics
Method: GET
Parameters: id, firm_id

API'den dönen veri yapısı:

{
  "success": true,
  "data": {
    "favorite": "11,4B",
    "order": 0,
    "basket": 0,
    "view": 0
  }
}

Kullanım Senaryoları

1. Ürün Detay Sayfasında

<SocialProofProductPage
  settings={{
    firm_id: "123456",
    id: productId,
    text_size: 12,
    text_color: "#666666"
  }}
/>

2. Özelleştirilmiş Stil ile

<SocialProofProductPage
  settings={{
    firm_id: "123456",
    id: productId,
    containerStyle: {
      backgroundColor: "#ffffff",
      borderRadius: 8,
      padding: 8,
      marginVertical: 4,
      borderWidth: 1,
      borderColor: "#e0e0e0"
    },
    textStyle: {
      fontWeight: "500",
      color: "#333333"
    }
  }}
/>

MostRatedComment Module

// Usage example

import { MostRatedComment } from "collectaction-library";

<MostRatedComment
  settings={{
    firm_id: "123456",
    id: "0123456",
    pid: "collectaction_pid",
    product_name: "Ürün Adı",
    product_image: "https://example.com/example.jpg",
    WebView: WebView,
    containerStyle: {
      backgroundColor: "#ffffff",
      borderRadius: 8,
      padding: 16,
      marginVertical: 8,
      shadowColor: "#000",
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 4,
      elevation: 3
    },
    titleStyle: {
      fontSize: 18,
      fontWeight: "bold",
      color: "#333333"
    },
    commentTextStyle: {
      fontSize: 16,
      lineHeight: 22,
      color: "#444444"
    },
    buttonStyle: {
      backgroundColor: "#007bff",
      borderRadius: 8
    },
    buttonTextStyle: {
      color: "#ffffff",
      fontWeight: "600"
    }
  }}
/>

Props

| Prop | Type | required | Default | Values | Note | | ----------------- | ------- | -------- | --------- | -------------------------- | ------------------------------------------------------------------------ | | firm_id | String | * | null | Any string | Firmanın benzersiz Trendyol kimlik numarası. | | id | String | * | null | Any string | Ürünün benzersiz id numarası. | | product_id | String | | null | Any string | Ürünün benzersiz id numarası (id ile aynı) | | pid | String | | null | Any string | Collectaction panelinde bulunan pid bilgisi. | | product_name | String | | null | Any string | Ürün adı (WebView için gerekli). | | product_image | String | | null | Any valid URL | Ürün resmi URL'i (WebView için gerekli). | | WebView | WebView | | null | Any valid WebView instance | WebView bileşeni, yorumları göstermek için kullanılır. | | containerStyle | Object | | {} | Any valid style object | Ana container için özel stil özellikleri. | | titleStyle | Object | | {} | Any valid style object | Başlık metni için özel stil özellikleri. | | commentTextStyle| Object | | {} | Any valid style object | Yorum metni için özel stil özellikleri. | | buttonStyle | Object | | {} | Any valid style object | "Tüm Yorumları Gör" butonu için özel stil özellikleri. | | buttonTextStyle | Object | | {} | Any valid style object | Buton metni için özel stil özellikleri. |

Kullanım Senaryoları

1. Ürün Detay Sayfasında

<MostRatedComment
  settings={{
    firm_id: "123456",
    id: productId,
    pid: "your_pid",
    product_name: product.name,
    product_image: product.image,
    WebView: WebView
  }}
/>

2. Özelleştirilmiş Stil ile

<MostRatedComment
  settings={{
    firm_id: "123456",
    id: productId,
    containerStyle: {
      backgroundColor: "#f8f9fa",
      borderRadius: 12,
      padding: 20,
      marginVertical: 10,
      borderWidth: 1,
      borderColor: "#e9ecef"
    },
    titleStyle: {
      fontSize: 20,
      fontWeight: "bold",
      color: "#495057",
      marginBottom: 15
    },
    commentTextStyle: {
      fontSize: 16,
      lineHeight: 24,
      color: "#6c757d"
    },
    buttonStyle: {
      backgroundColor: "#28a745",
      paddingVertical: 15,
      borderRadius: 10
    },
    buttonTextStyle: {
      fontSize: 16,
      fontWeight: "bold",
      color: "#ffffff"
    }
  }}
/>

3. WebView Olmadan (Sadece Yorum Gösterimi)

<MostRatedComment
  settings={{
    firm_id: "123456",
    id: productId
    // WebView prop'u verilmezse sadece yorum gösterilir, buton çalışmaz
  }}
/>

MostRatedProduct Module

// Usage example

import { MostRatedProduct } from "collectaction-library";

// Kullanım 1: Filtre ile ürün seçimi
<MostRatedProduct
  settings={{
    firm_id: "123456",
    filter_product: "sütyen,protez",
    randomList: false,
    autoPlay: true,
    autoPlayInterval: 3000,
    itemsPerPage: 2,
    showArrows: true,
    showDots: true,
    title: "En Çok Değerlendirme Alan Ürünler",
    starSize: 16,
    starColor: "orange",
    starBackgroundColor: "gray",
    onProductPress: (product) => {
      console.log("Ürüne tıklandı:", product);
    }
  }}
/>

// Kullanım 2: Özel ürün linkleri ile
<MostRatedProduct
  settings={{
    firm_id: "123456",
    custom_product_links: [
      "https://www.marksandspencer.com.tr/kadin-indigo-mix-bootcut-strec-jean-pantolon-5645678631",
      "https://www.marksandspencer.com.tr/kadin-siyah-regular-fit-wide-leg-pantolon-5645914497/",
      "https://www.marksandspencer.com.tr/kadin-lacivert-slim-fit-jean-pantolon-5645678437/"
    ],
    randomList: true,
    autoPlay: false,
    itemsPerPage: 1,
    showArrows: true,
    title: "Öne Çıkan Ürünler"
  }}
/>

// Özelleştirilmiş stil kullanımı
<MostRatedProduct
  settings={{
    firm_id: "123456",
    filter_product: "gömlek,tişört",
    autoPlay: true,
    autoPlayInterval: 4000,
    title: "En Popüler Ürünler",
    titleStyle: {
      fontSize: 20,
      fontWeight: "bold",
      color: "#333",
      textAlign: "center"
    },
    containerStyle: {
      backgroundColor: "#f8f9fa",
      borderRadius: 12,
      padding: 16,
      marginVertical: 10
    },
    cardStyle: {
      borderRadius: 12,
      shadowOpacity: 0.15
    },
    imageStyle: {
      height: 200
    },
    titleStyle: {
      fontSize: 16,
      fontWeight: "600"
    },
    arrowStyle: {
      backgroundColor: "#007bff",
      width: 50,
      height: 50
    },
    arrowColor: "#ffffff",
    dotStyle: {
      width: 12,
      height: 12
    },
    activeDotStyle: {
      backgroundColor: "#007bff"
    }
  }}
/>

Props

| Prop | ----------------------- | firm_id | filter_product | custom_product_links | randomList | utmOptions | autoPlay | autoPlayInterval | itemsPerPage | showArrows | showDots | title | starSize | starColor | starBackgroundColor | onProductPress | containerStyle | titleStyle | cardStyle | imageStyle | ratingStyle | arrowStyle | arrowColor | dotStyle | activeDotStyle | loadingStyle | errorStyle | Type | required | Default | Values | Note | | -------- | -------- | ------- | -------------------------- | ------------------------------------------------------------------------ | | String | * | null | Any string | Firmanın benzersiz Trendyol kimlik numarası. | | String | | null | Any string | Filtrelenecek ürün anahtar kelimeleri (virgülle ayrılmış). | | Array | | null | Array of strings | Özel ürün linklerinin dizisi. | | Boolean | | true | true, false | Ürünlerin rastgele sıralanıp sıralanmayacağını belirler. | | Boolean | | true | true, false | UTM parametrelerinin dahil edilip edilmeyeceğini belirler. | | Boolean | | true | true, false | Slider'ın otomatik oynatılıp oynatılmayacağını belirler. | | Number | | 3000 | Any number | Otomatik oynatma aralığı (milisaniye). | | Number | | 2 | Any number | Her sayfada gösterilecek ürün sayısı. | | Boolean | | true | true, false | Ok butonlarının gösterilip gösterilmeyeceğini belirler. | | Boolean | | true | true, false | Sayfa göstergesi noktalarının gösterilip gösterilmeyeceğini belirler. | | String | | null | Any string | Bileşenin başlık metni. | | Number | | 16 | Any number | Yıldız ikonlarının boyutu. | | String | | orange | Any valid color | Dolu yıldızların rengi. | | String | | gray | Any valid color | Boş yıldızların rengi. | | Function | | null | Function | Ürüne tıklandığında çalışacak fonksiyon. | | Object | | {} | Any valid style object | Ana container için özel stil özellikleri. | | Object | | {} | Any valid style object | Başlık metni için özel stil özellikleri. | | Object | | {} | Any valid style object | Ürün kartları için özel stil özellikleri. | | Object | | {} | Any valid style object | Ürün resimleri için özel stil özellikleri. | | Object | | {} | Any valid style object | Değerlendirme metni için özel stil özellikleri. | | Object | | {} | Any valid style object | Ok butonları için özel stil özellikleri. | | String | | #000 | Any valid color | Ok butonlarının rengi. | | Object | | {} | Any valid style object | Sayfa göstergesi noktaları için özel stil özellikleri. | | Object | | {} | Any valid style object | Aktif sayfa göstergesi noktası için özel stil özellikleri. | | Object | | {} | Any valid style object | Yükleme göstergesi için özel stil özellikleri. | | Object | | {} | Any valid style object | Hata mesajı için özel stil özellikleri. |

Özellikler

Otomatik Slider

Ürünler otomatik olarak belirli aralıklarla değişir
Kullanıcı etkileşimi sırasında otomatik oynatma durur
Etkileşim sonrası 2 saniye bekleyerek tekrar başlar

İki Farklı Kullanım Modu

Filtre Modu: filter_product parametresi ile belirli anahtar kelimelere sahip ürünler listelenir "custom_product_links" alanı yoksa ürünler otomatik seçilir.
Özel Link Modu: custom_product_links parametresi ile belirli ürün linkleri kullanılır

API Entegrasyonu

URL: https://micro.collectaction.com/api/trendyol_comment/mostratedproductV2
Method: POST
Headers: Content-Type: application/json

Filtre Modu API İsteği:

{
  "firm_id": "123456",
  "utmOptions": true,
  "randomList": false,
  "filter_product": "sütyen,protez"
}

Özel Link Modu API İsteği:

{
  "firm_id": "123456",
  "utmOptions": true,
  "randomList": true,
  "custom_product_links": [
    {
      "custom_product_links_uri": "https://example.com/product1"
    },
    {
      "custom_product_links_uri": "https://example.com/product2"
    }
  ]
}

Kullanım Senaryoları

1. Ana Sayfa Slider'ı

<MostRatedProduct
  settings={{
    firm_id: "123456",
    filter_product: "popüler,trend",
    autoPlay: true,
    autoPlayInterval: 4000,
    title: "En Popüler Ürünler",
    itemsPerPage: 2
  }}
/>

1.1 Örnek Stilli Kullanım

<MostRatedProduct
  settings={{
    firm_id: "123456",
    filter_product: "Erkek,Mavi",
    autoPlay: true,
    autoPlayInterval: 3000,
    itemsPerPage: 2,
    title: "En Çok Değerlendirme Alan Ürünler",
    starSize: 12,
    starColor: "#333",
    starBackgroundColor: "#ddd",
    showDots: false,
    titleStyle: {
      fontSize: 14,
      fontWeight: '600',
      color: '#333',
      marginBottom: 12
    },
    containerStyle: {
      marginVertical: 10,
      backgroundColor: '#fff'
    }
  }}
/>

2. Özel Ürün Koleksiyonu

<MostRatedProduct
  settings={{
    firm_id: "123456",
    custom_product_links: selectedProductUrls,
    randomList: false,
    title: "Editörün Seçtikleri",
    onProductPress: (product) => {
      navigation.navigate('ProductDetail', { product });
    }
  }}
/>

CommentPreview Module

// Usage example

import { CommentPreview } from "collectaction-library";

<CommentPreview
  settings={{
    firm_id: "123456",
    id: "product123",
    product_id: "product123", // veya id kullanılabilir
    product_name: "Nike Air Max 270 Kadın Spor Ayakkabı",
    product_image: "https://example.com/product-image.jpg",
    pid: "collectaction_pid",
    WebView: WebView,
    starSize: 14,
    starColor: "#FF6B35",
    starBackgroundColor: "#E0E0E0"
    progressBarColor: "#FF6B35"
  }}
/>

Props

| Prop | Type | required | Default | Values | Note | | ----------------------- | ------- | -------- | --------- | -------------------------- | ------------------------------------------------------------------------ | | firm_id | String | * | null | Any string | Firmanın benzersiz Trendyol kimlik numarası. | | id | String | * | null | Any string | Ürünün benzersiz id numarası. | | product_id | String | | null | Any string | Ürünün benzersiz id numarası (id ile aynı). | | product_name | String | | null | Any string | Ürün adı (WebView için gerekli). | | product_image | String | | null | Any valid URL | Ürün resmi URL'i (WebView için gerekli). | | pid | String | | null | Any string | Collectaction panelinde bulunan pid bilgisi. | | WebView | WebView | | null | Any valid WebView instance | WebView bileşeni, tüm yorumları/soruları göstermek için kullanılır. | | starSize | Number | | 14 | Any number | Yıldız ikonlarının boyutu. | | starColor | String | | "#FF6B35" | Any valid color | Dolu yıldızların rengi. | | starBackgroundColor | String | | "#E0E0E0" | Any valid color | Boş yıldızların rengi. | | progressBarColor | String | | "#000" | Any valid color | Yıldız oranları çubuğunun rengi. |

Özellikler

Tab Yapısı

Ürün Yorumları: Ürün hakkındaki yorumları ve değerlendirmeleri gösterir
Ürün Soruları: Ürün hakkında sorulan soruları ve cevapları gösterir

Ürün Yorumları Sekmesi

Rating dağılımı grafiği (1-5 yıldız)
Son 3 yorum önizlemesi
Yıldız derecelendirmesi
Kullanıcı bilgileri (maskelenmiş)
Yorum tarihi
Ürün fotoğrafları (varsa)
Kullanıcı özellikleri (beden, boy, kilo)
"Tüm Yorumları Gör" butonu

Ürün Soruları Sekmesi

Son 3 soru-cevap önizlemesi
Soru soran kullanıcı bilgileri
Soru tarihi
Mağaza cevapları
Güvenilir kaynak işaretleri
"Tüm Soruları Gör" butonu

WebView Entegrasyonu

"Tüm Yorumları Gör" ve "Tüm Soruları Gör" butonları WebView modal açar
Tam ekran yorum/soru görüntüleme
Kapatma butonu ile modal kapatma

API Entegrasyonu

Bileşen otomatik olarak aşağıdaki API endpoint'ini kullanır:

URL: https://micro.collectaction.com/api/trendyol_comment/getCommentSDK
Method: GET
Parameters: firm_id, id

API'den dönen veri yapısı:

{
  "success": true,
  "data": {
    "question_count": 49,
    "averageRating": 4.7,
    "totalCommentCount": 3794,
    "totalRatingCount": 5726,
    "ratingCounts": [
      {
        "rate": 5,
        "count": 4535,
        "commentCount": 2915
      }
    ],
    "reviews": [
      {
        "id": 323597146,
        "rate": 4,
        "comment": "Ürün çok güzel, memnun kaldım",
        "userFullName": "A** B**",
        "commentDateISOtype": "21 Temmuz 2023",
        "productAttributes": {
          "height": "162",
          "weight": "76"
        }
      }
    ],
    "questions": [
      {
        "id": 265040387,
        "userName": "**** ****",
        "creationDate": "12 Kasım 2024",
        "text": "Ürün hakkında sorum var",
        "answer": {
          "text": "Cevap metni burada",
          "creationDate": "12 Kasım 2024"
        }
      }
    ]
  }
}

Kullanım Senaryoları

1. Ürün Detay Sayfasında

<CommentPreview
  settings={{
    firm_id: "123456",
    id: productId,
    product_name: product.name,
    product_image: product.image,
    pid: "your_pid",
    WebView: WebView
  }}
/>

2. Özelleştirilmiş Renkler ile

<CommentPreview
  settings={{
    firm_id: "123456",
    id: productId,
    starSize: 16,
    starColor: "#FFD700",
    starBackgroundColor: "#CCCCCC"
  }}
/>

3. WebView Olmadan (Sadece Önizleme)

<CommentPreview
  settings={{
    firm_id: "123456",
    id: productId
    // WebView prop'u verilmezse sadece önizleme gösterilir
  }}
/>

4. Tam Özelleştirilmiş Kullanım

<CommentPreview
  settings={{
    firm_id: "123456",
    id: "11111",
    product_name: " Çelik Servis Takımı",
    product_image: "https://cdn.xxx.com/ty123/product/media/images/20210615/14/101234567/123456789/1/1_org_zoom.jpg",
    pid: "collectaction_pid_123",
    WebView: WebView,
    starSize: 18,
    starColor: "#FF4444",
    starBackgroundColor: "#DDDDDD"
  }}
/>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Comment Module

Props

SizeRecommendation Module

Props

CategoryStars Module

Props

ReviewButton Module

Props

Yorum Düzenleme Özelliği

Başarılı Mesaj Modalı

Fotoğraf Yükleme Özelliği

Native Platformlarda Fotoğraf Seçme (Android/iOS)

QuestionButton Module

Props

Başarılı Mesaj Modalı

SocialProof Module (Kategori)

Props

Özellikler

Otomatik Slider Animasyonu

Sosyal Kanıt Türleri

Stil Özelleştirme

API Entegrasyonu

Kullanım Senaryoları

1. Ürün Listesi Sayfasında

2. Kategori Sayfasında (Çoklu Ürün)

SocialProofProductPage Module

Props

Özellikler

Otomatik Slider Animasyonu

Sosyal Kanıt Türleri

API Entegrasyonu

Kullanım Senaryoları

1. Ürün Detay Sayfasında

2. Özelleştirilmiş Stil ile

MostRatedComment Module

Props

Kullanım Senaryoları

1. Ürün Detay Sayfasında

2. Özelleştirilmiş Stil ile

3. WebView Olmadan (Sadece Yorum Gösterimi)

MostRatedProduct Module

Props

Özellikler

Otomatik Slider

İki Farklı Kullanım Modu

API Entegrasyonu

Filtre Modu API İsteği:

Özel Link Modu API İsteği:

Kullanım Senaryoları

1. Ana Sayfa Slider'ı

1.1 Örnek Stilli Kullanım

2. Özel Ürün Koleksiyonu

CommentPreview Module

Props

Özellikler

Tab Yapısı

Ürün Yorumları Sekmesi

Ürün Soruları Sekmesi

WebView Entegrasyonu

API Entegrasyonu

Kullanım Senaryoları

1. Ürün Detay Sayfasında

2. Özelleştirilmiş Renkler ile

3. WebView Olmadan (Sadece Önizleme)

4. Tam Özelleştirilmiş Kullanım