Viewer: ürünü inceleyin
3D modelin ve görünümünün sunumu. Baskı düzenlemesini açmadan ürünü farklı açılardan göstermek istediğinizde kullanışlıdır.
E-ticaret entegrasyonu - tasarımdan siparişe
Sitenize 3D gösterim, varyant seçimi ve ürün kişiselleştirme ekleyin. Müşteri mağazanızda ürünü inceler, seçenekleri belirler ve tasarımını hazırlar; siz de ürünleri ve siparişleri kendi sisteminizde yönetirsiniz.
Entegrasyon kodu yazmadan kurulum yapmak için WooCommerce yüklü WordPress eklentisini seçin. Kendi sitenizi veya mağazanızı geliştiriyorsanız gömülü araçları Public API ve postMessage olaylarıyla arka ucunuza ve sepetinize bağlayın.
Görseller, kayıtlardaki ve eklenti panelindeki gerçek arayüzü gösterir. Görüntülerdeki düğme adları İngilizcedir; aracın görünümü mağaza ayarlarına bağlıdır.
Aynı ürün tasarımını gösterim, seçenek yapılandırması veya baskı düzenleme için hazırlayabilirsiniz. Mağazaya bağlanma yöntemini sitenize ve geliştirme kapsamınıza göre seçin.
Eklenti, WordPress ve WooCommerce için hazır destek sağlar. API ile başka bir platforma, headless uygulamaya veya mevcut sipariş sistemine kendi bağlantınızı geliştirebilirsiniz.
| Alan | WordPress + WooCommerce | API üzerinden kendi sisteminiz |
|---|---|---|
| Başlatma | WordPress panelinde eklenti kurulumu ve bağlantı sihirbazı. | Arka uç bağlantısının ve siteye yerleştirmenin geliştirilmesi. |
| Ürünler ve varyantlar | Tasarımın WooCommerce ürününe atanması ve varyantların eşitlenmesi. | Ürün ve seçenek kimliklerinin mağazanızdaki verilerle ilişkilendirilmesi. |
| Sepet ve siparişler | WooCommerce içinde yapılandırma, müşteri tasarımı ve önizlemeler için hazır işlevler. | Gömülü aracın olaylarının işlenmesi ve siparişlerin kendi sisteminizde eşitlenmesi. |
| Dosyalar ve varlıklar | WordPress sunucusunda yerel kitaplık, tasarımlar ve sipariş dosyaları. | Seçilen entegrasyon moduna göre veri saklama ve erişim. Kendi depolama alanınızı kullanıyorsanız desteğini de sizin uygulamanız gerekir. |
Aracı, müşterinin sitede yapmasını istediğiniz işleme göre seçin. Tasarımı ve kişiselleştirme kurallarını önceden Designer'da hazırlayın.
3D modelin ve görünümünün sunumu. Baskı düzenlemesini açmadan ürünü farklı açılardan göstermek istediğinizde kullanışlıdır.
Boyut, renk veya malzeme gibi önceden hazırlanmış ürün seçeneklerinin seçimi. Müşteri değişikliği modelde görür ve yapılandırmayı sepete aktarır.
Sunulan araçlar, görseller, metinler ve şablonlarla kişiselleştirme. Müşterinin kaydedilen tasarımı sepet veya sipariş kalemiyle ilişkilendirilir.
Mağaza sahibinin çalışma alanı. Kompozisyonu, varyantları, baskı alanlarını ve müşteri araçlarının ayarlarını burada hazırlarsınız. Yönetim amaçlı düzenleme erişimi, mağaza kullanımından ayrıdır.
Alter Product bir WordPress eklentisi sunar. Mağaza entegrasyonu için WooCommerce'in yüklü ve etkin olması gerekir. Standart ayarları kendi API ve sepet işlemlerinizi geliştirmeden panelde yaparsınız.
Alter Product'ı kendi sitenize yerleştirmek için etkin bir Business aboneliği veya bu özelliği içeren daha üst bir plan gerekir. Bu gereksinim hem WordPress + WooCommerce eklentisi hem de özel API entegrasyonu için geçerlidir. Personal FREE ve Personal planları mağazanıza yerleştirme özelliğini içermez.
Eklenti yolunda, WooCommerce yüklü ve etkin bir WordPress kurulumu ile Alter Product hesabı hazırlayın. Dosyaları kendi barındırma alanınızda saklamak gerekli aboneliğin yerine geçmez: uygulamayı sunan ve başlatılmasını yetkilendiren yine Alter Product'tır.
Alter Product, mağaza sayfasındaki bir iframe içinde çalışır. Sayfa güvenli bir bağlam sağlamıyorsa tarayıcılar uygulamanın kullandığı bazı işlevleri kısıtlar. HTTPS bağlantıyı şifreler, geçerli sertifika ise tarayıcının alan adını doğrulamasını sağlar.
Tarayıcı, iframe'i içeren sayfayı da kontrol eder. Bu nedenle mağaza HTTP üzerinden çalışıyorsa Alter Product uygulamasının HTTPS adresi tek başına yeterli değildir. Aracı yerleştirdiğiniz kendi sayfanız da HTTPS kullanmalıdır. Bu, tarayıcıların gömülü uygulamalar için güvenlik kurallarından kaynaklanır.
Otomatik bağlantı, Alter Product hesabının yetkilendirilmesi ve mağaza kurulumu boyunca size yol gösterir. Bu yöntemde API anahtarlarını elle taşımanız gerekmez.

WooCommerce ürün düzenleyicisinde Alter Product sekmesini açın. Yeni bir tasarım oluşturun veya mevcut olanı seçin, ardından Designer'ı açın. Bu ürün için baskıyı, kullanılabilir seçenekleri ve baskı alanlarını ayarlayın.

Modelleri, tasarımları, görselleri ve sipariş dosyalarını WordPress'in çalıştığı barındırma alanında saklarsınız. Yerel olarak eklenen varlıklar mağazanız içindir; bu işlem onları diğer mağazaların kullanacağı herkese açık Alter Product kitaplığına eklemez.
Eklenti; model, kitaplık, tasarım, mockup ve sipariş dosyalarını WordPress alanına kaydeder. Model oluşturucu projelerinin ve revizyonlarının verileri de bu kurulumun veritabanında saklanır.
Kendi malzemelerinizi ekleyebilir ve Alter Product'tan seçtiğiniz varlıkları içe aktarabilirsiniz. İndirdikten sonra yerel kopyayı kullanırsınız. İçe aktarma, güncelleme kontrolü ve yeni sürüm indirme ayrı işlemlerdir.
| Paneldeki bölüm | Yapılan işlemler |
|---|---|
| Varlıklar | Modelleri, görselleri, şablonları, arka planları, logoları, dokuları ve ortamları yönetirsiniz. Kullanılabilir ekleme yöntemleri varlık türüne göre değişir. |
| Model oluşturucu | Şablonlardan yerel projeler oluşturur ve oluşturucuyla ilişkili modeller üzerinde çalışırsınız. |
| Ürün tasarımları / Designer | Tasarımı hazırlar veya içe aktarır, düzenler ve mağaza ürününe atarsınız. |
| WooCommerce siparişleri | Kaydedilen müşteri tasarımlarını, önizlemeleri ve siparişi tamamlamak için gereken dosyaları kullanırsınız. |

Varlıkları kendi tarafınızda saklarsınız; araç arayüzü ise Alter Product'tan iframe içine yüklenir. Alter Product hizmeti hesap erişimini, planı ve oturumları kontrol eder, içe aktarma kataloğunu sağlar. Entegrasyon bu hizmete bağlantı gerektirir.
Yedek alırken veritabanını, dosya dizinini ve eklentinin şifreli verilerini okumak için gereken WordPress anahtarlarını ve salt değerlerini saklayın. Böylece yalnızca görünen görselleri değil, çalışmayı sürdürmek için gereken verileri de geri yükleyebilirsiniz.
Araç, ürün sayfasının veya ayrı bir WordPress sayfasının parçası olabilir. Müşteri mağazanızın satın alma akışında kalır; sepeti ve siparişi WooCommerce yönetir.
Gösterim biçimini mağaza düzenine göre seçin: ürün sayfasında araç, özel sayfaya yönlendiren düğme veya mevcut bloklar ve kısa kodla yerleştirme. Viewer, Configurator ve Customizer farklı görevler üstlenir; hepsini aynı anda sunmanız gerekmez.

