Click Here Labs, Atlas ile Şekillendirilebilir Ticaretin Kilidini Nasıl Açtı?

WP Engine, şu anda Ajans Ortağı Programımız aracılığıyla WordPress ajanslarının en büyük işbirliğine dayalı topluluğunu kolaylaştırmaktadır.

DE{CODE} 2023'teki bu isteğe bağlı oturumda, WP Engine Agency Partner Click Here Labs'ın Combat Corner'ın çevrimiçi mağazasını yeniden tasarlamak için yeni Atlas BigCommerce Blueprint'i nasıl kullandığını öğreneceksiniz. Ayrıca, kendi Atlas e-Ticaret sitenizi 10 dakika gibi kısa bir sürede oluşturabilmeniz için BigCommerce Blueprint'in bir demosunu alacaksınız!

Konuşmacılar:

• Jonathan Jeter, Click Here Labs Teknik Üretim Direktörü
• Bryan Smith, WP Engine'de Baş Ürün Müdürü

Oturum Slaytları:

Deşifre metni:

BRYAN SMITH: Herkese merhaba. Benim adım, WP Engine'de ana ürün müdürü olan Bryan Smith. Bugün, Click Here Labs'ın Atlas ile biçimlendirilebilir ticaretin kilidini nasıl açtığı hakkında konuşacağız.

Bugün bana Click Here Labs teknik üretim direktörü Jonathan Jeter katılıyor. Oradaki ekibin başına geçiyor. Onlar bir WP Engine ajans ortağı ve son birkaç aydır ilk başsız veya şekil verilebilir ticaret müşterimizi Atlas'a getirmek için çok yakın çalıştığımız bir ortak.

Bir dakika içinde bu örnek olay incelemesine daha fazla gireceğiz, ancak bunu yapmadan önce, şekillendirilebilir geliştirme ile pazarın durumu hakkında biraz konuşmak istiyorum. O kadar şekillendirilebilir ve başsız - burada onları birbirinin yerine kullanıyoruz. Başsız genellikle şekillendirilebilir anlamına gelir.

Ve sadece bu siteler çok performanslı olduğu için onlara olan talep artıyor değil. Büyük ölçüde özelleştirilebilirler ve değişen teknoloji ortamına ve iş sonuçlarınızın sık sık değişebileceği sürekli değişen bir iş ortamına hızla uyum sağlayabilirler. Bugün daha sonra ele alacağımız statik hızda dinamik deneyimler sunarlar.

Ayrıca yeniden platform oluşturmak zorunda kalmadan bunları ölçeklendirebilirsiniz. Bugün sunacağımız örnek olay incelemesinde, Click Here Labs'ın müşterisi aslında e-ticaret arka uçları olan BigCommerce'te kalmayı, WordPress'i CMS'leri olarak entegre etmeyi ve tüm bunları başsız bir vitrine getirmeyi başardı. Ancak tüm bu yeni teknolojiler genellikle maliyeti engelleyici olabilir, bu nedenle son birkaç yılı bu şekilde şantiyeler Atlası ile geliştirmenin en ciddi noktalarını ele alarak geçirdik.

Ve Atlas elbette bir ev sahibinden daha fazlasıdır. Bir ön uç çerçevesinden daha fazlası. API katmanına, özel alanlar eklentisine, yerel geliştirme uygulamasına ve başlamak için ihtiyacınız olan tüm bu şeylere sahiptir. Ama belki de en önemlisi, öğrenen bir topluluğu ve desteği var.

Tüm bu araçlar parmaklarınızın ucundayken, biraz karar verme yorgunluğunuz olduğu için sizi suçlamayız. Parmaklarınızın ucunda çok fazla seçenek varken başlamak bile zor olabilir ve işte tam bu noktada planlar devreye girer.

