From 3d4d9b66173aa9e1d82d648f0b7706bed17a9aaf Mon Sep 17 00:00:00 2001 From: Bob Date: Fri, 7 Feb 2025 14:59:52 +0100 Subject: [PATCH 1/4] Get attribute values from the v2 query --- resources/js/stores/useCart.js | 36 +++++++++++++++++------------ resources/views/cart/item.blade.php | 2 +- 2 files changed, 22 insertions(+), 16 deletions(-) diff --git a/resources/js/stores/useCart.js b/resources/js/stores/useCart.js index 65740a1d..4b2c2a72 100644 --- a/resources/js/stores/useCart.js +++ b/resources/js/stores/useCart.js @@ -1,5 +1,5 @@ import { StorageSerializers, asyncComputed, useLocalStorage, useMemoize } from '@vueuse/core' -import { computed, watch } from 'vue' +import { computed } from 'vue' import { GraphQLError } from '../fetch' import { mask, clearMask } from './useMask' @@ -59,16 +59,17 @@ export const fetchCustomerCart = async function () { export const fetchAttributeValues = async function (attributes = []) { if (!attributes.length) { - return { data: { customAttributeMetadata: { items: null } } } + return { data: { customAttributeMetadataV2: { items: null } } } } return await window.magentoGraphQL( ` query attributeValues($attributes: [AttributeInput!]!) { - customAttributeMetadata(attributes: $attributes) { + customAttributeMetadataV2(attributes: $attributes) { items { - attribute_code - attribute_options { + label + code + options { label value } @@ -121,7 +122,7 @@ export const cart = computed({ set(value) { getAttributeValues() .then((response) => { - if (!response?.data?.customAttributeMetadata?.items) { + if (!response?.data?.customAttributeMetadataV2?.items) { value.items = value.items?.map((item) => { item.is_available = checkAvailability(item) @@ -132,18 +133,22 @@ export const cart = computed({ } const mapping = Object.fromEntries( - response.data.customAttributeMetadata.items.map((attribute) => [ - attribute.attribute_code, - Object.fromEntries(attribute.attribute_options.map((value) => [value.value, value.label])), + response.data.customAttributeMetadataV2.items.map((attribute) => [ + attribute.code, + { + label: attribute.label, + options: Object.fromEntries(attribute.options.map((value) => [value.value, value.label])) + }, ]), ) - + value.items = value.items?.map((cartItem) => { cartItem.is_available = checkAvailability(cartItem) cartItem.product.attribute_values = {} for (const key in mapping) { cartItem.product.attribute_values[key] = cartItem.product[key] + if (cartItem.product.attribute_values[key] === null) { continue } @@ -151,14 +156,15 @@ export const cart = computed({ if (typeof cartItem.product.attribute_values[key] === 'string') { cartItem.product.attribute_values[key] = cartItem.product.attribute_values[key].split(',') } - + if (typeof cartItem.product.attribute_values[key] !== 'object') { cartItem.product.attribute_values[key] = [cartItem.product.attribute_values[key]] } - - cartItem.product.attribute_values[key] = cartItem.product.attribute_values[key].map( - (value) => mapping[key][value] || value, - ) + + Vue.set(cartItem.product.attribute_values, key, { + options: cartItem.product.attribute_values[key].map((value) => mapping[key]?.options[value] || value), + label: mapping[key]?.label + }) } return cartItem diff --git a/resources/views/cart/item.blade.php b/resources/views/cart/item.blade.php index ef19b4a5..1059a0f2 100644 --- a/resources/views/cart/item.blade.php +++ b/resources/views/cart/item.blade.php @@ -27,7 +27,7 @@ class="mx-auto"
@include('rapidez::cart.item.remove') From 507a5deacd3a70ca32c274b8b2a445c4f151f791 Mon Sep 17 00:00:00 2001 From: BobWez98 Date: Fri, 7 Feb 2025 14:01:10 +0000 Subject: [PATCH 2/4] Apply fixes from Prettier --- resources/js/stores/useCart.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/resources/js/stores/useCart.js b/resources/js/stores/useCart.js index 4b2c2a72..d55ae03f 100644 --- a/resources/js/stores/useCart.js +++ b/resources/js/stores/useCart.js @@ -137,18 +137,18 @@ export const cart = computed({ attribute.code, { label: attribute.label, - options: Object.fromEntries(attribute.options.map((value) => [value.value, value.label])) + options: Object.fromEntries(attribute.options.map((value) => [value.value, value.label])), }, ]), ) - + value.items = value.items?.map((cartItem) => { cartItem.is_available = checkAvailability(cartItem) cartItem.product.attribute_values = {} for (const key in mapping) { cartItem.product.attribute_values[key] = cartItem.product[key] - + if (cartItem.product.attribute_values[key] === null) { continue } @@ -156,14 +156,14 @@ export const cart = computed({ if (typeof cartItem.product.attribute_values[key] === 'string') { cartItem.product.attribute_values[key] = cartItem.product.attribute_values[key].split(',') } - + if (typeof cartItem.product.attribute_values[key] !== 'object') { cartItem.product.attribute_values[key] = [cartItem.product.attribute_values[key]] } - + Vue.set(cartItem.product.attribute_values, key, { options: cartItem.product.attribute_values[key].map((value) => mapping[key]?.options[value] || value), - label: mapping[key]?.label + label: mapping[key]?.label, }) } From f8efa6281dbc4a2c0cc21b4cf7f39323121cde3f Mon Sep 17 00:00:00 2001 From: Bob Date: Mon, 3 Mar 2025 14:56:44 +0100 Subject: [PATCH 3/4] Get attribute label from attributes store --- resources/js/stores/useAttributes.js | 4 ++++ resources/js/stores/useCart.js | 22 ++++++++++------------ resources/views/cart/item.blade.php | 4 ++-- 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/resources/js/stores/useAttributes.js b/resources/js/stores/useAttributes.js index 4ecc2905..ff7f3cfa 100644 --- a/resources/js/stores/useAttributes.js +++ b/resources/js/stores/useAttributes.js @@ -37,4 +37,8 @@ export const attributes = computedAsync( { lazy: true, shallow: false }, ) +window.attributeLabel = (attributeCode) => { + return Object.values(attributes.value)?.find((attribute) => attribute.code === attributeCode)?.name +} + export default () => attributes diff --git a/resources/js/stores/useCart.js b/resources/js/stores/useCart.js index d55ae03f..9a41f00b 100644 --- a/resources/js/stores/useCart.js +++ b/resources/js/stores/useCart.js @@ -131,15 +131,14 @@ export const cart = computed({ return } - + const mapping = Object.fromEntries( - response.data.customAttributeMetadataV2.items.map((attribute) => [ - attribute.code, - { - label: attribute.label, - options: Object.fromEntries(attribute.options.map((value) => [value.value, value.label])), - }, - ]), + response.data.customAttributeMetadataV2.items.map((attribute) => { + return [ + attribute.code, + Object.fromEntries(attribute.options.map((value) => [value.value, value.label])), + ] + }) ) value.items = value.items?.map((cartItem) => { @@ -161,10 +160,9 @@ export const cart = computed({ cartItem.product.attribute_values[key] = [cartItem.product.attribute_values[key]] } - Vue.set(cartItem.product.attribute_values, key, { - options: cartItem.product.attribute_values[key].map((value) => mapping[key]?.options[value] || value), - label: mapping[key]?.label, - }) + cartItem.product.attribute_values[key] = cartItem.product.attribute_values[key].map( + (value) => mapping[key][value] || value, + ) } return cartItem diff --git a/resources/views/cart/item.blade.php b/resources/views/cart/item.blade.php index 1059a0f2..34db0db5 100644 --- a/resources/views/cart/item.blade.php +++ b/resources/views/cart/item.blade.php @@ -26,8 +26,8 @@ class="mx-auto" @{{ option.label }}: @{{ option.values[0].label || option.values[0].value }}
-