I am trying to override default header section of odoo 8 website with my own design but am getting errors when i use xpath expression and do a replace. See code below :
header.xml code
<template id="layout_replace_menu_header" customize_show="True" inherit_id="website.layout" name="custom_header_replace">
<xpath expr="//div[#class='navbar navbar-default navbar-static-top']" position="replace">
<header>
<div class="header">
<div class="container">
<a class="site-logo" href="#"><img src="/themeotb2/static/otbassets/img/logo.png" alt="image" /></a>
<i class="fa fa-bars"></i>
<!-- BEGIN NAVIGATION -->
<div class="header-navigation pull-right font-transform-inherit">
<ul>
<t t-foreach="website.menu_id.child_id" t-as="submenu">
<li class="dropdown">
<t t-call="website.submenu"/>
</li>
</t>
<!-- BEGIN TOP SEARCH -->
<li class="menu-search">
<span class="sep"></span>
<i class="fa fa-search search-btn"></i>
<div class="search-box">
<form action="#">
<div class="input-group">
<input type="text" placeholder="Search" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Search</button>
</span>
</div>
</form>
</div>
</li>
<!-- END TOP SEARCH -->
</ul>
</div>
<!-- END NAVIGATION -->
</div>
</div>
</header>
</xpath>
</template>
When i use "inside" instead of replace the code will execute but when i do replace odoo complains with errors:
File "/opt/openerp/ttfa/projectdatabase/src/openerp/models.py", line 1270, in _validate_fields
raise ValidationError('\n'.join(errors))
ParseError: "ValidateError
Field(s) `arch` failed against a constraint: Invalid view definition
Error details:
Element '<xpath expr="//header//a[#class='navbar-brand']">' cannot be located in parent view
Error context:
View `Show Logo`
How can i solve this? Thank you.
Either You have to override template "layout_logo_show" or disable "Show Logo" from website Customize setting.
Thank You!
Related
I am doing a small project with vue.js and laravel. I have a list of products, when I click on a specific product on "Quick view" button I want to show all data about that product in a modal but the data is not showing in the modal.
Can you help me please. Here is my code:
#extends('app')
#section('content')
<div id ="crud" class="row">
<div class="col-xs-12">
<h1 class="page-header">Lista de Articulo</h1>
</div>
<div class="wrap-icon right-section col-md-12" data-toggle="modal" data-target="#list" >
<div class="wrap-icon-section wishlist">
<a href="#" class="link-direction">
<i class="fa fa-heart" aria-hidden="true"></i>
<div class="left-info">
<span class="index">0 item</span>
<br>
<span class="title">Wishlist</span>
</div>
</a>
</div>
</div>
<div class="row">
<div v-for="keep in keeps" class="col-md-4" style="width:25%;" #mouseover="showByIndex = keep" #mouseout="showByIndex = null">
<div class="container">
<img :src="keep.foto" style="width:100%; max-width:150px;">
<button class="btn" v-show="showByIndex === keep" v-on:click.prevent="showKeep(keep)">Quick view</button>
</div>
<h3>
<b> #{{keep.nombre}}</b>
</h3>
<p> #{{keep.descripcion}}</p>
I fixed it. The error was because I called the modal file outside the div. Thanks to everybody.
you can't send data directly from vue in blade structure, you need to write a component for that.
https://v3.vuejs.org/examples/modal.html#modal-component
I am trying to create an application with laravel and I am having some difficulty in understanding how to dynamically load content into a division according to the button clicked from the product icon.
This is the category page
<div class="row justify-content-center">
#foreach($ProductData as $Product)
<div class="col-6 col-md-4 col-lg-4 col-xl-3">
<div class="product product-7 text-center" title="{{$Product->product_name}}">
<figure class="product-media">
<span class="product-label label-new">New</span>
<a href="product.html">
<img src="{{ asset('images/product/thumbnail/'.$Product->photo) }}" alt="{{$Product->photo}}" class="product-image">
</a>
<div class="product-action-vertical">
<span>add to wishlist</span>
<span>Quick view</span>
<span>Compare</span>
</div><!-- End .product-action-vertical -->
<div class="product-action">
<span>add to cart</span>
</div><!-- End .product-action -->
</figure><!-- End .product-media -->
<div class="product-body">
<div class="product-cat">
Women
</div><!-- End .product-cat -->
<h3 class="product-title">{{$Product->product_name}}</h3><!-- End .product-title -->
<div class="product-price">
$ {{$Product->price}}
</div><!-- End .product-price -->
<div class="ratings-container">
<div class="ratings">
<div class="ratings-val" style="width: 20%;"></div><!-- End .ratings-val -->
</div><!-- End .ratings -->
<span class="ratings-text">(2)</span>
</div><!-- End .rating-container -->
<div class="product-nav product-nav-thumbs">
<a href="#" class="active">
<img src="{{ asset('assets/molla/assets/images/products/product-4-thumb.jpg') }}" alt="product desc">
</a>
<a href="#">
<img src="{{ asset('assets/molla/assets/images/products/product-4-2-thumb.jpg') }}" alt="product desc">
</a>
<a href="#">
<img src="{{ asset('assets/molla/assets/images/products/product-4-3-thumb.jpg') }}" alt="product desc">
</a>
</div><!-- End .product-nav -->
</div><!-- End .product-body -->
</div><!-- End .product -->
</div><!-- End .col-sm-6 col-lg-4 col-xl-3 -->
#endforeach
</div>
**and mypopup/quickView.html, where I want to load data dynamically is bellow: **
<div class="container quickView-container">
<div class="quickView-content">
<div class="row">
<div class="col-lg-7 col-md-6">
<div class="row">
<div class="product-left">
<a href="#one" class="carousel-dot active">
<img src="assets/molla/assets/images/popup/quickView/1.jpg">
</a>
<a href="#two" class="carousel-dot">
<img src="assets/molla/assets/images/popup/quickView/2.jpg">
</a>
<a href="#three" class="carousel-dot">
<img src="assets/molla/assets/images/popup/quickView/3.jpg">
</a>
<a href="#four" class="carousel-dot">
<img src="assets/molla/assets/images/popup/quickView/4.jpg">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
There are two ways you can dynamically load the modal/popup
Store the product details in data-* attribute of quick view button/anchor tag. Have a skeleton Quick View modal. On click of 'Quick View', trigger a javascript function to populate the skeleton modal with the product data fetched from data attributes.
Making AJAX call when user click on 'Quick View' button and populate the skeleton modal with the response data
Going by Approach #1 can you save you multiple network calls to the server as all the product related data (required to be shown in Quick View) is stored as data attributes
Updated
Example for Approach #1
<a class="btn btn-primary btnQuickView" data-product-name="Product Name" data-product-img="http://shop.com/product/image.jpg" data-product-price="200.00">Quick View</a>
Modal code
<!-- Quick View Modal -->
<div id="quickViewModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
<h1 id="modal-product-name"></h1>
<img id="modal-product-image" src="">
<p id="modal-product-price"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Load jQuery library -->
<script type="text/javascript">
$(function(){
$('body').on('click','.btnQuickView', function(e){
e.preventDefault();
var data = $(this).data();
$('#quickViewModal #modal-product-name').html(data.productName);
$('#quickViewModal #modal-product-name').attr('src', data.productImage);
$('#quickViewModal #modal-product-name').html(data.productPrice);
$('#quickViewModal').modal();
});
});
</script>
I am working on POS module in "POS.xml" file it was containing below template code which I have to inherit that template tag to my module.
Exsiting code:
<templates id="template" xml:space="preserve">
<t t-name="OrderWidget">
<div class="order-container">
<div class="order-scroller touch-scrollable">
<div class="order">
<ul class="orderlines">
<t t-if="orderlines.length === 0">
<li class="orderline empty">
Your shopping cart is empty
</li>
</t>
</ul>
<div class="summary clearfix">
<div t-attf-class="line #{orderlines.length === 0 ? 'empty' : ''}">
<div class='entry total'>
<span class="label">Total: </span> <span class="value">0.00 €</span>
<div class='subentry'>Taxes: <span class="value">0.00€</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</t>
<templates>
In my module gst_view.xml:
<template id="contact" inherit_id="point_of_sale.template">
<xpath expr="//form/t/div/div/div/div/div/div/div/[#class='subentry']" position="after">
<h1>FOO 2</h1>
</xpath>
</template>
I tried with this code but it was showing Internal server error.I have to add my content under "Total:","Taxes:".Please check and guide me.
The inheritance of a template and view it's not the same, you need to use:
To your case it's a template inheritance:
<t t-extend="OrderWidget">
<t t-jquery="div[class='subentry']" t-operation="after">
<h1>FOO 2</h1>
</t>
</t>
I hope this answer can be helful for you.
I'm trying to include SB-Admin2 theme using a Spring Roo generated project (using bootstrap, tiles and JSP) but something is going wrong. I have icons corresponding to fa-search font-awesome tags that are displayed on the page.
It seems, that they have been generated when JSP tiles have been processed because they do not appear in my code.
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search..."></input>
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<tiles:insertAttribute name="menu" ignore="true" />
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
File "menu.tagx" is :
<c:if test="${empty render or render}">
<li>
<jsp:doBody />
</li>
</c:if>
And file "items.tagx" is:
<c:if test="${empty label}">
<spring:message code="menu_item_${fn:toLowerCase(fn:substringAfter(id,'_'))}_label" var="label" htmlEscape="false" />
</c:if>
<c:if test="${not empty messageCode}">
<spring:message code="${messageCode}" var="label" arguments="${label}" htmlEscape="false" />
</c:if>
<li>
<spring:url value="${url}" var="menu_item_url"/>
<a href="${menu_item_url}" title="${fn:escapeXml(label)}">
<c:out value="${label}"/>
</a>
</li>
Generated code in Chrome inspector is:
<div role="navigation" class="navbar-default sidebar">
<div class="sidebar-nav navbar-collapse">
<ul id="side-menu" class="nav">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input placeholder="Search..." class="form-control" type="text">
<span class="input-group-btn">
<button type="button" class="btn btn-default">
<i class="fa fa-search"></i></button>
</span>
</div>
</li>
<div version="2.0" id="menu">
<li><h2><i class="fa fa-search">Party</i></h2>
<ul>
<li><i class="fa fa-search"><a title="Create new Party" href="/demo/partys?form">Create new Party</a></i></li>
<li><i class="fa fa-search"><a title="List all Partys" href="/demo/partys?page=1&size=10">List all Partys</a></i></li>
<li><i class="fa fa-search"><a title="Find by Last Name" href="/demo/partys?find=ByLastName&form&page=1&size=10">Find by Last Name</a></i></li>
</ul>
</li>
</div>
</ul>
</div>
</div>
Where do the <i class="fa fa-search"> elements come from? How to remove them?
Thank you very much for your help. Denis
Thank you for your tips ! I have finally found where it comes from...
If you don't put content (for instance a comment) between opening and closing tags processed by font-awesome CSS, parser will generate icons in front of all text areas displayed.
To avoid this, you must properly declare tags in your JSP like this:
<i class="fa fa-search"><!-- Some content --></i>
And not:
<i class="fa fa-search"></i>
Hope this help.
I want to be able to add as many widgets as i want to a page.
To make it easier to visualize, here is what i want to achieve:
Master Page
Regular Page
In regular page, i want to call blade template panel as many times as i want. Of course, i would like to change sections inside each panel too.
Master Page
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">#yield('title')</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-8">
#yield('panelsLeft')
</div>
<!-- /.col-lg-8 -->
<div class="col-lg-4">
#yield('panelsRight')
</div>
<!-- /.col-lg-4 -->
</div>
<!-- /.row -->
Panel Partial
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-{{ $panelIcon }} fa-fw"></i> #yield('panelTitle')
<div class="pull-right">
<div class="btn-group">
#yield('panelActions')
</div>
</div>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
#yield('panelBody')
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
Regular Page
I want my regular page to extend master page, include as many panels as needed, and set sections of each of them. How can i achieve this?
I couldn't find an answer to this problem. Here is what i tried but it doesn't work:
#extends('layouts.content')
#section('title')
Dashboard
#stop
#section('panelsLeft')
#include('layouts.partial.panel', ['panelIcon'=>'flag'])
#section('panelTitle')
Current Projects
#stop
#section('panelActions')
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Create New Project
</button>
#stop
#section('panelBody')
<ul class="project-list">
{{ $projects }}
</ul>
#stop
#include('layouts.partial.panel', ['panelIcon'=>'user'])
#section('panelTitle')
Current Users
#stop
#section('panelActions')
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Create New User
</button>
#stop
#section('panelBody')
<ul class="user-list">
{{ $users }}
</ul>
#stop
#stop