refactor!: create renderers for each product type

[bartoszherba]

Description

Currently, we are handling logic for any type of product directly inside the page component which is messy, hard to maintain, modify and understand. Because each product in Magento has its own features, we should add dedicated renderers with dedicated logic

refactor: create renderers for each product type
- split root product page into a separate components
- move styles to shared file
- reduce the amount of unused code in different component types
- add useGallery composable
- add useProductTabs composable
- add canAddToCart method on useCart composable

Related Issue

#804

Motivation and Context

Improvement

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[sethidden]

Given you've mentioned you still want to work on this in future iterations, don't you want to make a separate feature branch? I'm reluctant to merge this to develop directly because of all the duplication in template duplication between product variants

(not requesting changes or approving for now)

[sethidden]

Suggested change

	type: [Object, null] as PropType<Product>,
	type: [Object, null] as PropType<Product | null>,

[bartoszherba]

Fixed.

[sethidden]

Suggested change

	export function useGallery(product: Product) {
	export function useGallery(product: Ref<Product>) {

Is this reactive? I remember when I was creating useProductsWithCommonCardProps.ts I needed to pass a ref through the argument, not a regular value

[bartoszherba]

I don't understand ;) this is MY NEW composable ;) Param is not a ref but the output is a computed value (at least partially).

[sethidden]

I assume this is going to be broken down later but it's pretty scary that all the product variant components use the same styles. Like, if I change one thing I'd be scared of the collateral damage leaking into other components.

But as I said, I assume you're going to be extracting certain shared things to separate components

[bartoszherba]

Do you suggest that I should move it back to components? Or maybe add style file for each group?

[sethidden]

Do you suggest that I should move it back to components?

I mean move it to even more deeply nested components, so the component tree would look like

product.vue > BundledProduct.vue > ProductReviews.vue
product.vue > ConfigurableProduct.vue > ProductReviews.vue

etc.

for more strict encapsulation in a component instead of sharing styles

[bartoszherba]

Ok, I will create a task for that too.