Ürün sunumunu markanıza uyarlayın. Eklentide yerel arka planları, logoları ve gömülü araçların görünüm ayarlarını yönetirsiniz. Tek tek seçeneklerin kullanılabilirliği plana bağlıdır.
Müşteri varyantını seçer ve kişiselleştirmeyi hazırlar. Eklenti, yapılandırmayı ve kaydedilen tasarımı önce sepet, ardından WooCommerce sipariş kalemiyle ilişkilendirir. Mevcut mockup'lar sipariş edilen baskının tanınmasını kolaylaştırır.
Mağazayı 3D araçlara bağlamak sürecin başlangıcıdır. Hazırlanan tasarımdan kendi üretiminiz için dosya indirebilir veya eklentideki talep üzerine baskı sağlayıcısı entegrasyonunu kullanabilirsiniz.
Eklenti ayarlarında seçilen sağlayıcıya bağlantıyı yapılandırın. Ardından ürün, varyant ve baskı konumlarını sağlayıcının kataloğuyla eşleyin, dosyaları hazırlayın ve WooCommerce'den üretim talebi gönderin.
Kendi AI sağlayıcı bağlantınızı yapılandırarak tasarım üzerinde çalışırken mevcut görsel oluşturma veya iyileştirme özelliklerini kullanabilirsiniz. Eklenti istekleri WordPress'ten seçilen sağlayıcıya gider ve o sağlayıcıdaki hesabınız üzerinden ücretlendirilir.
Oturum, mağazanızda belirli bir aracı açmak için verilen geçici yetkidir. Ürünleri müşterilere güvenli biçimde sunmaya yardımcı olur ve aylık yerleştirme oturumu limitinde sayılan birimdir. Tek bir tıklama, benzersiz ziyaretçi veya siparişle aynı şey değildir.
Gömülü araç açılırken entegrasyon kısa ömürlü bir belirteç, yani oturum anahtarı alır. Kalıcı hesap erişim bilgileri sunucuda kalır. Müşterinin anahtar kopyalaması veya mağaza sahibinin Alter Product hesabına giriş yapması gerekmez.
Mevcut uygulamada belirtecin varsayılan geçerlilik süresi 15 dakikadır. Sunucu farklı bir süre belirleyebilir; bu nedenle entegrasyon alınan oturumun son kullanma zamanını esas alır. Belirteci yeniden kullanmak süreyi uzatmaz. Süre dolduktan sonraki yetkilendirme için yeni oturum gerekir.
Araca ve hâlâ uygun, geçerli bir oturum bulunup bulunmadığına bağlıdır. Eklenti tüm ziyaretçiler ve ürünler için tek bir ortak oturum kullanmaz. Aşağıdaki kurallar mevcut davranışı açıklar.
| Durum | Oturuma ne olur? | Limite etkisi |
|---|---|---|
| Eşleşen oturum olmadan aracın ilk açılışı | Entegrasyon, bu araç ve ürün bağlamı için yeni belirteç ister. | Yeni belirtecin başarıyla verilmesi bir oturum tüketir. |
| Açık araçta modeli döndürme, rengi değiştirme veya metni düzenleme | İşlemler başlatılmış oturum içinde gerçekleşir. | Bu işlemler tek başına yeni belirteç verilmesi anlamına gelmez. |
| Viewer veya Configurator bulunan sayfanın tamamen yenilenmesi | Eklenti, sayfa yeniden yüklendiğinde genellikle yeni bir belirteç alır. Bu araçların oturum belleği tam sayfa yenilemeleri arasında korunmaz. | Sonraki başarılı belirteç verme işlemi başka bir oturum tüketir. |
| Customizer'ın aynı sekmede yenilenmesi | Customizer; mağaza, ürün, sipariş ve çalışma moduyla eşleşen, süresi dolmak üzere olmayan kayıtlı oturumu yeniden kullanabilir. | Yeniden kullanım sayacı artırmaz. Koşullar sağlanmazsa yeni oturum gerekir. |
| Belirtecin süresinin dolması, başka ürün veya çalışma bağlamının değişmesi | Yeni yetkilendirme ve belirteç gerekebilir. Tarayıcı depolamasının kullanılabilirliği de yeniden kullanım olanağını etkiler. | Yeni verilen belirteç limit kullanımını artırır. |
API başarıyla yeni belirteç verdiğinde sayaç artar. Önceden verilmiş geçerli belirteci kullanmak yeni bir belirteç verme işlemi değildir. Bu nedenle plan seçerken yalnızca sipariş veya ziyaretçi sayısını değil, araç başlatmalarını, yenilemeleri ve yeniden açmaları da hesaba katın.
Aynı mağazadaki gömülü araçlar ortak aylık oturum limitini kullanır. Sayaç mağaza bazında, UTC takvim aylarına göre ayrı tutulur. WordPress panelindeki gömülü Designer ve Model oluşturucunun yeni oturumları da sayacı artırır. İçe aktarma API'sinden mevcut bir modeli indirmek tek başına düzenleyici oturumu açmak değildir.
Limite ulaşıldığında sistem yeni oturum vermeyi reddeder. Bu, abonelik kapsamında bir kullanım limitidir; güncel paket büyüklüğünü planınızdan kontrol edin.
Kendi mağazanız, headless uygulamanız veya sipariş sisteminiz mi var? Alter Product Public API ile kendi entegrasyon katmanınızı oluşturabilir ve gereken araçları sitenize yerleştirebilirsiniz. Bu yol yazılım geliştirme gerektirir.
Public API, HTTP istekleri ve JSON verileri kullanır. Dolayısıyla entegrasyonu arka ucunuzun dilinde ve ortamında yazabilirsiniz. Alter Product araçlarını yerleştirmek için mağazanızı WordPress'e dönüştürmeniz gerekmez.
Aşağıda sunucu bağlantısı geliştirmek için örnek teknolojiler yer alır. Her birinde aynı adımları uygularsınız: API yetkilendirmesi, araç oturumu oluşturma ve ürünleri, sepeti, siparişleri kendi sisteminizle ilişkilendirme.
Örneğin Express veya NestJS kullanan Node.js arka ucunuza entegrasyon ekleyin. API'yi sunucudan çağırın, ön uca ise aracı yerleştirmek için gereken verileri sağlayın.
Django veya FastAPI gibi mevcut Python uygulamanızı HTTP istekleriyle Alter Product ürünlerine, oturumlarına ve siparişlerine bağlayın.
Kendi mağazanızda veya uygulamanızda Laravel ya da Symfony gibi PHP çözümleri kullanın. Hazır WordPress eklentisinden bağımsız bir API entegrasyonu geliştirebilirsiniz.
Araçları Spring gibi bir Java arka ucuna bağlayın; tasarım verilerini kendi ürün kataloğunuz ve sipariş süreçlerinizle ilişkilendirin.
Yetkilendirme, oturum oluşturma ve mevcut mağaza süreçlerine veri aktarmak için ASP.NET Core gibi bir .NET arka ucu kullanın.
Go ile yazılmış bir serviste bağlantıyı hazırlayın. Standart HTTP istemcisi API isteklerini ve JSON yanıtlarını işleyebilir.
Ruby on Rails gibi bir Ruby uygulamasına entegrasyon ekleyin; kendi ürün, sepet ve sipariş karşılama modelinizi kullanın.
Rust arka ucunu bir HTTP istemcisi ve JSON işleme ile bağlayın. Oturumları ve satın alma olaylarını hizmet mimarinize dahil edebilirsiniz.
Tarayıcı tarafında React, Vue, Angular veya sade HTML ve JavaScript kullanabilirsiniz. TypeScript de iletişimi uygulamak için uygundur. Sayfa iframe'i yerleştirir, postMessage olaylarını işler ve kendi arka ucunuza bağlanır.
Ön uç sayfanın görünümü ve sepet tepkilerinden, arka uç ise kimliği doğrulanmış Public API çağrılarından sorumludur. Next.js gibi iki katmanı birleştiren yapılarda kalıcı anahtarları ve oturum oluşturmayı yalnızca sunucu tarafına yerleştirin.
Kendi ödeme adımlarınızı, ödeme sisteminizi, CMS'inizi ve sipariş karşılama sürecinizi koruyabilirsiniz. Uygulama sırasında bunları tasarım verileri ve seçilen Alter Product aracının olaylarıyla bağlarsınız.
Alter Product 3D araçları, tasarım verilerini ve oturum mekanizmalarını sağlar. Arka ucunuz bunları ürünler, müşteri hesapları, sepet ve sipariş yönetimiyle bağlar. Alter Product erişim bilgilerini tarayıcıda açığa çıkarmadan ön ucunuz için aracı uç noktalar oluşturabilirsiniz.
| Katman | Görev |
|---|---|
| Sitenizin ön ucu | iframe'i gösterir, araç iletişimine yanıt verir ve mağaza arayüzünü günceller. |
| Arka ucunuz | Public API isteklerinin kimliğini doğrular, oturum oluşturur, müşteri erişimini denetler ve kendi sepetiniz ya da siparişlerinizle bağlantıları kaydeder. |
| Alter Product Public API | Bağlantı, ürün, araç eşleştirmesi, sipariş ve dosya ile varlıklara erişim işlevlerini sağlar. |
| Gömülü araç | Modeli gösterir; seçilen moda ve hazırlanmış tasarıma göre yapılandırma veya kişiselleştirme sunar. |

Önce tek bir ürün için bağlantıyı ve yerleştirme oturumunu çalıştırın. Ardından seçilen araca göre yapılandırma, tasarım kaydetme ve sipariş işlemlerini ekleyin.
Yerleştirme talimatlarında parametreleri ve örnekleri bulabilirsiniz. postMessage bölümleri sayfayla iletişimi, API belgeleri ise arka uç işlemlerini açıklar.
Ürünü müşterinin kullandığı gibi test edin: sayfanın açılmasından siparişte tasarımın görünmesine kadar. Bilgisayarda ve telefonda, yönetim paneline giriş yapmadan da deneme yapın.
Bir ürünü hazırladıktan sonra tüm süreci tamamlayın. Ancak bundan sonra doğruladığınız ayarları diğer katalog ürünlerine uygulayın.