Hello,

I'm new on Odoo, I installed Odoo 14 from "Source Install" on Windows 10, Python 3.9

I started to read th documentation:

https://www.odoo.com/documentation/14.0/developer/reference/orm.html

And I started the Odoo 14 tutorial, totday I'm stuck on the Snippets part:

https://www.odoo.com/documentation/14.0/developer/howtos/themes.html#create-snippets

I created all differents folders (img, UI), then I created images throught Paint with basic 1 number for client_1.jpg, 2 number for client_2.jpg, 3 number for client_3.jpg and S letter for snippet_thumb.jpg

After that I updated the theme of the website then I refreshed the website page, then I saw issues:

- When I cliked on "Edit" I can see the snippet "Testimonial snippet" but the image is not diplaying

- When I drag and drop the snippet the page start to shake up to down very fast

- then When I click on "Save" the page stop to shake but images 1,2,3 are not diplayed

So I continue the next step:

https://www.odoo.com/documentation/14.0/developer/howtos/themes.html#default-option-methods

And here I can only see "Your Option" so I changed the drop-down parameter to see options, but when I click on it its not working.

I tried to change values in the code, to change images, to take images from website, but nothing is working.

I tried to search is someone who had the same issue but I didn't find.

Is someone know what is the issue and help me to stop my page to check and to have diplayed images :)

Please find my programme bellow.

Best regards,

Adrien

pages.xml

<?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_tryitnow.services_page</field>
        <field name="arch" type="xml">
            <t t-name="theme_tryitnow.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>
						<!-- === Snippets' area === -->
                        <div class="oe_structure" />
					</div>
				</t>
            </t>
        </field>
    </record>
	<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>
 </odoo>

snippets.xml:

<?xml version="1.0" encoding="utf-8" ?>
<odoo>
	<template id="s_testimonial" name="Testimonial snippet">
		<section class="s_testimonial">
			<div class="container">
				<div class="row">
					<div class="col-lg-4 text-center">
						<img alt="client" class="rounded-circle" src="/theme_tryitnow/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 text-center">
						<img alt="client" class="rounded-circle" src="/theme_tryitnow/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 text-center">
						<img alt="client" class="rounded-circle" src="/theme_tryitnow/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>
	<template id="place_into_bar" inherit_id="website.snippets" name="Place into bar">
		<xpath expr="//div[@id='snippet_structure']/div[hasclass('o_panel_body')]" position="inside">
			<t t-snippet="theme_tryitnow.s_testimonial"
				t-thumbnail="/theme_tryitnow/static/src/img/ui/snippet_thumb.jpg"/>
		</xpath>
	</template>
</odoo>

options.xml:

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

style.scss:

// These lines will add a default style for our snippet. Now let's create our custom rules for the options.
.s_testimonial {
    border: 1px solid #EAEAEA;
    padding: 20px;
    &.s_testimonial_shadow img {
        box-shadow: 0 2px 5px rgba(51, 51, 51, 0.4);
    }
    &.s_testimonial_grey_bg {
        border: none;
        background-color: #EAEAEA;
    }
}