Skip to content

Commit 4bfea3a

Browse files
authored
Merge pull request #53 from drzzle-app/checkoutUpdates
Checkout updates
2 parents 0b24d15 + 7a5c7c4 commit 4bfea3a

File tree

8 files changed

+104
-29
lines changed

8 files changed

+104
-29
lines changed

src/droplets/accordion/themes/default/styles.less

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,14 @@
1616
}
1717

1818
.drzAccordion-section-title {
19+
align-items: center;
1920
background-color: @baseColor;
2021
border-bottom: 0.5px;
2122
border-color: fade(@white, 30%);
2223
border-style: solid;
2324
border-width: 1px;
2425
color: @white;
25-
display: block;
26+
display: flex;
2627
padding: 15px;
2728
position: relative;
2829
text-decoration: none;

src/droplets/navigation/template.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<div class="drzModal-closeRow"><a class="drzModal-closeLink" href="#"></a></div>
1616
<div class="drzModal-content drzModal-wide drzModal-search">
1717
<div class="drzModal-search-icon"></div>
18-
<input type="text" class="drzModal-search-bar" data-search='{ "file": "js/app-search.json" }' placeholder="Search..." />
18+
<input type="text" class="drzModal-search-bar" data-search='{ "file": "static/example-search.json" }' placeholder="Search..." />
1919
</div>
2020
</div>
2121
</div>

src/droplets/product-card/template.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<span class="drzProduct-card-desc">
1313
Small product description here.
1414
</span>
15-
<a class="drzProduct-card-cta" href="#">
15+
<a class="drzProduct-card-cta" href="#" name="add-to-cart">
1616
Add to Cart
1717
</a>
1818
</div>

src/tools/modals/themes/default/styles.less

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,7 @@
250250

251251
/* site search results under modals */
252252
.searchResults-container {
253+
border-bottom: 1px solid darken(@white, 5%);
253254
border-left: 1px solid darken(@white, 5%);
254255
border-right: 1px solid darken(@white, 5%);
255256
border-top: 1px solid darken(@white, 5%);
@@ -259,11 +260,6 @@
259260
width: 400px;
260261
z-index: 10;
261262

262-
.searchResult-link {
263-
color: fade(@black, 50%);
264-
text-decoration: none;
265-
}
266-
267263
.searchResult {
268264
.row;
269265
background-color: @white;
@@ -281,6 +277,18 @@
281277
background-color: darken(@white, 2%);
282278
}
283279
}
280+
281+
.searchResult-link {
282+
color: fade(@black, 50%);
283+
text-decoration: none;
284+
285+
&:last-child {
286+
287+
.searchResult {
288+
border-bottom: 0;
289+
}
290+
}
291+
}
284292
}
285293

286294
.drzModal-search {

src/tools/modals/types/search/template.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@
88
<div class="drzModal-closeRow"><a class="drzModal-closeLink" href="#"></a></div>
99
<div class="drzModal-content drzModal-wide drzModal-search">
1010
<div class="drzModal-search-icon"></div>
11-
<input type="text" class="drzModal-search-bar" placeholder="Search...">
11+
<input
12+
type="text"
13+
class="drzModal-search-bar"
14+
data-search='{ "file": "static/example-search.json" }'
15+
placeholder="Search...">
1216
</div>
1317
</div>
1418
</div>

src/tools/slide-checkout/plugin.js

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898
$slideCheckoutBox.css({ zIndex: options.zIndex });
9999
}
100100

101-
const cartItems = siteStore.cartItems;
101+
let cartItems = siteStore.cartItems;
102102
const mappedProducts = {};
103103

