Widget and components created for a PDP page

[samuelespi1e9a]

I have created a widget which is intended to be used to add information as a best seller, this is a category with this name, which has subcategories and products added to these. To display the data I need it to be displayed exactly as it does in my PDP, is it possible to use the existing elements to display data in my PDP but add them to my new widget? any advice for this please?

[methewhyde6d20]

it's definitely possible to reuse existing elements from your Product Detail Page (PDP) to display data in your new widget. Here are some steps you can take.

• Identify reusable elements
• Modularize the code
• Create a data-fetching mechanism
• Implement the widget
• Testing and refinement

reusing existing elements and components from your PDP, you can save time and maintain consistency across your website. Just ensure that the components are flexible enough to be used in different contexts and that the data-fetching mechanism is robust and efficient.

[Milople]

Hello @samuelespi1e9a,

Yes, it is possible to reuse existing elements from your Product Detail Page (PDP) in your new widget. Here are the steps and some advice to help you achieve this:

Steps to Reuse Existing PDP Elements in a Widget

1. Identify Existing Elements:
   • Determine which elements from the PDP you want to reuse in your widget. These could be templates, blocks, or specific HTML/CSS/JS components.
     
     
2. Create a Custom Widget:
   • In your Magento admin panel, go to Content > Widgets.
   • Click Add Widget and choose the appropriate widget type and theme.
     
     
3. Custom Widget Configuration:
   • Configure the widget settings, such as title, store view, and display settings.
   • In the Layout Updates section, specify where the widget should be displayed.
     
     
4. Custom Widget Template:
   • Create a custom template for your widget. This can be done by adding a template file in your theme or module

For example:

app/design/frontend/YourVendor/YourTheme/Magento_Widget/templates/best_seller.phtml

In this template, include the logic and markup to display the best seller information. You can reuse PDP elements here.

1.   Reuse PDP Elements:

• In your custom template, you can call existing blocks and templates using the following methods:

echo $this->getLayout()->createBlock('Magento\Catalog\Block\Product\View')->setTemplate('Magento_Catalog::product/view.phtml')->toHtml();

Alternatively, you can directly include parts of the PDP template using PHP include or require.

1. Include JavaScript and CSS:

If the PDP elements rely on specific JavaScript or CSS, make sure to include these in your widget. You can add them in the default_head_blocks.xml or directly in your widget's template.

By following these steps and considerations, you should be able to effectively reuse PDP elements in your new widget, ensuring a consistent display and functionality across your Magento store.

If the issue will be resolved, Click Kudos & Accept as a Solution.