Skip to content

Commit 0050804

Browse files
Merge pull request #272 from hyva-themes/216/configurable-options
#216 configurable options
2 parents f0ae3ef + f200a53 commit 0050804

File tree

7 files changed

+67
-17
lines changed

7 files changed

+67
-17
lines changed

src/reactapp/src/api/cart/fetchGuestCart/modifier.js

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,37 @@ import { modifyBillingAddressData } from '../setBillingAddress/modifier';
1111

1212
function modifyCartItemsData(cartItems) {
1313
return cartItems.reduce((accumulator, item) => {
14-
const { id, quantity, prices, product } = item;
15-
const priceAmount = _get(prices, 'price.value');
14+
const { id, quantity, prices, product, product_type: productType } = item;
15+
const priceAmount = _get(prices, 'price_incl_tax.value');
1616
const price = formatPrice(priceAmount);
17-
const rowTotalAmount = _get(prices, 'row_total.value');
17+
const rowTotalAmount = _get(prices, 'row_total_incl_tax.value');
1818
const rowTotal = formatPrice(rowTotalAmount);
1919
const productId = _get(product, 'id');
2020
const productSku = _get(product, 'sku');
2121
const productName = _get(product, 'name');
2222
const productUrl = _get(product, 'url_key');
2323
const productSmallImgUrl = _get(product, 'small_image.url');
24+
const selectedConfigOptions = (
25+
_get(item, 'configurable_options') || []
26+
).map((configOption) => {
27+
const {
28+
id: optionId,
29+
value_label: value,
30+
option_label: option,
31+
} = configOption;
32+
return {
33+
optionId,
34+
value,
35+
option,
36+
label: `${option}: ${value}`,
37+
};
38+
});
2439

2540
accumulator[id] = {
2641
id,
42+
productType,
2743
quantity,
44+
isConfigurable: productType === 'configurable',
2845
priceAmount,
2946
price,
3047
rowTotal,
@@ -34,6 +51,7 @@ function modifyCartItemsData(cartItems) {
3451
productName,
3552
productUrl,
3653
productSmallImgUrl,
54+
selectedConfigOptions,
3755
};
3856

3957
return accumulator;
Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
const cartItemsInfo = `
22
items {
33
id
4+
product_type
45
quantity
56
prices {
6-
price {
7+
row_total_incl_tax {
78
value
8-
currency
9-
},
10-
row_total {
9+
}
10+
price_incl_tax {
1111
value
12-
currency
1312
}
1413
}
1514
product {
@@ -22,6 +21,13 @@ items {
2221
}
2322
url_key
2423
}
24+
...on ConfigurableCartItem {
25+
configurable_options {
26+
id
27+
option_label
28+
value_label
29+
}
30+
}
2531
}`;
2632

2733
export default cartItemsInfo;

src/reactapp/src/components/items/components/CartItem.jsx

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,17 @@ function CartItem({ item, isLastItem, actions }) {
2929
/>
3030
<div className="text-xs">
3131
<div>{item.productName}</div>
32-
<div>{item.productSku}</div>
32+
{item.isConfigurable ? (
33+
<ul className="flex flex-wrap space-x-3 text-gray-400">
34+
{item.selectedConfigOptions.map((configOption) => (
35+
<li key={configOption.optionId}>{configOption.label}</li>
36+
))}
37+
</ul>
38+
) : (
39+
<ul className="space-y-1 text-gray-400">
40+
<li>{`SKU: ${item.productSku}`}</li>
41+
</ul>
42+
)}
3343
</div>
3444
</div>
3545
</td>
@@ -76,7 +86,24 @@ function CartItem({ item, isLastItem, actions }) {
7686
alt={item.productSku}
7787
src={item.productSmallImgUrl}
7888
/>
79-
<div className="pl-2">{item.productName}</div>
89+
<div className="pl-2 space-y-2">
90+
<div>{item.productName}</div>
91+
{item.isConfigurable ? (
92+
<ul className="flex flex-wrap space-x-3 text-xs text-gray-400">
93+
{item.selectedConfigOptions.map(
94+
(configOption) => (
95+
<li key={configOption.optionId}>
96+
{configOption.label}
97+
</li>
98+
)
99+
)}
100+
</ul>
101+
) : (
102+
<ul className="space-y-1 text-gray-400">
103+
<li>{`SKU: ${item.productSku}`}</li>
104+
</ul>
105+
)}
106+
</div>
80107
</div>
81108
</td>
82109
</tr>

src/reactapp/src/components/totals/Totals.jsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,13 @@ import useTotalsCartContext from './hooks/useTotalsCartContext';
77

88
function Totals() {
99
const {
10-
subTotalIncl,
11-
subTotalExcl,
1210
discounts,
13-
appliedTaxes,
1411
grandTotal,
1512
hasSubTotal,
16-
hasAppliedTaxes,
13+
subTotalIncl,
14+
appliedTaxes,
1715
hasDiscounts,
16+
hasAppliedTaxes,
1817
hasShippingRate,
1918
shippingMethodRate,
2019
} = useTotalsCartContext();

src/view/frontend/web/css/styles.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/view/frontend/web/js/react-checkout.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/view/frontend/web/js/react-checkout.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)