Bu yüzden planlar geliştirdik ve ihtiyacınız olan tüm kod eklentileri, içerik modelleri, ücretli yapı ile bir başlangıç ​​sitesi kurmanızı sağlıyorlar. Onları 10 dakikadan daha kısa sürede çalıştırabilir ve çalıştırabilirsiniz. Yeni bir projeye başlama sürecini gerçekten kolaylaştırabilirsiniz.

Ayrıca, platformu ve en iyi uygulamalarımızı öğrenmenize de yardımcı olur. Böylece sizi bir sonraki projeye hazırlar, ancak şimdiye kadar sahip olduğumuz planlar, portföy veya blog türü siteler gibi daha statik türde site kullanım durumlarıyla sınırlıydı; dinamik bir vitrin kadar dinamik bir şey yoktu.

İşte bu yüzden BigCommerce planını oluşturduk. Sizin için burada bir dakika içinde demosunu yapacağımız bu taslak – WPGraphQL, Atlas İçerik Modelleyici, Faust JS çerçevesi ve birkaç yeni şeyle birlikte önceden yapılandırılmış olarak geliyor – bir Atlas ticaret blokları eklentisi, ürün verilerini WordPress düzenleyicisine getirmek için ve ardından sizi BigCommerce API'sine bağlayan ve BigCommerce'ten WordPress'e verileri senkronize etmenizi sağlayan bir ticaret bağlayıcısı, bunları senkronize halde tutun.

Onlardan bir içerik modeli oluşturabilir ve o bloğun eklentisini de çalıştırabilirsiniz. Bununla birlikte, neden size bunun nasıl çalıştığını göstermiyorum ve bir demoya geçelim…

Pekala, işte Atlas sayfasındaki WP Engine portalındayız. Böylece, yeni bir Atlas uygulaması oluşturduğunuzda, plandan başlayabilirsiniz ve burada birkaç seçeneğiniz olur. Burada yapacağımız şey, sağdaki BigCommerce planını seçmek.

Ayrıca buradan o vitrini önizleyebilir veya kodu GitHub'da görüntüleyebilirsiniz. Bu planı seçeceğiz ve Devam'a basacağız. Bir sonraki adım, GitHub hesabınıza bağlanmak.

Ve sonra yapacağımız şey, depomuzu sizinkine klonlayacağız. Böylece GitHub hesabınızı, depo adını seçersiniz ve ardından Uygulama Oluştur'a basarız.

Yani bu süreçte birkaç şey olur. İlk olarak, WordPress sitesini hazırlıyoruz. Atlas uygulaması için Atlas kodunu oluşturuyoruz. Ve sonra dağıtılır. Ve bu işlem genellikle yaklaşık beş dakika sürer ama biz burada hızlandırdık.

WordPress sitesi oluşturulduktan sonra, burada ekranda göreceğiniz BigCommerce bağlayıcısına atlayabiliriz. Yapılandırma ekranı - kimlik bilgilerini gireceğiz ve ardından bu ürün senkronizasyonunu başlatabiliriz.

Ve bunu bir Atlas korumalı alan hesabına ve ayrıca bir BigCommerce korumalı alan hesabına bağladım. Ve sahip olduğum ürünleri o BigCommerce hesabına aktarabilirim. Yaklaşık 13 demo ürünüm var.

Bu ilk eşitlemeden sonra güncellemeleri yakalamak için yeniden çalıştırmanız gerekmediğini burada belirtmek isterim. Eklenti, web kancalarını ve gece cron işini destekler. Ve bu ürünlerin içe aktarımı tamamlandığında, görüntüleri de senkronize edecektir.

Sonra gidip ürünlere bakacağız. Pekala, ürünlerimizi yükledik. Bunları burada Ürünler sayfasında görebilirsiniz. Bunlar BigCommerce sitesindeki demo ürünlerdir.

Bunlardan birinin Ayrıntılar sayfasına gireceğiz ve burada gösterdiğim tek şey, getirdiğimiz tüm veri alanları – başlık, resimler, açıklamalar. Hepsi orada.

