Odoo Web Sitesi Tema Eğitimi

Odoo özgürlüğü destekliyor. Bu bir tasarımcının daha ileri gitme özgürlüğü ve kullanıcının her şeyi kendi ihtiyaçlarına göre özelleştirme özgürlüğüdür.

Kendi temanızı oluşturmaya hazır mısınız? İşte bu Harika. Başlamadan hemen önce bilmeniz gereken bazı şeyler. Bu öğretici bir Odoo teması oluşturmak için bir rehberdir.

Web tasarımcıları için giriş
Odoo’yu ilk kez kullanan bir web tasarımcısıysanız, doğru yerdesiniz. Bu giriş, Odoo tema oluşturmanın temellerini özetleyecek.

Odoo’nun ekibi güçlü ve kullanımı kolay bir çerçeve oluşturdu. Bu araç setini kullanmak için özel sözdizimi bilmenize gerek yoktur.

Ortak CMS’den Odoo’ya
Her zaman aynı şekilde düşünür ve çalışırsanız, muhtemelen aynı sonuçları alırsınız. Tamamen yeni bir şey istiyorsanız, farklı bir şey deneyin.

Peki Header.php dosyam nerede?
Bu genellikle WordPress veya Joomla ile çalışan ve ilk kez Odoo’ya gelen bir web tasarımcısının ilk sorusudur.

Gerçekten de, ortak CMS’leri kullanırken, web siteniz için temel bir yapı oluşturmak için birkaç dosyayı (header.php, page.php, post.php vb.) Kodlamanız gerekir. Bu sistemlerle, bu temel yapı, CMS’nizde uyumluluk sağlamak için zaman içinde güncellemeniz gereken bir tasarım temeli görevi görür. Yani, dosyaları kodlamak için saatler geçirdikten sonra bile, tasarıma henüz başlamadınız.

Ama bu durum, Odoo temaları oluşturmak için geçerli değildir.

Tema tasarımının basit (ve güçlü) olması gerektiğini düşünüyoruz. Web Sitesi oluşturucusunu oluşturduğumuzda, mevcut olanlara güvenmek yerine sıfırdan başlamaya karar verdik. Bu yaklaşım bize tasarımcılar için gerçekten önemli olan şeylere odaklanma özgürlüğü verdi: stiller, içerik ve arkasındaki mantık. Artık teknik şeylerle uğraşmaya pek gerek yok!

Odoo varsayılan tema yapısı
Odoo varsayılan bir tema yapısı ile birlikte gelir. Minimal yapı ve düzen sağlayan çok temel bir “temadır”. Yeni bir tema oluşturduğunuzda bunu genişletiyorsunuz. Gerçekten de kurulumunuzda her zaman etkindir ve tam olarak yukarıda bahsettiğimiz CMS’nin temel yapısı gibi davranır, ancak onu oluşturmanız gerekmez. Odoo kurulumunuzda otomatik olarak yükseltilecek ve Web Sitesi Oluşturucu modülüne dahil olduğundan, her şey varsayılan olarak sorunsuz bir şekilde entegre şekilde çalışacaktır.

Sonuç olarak, bu yapı entegrasyon ve işlevsellik sağlama işini yaparken tasarıma odaklanmakta tamamen özgürsünüz.

Ana Özellikler

  • Basic layouts for pages, blog and eCommerce
  • Website Builder integration
  • Basic Snippets
  • Automatic Less/Sass compiling
  • Automatic Js and CSS minification and combination

Ana Teknolojiler:

  • Twitter Bootstrap
  • jQuery
  • jQuery UI
  • underscore.js

“Modüler” Düşünme
Odoo teması HTML veya PHP dosyaları içeren bir klasör değil, XML ile yazılmış modüler bir çerçevedir. Daha önce hiç XML dosyalarıyla çalışmadınız mı? Endişelenmeyin, öğreticiyi izledikten sonra, yalnızca temel HTML bilgisiyle ilk temanızı oluşturabileceksiniz.

Klasik web tasarım iş akışlarını kullanarak, genellikle tüm sayfanın düzenini kodlarsınız. Bunun sonucu “statik” bir web sayfasıdır. İçeriği elbette güncelleyebilirsiniz, ancak müşterinizin temel değişiklikler yapmak için bile çalışmanız gerekecek.

