Odoo Help

Welcome!

This community is for beginners and experts willing to share their Odoo knowledge. It's not a forum to discuss ideas, but a knowledge base of questions and their answers.

1

Add a NEW ribbon to website products to feature them

By
Tim Norton
on 10/12/14, 8:08 PM 4,896 views

I would like to do something similar to the SALE ribbon that is available in v8 web site builder but instead a NEW ribbon.

I could not find a module to do this.

Any suggestions how to add a custom ribbon to selected products?

Tim

Hi Tim, Im not sure if your into custom modules or what. But as you can see, Products \ Sales Tab \ Website \ Field: Style you can create a new one there. But then you need too do some css work after that. Sale Ribbon oe_ribbon_promo See the html_class, that points to addons/website_sale/static/src/css/ website_sales.css / website_sales.sass, these are good starting points for you to achieve your goal. Hope that helps cheers.

Vee
on 10/12/14, 11:29 PM

Thanks Vee,


I want to better understand custom modules but the first stumbling block is understanding where to locate the files in Linux 

On Monday, 13 October 2014, Vee <vitridex@gmail.com> wrote:

Hi Tim, Im not sure if your into custom modules or what. But as you can see, Products \ Sales Tab \ Website \ Field: Style you can create a new one there. But then you need too do some css work after that. Sale Ribbon oe_ribbon_promo See the html_class, that points to addons/website_sale/static/src/css/ website_sales.css / website_sales.sass, these are good starting points for you to achieve your goal. Hope that helps cheers.

--
Vee
Sent by OpenERP S.A. using Odoo about Forum Post Add a NEW ribbon to website products to feature them
Tim Norton
on 10/13/14, 12:19 AM
2
Peter Otoule
On 10/29/14, 3:08 PM

You need to add another wrapper section with a new class on the css, then call that wrapper from the "Product Item" with the word you want (for example Offer) and add a style on the product with the the new class you created and the descriptive name on the product view.

Example:

Edit (odoo_path/addons/website_sale/static/src/css/website_sale.css

add:

/* Ribbon offer for promotionso on products */
.oe_product.oe_ribbon_offer .ribbon-wrapper2 {
  display: block;
}
.oe_product .ribbon-wrapper2 {
  display: none;
  width: 85px;
  height: 88px;
  z-index: 5;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
}
.oe_product .ribbon {
  font: bold 15px Sans-Serif;
  color: white;
  text-align: center;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  cursor: default;

}

Go to the product form on the backend and add a style with the HTML class oe_ribbon_offer and the name you want, for example Offer Ribbon.

Go to the web shop and use the HTML editor, look for "Product Item" and add:

<div class="ribbon-wrapper2">
        <div class="ribbon btn btn-danger">Offer</div>
</div>

This will add a ribbon with "Offer", you can play with the CSS to change position, etc.

This is the dirty way for doing this, just is for showing how does it works.

By the way remember you can not modify or delete the Styles on the product view and there is no view for doing this (or I did not found it), for modify or delete the Styles you need to go to the database product_style table.

 

If you want to use a trick for making ribbons easily there is a way for doing this:


Search this view (ID): website_sale.products_item

Change this:

<div class="ribbon-wrapper"> <!-- <div class="ribbon btn btn-danger">Sale</div> --> <div class="ribbon btn btn-danger" t-field="product.website_style_ids.name"/> </div>

Now create as many labels as you wish (10% Disc, Free, Woot!) with the desired name using the same info than the Sale item in the backend product view (you need to be admin for doing this). Try to don't use so long label names or they won't fit on the product image.

Use ONLY ONE of those labels on a product (or you will get a server error, because you are using the same class twice).

Again, this is just a trick for trying to use this functionality without development, just changing a view.



Regards

Stunning. Thanks for that.

Agrista, Helmut Drewes
on 10/22/15, 7:27 AM
0
Tim Norton
On 10/18/14, 10:12 AM

I am still a bit lossed here.

I see the CSS but I cant see where the word "SALE" comes from. I have read about creating a module but how do I tell the Styles field to use that module? 

 

 

- UPDATE - 

I ended up getting my developer to do this and several other custom ribbons. I can put you in touch with him on oDesk if you need help

The "Sale" is a static chain that comes from website_sale/views/templates.xml you cand edit that xml for adding your own chain and reinstall the web module or add on the way I told on my answer (HTML Editor and editing the Product Item). class call the css and css call the wrapper. Regards.

Peter Otoule
on 10/29/14, 3:54 PM

May be a small video would help understand the how to do!

AD LIBITOM, michel Guénard
on 3/13/15, 7:56 PM

Your Answer

Please try to give a substantial answer. If you wanted to comment on the question or answer, just use the commenting tool. Please remember that you can always revise your answers - no need to answer the same question twice. Also, please don't forget to vote - it really helps to select the best questions and answers!

About This Community

This community is for professionals and enthusiasts of our products and services. Read Guidelines

Question tools

3 follower(s)

Stats

Asked: 10/12/14, 8:08 PM
Seen: 4896 times
Last updated: 4/20/15, 4:07 AM