The repo for Purrform's main BigCommerce store.
feat: redesign product cards (#23)
authored by
Rogerio Romao
and committed by
GitHub
6e0d8127
f1223f23
+352
-326
+180
-171
assets/scss/custom/components/_cards.scss
+180
-171
assets/scss/custom/components/_cards.scss
···
1
1
.card {
2
-
border: 1px solid $white;
3
-
overflow: hidden;
4
-
padding: 0.5rem;
5
-
border-radius: 10px;
6
-
margin-bottom: 25px;
7
-
*{
8
-
font-family: "Filson Pro";
9
-
}
10
-
2
+
border: 1px solid $white;
3
+
min-width: 205px !important;
4
+
overflow: hidden;
5
+
padding: 0.5rem;
6
+
border-radius: 10px;
7
+
margin-bottom: 25px;
8
+
* {
9
+
font-family: 'Filson Pro';
10
+
}
11
11
12
-
&:hover {
13
-
border: 1px solid $gold-color;
12
+
&:hover {
13
+
border: 1px solid $gold-color;
14
+
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1),
15
+
0 3px 10px 0 rgba(0, 0, 0, 0.05);
14
16
15
-
/* .card-figcaption-button {
17
+
/* .card-figcaption-button {
16
18
border-color: $secondary-color;
17
19
background-color: $secondary-color;
18
20
···
22
24
}
23
25
}*/
24
26
25
-
.card-button {
26
-
.button--secondary {
27
-
background-color: $secondary-color !important;
28
-
}
29
-
.add-to-cart {
30
-
background-color: $nav-hover-text !important;
31
-
color: $white-color !important;
32
-
svg {
33
-
path {
34
-
fill: white !important;
35
-
}
27
+
.card-button {
28
+
.button--secondary {
29
+
background-color: $secondary-color !important;
30
+
}
31
+
.add-to-cart {
32
+
background-color: $nav-hover-text !important;
33
+
color: $white-color !important;
34
+
svg {
35
+
path {
36
+
fill: white !important;
37
+
}
38
+
}
39
+
}
36
40
}
37
-
}
38
41
}
39
-
}
40
42
41
-
.card-figure {
42
-
overflow: hidden;
43
-
position: relative;
44
-
.card-img-container {
45
-
&:after {
46
-
padding-bottom: 115.8%;
47
-
}
43
+
.card-figure {
44
+
overflow: hidden;
45
+
position: relative;
46
+
.card-img-container {
47
+
&:after {
48
+
padding-bottom: 70%;
49
+
}
50
+
51
+
img {
52
+
width: 80%;
53
+
height: auto;
54
+
transition: all 0.3s ease;
55
+
}
56
+
}
48
57
}
49
-
50
-
}
51
58
52
-
.card-body {
53
-
text-align: center;
54
-
display: grid;
55
-
grid-template-rows: auto 80px auto;
59
+
.card-body {
60
+
text-align: center;
61
+
display: grid;
62
+
grid-template-rows: auto 85px auto;
56
63
57
-
@include breakpoint("medium") {
58
-
grid-template-rows: auto 55px auto;
59
-
}
64
+
// @include breakpoint('medium') {
65
+
// grid-template-rows: auto 55px auto;
66
+
// }
60
67
61
-
.card-text {
62
-
color: $text-color;
63
-
font-weight: 700;
68
+
.card-text {
69
+
color: $text-color;
70
+
font-weight: 700;
64
71
65
-
span {
66
-
color: $body-color;
67
-
}
68
-
}
72
+
span {
73
+
color: $body-color;
74
+
}
75
+
}
69
76
70
-
.card-productRating {
71
-
height: 25px;
72
-
margin-bottom: 2.5rem;
77
+
.card-productRating {
78
+
height: 5px;
79
+
margin-bottom: 0.5rem;
73
80
74
-
@include breakpoint("medium") {
75
-
margin-bottom: 1rem;
76
-
}
77
-
}
81
+
@include breakpoint('medium') {
82
+
margin-bottom: 0.5rem;
83
+
}
84
+
}
78
85
79
-
.card-title {
80
-
margin-bottom: 0;
81
-
a {
82
-
color: $text-color;
83
-
}
84
-
}
86
+
.card-title {
87
+
margin-bottom: 0;
88
+
a {
89
+
color: $text-color;
90
+
}
91
+
}
85
92
86
-
.custom-fields {
87
-
//height: 5rem;
88
-
// border: 1px solid;
89
-
margin-bottom: 0;
90
-
font-size: 14px;
91
-
height: 3.8rem;
92
-
@include breakpoint("medium") {
93
-
height: 2.5rem;
94
-
}
95
-
}
93
+
.custom-fields {
94
+
//height: 5rem;
95
+
// border: 1px solid;
96
+
margin-bottom: 0;
97
+
font-size: 14px;
98
+
height: 3.8rem;
99
+
@include breakpoint('medium') {
100
+
height: 2.5rem;
101
+
}
102
+
}
96
103
97
-
.quantity {
98
-
display: block;
99
-
margin-top: 0;
104
+
.quantity {
105
+
display: block;
106
+
margin-top: 0;
100
107
101
-
@include breakpoint("medium") {
102
-
display: flex;
103
-
margin-top: 1rem;
104
-
align-items: center;
105
-
justify-content: center;
106
-
grid-gap: 0.5rem;
107
-
}
108
+
@include breakpoint('medium') {
109
+
display: flex;
110
+
margin-top: 1rem;
111
+
align-items: center;
112
+
justify-content: center;
113
+
grid-gap: 0.5rem;
114
+
}
108
115
109
-
.form-field--increments {
110
-
margin-bottom: 0;
111
-
}
116
+
.form-field--increments {
117
+
margin-bottom: 0;
118
+
}
112
119
113
-
.card-figcaption-button {
114
-
margin-top: 1rem;
115
-
padding: 1rem 2.2rem 1rem 0.7rem;
116
-
color: $white-color;
117
-
background-color: $nav-hover-text;
118
-
svg {
119
-
// fill: red;
120
-
}
121
-
@include breakpoint("medium") {
122
-
margin-top: 0;
123
-
background-color: transparent;
124
-
transition: all 0.15s ease;
125
-
color: $body-color;
126
-
&:hover {
127
-
background-color: $nav-hover-text;
128
-
color: $white-color;
129
-
}
120
+
.card-figcaption-button {
121
+
margin-top: 1rem;
122
+
padding: 1rem 2.2rem 1rem 0.7rem;
123
+
color: $white-color;
124
+
background-color: $nav-hover-text;
125
+
svg {
126
+
// fill: red;
127
+
}
128
+
@include breakpoint('medium') {
129
+
margin-top: 0;
130
+
background-color: transparent;
131
+
transition: all 0.15s ease;
132
+
color: $body-color;
133
+
&:hover {
134
+
background-color: $nav-hover-text;
135
+
color: $white-color;
136
+
}
137
+
}
138
+
}
130
139
}
131
-
}
132
-
}
133
140
134
-
.card-button {
135
-
width: 100%;
136
-
.button--secondary {
137
-
// background-color: $secondary-color;
138
-
background-color: transparent;
139
-
margin-top: 1rem;
140
-
transition: all 0.15s ease;
141
-
color: $body-color;
142
-
border: 1px solid $input-field;
141
+
.card-button {
142
+
width: 100%;
143
+
margin-top: 1rem;
144
+
.button--secondary {
145
+
// background-color: $secondary-color;
146
+
background-color: transparent;
147
+
transition: all 0.15s ease;
148
+
color: $body-color;
149
+
// border: 1px solid $input-field;
150
+
height: 75px;
143
151
144
-
@include breakpoint("medium") {
145
-
color: $body-color;
146
-
&:hover {
147
-
background-color: $gold-color !important;
148
-
color: $white-color !important;
149
-
}
150
-
}
151
-
}
152
-
.add-to-cart {
153
-
border: 0;
154
-
display: flex;
155
-
grid-gap: 10px;
156
-
align-items: center;
157
-
justify-content: center;
158
-
text-align: center;
159
-
margin-top: 1rem;
160
-
margin-bottom: 0;
161
-
padding: 1rem 1.5rem;
162
-
background-color: $nav-hover-text;
163
-
color: $white-color;
164
-
svg {
165
-
// stroke: $white-color;
166
-
path {
167
-
fill: white;
168
-
}
169
-
}
170
-
/* background-image: url(https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/-right-icon.png);
152
+
// @include breakpoint('medium') {
153
+
// color: $body-color;
154
+
// &:hover {
155
+
// background-color: $gold-color !important;
156
+
// color: $white-color !important;
157
+
// }
158
+
// }
159
+
}
160
+
.add-to-cart {
161
+
border: 0;
162
+
display: flex;
163
+
grid-gap: 10px;
164
+
align-items: center;
165
+
justify-content: center;
166
+
text-align: center;
167
+
margin-top: 1rem;
168
+
margin-bottom: 0;
169
+
padding: 1rem 1.5rem;
170
+
background-color: $nav-hover-text;
171
+
color: $white-color;
172
+
svg {
173
+
// stroke: $white-color;
174
+
path {
175
+
fill: white;
176
+
}
177
+
}
178
+
/* background-image: url(https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/-right-icon.png);
171
179
background-position: 94% center;
172
180
background-repeat: no-repeat;*/
173
181
174
-
@include breakpoint("medium") {
175
-
margin-top: 0;
176
-
background-color: transparent;
177
-
color: $body-color;
178
-
svg {
179
-
path {
180
-
fill: #bd9b60;
182
+
@include breakpoint('medium') {
183
+
margin-top: 0;
184
+
background-color: transparent;
185
+
color: $body-color;
186
+
svg {
187
+
path {
188
+
fill: #bd9b60;
189
+
}
190
+
}
191
+
}
181
192
}
182
-
}
183
193
}
184
-
}
185
194
}
186
-
}
187
195
}
188
196
189
197
.similar-by-views {
190
-
padding-top: 4rem;
198
+
padding-top: 4rem;
191
199
192
-
@include breakpoint("medium") {
193
-
padding-top: 6rem;
194
-
}
200
+
@include breakpoint('medium') {
201
+
padding-top: 6rem;
202
+
}
195
203
196
-
h2{
197
-
font-family: "Filson Pro";
198
-
color: $headingColor;font-weight: 700;
199
-
font-size: 28px;
200
-
@include breakpoint("medium") {
201
-
font-size: 40px;
204
+
h2 {
205
+
font-family: 'Filson Pro';
206
+
color: $headingColor;
207
+
font-weight: 700;
208
+
font-size: 28px;
209
+
@include breakpoint('medium') {
210
+
font-size: 40px;
211
+
}
202
212
}
203
-
}
204
-
.slick-list {
205
-
.card {
206
-
.card-body {
207
-
grid-template-rows: auto 105px auto !important;
213
+
.slick-list {
214
+
.card {
215
+
.card-body {
216
+
grid-template-rows: auto 105px auto !important;
208
217
209
-
@include breakpoint("medium") {
210
-
grid-template-rows: auto 75px auto !important;
218
+
@include breakpoint('medium') {
219
+
grid-template-rows: auto 75px auto !important;
220
+
}
221
+
}
211
222
}
212
-
}
213
223
}
214
-
}
215
224
}
216
225
217
226
.slick-list {
218
-
.price-section{
219
-
margin-top: 0.5rem;
220
-
}
227
+
.price-section {
228
+
margin-top: 0.5rem;
229
+
}
221
230
}
+105
-105
assets/scss/custom/components/_productCarousel.scss
+105
-105
assets/scss/custom/components/_productCarousel.scss
···
1
1
.products-carousel {
2
-
.productCarousel {
3
-
margin: auto;
2
+
.productCarousel {
3
+
margin: auto;
4
4
5
-
.slick-arrow {
6
-
background-color: transparent;
5
+
.slick-arrow {
6
+
background-color: transparent;
7
7
8
-
&:before {
9
-
transform: scale(1, 2.5);
10
-
}
11
-
}
8
+
&:before {
9
+
transform: scale(1, 2.5);
10
+
}
11
+
}
12
12
13
-
.slick-disabled {
14
-
opacity: 1 !important;
15
-
&:before {
16
-
opacity: 1 !important;
17
-
}
18
-
}
13
+
.slick-disabled {
14
+
opacity: 1 !important;
15
+
&:before {
16
+
opacity: 1 !important;
17
+
}
18
+
}
19
19
20
-
.slick-prev {
21
-
&:before {
22
-
color: $gold-color;
23
-
content: "<";
24
-
background-image: none;
25
-
/*position: relative;
20
+
.slick-prev {
21
+
&:before {
22
+
color: $gold-color;
23
+
content: '<';
24
+
background-image: none;
25
+
/*position: relative;
26
26
left: 5px;*/
27
-
}
28
-
}
29
-
.slick-next {
30
-
&:before {
31
-
color: $gold-color;
32
-
content: ">";
33
-
background-image: none;
34
-
}
35
-
}
36
-
.slick-list {
37
-
.productCarousel-slide {
38
-
.card {
39
-
.card-body {
40
-
grid-template-rows: auto 95px auto;
41
-
.form-increment {
42
-
width: 100% !important;
43
-
max-width: 100% !important;
44
-
.form-increment {
45
-
margin: auto;
46
-
}
27
+
}
28
+
}
29
+
.slick-next {
30
+
&:before {
31
+
color: $gold-color;
32
+
content: '>';
33
+
background-image: none;
34
+
}
35
+
}
36
+
.slick-list {
37
+
.productCarousel-slide {
38
+
.card {
39
+
.card-body {
40
+
grid-template-rows: auto 95px auto;
41
+
.form-increment {
42
+
width: 100% !important;
43
+
max-width: 100% !important;
44
+
.form-increment {
45
+
margin: auto;
46
+
}
47
+
}
48
+
}
49
+
}
47
50
}
48
-
}
49
51
}
50
-
}
51
52
}
52
-
}
53
53
}
54
54
55
55
.similar-by-views {
56
-
margin-bottom: 4rem;
57
-
overflow: visible;
58
-
.productCarousel {
59
-
margin: auto;
56
+
margin-bottom: 4rem;
57
+
overflow: visible;
58
+
.productCarousel {
59
+
margin: auto;
60
60
61
-
.slick-arrow {
62
-
background-color: transparent;
63
-
@media only screen and (min-width: 1200px) {
64
-
// background-color: red;
65
-
}
66
-
&:before {
67
-
transform: scale(1, 2.5);
68
-
}
69
-
}
61
+
.slick-arrow {
62
+
background-color: transparent;
63
+
@media only screen and (min-width: 1200px) {
64
+
// background-color: red;
65
+
}
66
+
&:before {
67
+
transform: scale(1, 2.5);
68
+
}
69
+
}
70
70
71
-
.slick-disabled {
72
-
opacity: 1 !important;
73
-
&:before {
74
-
opacity: 1 !important;
75
-
}
76
-
}
71
+
.slick-disabled {
72
+
opacity: 1 !important;
73
+
&:before {
74
+
opacity: 1 !important;
75
+
}
76
+
}
77
77
78
-
.slick-prev {
79
-
&:before {
80
-
color: $gold-color;
81
-
content: "<";
82
-
background-image: none;
83
-
/*position: relative;
78
+
.slick-prev {
79
+
&:before {
80
+
color: $gold-color;
81
+
content: '<';
82
+
background-image: none;
83
+
/*position: relative;
84
84
left: 5px;*/
85
-
}
86
-
}
87
-
.slick-next {
88
-
&:before {
89
-
color: $gold-color;
90
-
content: ">";
91
-
background-image: none;
92
-
}
93
-
}
94
-
.slick-list {
95
-
margin-bottom: 2rem;
96
-
.productCarousel-slide {
97
-
.card {
98
-
.card-body {
99
-
grid-template-rows: auto 95px auto;
100
-
.add-to-cart{
101
-
padding: 1rem 0.5rem;
102
-
@include breakpoint("medium") {
103
-
padding: 1rem 1.5rem;
104
-
}
105
-
}
106
-
.form-increment {
107
-
// display: none;
108
-
// margin-top: 6px;
109
-
width: 100% !important;
110
-
max-width: 100% !important;
111
-
.form-increment {
112
-
margin: auto;
113
-
}
85
+
}
86
+
}
87
+
.slick-next {
88
+
&:before {
89
+
color: $gold-color;
90
+
content: '>';
91
+
background-image: none;
92
+
}
93
+
}
94
+
.slick-list {
95
+
margin-bottom: 2rem;
96
+
.productCarousel-slide {
97
+
.card {
98
+
.card-body {
99
+
grid-template-rows: auto 95px auto;
100
+
.add-to-cart {
101
+
padding: 1rem 0.5rem;
102
+
@include breakpoint('medium') {
103
+
padding: 1rem 1.5rem;
104
+
}
105
+
}
106
+
.form-increment {
107
+
// display: none;
108
+
// margin-top: 6px;
109
+
width: 100% !important;
110
+
max-width: 100% !important;
111
+
.form-increment {
112
+
margin: auto;
113
+
}
114
+
}
115
+
}
116
+
}
114
117
}
115
-
}
116
118
}
117
-
}
118
119
}
119
-
}
120
120
121
-
.slick-dots {
122
-
margin-bottom: 10px;
123
-
li button {
124
-
border: 1px solid grey;
121
+
.slick-dots {
122
+
margin-bottom: 10px;
123
+
li button {
124
+
border: 1px solid grey;
125
+
}
125
126
}
126
-
}
127
127
}
+17
-22
assets/scss/layouts/products/_productGrid.scss
+17
-22
assets/scss/layouts/products/_productGrid.scss
···
2
2
// PRODUCT GRID (CSS)
3
3
// =============================================================================
4
4
5
-
6
5
// Product grid view
7
6
// -----------------------------------------------------------------------------
8
7
//
···
11
10
// -----------------------------------------------------------------------------
12
11
13
12
.productGrid {
14
-
15
-
@include u-listBullets("none");
16
-
@include grid-row($behavior: "nest");
13
+
@include u-listBullets('none');
14
+
@include grid-row($behavior: 'nest');
17
15
font-size: 0; // 1
18
-
margin-bottom: spacing("single");
16
+
margin-bottom: spacing('single');
19
17
20
18
.product {
21
19
@include grid-column(6, $float: none);
22
20
display: inline-block;
23
-
font-size: fontSize("base"); // 1
21
+
font-size: fontSize('base'); // 1
24
22
vertical-align: top;
25
23
26
-
@include breakpoint("small") {
24
+
@include breakpoint('small') {
27
25
width: grid-calc(4, $total-columns);
28
26
}
29
27
30
-
@include breakpoint("medium") {
28
+
@include breakpoint('medium') {
31
29
width: grid-calc(3, $total-columns);
32
30
}
33
31
}
34
32
}
35
-
36
33
37
34
// Product when sidebar is present
38
35
// -----------------------------------------------------------------------------
···
43
40
44
41
.page-sidebar + .page-content {
45
42
.productGrid {
46
-
.product { // 1
47
-
@include breakpoint("small") {
43
+
.product {
44
+
// 1
45
+
@include breakpoint('small') {
48
46
width: grid-calc(4, $total-columns);
49
47
}
50
48
}
51
49
}
52
-
53
50
}
54
-
55
51
56
52
//
57
53
// Product Grid with masonry layout
···
65
61
column-count: 2;
66
62
column-fill: auto;
67
63
column-gap: remCalc(20px);
68
-
margin: 0 0 spacing("single");
64
+
margin: 0 0 spacing('single');
69
65
overflow: hidden;
70
66
71
-
@include breakpoint("small") {
67
+
@include breakpoint('small') {
72
68
column-count: 3;
73
69
}
74
70
75
-
@include breakpoint("medium") {
71
+
@include breakpoint('medium') {
76
72
column-count: 4;
77
73
}
78
74
79
75
.product {
80
76
break-inside: avoid;
81
77
display: block;
82
-
margin-bottom: spacing("double");
78
+
margin-bottom: spacing('double');
83
79
padding: 0;
84
80
page-break-inside: avoid; // for firefox
85
81
width: 100%;
···
90
86
}
91
87
}
92
88
93
-
94
89
// Product grid view variation
95
90
// -----------------------------------------------------------------------------
96
91
97
92
.productGrid--maxCol6 {
98
93
.no-csscolumns & {
99
94
.product {
100
-
@include breakpoint("medium") {
95
+
@include breakpoint('medium') {
101
96
width: grid-calc(2, $total-columns);
102
97
}
103
98
}
104
99
}
105
100
106
101
.csscolumns & {
107
-
@include breakpoint("medium") {
102
+
@include breakpoint('medium') {
108
103
column-count: 6;
109
104
}
110
105
}
···
113
108
.productGrid--maxCol3 {
114
109
.no-csscolumns & {
115
110
.product {
116
-
@include breakpoint("medium") {
111
+
@include breakpoint('medium') {
117
112
width: grid-calc(4, $total-columns);
118
113
}
119
114
}
120
115
}
121
116
122
117
.csscolumns & {
123
-
@include breakpoint("medium") {
118
+
@include breakpoint('medium') {
124
119
@include grid-column(12);
125
120
126
121
float: none;
+17
-18
assets/scss/layouts/products/_productView.scss
+17
-18
assets/scss/layouts/products/_productView.scss
···
2
2
// PRODUCT VIEW (CSS)
3
3
// =============================================================================
4
4
5
-
6
5
// Product view layout
7
6
// -----------------------------------------------------------------------------
8
7
9
8
.productView {
10
-
@include grid-row($behavior: "nest");
9
+
@include grid-row($behavior: 'nest');
11
10
12
11
display: flex;
13
12
flex-direction: column;
14
13
justify-content: flex-start;
15
-
margin-left: -(spacing("base"));
16
-
margin-right: -(spacing("base"));
14
+
margin-left: -(spacing('base'));
15
+
margin-right: -(spacing('base'));
17
16
18
-
@include breakpoint("medium") {
17
+
@include breakpoint('medium') {
19
18
display: block;
20
19
}
21
20
···
33
32
34
33
.productView-images {
35
34
@include grid-column(12);
36
-
padding-left: spacing("base");
37
-
padding-right: spacing("base");
35
+
padding-left: spacing('base');
36
+
padding-right: spacing('base');
38
37
39
-
@include breakpoint("medium") {
38
+
@include breakpoint('medium') {
40
39
width: grid-calc(6, $total-columns);
41
40
}
42
41
}
43
42
44
43
.productView-details {
45
44
@include grid-column(12);
46
-
padding-left: spacing("base");
47
-
padding-right: spacing("base");
45
+
padding-left: spacing('base');
46
+
padding-right: spacing('base');
48
47
49
-
@include breakpoint("medium") {
48
+
@include breakpoint('medium') {
50
49
clear: right;
51
50
float: right;
52
51
width: grid-calc(6, $total-columns);
···
63
62
64
63
.productView-description {
65
64
@include grid-column(12);
66
-
padding-left: spacing("base");
67
-
padding-right: spacing("base");
65
+
padding-left: spacing('base');
66
+
padding-right: spacing('base');
68
67
position: relative;
69
68
z-index: 1;
70
69
71
70
.productView-title {
72
-
border-bottom: container("border");
73
-
margin-bottom: spacing("base");
74
-
padding-left: spacing("base");
75
-
padding-right: spacing("base");
71
+
border-bottom: container('border');
72
+
margin-bottom: spacing('base');
73
+
padding-left: spacing('base');
74
+
padding-right: spacing('base');
76
75
}
77
76
78
77
.productView-description {
79
-
@include breakpoint("medium") {
78
+
@include breakpoint('medium') {
80
79
clear: both;
81
80
float: none;
82
81
width: 100%;
+1
-1
config.json
+1
-1
config.json
stencil.conf.js
stencil.conf.cjs
stencil.conf.js
stencil.conf.cjs
+23
-7
templates/components/products/card.html
+23
-7
templates/components/products/card.html
···
97
97
98
98
99
99
<!--
100
-
add_to_cart spoofing
101
-
<a href="/cart.php?action=add&product_id={{id}}"
100
+
add_to_cart spoofing
101
+
<a href="/cart.php?action=add&product_id={{id}}"
102
102
data-event-type="product-click"
103
103
data-button-type="add-cart"
104
104
class="button"
105
-
>
105
+
>
106
106
Add to Cart
107
107
</a>
108
-
<span class="product-status-message aria-description--hidden">{{lang 'category.add_cart_announcement'}}</span>
108
+
<span class="product-status-message aria-description--hidden">{{lang 'category.add_cart_announcement'}}</span>
109
109
-->
110
110
<!--{{#if brand.name}}
111
111
<p class="card-text" data-test-info-type="brandName">{{brand.name}}</p>
···
117
117
</a>
118
118
</strong>
119
119
</h3>
120
-
<p class="custom-fields">
120
+
{{!-- <p class="custom-fields">
121
121
{{#each custom_fields}}
122
122
{{#if name '==' 'CALORIE'}}
123
123
<span>{{value}} </span>
···
125
125
<span>{{value}} </span>
126
126
{{/if}}
127
127
{{/each}}
128
-
</p>
128
+
</p> --}}
129
129
<div class="card-text card-price" data-test-info-type="price">
130
130
{{#or customer (unless settings.hide_price_from_guests)}}
131
131
{{> components/products/price price=price}}
···
187
187
188
188
{{#if add_to_cart_url }}
189
189
{{> components/products/quick-add-to-cart with_wallet_buttons=true}}
190
-
190
+
191
191
{{!--
192
192
<a href="{{add_to_cart_url}}" data-event-type="product-click" data-button-type="add-cart"
193
193
class="button add-to-cart button--small">
···
253
253
254
254
</div>
255
255
</article>
256
+
257
+
<style>
258
+
article.card {
259
+
border: 1px solid #556153;
260
+
}
261
+
.card-button .quick-cart {
262
+
background-color: #687D69;
263
+
color: #fff;
264
+
border-radius: 6px;
265
+
transition: all 0.3s ease;
266
+
}
267
+
.card-button .quick-cart:hover {
268
+
background-color: #556153;
269
+
color: #fff;
270
+
}
271
+
</style>
+9
-2
templates/components/products/carousel.html
+9
-2
templates/components/products/carousel.html
···
8
8
"slide": "[data-product-slide]",
9
9
"responsive": [
10
10
{
11
-
"breakpoint": 800,
11
+
"breakpoint": 1200,
12
12
"settings": {
13
13
"slidesToShow": {{ columns }},
14
14
"slidesToScroll": {{ columns }}
15
15
}
16
16
},
17
17
{
18
-
"breakpoint": 550,
18
+
"breakpoint": 1000,
19
19
"settings": {
20
20
"slidesToShow": 3,
21
21
"slidesToScroll": 3
22
+
}
23
+
},
24
+
{
25
+
"breakpoint": 660,
26
+
"settings": {
27
+
"slidesToShow": 2,
28
+
"slidesToScroll": 2
22
29
}
23
30
}
24
31
]