Odoo için temalar oluşturmak tamamen bir perspektif değişikliğidir. Bir sayfanın tüm düzenini tanımlamak yerine, kullanıcının bunları nerede “sürükleyip bırakacağını” seçmesine ve sayfa düzenini kendi başlarına oluşturmasına izin veren bloklar (snippet’ler) oluşturabilirsiniz. Biz buna modüler tasarım diyoruz.

Bir Odoo temasını, yaratmanız ve şekillendirmeniz gereken öğelerin ve seçeneklerin “listesi” olarak düşünün. Bir tasarımcı olarak hedefiniz, son kullanıcının onları nereye yerleştirmeyi seçtiğinden bağımsız olarak harika bir sonuç elde etmek için bu öğeleri biçimlendirmektir.

“Liste” öğelerimizi inceleyelim:

Snippets (veya yapı taşları)
Bir parça HTML kodu. Kullanıcı, yerleşik Web Sitesi Oluşturucu arayüzümüzü kullanarak bunları sürükleyip bırakacak, değiştirecek ve birleştirecektir. Her snippet için seçenek ve stil kümeleri tanımlayabilirsiniz. Kullanıcı bunlardan kendi ihtiyaçlarına göre seçim yapacaktır.

Sayfalar
Bunlar normal web sayfalarıdır, ancak son kullanıcı tarafından düzenlenebilir olmaları ve parçacıkları içine sürükleyerek kullanıcının “doldurabileceği” boş bir alan tanımlayabilirsiniz.

Stiller
Stiller standart CSS dosyaları (veya Less / Sass) kullanılarak tanımlanır. Bir stili varsayılan veya isteğe bağlı olarak tanımlayabilirsiniz. Varsayılan stiller temanızda her zaman etkindir, isteğe bağlı stiller kullanıcı tarafından etkinleştirilebilir veya devre dışı bırakılabilir.

İşlevsellikler
Odoo’nun modülerliği sayesinde her şey daha da kişiselleştirilebilir. Bu, yaratıcılığınız için sonsuz olasılıklar olduğu anlamına gelir. İşlevler eklemek kolaydır ve son kullanıcıya özelleştirilebilir seçenekler sunmak kolaydır.

Odoo’nun XML dosyaları, genel bakış

Herhangi bir Odoo XML dosyası kodlama spesifikasyonlarıyla başlar. Bundan sonra, kodunuzu bir <odoo> etiketine yazmanız gerekir.

[XML]
<?xml version="1.0" encoding="utf-8" ?>
<odoo>

    ## YOUR CODE HERE

</odoo>

Oluşturduğunuz hemen hemen her öğe ve seçenek, bu örnekte olduğu gibi bir <template> etiketinin içine yerleştirilmelidir.

[XML]
<template id="my_title" name="My title">
  <h1>This is an HTML block</h1>
  <h2 class="lead">And this is a subtitle</h2>
</template>

Önemli
şablonun ne anlama geldiğini yanlış anlamayın. Bir şablon etiketi yalnızca bir parça html kodu veya seçeneği tanımlar – ancak öğelerin görsel bir düzenlemesiyle çakışması gerekmez.

Önceki kod bir başlık tanımlar, ancak bu şablon Odoo varsayılan yapısının herhangi bir bölümü ile ilişkili olmadığından hiçbir yerde görüntülenmez. Bunu yapmak için xpath, qWeb veya her ikisinin bir kombinasyonunu kullanabilirsiniz.

Kendi kodunuzla ne kadar doğru genişleteceğinizi öğrenmek için öğreticiyi okumaya devam edin.

Temanızı güncelleyin
XML dosyaları yalnızca temayı yüklediğinizde yüklendiğinden, bir xml dosyasında her değişiklik yaptığınızda yeniden yüklemeyi zorlamanız gerekir.

Bunu yapmak için modül sayfasındaki Yükselt düğmesini tıklayın.

Tema modülü oluşturma
Odoo’nun temaları modüller gibi paketlenir. Şirketiniz veya müşteriniz için çok basit bir web sitesi tasarlasanız bile, temayı bir Odoo modülü gibi paketlemeniz gerekir.

