README

element119 | Hyvä Canvas

📝 Features

✔️ Adds an AlpineJS-powered canvas component to Hyvä themes

✔️ Allows customers to draw, reset, and submit canvas data

✔️ Responsive design to suit mobile and desktop devices

✔️ Supports multiple canvas components per page

🔌 Installation

Run the following command to install this module:

composer require element119/module-hyva-canvas
php bin/magento setup:upgrade

⏫ Updating

Run the following command to update this module:

composer update element119/module-hyva-canvas
php bin/magento setup:upgrade

❌ Uninstallation

Run the following command to uninstall this module:

composer remove element119/module-hyva-canvas
php bin/magento setup:upgrade

📚 User Guide

Adding the Canvas Component

To add the canvas component to a page, simply use layout XML to create a new block using the Element119_HyvaCanvas::canvas.phtml template.

<block name="my.canvas.component" template="Element119_HyvaCanvas::canvas.phtml"/>

Obtaining the Canvas Value

A custom JavaScript event is fired whenever the user submits their canvas data. This event name is customer-canvas-submitted and the canvas data can be accessed via its detail object:

{
    ...
    detail: {
        canvasBlockName: "my_canvas_component",
        canvasImage: "data:image/png;base64,iVBORw0...",
    },
    ...
}