Skip to content

Commit 1cdb215

Browse files
author
Samuel Gomis
committed
feat(API-1900): Build the filtering system of our guided tutorials
1 parent 36b5b5b commit 1cdb215

File tree

11 files changed

+143
-93
lines changed

11 files changed

+143
-93
lines changed

‎content/tutorials/how-to-get-your-app-token.md renamed to ‎content/tutorials/guides/how-to-get-your-app-token.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ First of all, go to `Connect`, then `App Store`
9393
### Permissions
9494

9595
If you see `Create a test App` skip to [Connect app](https://www.notion.so/Guided-tutorial-How-to-get-your-app-token-022acb1113c1413faefaec3c8f3585a5), else please enable the `developer mode`.
96-
![Create a test app button](../img/apps/create-a-test-app-button.png)
96+
![Create a test app button](../../img/apps/create-a-test-app-button.png)
9797

9898
To do so, you need to:
9999
1. Go to `System`, then `Roles`
@@ -107,17 +107,17 @@ To do so, you need to:
107107
To create a test App:
108108
1. On the top right corner, click on `Create a test App`
109109
2. Fill in all the required information
110-
![Test_app_creation_credentials](../img/apps/test-app-creation-info.png)
110+
![Test_app_creation_credentials](../../img/apps/test-app-creation-info.png)
111111
3. Then click on `Create`
112112
4. Copy/paste credentials in your app configuration file
113-
![Test_app_creation_credentials](../img/apps/test-app-creation-credentials.png)
113+
![Test_app_creation_credentials](../../img/apps/test-app-creation-credentials.png)
114114
5. And click on `Done`
115115
6. Your test App appears on the App Store page
116116

117117

118118
## Step 4: Connect your test App and access its settings
119119

120-
![Test app on the App Store](../img/apps/marketplace-with-test-app.png)
120+
![Test app on the App Store](../../img/apps/marketplace-with-test-app.png)
121121

122122
Connecting a test App is like connecting a published App.
123123

@@ -133,7 +133,7 @@ Now that your App is connected, you can enjoy all the available App features fro
133133
To access the settings of your connected App on Akeneo PIM, please go to `Connected Apps`, then click on `Manage App`.
134134
You can also open your App from Akeneo PIM UI, to do so, click on `Open app`.
135135

136-
![Connected test app on Apps](../img/apps/connected-test-app.png)
136+
![Connected test app on Apps](../../img/apps/connected-test-app.png)
137137

138138
::: info
139139
To know more about the step-by-step activation process, please read our article:
@@ -156,7 +156,7 @@ At the end of this process, you receive the following response with an `access_t
156156
You can use this token to call the Akeneo PIM REST API.
157157

158158
<div class="block-next-steps">
159-
<img src="../img/illustrations/illus--Attribute.svg" width="140px">
159+
<img src="../../img/illustrations/illus--Attribute.svg" width="140px">
160160
<div class="block-next-steps-column">
161161
<div class="block-next-steps-title">Next Steps</div>
162162
<div class="block-next-steps-text">Now that you collected your token, we advise you to follow</div>

‎content/tutorials/how-to-retrieve-pim-structure.md renamed to ‎content/tutorials/guides/how-to-retrieve-pim-structure.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ Retrieve the PIM structure through a channel resource. This is usually the requi
3333
If you're starting building your App, make sure you previously followed:
3434
</div>
3535
<div class="block-requirements-row">
36-
<img src="../img/illustrations/illus--Attributegroup.svg" width="110px">
36+
<img src="../../img/illustrations/illus--Attributegroup.svg" width="110px">
3737
<div class="block-requirements-steps">
3838
<ul>
3939
<li>Step 1. <a href="how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></li>

‎content/tutorials/homepage.md renamed to ‎content/tutorials/homepage/homepage.md

File renamed without changes.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"bootstrap": "3.4.1",
88
"font-awesome": "4.7.0",
99
"jquery": "3.5.0",
10-
"lato-font": "3.0.0"
10+
"lato-font": "3.0.0",
11+
"isotope-layout": "3.0.6"
1112
},
1213
"devDependencies": {
1314
"del": "2.2.2",

‎src/partials/guided-tutorials-homepage.handlebars

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="row guided-tutorials">
55
{{{mainContent}}}
66
<div class="col-xs-12 col-sm-offset-1 col-sm-8">
7-
<div class="tag-title mt-40">Use case</div>
7+
<div class="tag-title mt-tag">Use case</div>
88
<div class="tag-list">
99
{{#useCases}}
1010
<div class="tag-selectable">
@@ -54,6 +54,10 @@
5454
let $filtered = $('.filtered-result');
5555
$filtered.hide();
5656
57+
$.expr[':'].textEquals = function(a, i, m) {
58+
return $(a).text().match("^" + m[3] + "$");
59+
}
60+
5761
$(window).on('hashchange', onHashchange);
5862
onHashchange();
5963
@@ -72,7 +76,7 @@
7276
if (useCaseSelected) {
7377
checkSelectRules('App Workflow');
7478
}
75-
;
79+
7680
let hasFilter = false;
7781
for (let label in filtersActivated) {
7882
if (filtersActivated[label]) {
@@ -94,7 +98,7 @@
9498
let selectors = [];
9599
for (let label in filtersActivated) {
96100
if (filtersActivated[label]) {
97-
selectors.push("div.tag-label:contains(" + label + ")");
101+
selectors.push("div.tag-label:textEquals(" + label + ")");
98102
}
99103
}
100104
@@ -105,7 +109,7 @@
105109
$grid.on('arrangeComplete', function (event, filteredItems) {
106110
for (let label in filtersActivated) {
107111
if (filtersActivated[label]) {
108-
return $filtered.text('filtered results (' + filteredItems.length + ')').show();
112+
return $filtered.text('Filtered results (' + filteredItems.length + ')').show();
109113
}
110114
}
111115
});

‎src/partials/guided-tutorials.handlebars

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@
55
{{{mainContent}}}
66
</div>
77
</div>
8-
{{/layout}}
8+
{{/layout}}

‎src/partials/layout.handlebars

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
88
<script src="/js/jquery.min.js"></script>
99
<script src='/js/bootstrap.min.js'></script>
10-
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
10+
<script src="/js/isotope.pkgd.min.js"></script>
1111
<link rel="icon" type="image/png" href="/img/akene36.png">
1212
<link rel="stylesheet" href="/css/variables.css">
1313
<link rel="stylesheet" href="/css/font-awesome.min.css">

‎styles/guided-tutorial.less

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -213,9 +213,8 @@
213213
}
214214

215215
.tag-selectable:hover {
216-
/** Disabled until the button becomes clickable when main guided tutorial page comes out **/
217-
// background-color: #E6E6E7;
218-
cursor: default;
216+
background-color: #E6E6E7;
217+
cursor: pointer;
219218
}
220219

221220
.tag-selected {
@@ -277,6 +276,8 @@
277276
border: 1px solid #8C9AAF;
278277
border-radius: 5px;
279278
&:hover {
279+
color: #414D97;
280+
text-decoration: none;
280281
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
281282
}
282283
}
@@ -304,10 +305,10 @@
304305
flex-direction: row;
305306
width: auto;
306307
position: absolute;
307-
bottom: 10px;
308+
bottom: 8px;
308309
right: 0;
309310
.tag-selectable {
310-
margin-right: 10px;
311+
margin-right: 8px;
311312
}
312313
}
313314

@@ -331,7 +332,7 @@
331332
.feature-list {
332333
display: flex;
333334
flex-direction: row;
334-
margin-top: 21px;
335+
margin-top: 15px;
335336
margin-bottom: 55px;
336337
.tag-selectable {
337338
margin-right: 12px;
@@ -341,6 +342,9 @@
341342
.tag-list {
342343
margin-top: 15px;
343344
margin-bottom: 21px;
345+
.tag-selectable {
346+
margin-right: 12px;
347+
}
344348
}
345349

346350
.tag-title {
@@ -352,8 +356,8 @@
352356
color: #414D97;
353357
}
354358

355-
.mt-40 {
356-
margin-top: 40px;
359+
.mt-tag {
360+
margin-top: 26.5px;
357361
}
358362

359363
/********************** SIDE NAVBAR *************************/

‎tasks/build-doc.js

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -800,22 +800,22 @@ gulp.task('build-misc-documentation', ['clean-dist','less'], function () {
800800
);
801801

802802
gulp.task('build-tutorials-homepage', ['clean-dist','less'], function () {
803-
let pages = {
803+
const pages = {
804804
"how-to-get-your-app-token.md": "How to get your App token",
805805
"how-to-retrieve-pim-structure.md": "How to retrieve PIM structure",
806-
"how-to-get-categories.md": "How to get categories",
807-
"how-to-parse-product-values.md": "How to parse product values",
808-
"how-to-collect-products.md": "How to collect products",
809-
"how-to-collect-product-variations.md": "How to collect product variations",
810-
"how-to-get-families-and-attributes.md": "How to get families and attributes",
811-
"how-to-publish-your-app.md": "How to publish your App",
806+
// "how-to-get-categories.md": "How to get categories",
807+
// "how-to-parse-product-values.md": "How to parse product values",
808+
// "how-to-collect-products.md": "How to collect products",
809+
// "how-to-collect-product-variations.md": "How to collect product variations",
810+
// "how-to-get-families-and-attributes.md": "How to get families and attributes",
811+
// "how-to-publish-your-app.md": "How to publish your App",
812812
};
813813

814-
let useCases = [
814+
const useCases = [
815815
{'color': 'light-blue', 'use_case': 'App Workflow'},
816816
];
817817

818-
let features = [
818+
const features = [
819819
{'color': 'yellow', 'feature': 'Products'},
820820
{'color': 'purple', 'feature': 'Product Models'},
821821
{'color': 'light-green', 'feature': 'Variant Products'},
@@ -824,7 +824,7 @@ gulp.task('build-tutorials-homepage', ['clean-dist','less'], function () {
824824
{'color': 'coral', 'feature': 'Categories'},
825825
]
826826

827-
let tutorials = [
827+
const tutorials = [
828828
{
829829
'title': 'How to get your App token',
830830
'link': '/tutorials/how-to-get-your-app-token.html',
@@ -837,49 +837,49 @@ gulp.task('build-tutorials-homepage', ['clean-dist','less'], function () {
837837
'features': [],
838838
'use_cases': useCases
839839
},
840-
{
841-
'title': 'How to get categories',
842-
'link': '/apps/how-to-get-categories.html',
843-
'features': [features[5]],
844-
'use_cases': useCases
845-
},
846-
{
847-
'title': 'How to parse product values',
848-
'link': '/apps/how-to-parse-product-values.html',
849-
'features': [features[0]],
850-
'use_cases': useCases
851-
},
852-
{
853-
'title': 'How to collect products',
854-
'link': '/apps/how-to-collect-products.html',
855-
'features': [features[0]],
856-
'use_cases': useCases
857-
},
858-
{
859-
'title': 'How to collect product variations',
860-
'link': '/apps/how-to-collect-product-variations.html',
861-
'features': [features[2]],
862-
'use_cases': useCases
863-
},
864-
{
865-
'title': 'How to get families and attributes',
866-
'link': '/apps/how-to-get-families-and-attributes.html',
867-
'features': [features[3], features[4]],
868-
'use_cases': useCases
869-
},
870-
{
871-
'title': 'How to publish your App',
872-
'link': '/apps/how-to-publish-your-app.html',
873-
'features': [],
874-
'use_cases': useCases
875-
},
840+
// {
841+
// 'title': 'How to get categories',
842+
// 'link': '/apps/how-to-get-categories.html',
843+
// 'features': [features[5]],
844+
// 'use_cases': useCases
845+
// },
846+
// {
847+
// 'title': 'How to parse product values',
848+
// 'link': '/apps/how-to-parse-product-values.html',
849+
// 'features': [features[0]],
850+
// 'use_cases': useCases
851+
// },
852+
// {
853+
// 'title': 'How to collect products',
854+
// 'link': '/apps/how-to-collect-products.html',
855+
// 'features': [features[0]],
856+
// 'use_cases': useCases
857+
// },
858+
// {
859+
// 'title': 'How to collect product variations',
860+
// 'link': '/apps/how-to-collect-product-variations.html',
861+
// 'features': [features[1], features[2]],
862+
// 'use_cases': useCases
863+
// },
864+
// {
865+
// 'title': 'How to get families and attributes',
866+
// 'link': '/apps/how-to-get-families-and-attributes.html',
867+
// 'features': [ features[4], features[3]],
868+
// 'use_cases': useCases
869+
// },
870+
// {
871+
// 'title': 'How to publish your App',
872+
// 'link': '/apps/how-to-publish-your-app.html',
873+
// 'features': [],
874+
// 'use_cases': useCases
875+
// },
876876
];
877877

878-
let isOnePage = false;
878+
const isOnePage = false;
879879

880-
return gulp.src('content/tutorials/homepage.md')
880+
return gulp.src('content/tutorials/homepage/*.md')
881881
.pipe(flatmap(function (stream, file) {
882-
return gulp.src('content/tutorials/*.md')
882+
return gulp.src('content/tutorials/homepage/*.md')
883883
.pipe(insert.wrap("::::: mainContent\n", "\n:::::"))
884884
.pipe(insert.prepend(getTocMarkdown(isOnePage, pages, path.basename(file.path), '/tutorials') + "\n"))
885885
.pipe(gulpMarkdownIt(md))
@@ -904,22 +904,22 @@ gulp.task('build-tutorials-homepage', ['clean-dist','less'], function () {
904904
);
905905

906906
gulp.task('build-tutorials', ['clean-dist','less'], function () {
907-
let pages = {
907+
const pages = {
908908
"how-to-get-your-app-token.md": "How to get your App token",
909909
"how-to-retrieve-pim-structure.md": "How to retrieve PIM structure",
910-
"how-to-get-categories.md": "How to get categories",
911-
"how-to-parse-product-values.md": "How to parse product values",
912-
"how-to-collect-products.md": "How to collect products",
913-
"how-to-collect-product-variations.md": "How to collect product variations",
914-
"how-to-get-families-and-attributes.md": "How to get families and attributes",
915-
"how-to-publish-your-app.md": "How to publish your App",
910+
// "how-to-get-categories.md": "How to get categories",
911+
// "how-to-parse-product-values.md": "How to parse product values",
912+
// "how-to-collect-products.md": "How to collect products",
913+
// "how-to-collect-product-variations.md": "How to collect product variations",
914+
// "how-to-get-families-and-attributes.md": "How to get families and attributes",
915+
// "how-to-publish-your-app.md": "How to publish your App",
916916
};
917917

918-
let isOnePage = false;
918+
const isOnePage = false;
919919

920-
return gulp.src('content/tutorials/*.md')
920+
return gulp.src('content/tutorials/guides/*.md')
921921
.pipe(flatmap(function (stream, file) {
922-
return gulp.src('content/tutorials/*.md')
922+
return gulp.src('content/tutorials/guides/*.md')
923923
.pipe(insert.wrap("::::: mainContent\n", "\n:::::"))
924924
.pipe(insert.prepend(getTocMarkdown(isOnePage, pages, path.basename(file.path), '/tutorials') + "\n"))
925925
.pipe(gulpMarkdownIt(md))

‎tasks/copy-assets.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ gulp.task('copy-assets', ['clean-dist'], function(){
2222
var lib = gulp.src([
2323
'node_modules/jquery/dist/jquery.min.js',
2424
'node_modules/handlebars/handlebars.min.js',
25-
'node_modules/bootstrap/dist/js/bootstrap.min.js'])
25+
'node_modules/bootstrap/dist/js/bootstrap.min.js',
26+
'node_modules/isotope-layout/dist/isotope.pkgd.min.js'])
2627
.pipe(gulp.dest('dist/js/'));
2728
var img = gulp.src('content/img/**')
2829
.pipe(gulp.dest('dist/img/'));

0 commit comments

Comments
 (0)