Ana tema klasörü
Bir klasör oluşturun ve şöyle adlandırın: theme_ ve ardından temanızın adı.
manifest.py
Boş bir belge oluşturun ve bu klasörü manifest.py olarak klasörünüze kaydedin. Bu, temanız için yapılandırma bilgilerini içerecektir.
init.py
Başka bir boş dosya oluşturun ve init.py olarak adlandırın. Bu zorunlu bir sistem dosyasıdır. Oluşturun ve boş bırakın.
views ve static klasörleri
Bunları ana tema klasörü içinde oluşturun. Görünümlerde, snippet’lerinizi, sayfalarınızı ve seçeneklerinizi tanımlayan xml dosyalarınızı yerleştirirsiniz. statik klasör stiliniz, resimleriniz ve özel js kodunuz için doğru yerdir.

Önemli
Odoo ve init dosya adlarının başında iki, sonunda iki alt çizgi karakteri kullanın.

Nihai sonuç şöyle olmalıdır:


manifest.py dosyasını düzenleyin
Oluşturduğunuz manifest.py dosyasını açın ve aşağıdakileri kopyalayın / yapıştırın:

{
  'name':'Tutorial theme',
  'description': 'A description for your theme.',
  'version':'1.0',
  'author':'Your name',

  'data': [
  ],
  'category': 'Theme/Creative',
  'depends': ['website', 'website_theme_install'],
}

İlk dört mülkün değerini istediğiniz herhangi bir şeyle değiştirin. Bu değerler, Odoo’nun arka ucundaki yeni temanızı tanımlamak için kullanılacaktır.

Data özelliği xml dosyaları listesini içerecektir. Şu anda boş, ancak oluşturulan yeni dosyaları ekleyeceğiz.

