cancel
Showing results for 
Search instead for 
Did you mean: 

Widget: Product Link with custom image

Widget: Product Link with custom image

Hi,

 

I am currently creating my first widget. The goal is to create an extended version of the existing Product Link Widget, which allows you to add your own image that links to the product detail view.

So far, my widget code looks like this:

 

widget.xml

<?xml version="1.0" encoding="UTF-8"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Vendor\ImageTeaser\Block\Widget\ImageTeaser" id="vendor_imageteaser_imageteaser">
        <label>Image Teaser</label>
        <description>catalog product teaser with image</description>
        <parameters>
            <parameter name="id_path" xsi:type="block" visible="true" required="true" sort_order="10">
                <label translate="true">Product</label>
                <block class="Magento\Catalog\Block\Adminhtml\Product\Widget\Chooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string" translate="true">Select Product...</item>
                        </item>
                    </data>
                </block>
            </parameter>
            <parameter name="anchor_text" xsi:type="text" visible="true">
                <label translate="true">Anchor Custom Text</label>
                <description translate="true">If empty, we'll use the product name here.</description>
            </parameter>
            <parameter name="title" xsi:type="text" visible="true">
                <label translate="true">Anchor Custom Title</label>
            </parameter>
            <parameter name="image_path" xsi:type="text" visible="true">
                <label translate="true">Image Path</label>
                <description translate="true">Relative image path from public root</description>
            </parameter>
            <parameter name="image_alt" xsi:type="text" visible="true">
                <label translate="true">Image Alternative Text</label>
                <description translate="true">If empty, we'll use the product name here.</description>
            </parameter>
        </parameters>
    </widget>
</widgets>

link_image.phtml

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<div class="widget block block-product-link">
    <img src="<?= $block->getData('image_path'); ?>" alt="<?= $block->getData('image_alt'); ?>" />
</div>

My problem is that I do not know how to create the link from the id_path attribute in the template.

I am grateful for every tip!