Yani şimdi, WordPress'te var. Sizin için senkronize edildi. BigCommerce sitesinde değişiklik yaparsınız, anında güncellenir.

Şimdi size Atlas İçerik Modelleyici ile oluşturduğumuz içerik modellerini göstermek istiyorum. Bu sadece bir örnek. Ve sanırım bunlarla bunu aklınızda bulundurun. Bunu nasıl yaptığımızı size göstermek için gerçekten bir başlangıç ​​noktası.

Bu içerik modelleri, burada birazdan inceleyeceğimiz başsız vitrindeki ürün ayrıntıları sayfamıza güç veriyor. Atlas İçerik Modelleyici ile içerik modellemenin ne kadar esnek olduğunun sadece bir örneği. Tamam, şimdi size daha önce bahsettiğimiz Commerce blokları eklentisini göstereceğim.

WordPress'teki blok düzenleyicide Ana sayfaya gideceğiz. Ve burada En Son Ürünümüzü Satın Al bölümünü görüyorsunuz. Burası ticaret blokları.

Yani yapabileceğiniz şey, göstermek istediğiniz blok tipini, en son ürünleri, popüler ürünleri, görüntüleme sayısını seçebilirsiniz. Orada dört gösteriyoruz. Bütün bunlar BigCommerce tarafından geliyor. İşte sayfanın ilerisindeki başka bir örnek – satış öğeleri, bunları nasıl kullanabileceğinize bir alternatif olarak.

Şimdiye kadar içerik modellerini ve blok eklentisini gördük. İşte WordPress sitesinde yüklü olan her şey. Daha önce bahsettiğimiz tüm bu eklentiler.

TAMAM. İşte vitrindeyiz. Bu, URL'de görebileceğiniz başsız vitrinimizdir. Ürün bloklarımızı sayfada görebilirsiniz.

Ve bu basit bir vitrin. Gerçekten bir başlangıç ​​yeri olması gerekiyordu. Ve bu nedenle, mümkün olduğunca basit tutmaya çalıştık. Ardından, Mağaza sayfasına gideceğim.

Burada tüm ürünlerimizi görebilirsiniz. Yani bu sayfa aslında bir içerik modeli, Ürün Detayları sayfası. İncelemeler için altta bir yerimiz olduğunu görebilirsiniz. Bir sonraki adımımız bunu sepete eklemek olacak.

Ve arabanın aslında başsız olduğunu da göreceksiniz. Yani bunların hepsi Atlas ön ucunda. Şimdi, ödeme için BigCommerce'e yönlendiriyoruz. Bu taslağın amaçları doğrultusunda, bunun en mantıklı olduğunu düşündük, ancak geri kalan her şey başsız Atlas ön ucunda.

İşte vitrine geri döndük. İşte Hakkında sayfası – bu farklı sayfa bölümlerini düzenleyerek neler yapabileceğinize dair bir örnek. Böylece onu alabilir, kullanabilir, ondan öğrenebilirsiniz. Buradaki asıl amaç, hızlı bir şekilde başlamanızı sağlamaktır.

Pekala, bu kadar ve bununla birlikte, Click Here Labs'ın bu taslağı nasıl alıp gerçek bir müşteri kullanımı durumu için genişlettiği hakkında daha derinlemesine bilgi vermesi için Jonathan'a ileteceğim. Sana kalmış, Jonathan.

JONATHAN JETER: Teşekkürler Bryan. Planı genişletme hakkında konuşmadan önce, çözümü planlama hakkında biraz tartışmak istedim. Çok esnek şekillendirilebilir bir ticaret çözümüne başlamadan önce, uygun parçaları kullandığımızdan emin olmak için doğru şekilde planladığımızdan emin olmak istiyoruz.