104104
const methods = {
@@ -338,7 +338,7 @@
338338
itemInv = methods.getInventory({ item: testItem });
339339
}
340340
// max allowed is to limit how much a shopper can buy
341-
const maxAllowed = item.product.maxPurchaseQuantity;
341+
const maxAllowed = parseInt(item.product.maxPurchaseQuantity, 10);
342342
const newCount = item.count + step;
343343
const noInvLimit = itemInv === -1;
344344
const noMaxLimit = itemInv === -1;
@@ -357,6 +357,8 @@
357357
// inventory & max allowed limited, desired count is under or equal to total inventory AND
358358
// desired count is less than or equal to the max allowed
359359
const addStepTwo = fullyLimited && newCount <= itemInv && newCount <= maxAllowed;
360+
// desired count is over maxAllowed
361+
const addOverMaxAllowed = fullyLimited && newCount > maxAllowed;
360362
// inventory limit but no max allowed limit and desired count is more
361363
// than total inventory
362364
const addMaxStepOne = invLimitedMaxNot && (newCount > itemInv);
@@ -375,9 +377,11 @@
375377
if (noInventory) {
376378
// no inventory available to be added due to an option inventory limit
377379
// like size/color etc.
378-
methods.optionWarning[index] = `Not enough ${methods.lastOption} items in stock.`;
379380
added = false;
380-
errorMsg = methods.optionWarning[index];
381+
if (!addOverMaxAllowed) {
382+
methods.optionWarning[index] = `Not enough ${methods.lastOption} items in stock.`;
383+
errorMsg = methods.optionWarning[index];
384+
}
381385
} else if (fullyUnlimited || addStepOne || addStepTwo || addStepThree) {
382386
item.count += step;
383387
} else if (addMaxStepOne || addMaxStepTwo) {
@@ -391,6 +395,10 @@
391395
added = false;
392396
errorMsg = methods.countWarning[index];
393397
}
398+
// customer error checks
399+
if (addOverMaxAllowed) {
400+
methods.countWarning[index] = `Item limited to ${maxAllowed} per order.`;
401+
}
394402
methods.buildCart(cartItems);
395403
methods.saveCart(cartItems);
396404
return { added, errorMsg };
@@ -401,7 +409,7 @@
401409
methods.countWarning = {};
402410
methods.optionWarning = {};
403411
const item = cartItems[index];
404-
const minAllowed = item.product.minPurchaseQuantity;
412+
const minAllowed = parseInt(item.product.minPurchaseQuantity, 10);
405413
const noMinLimit = minAllowed === -1;
406414
const step = parseInt(item.product.countStep, 10);
407415
const newCount = item.count - step;
@@ -1135,7 +1143,7 @@
11351143
}
11361144
}
11371145
if (index >= 0 && product) {
1138-
// this would mean the at least one of the product is already in the cart
1146+
// this would mean that at least one of the product is already in the cart
11391147
const testItem = methods.queryCounts({ newCartItem, payload, count });
11401148
const inventory = methods.getInventory({ item: testItem });
11411149
const canAdd = inventory > 0 || inventory === -1;
@@ -1185,10 +1193,10 @@
11851193
<div class="drzSlideCheckout-cart-alertMsg">
11861194
Message here
11871195
</div>
1188-
<a
1196+
<button
11891197
href="#"
11901198
name="alert-checkout"
1191-
class="drzSlideCheckout-cart-alertCO">Checkout</a>
1199+
class="drzSlideCheckout-cart-alertCO">Checkout</button>
11921200
</div>
11931201
</div>
11941202
`);
@@ -1225,9 +1233,24 @@
12251233
}
12261234
if (params.message) {
12271235
methods.$alert.find('.drzSlideCheckout-cart-alertMsg')
1228-
.html(params.message);
1236+
.html(`<span role="alert">${params.message}</span>`);
12291237
}
12301238
},
1239+
mapCart(cart = []) {
1240+
// We use this to update any items saved in the cart from a users
1241+
// previous session. In some cases, a store may update product info
1242+
// so we always want that up to date in the frontend
1243+
const map = [];
1244+
cart.forEach((item) => {
1245+
if (mappedProducts[item.product._id]) {
1246+
const updated = $.extend(true, item, {
1247+
product: mappedProducts[item.product._id],
1248+
});
1249+
map.push(updated);
1250+
}
1251+
});
1252+
return map;
1253+
},
12311254
fetchProducts() {
12321255
// fetch all products on pages
12331256
const $productBtns = $('[data-product-id]');
@@ -1256,6 +1279,8 @@
12561279
$(`[name="add-to-cart"][data-product-id="${product._id}"]`).addClass(classes.disabled);
12571280
}
12581281
});
1282+
cartItems = methods.mapCart(cartItems);
1283+
methods.buildCart(cartItems);
12591284
},
12601285
});
12611286
},
@@ -1266,7 +1291,6 @@
12661291
// bind all listeners
12671292
$openCartBtn.click(methods.onCartClick);
12681293
$backBtn.click(methods.onCartClick);
1269-
methods.buildCart(cartItems);
12701294
// note: need to split some of the next button callbacks so
12711295
// they do not fire twice (ie with the form validation callback)
12721296
$fromStepBtn.click(methods.onFromClick);

src/tools/slide-checkout/themes/default/styles.less

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@
153153
font-family: 'drzzle';
154154
margin-left: 10px;
155155
position: relative;
156-
top: -4px;
156+
top: -2px;
157157

158158
@media @mobile {
159159
content: '-';
@@ -179,9 +179,7 @@
179179
.drzSlideCheckout-step-legendName {
180180
.text-overflow;
181181
display: inline-block;
182-
font-style: italic;
183182
position: relative;
184-
top: -2px;
185183
}
186184

187185
.drzSlideCheckout-back {
@@ -356,42 +354,61 @@
356354
}
357355

358356
.drzSlideCheckout-cart-itemCount {
357+
align-items: center;
359358
background-color: @white;
360359
border: 0;
361360
border-bottom-width: 1px;
362361
border-color: @storeBtnBorder;
363362
border-style: solid;
364363
border-top-width: 1px;
365-
display: inline-block;
366-
float: left;
367-
height: 23px;
368-
padding: 0 10px 1px;
364+
display: flex;
365+
height: 25px;
366+
justify-content: center;
367+
padding: 0 5px;
369368
}
370369

371370
.drzSlideCheckout-cart-add {
372-
.drzSlideCheckout-cart-countBtn;
371+
align-items: center;
373372
border-color: @storeBtnBorder;
374373
border-radius: 0;
375374
border-style: solid;
376375
border-width: 1px;
376+
display: flex;
377+
height: 25px;
378+
justify-content: center;
379+
padding: 0;
380+
381+
&:hover {
382+
cursor: pointer;
383+
}
377384

378385
&:after {
379386
content: '\e814';
380387
display: inline-block;
388+
font-family: 'drzzle';
381389
position: relative;
382390
transform: rotate(45deg);
383391
}
384392
}
385393

386394
.drzSlideCheckout-cart-remove {
387-
.drzSlideCheckout-cart-countBtn;
395+
align-items: center;
388396
border-color: @storeBtnBorder;
389397
border-radius: 0;
390398
border-style: solid;
391399
border-width: 1px;
400+
display: flex;
401+
height: 25px;
402+
justify-content: center;
403+
padding: 0;
404+
405+
&:hover {
406+
cursor: pointer;
407+
}
392408

393409
&:after {
394410
content: '\e8ea';
411+
font-family: 'drzzle';
395412
}
396413
}
397414

@@ -439,6 +456,9 @@
439456
}
440457

441458
.drzSlideCheckout-cart-itemCounter {
459+
display: grid;
460+
grid-template-columns: 25px minmax(25px, max-content) 25px;
461+
grid-template-rows: auto;
442462
margin-bottom: @itemMargin;
443463
}
444464

@@ -520,6 +540,7 @@
520540
border-width: 2px;
521541
color: fade(@black, 60%);
522542
display: block;
543+
font-family: inherit;
523544
font-size: 1.1rem;
524545
padding: 10px 20px;
525546
width: 100%;
@@ -908,7 +929,7 @@
908929
background-color: @white;
909930
display: grid;
910931
grid-gap: 5px;
911-
grid-template-columns: 20px 1fr 40px;
932+
grid-template-columns: 20px 1fr max-content;
912933
grid-template-rows: auto;
913934
margin-bottom: 5px;
914935
padding: 8px;
@@ -1196,6 +1217,7 @@
11961217

11971218
.drzSlideCheckout-cart-alertCO {
11981219
background-color: fade(@black, 25%);
1220+
border: 0;
11991221
border-radius: 20px;
12001222
color: @white;
12011223
display: inline-block;
@@ -1205,6 +1227,10 @@
12051227
padding: 3px 10px;
12061228
text-decoration: none;
12071229

1230+
&:hover {
1231+
cursor: pointer;
1232+
}
1233+
12081234
&:after {
12091235
content: '\f178';
12101236
display: inline-block;

static/example-search.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
[
2+
{
3+
"pagetitle":"My Page Title",
4+
"href": "link-to-page.html",
5+
"metadata":"Searchable key words for this page"
6+
},
7+
{
8+
"pagetitle":"My Page 2 Title",
9+
"href": "link-to-page-2.html",
10+
"metadata":"Searchable key words for this page"
11+
}
12+
]

0 commit comments

Comments
 (0)