element119/module-hyva-canvas

A Magento 2 module that adds an AlpineJS-powered HTML canvas component to Hyvä themes.

1.0.1 2022-10-31 19:49 UTC

Requires

• hyva-themes/magento2-default-theme: ^1.1.0

OSL-3.0

• Kiel Pykett

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...",
    },
    ...
}

For those that want to support this project.