Skip to content

Commit e7d4c80

Browse files
givanzgivanz
committed
Fixed components attribute name
1 parent a5b8b07 commit e7d4c80

File tree

5 files changed

+33
-169
lines changed

5 files changed

+33
-169
lines changed

‎public/js/vvvebjs/components/ecommerce/categories.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ class CategoriesComponent {
7676
constructor ()
7777
{
7878
this.name = "Categories";
79-
this.attributes = ["data-v-component-categories"],
79+
this.attributes = ["data-v-component-product-categories"],
8080

8181
this.image ="icons/categories.svg";
8282
this.html = template;

‎public/js/vvvebjs/components/ecommerce/manufacturers.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ class ManufacturersComponent {
3535
constructor ()
3636
{
3737
this.name = "Manufacturers";
38-
this.attributes = ["data-v-component-manufacturers"],
38+
this.attributes = ["data-v-component-product-manufacturers"],
3939

4040
this.image ="icons/factory.svg";
4141
this.html = template;

‎public/js/vvvebjs/components/ecommerce/product.js

+29-163
Original file line numberDiff line numberDiff line change
@@ -18,24 +18,31 @@
1818
*
1919
*/
2020

21+
import {ServerComponent} from '../server-component.js';
22+
2123
let template =
2224
`
23-
<section class="container product" data-v-component-product>
25+
<section class="container product" data-v-component-product data-v-product_id="1">
2426
2527
2628
<div class="row g-0">
2729
<div class="col-md-6 col-sm-12">
2830
2931
<div id="product-gallery" class="carousel slide" data-bs-ride="carousel" data-bs-touch="true" data-v-product-images>
3032
<div class="carousel-inner">
31-
<div class="carousel-item" data-v-product-image data-v-class-if-active="i = 0" >
33+
<div class="carousel-item active">
34+
<div class="zoom" data-v-product-main-image-background-image>
35+
<img src="img/demo/product.jpg" loading="lazy" class="d-block w-100" alt="" data-v-product-main-image>
36+
</div>
37+
</div>
38+
<div class="carousel-item" data-v-product-image>
3239
<div class="zoom" data-v-product-image-background-image>
33-
<img src="img/demo/product.jpg" class="d-block w-100" alt="" data-v-product-image-src>
40+
<img src="img/demo/product.jpg" loading="lazy" class="d-block w-100" alt="" data-v-product-image-src>
3441
</div>
3542
</div>
3643
<div class="carousel-item" data-v-product-image>
3744
<div class="zoom" data-v-product-image-background-image>
38-
<img src="img/demo/product-2.jpg" class="d-block w-100" alt="" data-v-product-image-src>
45+
<img src="img/demo/product-2.jpg" loading="lazy" class="d-block w-100" alt="" data-v-product-image-src>
3946
</div>
4047
</div>
4148
</div>
@@ -52,14 +59,17 @@ let template =
5259
<div class="carousel">
5360
5461
<div class="carousel-thumbs" data-v-product-images>
55-
<button type="button" data-bs-target="#product-gallery" class="img-thumbnail" data-bs-slide-to="0" data-v-product-image>
56-
<img src="" alt="" class="d-block w-100" data-v-product-image-src>
62+
<button type="button" data-bs-target="#product-gallery" class="img-thumbnail" data-bs-slide-to="0">
63+
<img src="" alt="" class="d-block w-100" loading="lazy" data-v-product-main-image>
5764
</button>
5865
<button type="button" data-bs-target="#product-gallery" class="img-thumbnail" data-bs-slide-to="1" data-v-product-image>
59-
<img src="" alt="" class="d-block w-100" data-v-product-image-src>
66+
<img src="" alt="" class="d-block w-100" loading="lazy" data-v-product-image-src>
6067
</button>
6168
<button type="button" data-bs-target="#product-gallery" class="img-thumbnail" data-bs-slide-to="2" data-v-product-image>
62-
<img src="" alt="" class="d-block w-100" data-v-product-image-src>
69+
<img src="" alt="" class="d-block w-100" loading="lazy" data-v-product-image-src>
70+
</button>
71+
<button type="button" data-bs-target="#product-gallery" class="img-thumbnail" data-bs-slide-to="3" data-v-product-image>
72+
<img src="" alt="" class="d-block w-100" loading="lazy" data-v-product-image-src>
6373
</button>
6474
</div>
6575
@@ -280,176 +290,32 @@ let template =
280290
</section>
281291
`;
282292

283-
class ProductComponent {
284-
constructor ()
285-
{
293+
class ProductComponent extends ServerComponent{
294+
constructor () {
295+
super();
296+
286297
this.name = "Product";
287298
this.attributes = ["data-v-component-product"],
288299

289300
this.image ="icons/product.svg";
290301
this.html = template;
291302

292303
this.properties = [{
293-
name: false,
294-
key: "source",
295-
inputtype: RadioButtonInput,
296-
htmlAttr:"data-v-source",
297-
data: {
298-
inline: true,
299-
extraclass:"btn-group-fullwidth",
300-
options: [{
301-
value: "automatic",
302-
icon:"la la-cog",
303-
text: "Configuration",
304-
title: "Configuration",
305-
extraclass:"btn-sm",
306-
checked:true,
307-
},{
308-
value: "autocomplete",
309-
text: "Autocomplete",
310-
title: "Autocomplete",
311-
icon:"la la-search",
312-
extraclass:"btn-sm",
313-
}],
314-
},
315-
316-
setGroup: group => {
317-
document.querySelectorAll('.mb-3[data-group]').forEach(e => e.classList.add("d-none"));
318-
document.querySelectorAll('.mb-3[data-group="'+ group + '"].d-none').forEach((el, i) => {
319-
el.classList.remove("d-none");
320-
});
321-
322-
return element;
323-
},
324-
onChange : function(element, value, input) {
325-
this.setGroup(input.value);
326-
327-
return element;
328-
},
329-
init: node => {
330-
console.log(node, 'init');
331-
//return this.setGroup('autocomplete');
332-
//return 'autocomplete';
333-
return node.dataset.source;
334-
},
335-
},{
336-
name: "Product",
337-
key: "product",
304+
name: "Product name <span class='text-muted'>(autocomplete)</span>",
305+
key: "post",
338306
group:"autocomplete",
339-
htmlAttr:"data-v-product",
340-
inline:false,
341-
col:12,
342-
inputtype: AutocompleteList,
343-
data: {
344-
url: "/admin/?module=editor/editor&action=productAutocomplete",
345-
},
346-
},{
347-
name: "Nr. of product",
348-
group:"automatic",
349-
col:6,
350-
inline:false,
351-
key: "limit",
352-
htmlAttr:"data-v-limit",
353-
inputtype: NumberInput,
354-
data: {
355-
value: "8",//default
356-
min: "1",
357-
max: "1024",
358-
step: "1"
359-
},
360-
getFromNode: node => 10
361-
,
362-
},{
363-
name: "Start from page",
364-
group:"automatic",
365-
col:6,
366-
inline:false,
367-
key: "page",
368-
htmlAttr:"data-v-page",
369-
data: {
370-
value: "1",//default
371-
min: "1",
372-
max: "1024",
373-
step: "1"
374-
},
375-
inputtype: NumberInput,
376-
getFromNode: node => 0,
377-
},{
378-
name: "Order by",
379-
group:"automatic",
380-
key: "order",
381-
htmlAttr:"data-v-order",
382-
inputtype: SelectInput,
383-
data: {
384-
options: [{
385-
value: "price_asc",
386-
text: "Price Ascending"
387-
},{
388-
value: "price_desc",
389-
text: "Price Descending"
390-
},{
391-
value: "date_asc",
392-
text: "Date Ascending"
393-
},{
394-
value: "date_desc",
395-
text: "Date Descending"
396-
},{
397-
value: "sales_asc",
398-
text: "Sales Ascending"
399-
},{
400-
value: "sales_desc",
401-
text: "Sales Descending"
402-
}]
403-
}
404-
},{
405-
name: "Category",
406-
group:"automatic",
407-
key: "category",
408-
htmlAttr:"data-v-category",
307+
htmlAttr:"data-v-product_id",
409308
inline:false,
410309
col:12,
411-
inputtype: TagsInput,
310+
inputtype: AutocompleteInput,
412311
data: {
413-
url: "/admin/?module=editor&action=productAutocomplete",
312+
url: "/admin/?module=editor/autocomplete&action=products&type=",
414313
},
415314

416-
},{
417-
name: "Manufacturer",
418-
group:"automatic",
419-
key: "manufacturer",
420-
htmlAttr:"data-v-manufacturer",
421-
inline:false,
422-
col:12,
423-
inputtype: TagsInput,
424-
data: {
425-
url: "/admin/?module=editor&action=productAutocomplete",
426-
}
427-
},{
428-
name: "Manufacturer 2",
429-
group:"automatic",
430-
key: "manufacturer 2",
431-
htmlAttr:"data-v-manufacturer2",
432-
inline:false,
433-
col:12,
434-
inputtype: TagsInput,
435-
data: {
436-
url: "/admin/?module=editor&action=productAutocomplete",
437-
},
438-
}];
315+
}];
439316
}
440317

441-
init(node)
442-
{
443-
document.querySelectorAll('.mb-3[data-group]').forEach((el, i) => {
444-
el.classList.add("d-none");
445-
});
446-
447-
let source = node.dataset.vSource;
448-
if (!source) {
449-
source = "automatic";
450-
}
451-
452-
document.querySelectorAll('.mb-3[data-group="' + source + '"]').forEach(e => e.classList.remove("d-none"));
318+
init(node) {
453319
}
454320
}
455321

‎public/js/vvvebjs/components/ecommerce/products.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -97,20 +97,18 @@ class ProductsComponent extends ServerComponent{
9797
htmlAttr:"data-v-source",
9898
data: {
9999
inline: true,
100-
extraclass:"btn-group-fullwidth",
100+
extraclass:"btn-group-fullwidth btn-group-sm",
101101
options: [{
102102
value: "automatic",
103103
icon:"la la-cog",
104104
text: "Configuration",
105105
title: "Configuration",
106-
extraclass:"btn-sm",
107106
checked:true,
108107
},{
109108
value: "autocomplete",
110109
text: "Autocomplete",
111110
title: "Autocomplete",
112111
icon:"la la-search",
113-
extraclass:"btn-sm",
114112
}],
115113
},
116114

‎public/js/vvvebjs/components/ecommerce/vendors.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ class VendorsComponent {
3535
constructor ()
3636
{
3737
this.name = "Vendors";
38-
this.attributes = ["data-v-component-vendors"],
38+
this.attributes = ["data-v-component-product-vendors"],
3939

4040
this.image ="icons/vendor.svg";
4141
this.html = template;

0 commit comments

Comments
 (0)