Ve her zaman API belgeleri ve işlevsel gereksinimlerle başlarız. Dolayısıyla bu durumda BigCommerce için, müşterinin mağazasında ihtiyaç duyduğu tüm özelliklerin API aracılığıyla kullanılabilir olduğundan emin olmak için API belgelerini inceledik. Ve olmayanlar için, bu ihtiyaçları nasıl karşılayacağımızı, bu gereksinimleri nasıl karşılayacağımızı planlamamız gerekiyordu.

Bu planın bir parçası olarak, her gereksinimin nerede karşılanacağını belirlemeniz gerekiyor, değil mi? Yerel BigCommerce aracılığıyla mı? WordPress aracılığıyla mı? Oluşturduğunuz ön uç uygulaması veya üçüncü taraf uygulamaları aracılığıyla mı?

Bu durumda bazı kararlar almamız gerekti ve platform çok esnek olduğu için buradaki asıl amaç siteyi hızlandırmak, daha önce de söylediğimiz gibi ön uç uygulamasında statik hıza ulaşmaktı. Bu nedenle, sitenin tüm parçalarının, sitedeki Google'ın göreceği tüm bileşenlerinin başsız ön uç uygulamasında olduğundan emin olmak istedik.

Ve sonra bir göz atmamız gerekiyordu, örneğin- Bryan alışveriş sepeti hakkında konuştu, hesap bölümü hakkında konuştu. Bu farklı şeylerden bahsetti. Bu parçalardan hangilerini farklı sistemlerde yapacaktık? Örneğin, bu durumda alışveriş sepeti, ödeme için, müşteri hesabının bunu yerel uygulama içinde yapmasına karar verdik.

Ardından site içeriği – bunun doğru bir şekilde kategorize edilebildiğinden, müşterinin bu içeriği standart bir WordPress arayüzü aracılığıyla eklemek konusunda rahat hissedebileceğinden emin olmak istedik. Ayrıca ön uçta farklı bir şekilde sunabilmek için bazı verileri WordPress içinde topladık. Bu, BigCommerce'in kendisinde bulunmayan şeyler olabilir ve ardından üçüncü taraf uygulamaları hesaba katmak zorunda kaldık.

CRM'leri için, izleme için, bu tür şeyler için veriler nereden geliyordu ve gidiyordu ve son olarak, bu ön uçta oluşturacağınız bileşenler nelerdir ve bunlar nereye çekilecek? gelen veriler?

Dolayısıyla nihai esneklik, vermeniz gereken çok sayıda karar olması ve bu mağazayı oluşturabilmek için temelde Atlas'ta ve bu durumda BigCommerce'de bulunan tüm araçlarla bir e-ticaret uygulaması oluşturduğunuzu hatırlamanız anlamına gelir. Bu yüzden, neye bulaştığınızı anlamak için bu planı yapmanın çok önemli olduğunu vurgulamak istedim.

Ve bu tartışmaları müşteriyle de yapın ve inşa ettiğimiz şeyin bu olduğunu söyleyin. Yerel uygulamada kalacak olan budur. Ön uçta olacak olan bu.

Parola korumalı parçalar - örneğin, Hesabım, Fatura Geçmişi, bu tür şeyler - yine bunlar, dizine eklenmeyecek şeylerdir. Yani bu ön uç uygulamasında olmak daha az önemli. Bunu anladığınızda ve planı oluşturduğumuzda, artık gitmeye hazırsınız.

Şimdi planı genişletmekten bahsediyoruz, değil mi? Peki buna ne dahil? Burada ön uç uygulamasının başladığını göreceğiz. Ve şimdi, mağazayı benzersiz kılacak, müşterinizin yapması gerekeni yapmasını sağlayacak tüm bu ekstra parçaları oluşturmanız gerekiyor.

Örneğin, BigCommerce'de, yardımcı ürünler, müşteri grupları, bu tür şeyler gibi API'de bulunan bazı yerel işlevler vardır. Ve böylece müşteri, bu eşlik eden ürünleri yönetmek, farklı müşteri gruplarını yönetmek, ürünlerin ne zaman satışa çıkacağını ve indirim kodlarını ve bu tür şeyleri yönetmek için yerel BigCommerce kullanıyor.

