I have to add product size chart in product page
Hello guys @rohrig
i have to add product size chart in product page when i click on size open popup and dynamic product size chart from magento2
14 Replies
Hi @Altamash π
In order to add a dynamic product size chart to the Vue Storefront 2 product page that fetches data from Magento 2, you'd need to go through the following steps: 1. Fetch Size Chart Data from Magento 2: 2. Update Vue Storefront Product Page: Add a button or link labeled "Size Chart" on the product page. Attach a click event listener to this button to trigger the display of the size chart popup. Create a Modal/Popup Component for Size Chart: You can use a VSF component library or build a custom modal. The content of the modal should be bound to the size chart data fetched from Magento 2 for the given product.
In order to add a dynamic product size chart to the Vue Storefront 2 product page that fetches data from Magento 2, you'd need to go through the following steps: 1. Fetch Size Chart Data from Magento 2: 2. Update Vue Storefront Product Page: Add a button or link labeled "Size Chart" on the product page. Attach a click event listener to this button to trigger the display of the size chart popup. Create a Modal/Popup Component for Size Chart: You can use a VSF component library or build a custom modal. The content of the modal should be bound to the size chart data fetched from Magento 2 for the given product.
@rohrig where i add size chart in magento2
here's how you can do it:
Add Size Chart as a Custom Attribute:
1. Login to Magento Admin:
- Navigate to the Magento 2 admin panel.
2. Navigate to Attributes:
- Go to
Stores > Attributes > Product.
3. Add New Attribute:
- Click on the Add New Attribute button on the top right.
- Fill in the necessary fields.
- For Attribute Code, enter something like size_chart.
- For Catalog Input Type for Store Owner, choose "Text Area".
- Set the necessary configurations and save.
4. Assign Attribute to Attribute Set:
- Navigate to Stores > Attributes > Attribute Set.
- Choose the attribute set you want (like "Default").
- Drag your new size_chart attribute from the right side to the appropriate group on the left (like "General"). Save the attribute set.
5. Add Size Chart Information to Products:
- Go to Catalog > Products.
- Edit a product and under the "General" tab (or wherever you placed your attribute), you should see the Size Chart attribute. Add your size chart info here.
2. Fetch Size Chart via GraphQL:
After you've added the size chart attribute and assigned it to products, you can fetch it using GraphQL.
If the attribute is not available via GraphQL by default, you might need to make sure that the attribute is set to be retrievable on the storefront. To do this, when creating or editing the size_chart attribute, ensure that "Use in GraphQL Product Schema" (or similar, based on your Magento version) is set to "Yes".
That should allow you to add a size chart to your Magento 2 products and then retrieve it using GraphQL.i have to add like this
@rohrig
Do you have a question?
i have to add like this szie table
okay π
@rohrig how can i do that
steps:
1. Create a new file named SizeChartModal.vue inside the components directory.
2. Import that component into the page where you need it.
3. Add button to toggle the modal.
@rohrig and how can add size chart in magento2 product
To fetch the size chart attribute from Magento 2 products, then the process mainly involves setting up the attribute and ensuring it's available for GraphQL queries.
Here's how you can achieve this:
1. Create a Custom Product Attribute for Size Chart:
1. Login to Magento Admin:
- Navigate to the Magento 2 admin dashboard.
2. Navigate to Attributes:
- Go to
Stores > Attributes > Product.
3. Add New Attribute:
- Click on the Add New Attribute button on the top right.
- Fill in the required fields:
- For Attribute Code, enter something like size_chart.
- For Catalog Input Type for Store Owner, choose the input type, preferably "Text Area".
- Save the attribute.
4. Assign Attribute to Attribute Set:
- Navigate to Stores > Attributes > Attribute Set.
- Choose the attribute set relevant for your products (like "Default").
- Drag your new size_chart attribute from the unassigned attributes area to the appropriate group (like "General"). Save the attribute set.
2. Add Size Chart Information to Products:
1. Edit a Product:
- Go to Catalog > Products.
- Edit a product.
- Under the "General" tab (or wherever you placed your attribute), input the size chart information.
3. Fetch Size Chart via GraphQL:
Now, to fetch the size chart for a specific product using GraphQL, use a query similar to:
By default, custom product attributes should be available in the GraphQL schema if they're set to be visible on the storefront. If you find the attribute isn't accessible via GraphQL, ensure the attribute's "Use in GraphQL Product Schema" option (or its equivalent based on your Magento version) is enabled when you create or modify the attribute.
That's the basic setup for adding a size chart to a Magento 2 product and fetching it via GraphQL.Alternativly I found this extenstion. Not sure if it's good or not. But perhaps it can provide some inspiration: https://github.com/mageplaza/magento-2-size-chart-graphql/blob/master/USER-GUIDE.md
GitHub
magento-2-size-chart-graphql/USER-GUIDE.md at master Β· mageplaza/ma...
Magento 2 Size Chart GraphQL is now a part of the Mageplaza Size Chart extension that adds GraphQL features. This supports PWA compatibility. - mageplaza/magento-2-size-chart-graphql
There are a bunch of extentions that do this: https://www.magedelight.com/size-chart-magento-2.html
Google
Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.