Ana içeriğe geç

Müşteri Hesabı Paneli — B2B Duyarlı İş Akışı

Vertex, kim oturum açtıysa otomatik olarak ona uyum sağlayan eksiksiz bir müşteri hesabı paketi sunar. NET-30 koşulları ve atanmış bir satış temsilcisi olan bir B2B satın alma alıcısı bir panel görür. Bir B2C son müşteri farklı bir panel görür. Çoklu lokasyonlu bir borç hesapları alıcısı, şirket değiştiricili üçüncü bir varyantı görür. Hepsi aynı tema dosyalarından — uygulama yok, ikinci bir şablon ailesi yok, özel kod yok.

Bu kılavuz, Vertex'teki her müşteri hesabı ekranını, B2B duyarlı davranışları, hızlı yeniden sipariş akışını, çoklu lokasyon alıcı deneyimini ve her ekranın bölüm düzenleyici aracılığıyla nasıl özelleştirileceğini kapsar.

Yerel + B2B duyarlı

Vertex'in müşteri hesabı, Shopify'ın yeni müşteri hesapları üzerine inşa edilmiştir (B2B'nin gerektirdiği, Shopify tarafından barındırılan parolasız deneyim) — üzerine Vertex tema stilizasyonu ve B2B duyarlı bölümler eklenmiştir. Özel bir temanın inceliğini ve her bölümü diğer herhangi bir sayfa gibi düzenleme esnekliğini elde edersiniz.

Müşteri hesabı paketinde neler gelir​

ŞablonNe yapar
customers/account.jsonPanel. B2B duyarlı: B2B alıcıları için şirket bilgileri + ödeme koşulları + satış temsilcisi kartı + hızlı yeniden sipariş gösterir. B2C / misafirden dönüştürülmüş müşteriler için sipariş listesi + adres bağlantısı gösterir.
customers/order.jsonTek sipariş görünümü. Sipariş başlığı (numara, tarih, durum, toplam), satır başına "Bu öğeyi yeniden sipariş et" düğmeleri içeren satır öğeleri, en altta tam sipariş "Tümünü yeniden sipariş et" düğmesi, sevkiyat + fatura adresleri, sipariş karşılama durumu.
customers/addresses.jsonAdres CRUD'u. Adres defterini ekle / düzenle / sil / varsayılan olarak ayarla. Ülke duyarlı alanlar, eyalet/il doğrulamasıyla.
customers/login.jsonOturum aç. E-posta + parola + "Parolanızı mı unuttunuz?" + "Hesap oluştur" CTA'ları.
customers/register.jsonHesap oluştur. Ad / soyad, e-posta, parola. RFQ sayfasına yönlendiren açılabilir B2B "Ticari hesap için başvur" CTA'sı.
customers/activate_account.jsonDavetiye etkinleştirme. Satıcı tarafından Shopify yöneticisi aracılığıyla oluşturulan bir müşteri hesabını etkinleştirir.
customers/reset_password.jsonParola sıfırla. İki adımlı (sıfırlama e-postası isteyin, ardından yeni parolayı girin).

Her şablon, Vertex tasarım sisteminde yeniden tasarlanmıştır — Vertex'in mağazanın geri kalanını besleyen tasarım belirteçleri için kullandığı dahili isim: boşluk skalası, tip skalası, yarıçap skalası, gölge skalası, düğme sistemi, giriş sistemi. Böylece müşteri hesabı ayrı bir uygulama gibi hissettirmez — mağaza dekoru gibi görünür ve davranır.

B2B customer dashboard: company, NET-30, sales rep, reorder

Shopify tarafından barındırılan müşteri hesapları

Bu, B2B alıcılarının gördüğü yeni, Shopify tarafından barındırılan müşteri hesabı deneyimidir — mağaza adınız ve sevkiyat adresinizle markalanmış, üstte sipariş geçmişi ve profil sekmeleriyle. Görünüm doğrudan Shopify'dan gelir, Vertex temasından değil. Satış temsilcisi kartı ve hızlı yeniden sipariş kısayolları Vertex tarafından üzerine eklenir.

B2B duyarlı panel​

customers/account.json merkez parçadır. Oturum açmış müşterinin B2B durumunu algılar ve iki düzenden birini render eder.

Algılama mantığı​

Panelin bölümü şu şekilde Liquid kullanır (basitleştirilmiş):

{% if customer.b2b? and customer.current_company %}
  {% render 'account-b2b-dashboard', customer: customer %}
{% else %}
  {% render 'account-b2c-dashboard', customer: customer %}
{% endif %}

İki Liquid sinyali kontrol edilir:

  • customer.b2b? — alıcı bir B2B hesabı aracılığıyla oturum açtığında doğrudur
  • customer.current_company — şu anda temsil ettikleri şirket (katalog, fiyatlandırma, ödeme koşulları, sevkiyat adresini yönlendirir)

Her ikisi de mevcutsa, B2B paneli render olur. Aksi takdirde, B2C paneli render olur. Uygulama yok, metafield kurulumu yok, JavaScript bayrağı yok — tüm algılama sunucu tarafında Shopify-yereldir.

B2B panel düzeni​

Oturum açmış bir B2B alıcısı için panel şunları gösterir:

1. Karşılama başlığı​

  • Merhaba, {first_name} — sıcak selamlama
  • Şirket adı — customer.current_company.name öğesinden çekilir
  • Şirket rozetleri — NET-30 / NET-60 / NET-90 (current_company.payment_terms_template öğesinden), Vergi muafiyetli (current_company.tax_exemptions öğesinden)
  • Mevcut sevkiyat adresi — alıcının şu anda seçili sevkiyat adresinin kısa özeti

2. Satış temsilcisi kartı (tam varyant)​

Şirket başına satış temsilcisi metafield'larını doldurduysanız (vertex.rep_name / vertex.rep_email / vertex.rep_phone, Customers ▸ Companies ▸ [şirket] ▸ Metafields altında), panel tam satış temsilcisi kartı render eder — başlıktaki daha küçük pill'den daha büyüktür.

Kart şunları içerir:

  • Temsilci adı (baş harf avatarıyla)
  • Temsilci e-postası (e-posta için tıkla)
  • Temsilci telefonu (arama için tıkla)

Doldurma için Metafield kurulum kılavuzuna bakın.

Şirket başına satış temsilcisi

Satış temsilcisi kartı, her şirket için doldurduğunuz temsilci verilerini kullanır. Aynı şirkete bağlı tüm alıcılar aynı temsilciyi görür.

3. Hızlı yeniden sipariş listesi​

En sevilen B2B özelliği. Alıcının son 5 siparişini şunlarla gösterir:

  • Sipariş numarası + tarih
  • Toplam + öğe sayısı
  • Tümünü yeniden sipariş et düğmesi (tek tıklama — her satırı mevcut fiyatlarla sepete geri ekler)
  • Sipariş durumu rozeti (Karşılandı / Kısmi / Karşılanmadı / İptal edildi)
  • Tam tek sipariş görünümüne bağlantı

Bu, assets/b2b-quick-reorder.js tarafından desteklenir — vanilya JS, çerçeve yok, uygulama yok. Düğme her satırı sırayla /cart/add.js'ye POST eder, alıcının kataloğuna karşı doğrular (artık atanmamış öğeleri atlar), ardından sepet çekmecesini yeniler veya /cart'a yönlendirir.

Üretimden kaldırılmış veya katalogdan çıkarılmış öğeler

Orijinal siparişten bir satır öğesi artık alıcının kataloğunda yoksa, yeniden sipariş scripti onu atlar ve küçük bir not gösterir: "#1234 numaralı siparişten 2 öğe artık mevcut değil ve atlandı." Alıcılar yine de sepeti ödemeden önce inceleyebilir.

4. Hızlı bağlantılar ızgarası​

Kanonik B2B hesap eylemlerinin bir ızgarası:

  • Tüm siparişler — tam sipariş geçmişi
  • Adresler — sevkiyat adreslerini yönet
  • Toplu sipariş — /pages/bulk-order bağlantısı (yapıştır-sepete)
  • Teklif iste — /pages/rfq bağlantısı
  • Katalog — B2B kataloglarına göre filtrelenmiş mağaza katalogu bağlantısı

5. Son aktivite​

Alıcının son 10 eyleminin sıkıştırılmış zaman çizelgesi:

  • Verilen siparişler
  • Eklenen / güncellenen adresler
  • Gönderilen teklif istekleri (RFQ form gönderimlerini Shopify Flow veya webhook'lar aracılığıyla müşteri kaydına bağlarsanız)

B2C panel düzeni​

B2B olmayan bir müşteri için panel daha basittir:

  • Karşılama başlığı (şirket bilgisi yok, ödeme koşulları rozeti yok)
  • Sipariş listesi (tam sayfalama)
  • Varsayılan adres kartı, düzenleme/yönetme bağlantılarıyla
  • Satış temsilcisi kartı yok (B2C müşterileri atanmış bir temsilci almaz)
  • Hızlı yeniden sipariş listesi yok (tek bir "Siparişleri görüntüle" CTA'sı — alıcılar tek sipariş görünümünden yeniden sipariş verir)

B2C paneli, amaca özel olarak hızlı ve dağınıklıksız olacak şekilde inşa edilmiştir — çoğu B2C müşterisi şirket dekoruyla etkileşime girmek yerine bir sipariş durumunu kontrol etmek ister.

Hızlı yeniden sipariş akışı​

Hızlı yeniden sipariş iki yüzeye bölünmüştür:

Yüzey 1 — Panel son 5 sipariş listesi​

(Yukarıda açıklandı.) Sipariş başına tek tıklamayla "Tümünü yeniden sipariş et", en son 5'i yüzeyler. Her hafta aynı kiti yeniden sipariş eden alıcılar bunu sever — oturum açtıktan sonra tamamen yüklenmiş bir sepete iki tıklama uzaklıktadır.

Yüzey 2 — Tek sipariş görünümü (customers/order.json)​

Eski siparişler için veya yalnızca bir alt kümeyi yeniden sipariş etmek için, tek sipariş görünümü şunları sunar:

  • Her satırda Satır başına "Bu öğeyi yeniden sipariş et" düğmesi — orijinal miktarda bir varyant ekler
  • Satır başına miktar girişi, böylece alıcı eklemeden önce miktarı değiştirebilir (orijinal sipariş miktarına varsayılan)
  • En altta tam sipariş "Tüm öğeleri yeniden sipariş et" düğmesi — her satırı orijinal miktarda ekler

Bu, panel "Tümünü yeniden sipariş et" ile aynı kalıptır — aynı assets/b2b-quick-reorder.js, aynı katalog doğrulaması, aynı atlanan öğeler bildirimi. Sadece daha ince ayrıntıda.

JS nasıl çalışır​

assets/b2b-quick-reorder.js şunları yapan kendine yeten bir modüldür:

  1. Düğmenin data-order-id'sinden sipariş kimliğini okur
  2. Shopify'ın /cart/add.js uç noktası aracılığıyla siparişin satır öğelerini getirir (POST toplu işlenmiş)
  3. Atlanan varyantları takip eder (katalogdan kaldırılmış / stokta yok / üretimden kaldırılmış)
  4. Bir toast bildirimi gösterir: "Sepete 12 öğe eklendi. 2 öğe atlandı."
  5. /cart'a yönlendirir veya sepet çekmecesini açar (tema ayarına göre)

Üçüncü taraf uygulama, proxy uygulaması veya app-block bağımlılığı yoktur. Tüm akış Shopify-yerel artı vanilya JS.

Yeniden sipariş güncel fiyatlandırmayı kullanır

Yeniden siparişler, alıcının tarihsel sipariş fiyatını değil, mevcut katalog fiyatını kullanır. Bu B2B için önemlidir: sözleşmeli fiyatlar değişir ve eski bir fiyatla yeniden sipariş vermek yeni katalogla çakışır. Bir alıcının eski fiyatın onaylanmasına ihtiyacı varsa, satış temsilcisiyle iletişime geçmeli ve bir teklif (RFQ) sunmalıdır.

Çoklu lokasyon alıcıları​

Bazı B2B alıcılar birden fazla şirkete bağlıdır (örn. 5 yan kuruluş için sipariş veren kurumsal bir borç hesapları yöneticisi). Bu alıcılar için Vertex, mobil çekmece altbilgisinde bir şirket değiştirici render eder.

Algılama​

{% if customer.company_available_locations.size > 1 %}
  {% render 'company-switcher' %}
{% endif %}

Değiştirici, yalnızca alıcının erişilebilir birden fazla şirket-lokasyonu varsa render olur. Tek şirketli alıcılar bunu görmez — temiz UI.

Değiştirme nasıl çalışır​

Alıcı farklı bir şirket-lokasyonu seçtiğinde:

  1. Vertex, Shopify'ın o lokasyon için döndürdüğü url_to_set_as_current adresine POST gönderir
  2. Shopify sayfayı oturumdaki yeni şirketle yeniden yükler
  3. Katalog, fiyatlandırma, ödeme koşulları, sevkiyat adresi, vergi muafiyeti durumu yeni şirkete geçer
  4. Uyumluysa sepet korunur; uyumsuzsa uyarıyla temizlenir

Bu tamamen yerel — uygulama yok, JS durum yönetimi yok, manuel senkronizasyon yok. Shopify sunucu tarafı şirket değiştirmeyi yönetir.

Değiştirici nerede render olur​

  • Masaüstü (≥1170px) — birden fazla şirket mevcutsa amber B2B karşılama çubuğunda (başlığın üstünde)
  • Mobil + tablet (<1170px) — hamburger çekmece altbilgisinin altında, dil / para birimi pill'lerinin üstünde

Değiştirici, Vertex'teki diğer her açılır menüyle aynı <details> + özel panel kalıbını kullanır — sıfır yerel <select> öğesi, tam klavye gezintisi, AT dostu.

Giriş / kayıt / etkinleştirme / sıfırlama şablonları​

Tüm kimlik doğrulama ekranları Vertex tasarım sisteminde yeniden tasarlandı. Tutarlı bir görsel dili paylaşırlar:

  • Mağaza başlık fontu + gövde fontuyla ortalanmış kart düzeni
  • Kartın üstünde logo + küçük başlık
  • Tam genişlik girişlerle tek sütunlu form (52 piksel dokunma hedefleri, görünürlük halkası odağı, üstten etiket)
  • Mağazanın vurgu renginde birincil CTA düğmesi
  • Altta ikincil bağlantılar — "Parolanızı mı unuttunuz?", "Hesap oluştur", "Zaten hesabınız var mı?"
  • Kartın altında mağaza altbilgisi (hafif — yalnızca yasal bağlantılar + telif hakkı)

customers/login.json​

  • E-posta + parola
  • "Parolanızı mı unuttunuz?" bağlantısı → /account/login#recover
  • "Hesap oluştur" CTA → /account/register
  • (Opsiyonel) Shopify yöneticisinde etkinleştirdiyseniz sosyal sağlayıcılarla oturum açma
  • (B2B eklemesi) — küçük not: "Ticari hesap mı gerekiyor? Erişim isteyin →"

customers/register.json​

  • Ad, soyad, e-posta, parola
  • "Hesap oluştur" CTA
  • (B2B eklemesi) — küçük not: "Mevcut ticari müşteri mi? Oturum aç →"

Standart Shopify davranışı: yeni hesaplar oturum açabilmeden önce e-posta doğrulamasından geçer. Yeni B2B hesapları, satıcı tarafından Settings ▸ Customers ▸ Companies aracılığıyla oluşturulur — kendileri kayıt olmaz.

customers/activate_account.json​

Satıcı tarafından davet edilen müşteriler için. Davet e-postasından bu sayfaya inerler ve parolalarını ayarlarlar.

customers/reset_password.json​

Tek sayfada iki ekran:

  1. Sıfırlama isteği — yalnızca e-posta girişi + "Sıfırlama bağlantısı gönder" CTA
  2. Yeni parola ayarla — yeni parola + parolayı onayla + "Parolayı güncelle" CTA (e-posta bağlantısına tıkladıktan sonra)

Tema düzenleyici aracılığıyla özelleştirme​

Müşteri hesabı ekranları tema düzenleyicide düzenlenebilir; burada Vertex küçük bir bölüm ayarları kümesi sunar. Buradaki özelleştirme kasıtlı olarak odaklıdır — panelin yapısı sabittir ve aşağıdaki kontroller Vertex'in sunduğu kontrollerdir.

Paneli tema düzenleyicide açın​

  1. Online Store ▸ Themes ▸ Customize
  2. Üst şablon açılır menüsünde, Customers ▸ Account öğesini seçin
  3. Tema düzenleyici artık hesap panelini sol kenar çubuğundaki Account bölümüyle render eder

Account bölümü özelleştirmeyi kasıtlı olarak küçük tutar — her ikisi de bölümün Layout başlığı altında olmak üzere tam olarak iki ayar vardır:

ÖzelleştirNasıl
Recent orders to showBölüm ayarları → "Recent orders to show" → hızlı yeniden sipariş listesinin kaç son sipariş gösterdiğini kontrol eder. Aralık 3–10, varsayılan 5.
Show Quick actions cardBölüm ayarları → "Show Quick actions card" → hızlı eylemler kartını açar veya kapatır (varsayılan açık).
Satış temsilcisi kartı görünürlüğüOtomatik — kart, şirketin vertex.rep_name metafield'ı doldurulduğunda ve alıcı oturum açtığında görünür; B2C müşterileri için ve B2C-only modunda gizlenir. Bölüm başına anahtar yoktur.
Hesap sayfası içeriği temadan değil Shopify'dan kontrol edilir

Vertex'in paneli Shopify'ın yeni müşteri hesapları içinde render olur. Karşılama, sipariş ve profil sekmeleri ve genel sayfa kromu doğrudan Shopify'dan gelir — markalamayı (mağaza adı, logo, renkler) bu bölümde değil, Shopify yöneticisindeki Settings ▸ Customer accounts altında düzenlersiniz. Yukarıdaki iki ayar, Vertex'in üzerine kattığı tek tema düzeyindeki kontrollerdir.

Tek sipariş görünümü için (the Order bölümü) bir ayar vardır:

ÖzelleştirNasıl
Show print invoice linkBölüm ayarları → "Show print invoice link" → sipariş detay sayfasındaki fatura yazdırma bağlantısını açar veya kapatır (varsayılan açık).

İlgili okuma​

Özet​

  • Vertex'in müşteri hesabı paketi B2B duyarlıdır — aynı şablonlar, iki düzen, sunucu tarafında otomatik algılanır.
  • B2B paneli şirket bilgilerini, ödeme koşulları rozetini, tam satış temsilcisi kartını, hızlı yeniden sipariş ile son 5 siparişi ve hızlı bağlantılar ızgarasını yüzeye çıkarır.
  • B2C paneli amaca özel olarak hızlıdır — sadece siparişler + varsayılan adres.
  • Hızlı yeniden sipariş, panelden VE tek sipariş görünümünden çalışır, assets/b2b-quick-reorder.js (vanilya, uygulama yok) tarafından desteklenir.
  • Çoklu şirketli alıcılar, mobil çekmece altbilgisinde + masaüstü karşılama çubuğunda bir şirket değiştirici alır.
  • Giriş / kayıt / etkinleştirme / sıfırlama şablonları Vertex tasarım sisteminde yeniden tasarlandı — mağazayla görsel olarak tutarlı.
  • Account bölümü iki tema ayarı sunar (son sipariş sayısı ve hızlı eylemler kartı); Order bölümü bir fatura yazdırma anahtarı ekler.