|
11 | 11 | <ais-search-box>
|
12 | 12 | <div class="input-group">
|
13 | 13 | <ais-input
|
14 |
| - placeholder="Search product by name or reference..." |
15 |
| - :classNames="{ |
16 |
| - 'ais-input': 'form-control' |
17 |
| - }" |
| 14 | + placeholder="Search product by name or reference..." |
| 15 | + :classNames="{ |
| 16 | + 'ais-input': 'form-control' |
| 17 | + }" |
18 | 18 | />
|
19 | 19 |
|
20 | 20 | <span class="input-group-btn">
|
|
36 | 36 |
|
37 | 37 | <div class="row">
|
38 | 38 | <div class="col-md-2 col-sm-3">
|
39 |
| - <ais-tree-menu :attributes="['category', 'sub_category']" :classNames="{ |
40 |
| - 'ais-tree-menu__list': 'list-unstyled', |
41 |
| - 'ais-tree-menu__count': 'badge' |
42 |
| - }"> |
| 39 | + <ais-tree-menu |
| 40 | + :attributes="[ |
| 41 | + 'hierarchicalCategories.lvl0', |
| 42 | + 'hierarchicalCategories.lvl1', |
| 43 | + 'hierarchicalCategories.lvl2', |
| 44 | + ]" |
| 45 | + :classNames="{ |
| 46 | + 'ais-tree-menu__list': 'list-unstyled', |
| 47 | + 'ais-tree-menu__count': 'badge' |
| 48 | + }" |
| 49 | + > |
43 | 50 | <h3 slot="header">Browse by</h3>
|
44 | 51 | </ais-tree-menu>
|
45 | 52 |
|
46 | 53 |
|
47 |
| - <ais-price-range attribute-name="price" :classNames="{ |
48 |
| - 'ais-price-range__input': 'form-control' |
49 |
| - }"> |
| 54 | + <ais-price-range |
| 55 | + attribute-name="price" |
| 56 | + :classNames="{ |
| 57 | + 'ais-price-range__input': 'form-control' |
| 58 | + }" |
| 59 | + > |
50 | 60 | <h3 slot="header">Price</h3>
|
51 | 61 | </ais-price-range>
|
52 | 62 |
|
53 | 63 |
|
54 |
| - <ais-refinement-list attribute-name="materials" :classNames="{ |
55 |
| - 'ais-refinement-list__count': 'badge', |
56 |
| - 'ais-refinement-list__item': 'checkbox' |
57 |
| - }"> |
58 |
| - <h3 slot="header">Material</h3> |
| 64 | + <ais-refinement-list |
| 65 | + attribute-name="categories" |
| 66 | + :classNames="{ |
| 67 | + 'ais-refinement-list__count': 'badge', |
| 68 | + 'ais-refinement-list__item': 'checkbox' |
| 69 | + }" |
| 70 | + > |
| 71 | + <h3 slot="header">Category</h3> |
59 | 72 | </ais-refinement-list>
|
60 | 73 |
|
61 |
| - <ais-refinement-list attribute-name="colors" :classNames="{ |
62 |
| - 'ais-refinement-list__count': 'badge', |
63 |
| - 'ais-refinement-list__item': 'checkbox' |
64 |
| - }"> |
65 |
| - <h3 slot="header">Color</h3> |
| 74 | + <ais-refinement-list |
| 75 | + attribute-name="brand" |
| 76 | + :classNames="{ |
| 77 | + 'ais-refinement-list__count': 'badge', |
| 78 | + 'ais-refinement-list__item': 'checkbox' |
| 79 | + }" |
| 80 | + > |
| 81 | + <h3 slot="header">Brand</h3> |
66 | 82 | </ais-refinement-list>
|
67 | 83 |
|
68 |
| - <ais-rating attribute-name="rating" :classNames="{ |
69 |
| - 'ais-rating__count': 'badge' |
70 |
| - }"> |
| 84 | + <ais-rating |
| 85 | + attribute-name="rating" |
| 86 | + :classNames="{ |
| 87 | + 'ais-rating__count': 'badge' |
| 88 | + }" |
| 89 | + > |
71 | 90 | <h3 slot="header">Rating</h3>
|
72 | 91 | </ais-rating>
|
73 | 92 |
|
74 | 93 | </div>
|
75 | 94 | <div class="col-md-10 col-sm-9">
|
76 | 95 | <div class="search-controls form-inline">
|
77 |
| - <ais-sort-by-selector :indices="[ |
78 |
| - {name: 'ikea', label: 'Relevance'}, |
79 |
| - {name: 'ikea_price_asc', label: 'Lowest price'}, |
80 |
| - {name: 'ikea_price_desc', label: 'Highest price'} |
81 |
| - ]" |
82 |
| - :classNames="{'ais-sort-by-selector': 'form-control' }" |
| 96 | + <ais-sort-by-selector |
| 97 | + :indices="[ |
| 98 | + {name: 'instant_search', label: 'Relevance'}, |
| 99 | + {name: 'instant_search_price_asc', label: 'Lowest price'}, |
| 100 | + {name: 'instant_search_price_desc', label: 'Highest price'} |
| 101 | + ]" |
| 102 | + :classNames="{ |
| 103 | + 'ais-sort-by-selector': 'form-control' |
| 104 | + }" |
83 | 105 | />
|
84 | 106 |
|
85 |
| - <ais-results-per-page-selector :options="[12, 24, 48]" :classNames="{'ais-results-per-page-selector': 'form-control' }"/> |
| 107 | + <ais-results-per-page-selector |
| 108 | + :options="[12, 24, 48]" |
| 109 | + :classNames="{ |
| 110 | + 'ais-results-per-page-selector': 'form-control' |
| 111 | + }" |
| 112 | + /> |
86 | 113 |
|
87 | 114 | <ais-powered-by />
|
88 | 115 |
|
|
115 | 142 |
|
116 | 143 | <ais-no-results/>
|
117 | 144 |
|
118 |
| - <ais-pagination class="pagination" :classNames="{ |
119 |
| - 'ais-pagination': 'pagination', |
120 |
| - 'ais-pagination__item--active': 'active', |
121 |
| - 'ais-pagination__item--disabled': 'disabled' |
122 |
| -
|
123 |
| - }" v-on:page-change="onPageChange"/> |
| 145 | + <ais-pagination |
| 146 | + class="pagination" |
| 147 | + :classNames="{ |
| 148 | + 'ais-pagination': 'pagination', |
| 149 | + 'ais-pagination__item--active': 'active', |
| 150 | + 'ais-pagination__item--disabled': 'disabled' |
| 151 | + }" |
| 152 | + v-on:page-change="onPageChange" |
| 153 | + /> |
124 | 154 |
|
125 | 155 | </div>
|
126 | 156 | </div>
|
@@ -199,6 +229,7 @@ export default {
|
199 | 229 |
|
200 | 230 | .result__image {
|
201 | 231 | margin-bottom: 100px;
|
| 232 | + height: 150px; |
202 | 233 | }
|
203 | 234 |
|
204 | 235 | .result__name {
|
|
0 commit comments