pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website_(sale_)slides: clean frontend onboarding

Browse Source 
Purpose
=======

Improve frontend onboarding: add placeholders, improve tour, improve experience
when buying course (display what has been bought, avoid displaying buy now on
an already purchased course).

Specifications
==============

The tour of the front-end has been updated. It adds a step to enter fullscreen
mode and allow users to test it.

It updates the placeholders for the quiz creation, adding examples and hints
to ease user filling fields.

The course purchasing flow has been improved. It adds a direct link to the
purchased course(s) when the payment is done with the `sale_purchased_course`
template.

It also blocks the possibility to rebuy a course if the user is already a
member of said course by showing the buying options only if `channel.is_member`
is False. INdeed it makes no sense to display the "Buy" button when having
already bought the course.

This commit also removes the autocompletion of fields in modals.

Task-2623471

closes odoo/odoo#77050

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
This commit is contained in:
Thomas Josse
2021-11-05 09:31:50 +00:00
committed by Thibault Delavallée
parent e0763a9adb
commit e83dfa4eb5
7 changed files with 73 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_sale_slides/__manifest__.py
+1
View File
@@ -13,6 +13,7 @@
'report/sale_report_views.xml',
'views/website_slides_menu_views.xml',
'views/slide_channel_views.xml',
'views/website_sale_templates.xml',
'views/website_slides_templates.xml',
],
'demo': [
addons/website_sale_slides/views/website_sale_templates.xml
+37
View File
@@ -0,0 +1,37 @@
<?xml version="1.0" ?>
<odoo><data>
<template id="website_sale_confirmation_slide" inherit_id="website_sale.confirmation">
<xpath expr="//div[@id='oe_structure_website_sale_confirmation_2']" position="after">
<t t-call="website_sale_slides.course_purchased_confirmation_message"/>
</xpath>
</template>
<template id="course_purchased_confirmation_message">
<div>
<h4>You have gained access to the following course(s):</h4>
</div>
<div class="mt-2">
<t t-foreach="order.order_line" t-as="line">
<t t-foreach="line.product_id.channel_ids" t-as="course">
<table class="table pb-32 border">
<tr>
<td class="w-50">
<span t-if="course.image_1920" class="w-75" t-field="course.image_1920" t-options="{'widget': 'image'}"/>
<img t-else="" class="img img-responsive w-75" src="/website_slides/static/src/img/channel-training-default.jpg"/>
</td>
<td>
<h3 t-esc="course.name" class="m-2"/>
<div t-field="course.description_short" class="font-weight-light o_wslides_desc_truncate_3 pb-2 ml-2"/>
<a role="button" class="btn btn-primary ml-2" t-attf-href="/slides/#{slug(course)}">
Start Learning
</a>
</td>
</tr>
</table>
</t>
</t>
</div>
</template>
</data></odoo>
addons/website_sale_slides/views/website_slides_templates.xml
+9 -7
View File
@@ -86,7 +86,7 @@
</template>
<template name="Buy Course Button" id="course_buy_course_button">
<t t-if="channel.product_id.website_published">
<t t-if="channel.product_id.website_published and not channel.is_member">
<div t-attf-class="text-center d-flex align-items-center text-center pb-1 #{'justify-content-between' if product_info['has_discounted_price'] else 'justify-content-around'}">
<div class="css_editable_mode_hidden">
<!-- real price -->
@@ -119,24 +119,26 @@
<div id="product_option_block"/>
</form>
</div>
<div class="buy_now_button"/>
</div>
</t>
<t t-else="">
<t t-elif="not channel.is_member">
<div class="alert my-0 bg-200 text-center">
Course Not Buyable
</div>
</t>
</template>
<template name="Allow Buy Now" id="course_option_buy_course_now" inherit_id="website_sale_slides.course_buy_course_button" active="False" customize_show="True">
<xpath expr="//div[hasclass('buy_now_button')]" position="inside">
<div style="margin-top:5px;">
<a role="button" class="btn btn-outline-primary btn-block post_link" t-att-href="'/shop/cart/update?product_id=%s&amp;express=1' % channel.product_id.id">
<template name="Display 'Buy Now'" id="course_option_buy_course_now" inherit_id="website_sale_slides.course_buy_course_button" active="False" customize_show="True">
<xpath expr="//div[hasclass('add_to_cart_button')]" position="before">
<div class="mb-1">
<a role="button" class="btn btn-primary btn-block post_link" t-attf-href="/shop/cart/update?product_id={{channel.product_id.id}}&amp;express=1">
<i class="fa fa-bolt"></i> Buy Now
</a>
</div>
</xpath>
<xpath expr="//div[hasclass('add_to_cart_button')]//a[@id='add_to_cart']" position="attributes">
<attribute name="class">btn btn-outline-primary btn-block js_check_product o_js_add_to_cart a-submit</attribute>
</xpath>
</template>
</data></odoo>
addons/website_slides/static/src/js/tours/slides_tour.js
+4 -1
View File
@@ -68,7 +68,6 @@ tour.register('slides_tour', {
position: 'bottom',
}, {
trigger: 'a[name="o_wslides_list_slide_add_quizz"]',
extra_trigger: '.o_wslides_slides_list_slide:hover',
content: Markup(_t("If you want to be sure that attendees have understood and memorized the content, you can add a Quiz on the lesson. Click on <b>Add Quiz</b>.")),
}, {
trigger: 'input[name="question-name"]',
@@ -107,6 +106,10 @@ tour.register('slides_tour', {
trigger: 'a.o_wslides_js_slides_list_slide_link',
content: Markup(_t("Congratulations, you've created your first course.<br/>Click on the title of this content to see it in fullscreen mode.")),
position: 'bottom',
}, {
trigger: '.o_wslides_fs_toggle_sidebar',
content: Markup(_t("Finally you can click here to enjoy your content in fullscreen")),
position: 'bottom',
}]);
});
addons/website_slides/static/src/scss/website_slides.scss
+18 -18
View File
@@ -12,6 +12,24 @@ $o-wslides-color-dark2: #1f262d;
$o-wslides-color-dark3: #101216;
$o-wslides-fs-side-width: 300px;
// Truncate text descriptions to a specific number of lines.
// If '-webkit-line-clamp' is not supported, a less effective
// 'line-height' fallback will be used instead.
$truncate-limits: 2, 3, 10;
@each $limit in $truncate-limits {
.o_wslides_desc_truncate_#{$limit} {
$line-height: 1.3;
max-height: $limit * $line-height * 1.2em;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
line-height: $line-height;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $limit;
}
}
// Common to new slides pages
// **************************************************
@@ -185,24 +203,6 @@ $o-wslides-fs-side-width: 300px;
min-height: 1px;
}
// Truncate text descriptions to a specific number of lines.
// If '-webkit-line-clamp' is not supported, a less effective
// 'line-height' fallback will be used instead.
$truncate-limits: 2, 3, 10;
@each $limit in $truncate-limits {
.o_wslides_desc_truncate_#{$limit} {
$line-height: 1.3;
max-height: $limit * $line-height * 1.2em;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
line-height: $line-height;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $limit;
}
}
}
// New home page
addons/website_slides/static/src/xml/slide_quiz_create.xml
+4 -4
View File
@@ -9,7 +9,7 @@
<div class="input-group-prepend">
<span class="input-group-text o_wslides_quiz_question_sequence"><t t-esc="widget.sequence"/></span>
</div>
<input type="text" name="question-name" class="form-control col-11" placeholder="Enter your question"
<input type="text" name="question-name" class="form-control col-11" placeholder='e.g. "Which animal cannot fly?"'
t-att-value="widget.question.text"/>
</div>
</div>
@@ -23,8 +23,8 @@
</t>
</t>
<t t-else="" >
<t t-foreach="[1, 2, 3]">
<t t-call="slide.quiz.answer.line" />
<t t-foreach="['A giraffe', 'A bird', 'A fly']" t-as="placeholder">
<t t-call="slide.quiz.answer.line"/>
</t>
</t>
</div>
@@ -39,7 +39,7 @@
<div class="col ml-3 ml-md-5">
<div class="row align-items-center">
<div class="input-group col-9 p-0">
<input type="text" class="o_wslides_js_quiz_answer_value form-control" placeholder="Enter your answer" t-attf-value="#{answer ? answer.text_value : ''}"/>
<input type="text" class="o_wslides_js_quiz_answer_value form-control" t-attf-placeholder='e.g. "{{placeholder || "another animal"}}"' t-attf-value="#{answer ? answer.text_value : ''}"/>
<div class="input-group-append">
<div class="input-group-text">
<a class="o_wslides_js_quiz_is_correct" title="This is the correct answer">
addons/website_slides/static/src/xml/website_slides_channel.xml
-1
View File
@@ -41,7 +41,6 @@
questions. In this course, you'll study those topics with activities about mathematics, science and logic." />
</div>
<div class="form-group">
<label id="communication-label">Review</label>
<div class="o_wslide_channel_communication_type">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="allow_comment" name="allow_comment" checked="checked"/>