kategori, modül kategorinizi (her zaman “Tema”) ve eğik çizgiden sonra alt kategoriyi tanımlar. Odoo Apps kategorileri listesinden bir alt kategori kullanabilirsiniz. (Https://www.odoo.com/apps/themes)

depends, temamızın düzgün çalışması için gereken modülleri belirtir. Eğitim temamız için, yalnızca yüklemek / güncellemek için web sitesine ve website_theme_install’a ihtiyacımız var. Bloglama veya e-Ticaret özelliklerine de ihtiyacınız varsa, bu modülleri de eklemeniz gerekir.

...
'depends': ['website', 'website_theme_install', 'website_blog', 'sale'],
...

Temanızı yükleme
Temanızı yüklemek için, tema klasörünüzü Odoo kurulumunuzdaki eklentilerin (addons klasörü) içine yerleştirmeniz yeterlidir.

Bundan sonra, Odoo Web Sitesi modülüne gidin, Yapılandırma ‣ Ayarlar’a gidin.

Web sitesi bölümünün altında Bir tema seçin düğmesini tıklayın, ardından temanızın üzerine gelin ve Bu temayı kullan’ı tıklayın.

Bir Odoo sayfasının yapısı
Odoo sayfası, iki tür öğenin, çapraz sayfaların ve benzersiz öğelerin birleşiminin görsel sonucudur. Varsayılan olarak, Odoo size bir Üstbilgi ve Altbilgi (sayfalar arası) ve sayfanızı benzersiz kılan içeriği içeren benzersiz bir ana öğe sağlar.

Sayfalar arası öğeler (header ve footer) her sayfada aynı olacaktır. Ama benzersiz öğeler yalnızca belirli bir sayfayla ilgilidir.

Varsayılan düzeni incelemek için Web Sitesi Oluşturucu’yu kullanarak yeni bir sayfa oluşturmanız yeterlidir. İçerik ‣ Yeni Sayfa’yı tıklayın ve bir sayfa adı ekleyin. Tarayıcınızı kullanarak sayfayı inceleyin.

<div id=“wrapwrap”>
  <header />
  <main />
  <footer />
</div>

Varsayılan Üstbilgiyi / Header’ı Genişlet
Varsayılan olarak, Odoo üstbilgisinde duyarlı bir gezinme menüsü ve şirketin logosu bulunur. Kolayca yeni öğeler ekleyebilir veya mevcut öğeleri şekillendirebilirsiniz.

Bunu yapmak için, görünümler klasörünüzde bir layout.xml dosyası oluşturun ve varsayılan Odoo xml işaretlemesini ekleyin.

<?xml version="1.0" encoding="utf-8" ?>
<odoo>

</odoo>

Aşağıdaki kodu kopyalayıp yapıştırarak <odoo> etiketine yeni bir şablon oluşturun.

<!-- Customize header  -->
<template id="custom_header" inherit_id="website.layout" name="Custom Header">

  <!-- Assign an id  -->
  <xpath expr="//div[@id='wrapwrap']/header" position="attributes">
    <attribute name="id">my_header</attribute>
  </xpath>

  <!-- Add an element after the top menu  -->
  <xpath expr="//div[@id='wrapwrap']/header/nav" position="after">
    <div class="container">
      <div class="alert alert-info mt16" role="alert">
        <strong>Welcome</strong> in our website!
      </div>
    </div>
  </xpath>
</template>

İlk xpath başlığa my_header kimliğini ekler. Bu öğeye css kurallarını hedeflemek ve sayfadaki diğer içeriği etkilemekten kaçınmak en iyi seçenektir.

Uyarı
Varsayılan öğeler niteliklerini değiştirirken dikkatli olun. Temanız varsayılan temayı genişleteceğinden, değişiklikleriniz gelecekteki Odoo’nun güncellemesinde öncelikli olacaktır.

İkinci xpath, navigasyon menüsünden hemen sonra bir karşılama mesajı ekleyecektir.

Son adım, theme.xml öğesini tema tarafından kullanılan xml dosyaları listesine eklemektir. Bunu yapmak için manifest.py dosyanızı böyle düzenleyin:

‘data’: [ ‘views/layout.xml’ ],

Temanızı şimdi güncelleyin. Harika! Gezinme menüsünden sonra başlık ve öğeye başarıyla bir kimlik ekledik. Bu değişiklikler web sitesinin her sayfasına uygulanacaktır.

Belirli bir sayfa düzeni oluşturma
Hizmetler sayfası için belirli bir düzen oluşturmak istediğimizi düşünün. Bu sayfa için en üste bir hizmet listesi eklememiz ve istemciye parçacıklar kullanarak sayfanın geri kalanını ayarlama imkanı sunmamız gerekiyor.

Görünümler klasörünüzün içinde bir pages.xml dosyası oluşturun ve varsayılan Odoo işaretlemesini ekleyin. <odoo> içinde, bir şablon tanımlamak <template> bir sayfa nesnesi oluşturacağız.

<?xml version="1.0" encoding="utf-8" ?>
<odoo>

     <!-- === Services Page === -->
     <record id="services_page" model="website.page">
         <field name="name">Services page</field>
         <field name="website_published">True</field>
         <field name="url">/services</field>
         <field name="type">qweb</field>
         <field name="key">theme_tutorial.services_page</field>
         <field name="arch" type="xml">
             <t t-name="theme_tutorial.services_page_template">
                 <h1>Our Services</h1>
                 <ul class="services">
                     <li>Cloud Hosting</li>
                     <li>Support</li>
                     <li>Unlimited space</li>
                 </ul>
             </t>
         </field>
     </record>

 </odoo>

Gördüğünüz gibi, sayfalara, ulaşılabilir olduğu ad veya url gibi birçok ek özellik gelir.

Başarıyla yeni bir sayfa düzeni oluşturduk, ancak sisteme nasıl kullanılacağını söylemedik. Bunu yapmak için QWeb’i kullanabiliriz. Html kodunu bu örnekteki gibi bir etiketine sarın.

<!-- === Services Page === -->
<record id="services_page" model="website.page">
    <field name="name">Services page</field>
    <field name="website_published">True</field>
    <field name="url">/services</field>
    <field name="type">qweb</field>
    <field name="key">theme_tutorial.services_page</field>
    <field name="arch" type="xml">
        <t t-name="theme_tutorial.services_page_template">
            <t t-call="website.layout">
                <div id="wrap">
                    <div class="container">
                        <h1>Our Services</h1>
                        <ul class="services">
                            <li>Cloud Hosting</li>
                            <li>Support</li>
                            <li>Unlimited space</li>
                        </ul>
                    </div>
                </div>
            </t>
        </t>
    </field>
</record>

<t t-call=”website.layout”> kullanarak Odoo varsayılan sayfa düzenini kodumuzla genişleteceğiz.

Gördüğünüz gibi, kodumuzu biri ID wrap ve diğeri sınıf konteyner ile olmak üzere iki <div> içine sardık. Bu minimal bir düzen sağlamaktır.

Bir sonraki adım, kullanıcının snippet’lerle doldurabileceği boş bir alan eklemektir. Bunu başarmak için, div#wrap öğesini kapatmadan hemen önce oe_structure sınıfıyla bir div oluşturun.

<?xml version="1.0" encoding="utf-8" ?>
<odoo>

    <!-- === Services Page === -->
    <record id="services_page" model="website.page">
        <field name="name">Services page</field>
        <field name="website_published">True</field>
        <field name="url">/services</field>
        <field name="type">qweb</field>
        <field name="key">theme_tutorial.services_page</field>
        <field name="arch" type="xml">
            <t t-name="theme_tutorial.services_page_template">
                <t t-call="website.layout">
                    <div id="wrap">
                        <div class="container">
                            <h1>Our Services</h1>
                            <ul class="services">
                                <li>Cloud Hosting</li>
                                <li>Support</li>
                                <li>Unlimited space</li>
                            </ul>

                            <!-- === Snippets' area === -->
                            <div class="oe_structure" />
                        </div>
                    </div>
                </t>
            </t>
        </field>
    </record>

</odoo>

İstediğiniz sayıda snippet alanı oluşturabilir ve bunları sayfalarınızda herhangi bir yere yerleştirebilirsiniz.

Daha önce gördüğümüz <template> yönergesini kullanarak sayfa oluşturmanın bir alternatifi olduğunu belirtmek gerekir.

<?xml version="1.0" encoding="utf-8" ?>
<odoo>

    <!-- === Services Page === -->
    <template id="services_page_template">
        <t t-call="website.layout">
            <div id="wrap">
                <div class="container">
                    <h1>Our Services</h1>
                    <ul class="services">
                        <li>Cloud Hosting</li>
                        <li>Support</li>
                        <li>Unlimited space</li>
                    </ul>

                    <!-- === Snippets' area === -->
                    <div class="oe_structure" />
                </div>
            </div>
        </t>
    </template>
    <record id="services_page" model="website.page">
        <field name="name">Services page</field>
        <field name="website_published">True</field>
        <field name="url">/services</field>
        <field name="view_id" ref="services_page_template"/>
    </record>

</odoo>

Bu, sayfa içeriğinizin kullanılarak daha da özelleştirilmesini sağlar.

Sayfamız neredeyse hazır. Şimdi tek yapmamız gereken manifest.py dosyamıza pages.xml eklemek

'data': [
  'views/layout.xml',
  'views/pages.xml'
],

Temanızı güncelleyin ve değişikliği görün.

Harika, Hizmetler sayfamız hazır ve /services (yukarıda seçtiğimiz URL) giderek bu sayfaya erişebileceksiniz.

Parçacıkları Hizmetlerimiz listesinin altına sürükleyip bırakmanın mümkün olduğunu fark edeceksiniz.

Şimdi pages.xml sayfamıza geri dönelim ve sayfa şablonumuzdan sonra aşağıdaki kodu kopyalayıp yapıştırın.

<record id="services_page_link" model="website.menu">
  <field name="name">Services</field>
  <field name="page_id" ref="services_page"/>
  <field name="parent_id" ref="website.main_menu" />
  <field name="sequence" type="int">99</field>
</record>

Bu kod, oluşturduğumuz sayfaya atıfta bulunarak ana menüye bir bağlantı ekleyecektir.

Sekans özelliği, bağlantının üst menüdeki konumunu tanımlar. Örneğimizde, en son yerleştirmek için değeri 99 olarak ayarladık. Belirli bir konuma yerleştirmek istiyorum, değeri ihtiyaçlarınıza göre değiştirmeniz gerekir.

Web sitesi modülünde data.xml dosyasının incelenmesini görebileceğiniz gibi, Ana Sayfa bağlantısı 10 ve Bize ulaşın varsayılan olarak 60 olarak ayarlanmıştır. Örneğin, bağlantınızı ortaya yerleştirmek istiyorsanız, bağlantınızın sıra değerini 40 olarak ayarlayabilirsiniz.

Stil Ekle

Odoo varsayılan olarak Bootstrap içerir. Bu, tüm Bootstrap stillerinden ve layout işlevlerinin kutudan çıkabileceği anlamına gelir.

Tabii ki benzersiz bir tasarım sağlamak istiyorsanız Bootstrap yeterli değildir. Aşağıdaki adımlar, temanıza nasıl özel stiller ekleyeceğiniz konusunda size yol gösterecektir. Nihai sonuç hoş olmayacak, ancak kendi başınıza geliştirmeniz için yeterli bilgi sağlayacaktır.

style.scss adlı boş bir dosya oluşturarak başlayalım ve static klasörünüzdeki scss adlı bir klasöre yerleştirelim. Aşağıdaki kurallar Hizmetler sayfamızı biçimlendirecektir. Kopyalayıp yapıştırın, ardından dosyayı kaydedin.

.services {
    background: #EAEAEA;
    padding: 1em;
    margin: 2em 0 3em;
    li {
        display: block;
        position: relative;
        background-color: #16a085;
        color: #FFF;
        padding: 2em;
        text-align: center;
        margin-bottom: 1em;
        font-size: 1.5em;
    }
}

Dosyamız hazır, ancak temamıza henüz eklenmedi.

Görünüm klasörüne gidelim ve asset.xml adlı bir XML dosyası oluşturalım. Varsayılan Odoo xml işaretlemesini ekleyin ve aşağıdaki kodu kopyalayıp yapıştırın. Tema klasörünü temanızın ana klasör adıyla değiştirmeyi unutmayın.

<template id="mystyle" name="My style" inherit_id="website.assets_frontend">
    <xpath expr="link[last()]" position="after">
        <link rel="stylesheet" type="text/scss" href="/theme folder/static/scss/style.scss"/>
    </xpath>
</template>

Az önce scss dosyamızı belirten bir şablon oluşturduk. Gördüğünüz gibi, şablonumuzda inherit_id adında özel bir özellik var. Bu özellik Odoo’ya şablonumuzun çalışması için bir başkasına atıfta bulunduğunu söyler.

Bu durumda, web sitesi modülünde bulunan asset_frontend şablonuna atıfta bulunuyoruz. asset_frontend, web sitesi oluşturucu tarafından yüklenen varlıkların listesini belirtir ve hedefimiz scss dosyamızı bu listeye eklemektir.

Bu, expr = “link [last ()]” ve position = “after” nitelikleriyle xpath kullanılarak gerçekleştirilebilir, yani “stil dosyamı al ve varlıklar listesindeki son bağlantıdan sonra yerleştir” anlamına gelir.

Sonuncusundan sonra yerleştirerek, dosyamızın sonuna yüklenmesini ve öncelik kazanmasını sağlıyoruz.

Son olarak manifest.py dosyanıza asset.xml dosyasını ekleyin.

Şimdi Temanızı bir kez daha güncelleyin!

Scss dosyamız artık temamıza dahil edildi, otomatik olarak derlenecek, küçültülecek ve tüm Odoo’nun varlıklarıyla birleştirilecektir.

Snippets / Parçacıklar Oluşturun

Parçacıklar, kullanıcıların sayfaları nasıl tasarlayıp düzenlediklerinden, tasarımınızın en önemli öğesidir. Hizmet sayfamız için bir snippet oluşturalım. Parçacık üç referans gösterecek ve Web Sitesi Oluşturucu arayüzünü kullanan son kullanıcı tarafından düzenlenebilir. Görünüm klasörüne gidin ve snippets.xml adlı bir XML dosyası oluşturun. Varsayılan Odoo xml işaretlemesini ekleyin ve aşağıdaki kodu kopyalayıp yapıştırın. Şablon, pasaj tarafından görüntülenecek HTML işaretlemesini içerir.

<template id="snippet_testimonial" name="Testimonial snippet">
  <section class="snippet_testimonial">
    <div class="container text-center">
      <div class="row">
        <div class="col-lg-4">
          <img alt="client" class="rounded-circle" src="/theme_tutorial/static/src/img/client_1.jpg"/>
          <h3>Client Name</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="col-lg-4">
          <img alt="client" class="rounded-circle" src="/theme_tutorial/static/src/img/client_2.jpg"/>
          <h3>Client Name</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="col-lg-4">
          <img alt="client" class="rounded-circle" src="/theme_tutorial/static/src/img/client_3.jpg"/>
          <h3>Client Name</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </div>
  </section>
</template>

As you can see, we used Bootstrap default classes for our three columns. It’s not just about layout, these classes will be triggered by the Website Builder to make them resizable by the user.

The previous code will create the snippet’s content, but we still need to place it into the editor bar, so the user will be able to drag&drop it into the page. Copy/paste this template in your snippets.xml file.

<template id="place_into_bar" inherit_id="website.snippets" name="Place into bar">
  <xpath expr="//div[@id='snippet_structure']/div[@class='o_panel_body']" position="inside">
    <t t-snippet="theme_tutorial.snippet_testimonial"
       t-thumbnail="/theme_tutorial/static/src/img/ui/snippet_thumb.jpg"/>
  </xpath>
</template>

Xpath kullanarak snippet_sttruc kimliğine sahip belirli bir öğeyi hedefliyoruz. Bu, snippet’in Yapı sekmesinde görüneceği anlamına gelir. Hedef sekmesini değiştirmek istiyorsanız, sadece xpath ifadesindeki id değerini değiştirmeniz gerekir.

Tab NameXpath expression
Structure//div[@id='snippet_structure']
Content//div[@id='snippet_content']
Feature//div[@id='snippet_feature']
Effect//div[@id='snippet_effect']

<t> etiketi snippet’imizin şablonunu arayacak ve img klasörüne yerleştirilmiş bir küçük resim atayacaktır. Şimdi snippet’inizi snippet çubuğundan sürükleyebilir, sayfanıza bırakabilir ve sonucu görebilirsiniz.

Snippet seçenekleri
Seçenekler, yayıncıların Web Sitesi Oluşturucu’nun kullanıcı arayüzünü kullanarak bir pasajın görünümünü düzenlemesine olanak tanır. Web Sitesi Oluşturucu işlevlerini kullanarak snippet seçeneklerini kolayca oluşturabilir ve bunları otomatik olarak kullanıcı arayüzüne ekleyebilirsiniz.

Seçenekler grubu özellikleri
Seçenekler gruplara ayrılır. Gruplar, dahil edilen seçeneklerin kullanıcı arabirimiyle nasıl etkileşime gireceğini tanımlayan özelliklere sahip olabilir.

data-selector="[css selector(s)]"Gruba dahil olan tüm seçenekleri belirli bir öğeye bağlama.data-js=" custom method name "Özel Javascript yöntemlerini bağlamak için kullanılır.data-drop-in="[css selector(s)]"Snippet’in içine bırakılabileceği öğelerin listesini tanımlar.data-drop-near="[css selector(s)]"Parçacığın yanına bırakılabileceği öğelerin listesini tanımlar.

Varsayılan seçenek yöntemleri
Seçenekler snippet’e standart CSS sınıfları uygular. Seçtiğiniz yönteme bağlı olarak, kullanıcı arayüzü farklı davranacaktır.

data-select-class = “[sınıf adı]”
Aynı gruptaki daha fazla veri seçme sınıfı, kullanıcının uygulamayı seçebileceği sınıfların bir listesini tanımlar. Bir seferde yalnızca bir seçenek etkinleştirilebilir.

data-toggle-class = “[sınıf adı]”
Data-toggle-class, listeden bir snippet’e bir veya daha fazla CSS sınıfı uygulamak için kullanılır. Aynı anda birden fazla seçim yapılabilir.
Varsayılan seçeneklerin temel bir örnekle nasıl çalıştığını gösterelim.

Görünümler klasörünüze yeni bir dosya ekleyerek başlıyoruz – dosyaya options.xml adını verin ve varsayılan Odoo XML işaretlemesini ekleyin. Aşağıdakileri kopyalayarak / yapıştırarak yeni bir şablon oluşturun.

Varsayılan seçeneklerin temel bir örnekle nasıl çalıştığını gösterelim.

Görünümler klasörünüze yeni bir dosya ekleyerek başlıyoruz – dosyaya options.xml adını verin ve varsayılan Odoo XML işaretlemesini ekleyin. Aşağıdakileri kopyalayarak / yapıştırarak yeni bir şablon oluşturun.

<template id="snippet_testimonial_opt" name="Snippet Testimonial Options" inherit_id="website.snippet_options">
  <xpath expr="//div[@data-js='background']" position="after">
    <div data-selector=".snippet_testimonial"> <!-- Options group -->
      <div class="dropdown-submenu">
            <a href="#" class="dropdown-item">Your Option</a>
            <div class="dropdown-menu"><!-- Options list -->
                <a href="#" class="dropdown-item" data-select-class="opt_shadow">Shadow Images</a>
                <a href="#" class="dropdown-item" data-select-class="opt_grey_bg">Grey Bg</a>
                <a href="#" class="dropdown-item" data-select-class="">None</a>
            </div>
        </div>
    </div>
  </xpath>
 </template>

Önceki şablon, arka plan seçeneklerinden (xpath ifade özniteliği) sonra seçeneklerimizi ekleyerek varsayılan snippet_options şablonunu devralır. Seçeneklerinizi belirli bir sıraya yerleştirmek için, web sitesi modülünden snippet_options şablonunu inceleyin ve seçeneklerinizi istediğiniz konumdan önce / sonra ekleyin.

Gördüğünüz gibi, tüm seçeneklerimizi seçeneklerimizi gruplandıracak ve onları doğru seçiciye hedefleyecek bir DIV etiketi içine yerleştirdik (data-selector = “. snippet_testimonial”).

Seçeneklerimizi tanımlamak için li öğelerine data-select-class nitelikleri uyguladık. Kullanıcı bir seçenek belirlediğinde, öznitelikte bulunan sınıf öğeye otomatik olarak uygulanır.

selectClass yöntemi birden fazla seçimi önlediğinden, son “empty” seçeneği snippet’i varsayılana sıfırlar.

Manifest.py dosyasına options.xml ekleyin ve temanızı güncelleyin.

Snippet’imizi sayfaya bırakarak, yeni seçeneklerimizin otomatik olarak özelleştirme menüsüne eklendiğini göreceksiniz. Sayfayı incelerken, bir seçenek belirlerken sınıfın öğeye uygulanacağını da fark edeceksiniz.

Seçeneklerimize görsel bir geri bildirim sağlamak için bazı css kuralları oluşturalım. style.scss dosyamızı açın ve aşağıdakileri ekleyin.

.snippet_testimonial {
  border: 1px solid #EAEAEA;
  padding: 20px;
}

// These lines will add a default style for our snippet. Now let's create our custom rules for the options.

.snippet_testimonial {
  border: 1px solid #EAEAEA;
  padding: 20px;

  &.opt_shadow img {
    box-shadow: 0 2px 5px rgba(51, 51, 51, 0.4);
  }

  &.opt_grey_bg {
    border: none;
    background-color: #EAEAEA;
  }
}

Harika! Snippet’imiz için seçenekleri başarıyla oluşturduk.

Yayıncı bir seçeneği her tıkladığında, sistem veri seçme sınıfı özniteliğinde belirtilen sınıfı ekler.

Data-select-class’ı data-toggle-class ile değiştirerek aynı anda daha fazla sınıf seçebilirsiniz.

Javascript Seçenekleri

Basit sınıf değiştirme işlemleri yapmanız gerekiyorsa data-select-class ve data-toggle-class mükemmeldir. Peki snippet’inizin özelleştirilmesinin daha fazlasına ihtiyacı varsa ne olur?

Daha önce söylediğimiz gibi, data-js uygunluğu özel bir yöntem tanımlamak için bir seçenekler grubuna atanabilir. Daha önce oluşturduğumuz seçeneğin grup div’ına bir data-js özelliği ekleyerek referans snippet’imiz için bir tane oluşturalım.

<div data-js="snippet_testimonial_options" data-selector=".snippet_testimonial">
  [...]
</div>