Bu verileri alıyoruz ve ön uçta sunuyoruz. Ayrıca, eklentileri BigCommerce'e yüklenen üçüncü taraf uygulamalarımız da vardı, değil mi? Bir ürün özelleştirici var.

Ve sonra, dikkate alınması gereken farklı konumlardan gelen veriler. Ve bu bileşenler daha sonra, örneğin bir Ürün Ayrıntısı sayfasında oluşturulabilir, değil mi? Özelleştirmeye sahip bir ürün varsa, renkleri değiştirebilirsiniz.

Logolar ekleyebilirsiniz. Bu tür şeyler yapabilirsin, değil mi? Bu özelleştirici bunu yapmanızı sağlar. Yani bunlar, üçüncü taraf işlevselliği üzerine inşa edilmiş farklı parçalardır.

Ve son olarak, doğrudan kullanıcı arabirimine yerleştirilmiş işlevsellik var. Örneğin, ürün karşılaştırma matrisi - bunu hepimiz farklı yerlerde gördük. Üç farklı ürünü karşılaştırın, hangi farklı özelliklere, nasıl karşılaştırıldıklarına, ürünleri bir indirimde bir araya getirme yeteneğine, bir paket için indirime bakın. Ve ayrıca, örneğin, yerel BigCommerce'te bulunan ancak bazı nedenlerden dolayı API'nin işlevselliğini yerine getirmediği şeyler vardır.

Ve böylece dosya yükleyici, temelde arka uçta farklı işlevler kullanarak ön uçta oluşturmamız gereken bir şeye örnektir. Yani bunların hepsi o planı genişletmek için oluşturduğunuz şeyler ve bunlardan bazıları genişletilmiş plana veya Bryan'ın burada çok yakında hakkında konuşacağını düşündüğüm premium plana dahil edilecek.

BRYAN SMITH: Teşekkürler Jonathan. Şimdi Atlas yol haritasını çok hızlı ele alacağım. Bunu Şimdi, Sonraki ve Sonra sütunlarına ayırdık.

Şimdi sütununun altında, e-ticarete özel Atlas girişimlerimizi kalın harflerle göreceksiniz. Orada, sol tarafta, canlı olan BigCommerce planı, herkesin hemen şimdi denemesi için mevcut. Ayrıca bir vitrin API'si üzerinde çalışıyoruz.

Bu, WordPress, BigCommerce veya ilgilendiğiniz diğer üçüncü taraf kaynaklardan gelen içeriği bir araya getirecek bir veri katmanıdır. İşte hepsini entegre etmenin bir yolu. Şu anda beta üzerinde çalışıyoruz, bu yüzden ilerledikçe daha fazla ayrıntı için bizi izlemeye devam edin.

Sırada, bir Shopify planı üzerinde çalışıyor olacağız. Bu, BigCommerce ile yaptığımıza benzer bir entegrasyon ama bu durumda Shopify ile olacak. Ve sonra bunu aşarken, odak noktamızı başsız kişiselleştirme ve yerelleştirmeye çevireceğiz. Bunların dinamik vitrinler için gerçekten önemli olduğunu biliyoruz. Ve bu, Atlas ticaret platformuyla sıkı bir şekilde entegre edildiğinden emin olmak istediğimiz bir şey.

Bu nedenle, BigCommerce planına başlamaya hazırsanız, denemek için bugün ücretsiz bir Atlas korumalı alan hesabı açabilirsiniz. Halihazırda bir Atlas hesabınız varsa, plan elbette sizin için de mevcuttur. Git bugün dene.

Bir sonraki projenizde deneyin. Haydi ne düşündüğünü söyle. Herkese teşekkürler. Bugün ayırdığınız zaman için gerçekten minnettarız. İyi günler.