İnternette İstediğiniz Gibi Çevrimiçi Para Kazanma!

Magento 2’de Ödeme Benzeri Adım İlerleme Çubuğu Oluşturmayı Öğrenin – Tam Kod + Açıklama

Şu yazıyı okuyorsunuz: Magento 2’de Ödeme Benzeri Adım İlerleme Çubuğu Oluşturmayı Öğrenin – Tam Kod + Açıklama

İstek ? Bu blog yazısında bunu yapmanın ayrıntılı bir yöntemini paylaşacağım. 👇

Sonsuz çevrimiçi formları doldurmak yorucu olabilir.

Kabul edelim: Hepimiz bu kadar uzun formlardan birçok kez kurtulmuşuzdur. Son deneyim çok zayıf! Magento 2 mağazası sahibiyseniz Magento 2 formlarına ödeme benzeri bir ilerleme çubuğu ekleyerek müşterilerinizin bu deneyimini iyileştirebilirsiniz.

Magento 2’deki ödeme ilerleme çubuğuna hepimiz aşinayız; burada üstteki çubuk, müşterilerin tamamlanan/tamamlanmayan adımlarını gösterir.

Magento 2 ödemesindeki ilerleme çubuğu tüm ayrıntıları tek sayfada birleştirir. Magento 2’ye bir ilerleme çubuğu eklemek, form dolumlarını artırmak için etkili bir strateji olabilir. Bizim gibi diğer kullanıcılar da uzun formları doldurmaktan nefret ediyor. Formu küçük adımlara bölmek sıkıcı sürecin kolay görünmesini sağlayabilir.

Hadi derinlemesine inceleyelim.

Magento 2’de ödeme benzeri adımlar ilerleme çubuğu oluşturma kodu

Magento 2’de kutuya benzer bir adım ilerleme çubuğu oluşturmak kolaydır.

Bunu yapmak için .phtml dosyasındaki ödeme ilerleme çubuğu için Magento 2 opc-progress-bar ana sınıfını yeniden kullanabiliriz.

  • Aşama 1
  • Adım 2 < /li>
  • Aşama 3
  • ul>

    • Aşama 1

    • Adım 2

    • Aşama 3

    Yukarıdaki kod parçasını değiştirin ve ilerleme çubuğunu görüntülemek istediğiniz sayfanın .phtml dosyasına ekleyin.

    • Yukarıdaki kodda opc-progress-bar sınıfı, HTML etiketindeki ana ilerleme çubuğuna referans verir
    • opc-progress-bar-item sınıfı bireysel adımı ifade eder.
    • _active sınıfı etikete eklenir
    • Şu anda etkin olan adım için.
    • _complete sınıfı etikete eklenir
    • Tamamlanan adımlar için.

    İhtiyaçlarınıza göre Magento 2’de ödeme benzeri ilerleme çubuğunu görüntülemek için yukarıdaki kodu özelleştirin!

    Hala sorularınız varsa yorum yapmaktan çekinmeyin. 😀

    Bu öğreticiyi sosyal ağlar aracılığıyla Magento topluluğunda paylaşmayı unutmayın.

    Teşekkür ederim! 🍀