Skip to content

Remove the attribute/list call around the codebase #3948

@pkarw

Description

@pkarw

What is the motivation for adding / enhancing this feature?

If we moved the fetching of attribute meta-data server-side (in the storefront-api or vue-storefront-api or both) we can potentially resign from fetching attribute metadata client's side). This is a huge optimization area as some of the attributes can have 1000+ different select options - plus some e-shops contains thousands of attributes ...

Then the attribute metadata is being provided to the browser with the __INITIAL_STATE__ that causes additional performance harm.

Currently - let's say for a color to display it's the value we're using the optionLabel helper.

If we add the custom_attributes in the product entity in the following format:

{ 
  "custom_attributes": [ {
  "attribute_code": "color",
   "value": 150, 
  "label": "Red",
  "is_comparable": true,
  "is_visible": true, 
  "is_user_defined": true
}
]
}

... then we don't have to query for this info.

Note: To save the product record size we probably should put only the is_user_defined and is_comparable and is_visible attributes on this list

Vue Storefront is expanding the custom_attributes and removing the property during the indexation and then in the frontend helper and here and here. We should keep this property and potentially stop expanding it in the frontend helpers.

We need to add the label property to be set on mage2vuestorefront - in here as labels don't come from Magento

Note: please test how this will work on multi-valued attributes (in that case value and label should be an array I guess - the value is an array 100%)

It's currently expanded for the configurable_options - https://github.com/DivanteLtd/vue-storefront/blob/19a7c2f836209a57089be6dc2d5413c58032c1fc/core/modules/catalog/helpers/index.ts#L412

So the only places to remove the attribute label translation are:

  • filters,
  • product details on PDP.

Then, we can safely remove the product/list calls along with the code

What are the acceptance criteria

  • ...

Can you complete this feature request by yourself?

  • YES
  • NO

Which Release Cycle state this refers to? Info for developer.

Pick one option.

  • This is a normal feature request. This should be available on https://test.storefrontcloud.io and then after tests this can be added to next Vue Storefront version. In this case Developer should create branch from develop branch and create Pull Request 2. Feature / Improvement back to develop.
  • (Pick this option only if you're sure) This is an important improvement request for current Release Candidate version on https://next.storefrontcloud.io and should be placed in next RC version. In this case Developer should create branch from release branch and create Pull Request 3. Stabilisation fix back to release.
  • (Pick this option only if you're sure) This is a critical improvement request for current Stable version on https://demo.storefrontcloud.io and should be placed in next stable version. In this case Developer should create branch from hotfix or master branch and create Pull Request 4. Hotfix back to hotfix.

Additional information

Metadata

Metadata

Assignees

No one assigned

    Labels

    3: Medium complexityfeature requestRequests for new features. Please be as specific as possible and provide proposal API if it you can

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions