Magento 2 - Tạo hình ảnh tùy chỉnh trong trang sản phẩm và thêm nó vào tùy chọn sản phẩm trong giỏ hàng

Tôi cần cho phép người dùng tạo một hình ảnh tùy chỉnh trong trang sản phẩm và hơn là đính kèm hình ảnh đó vào sản phẩm khi người dùng thêm sản phẩm vào giỏ hàng.

Tạo một loại tùy chọn sản phẩm tùy chỉnh có vẻ là rất khó khăn.

Tôi nghĩ rằng giải pháp đơn giản nhất là tùy chỉnh mẫu sản phẩm thêm trình tạo hình ảnh và sau đó thêm hình ảnh được tạo trong tùy chọn sản phẩm thông qua người quan sát lấy hình ảnh từ yêu cầu và đưa nó vào tùy chọn sản phẩm.

Tôi là người mới trong magento, nó có thể là giải pháp phù hợp? Làm thế nào tôi có thể thực hiện? Tôi có thể tạo một mô-đun.

Bạn có thể sử dụng sự kiện checkout_cart_product_add_afterđể sửa đổi thông tin hình ảnh sản phẩm.

Đầu tiên trong trang chi tiết sản phẩm của bạn, bạn cần thêm một trường ẩn trong phần thêm vào giỏ hàng giống như:

<input type="hidden" name="[option][front_designurl]" id="front_designurl"/>

Và sử dụng javascript thêm giá trị vào trường cho url hình ảnh được tạo bởi người dùng, giá trị này được lưu trong các info_buyRequesttùy chọn mục trích dẫn

Chúng tôi phải tạo tệp app/code/Foo/CustomImage/etc/events.xmlđể đính kèm người quan sát vào các sự kiện:

1. checkout_cart_product_add_after : Sự kiện được kích hoạt trên Thêm vào giỏ hàng
2. checkout_cart_product_update_after : Sự kiện được kích hoạt trên Cập nhật giỏ hàng (Để thêm vào giỏ hàng từ trang chỉnh sửa giỏ hàng)

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="checkout_cart_product_add_after">
        <observer name="foo_customimage_observer_set_price_for_item_add" instance="Foo\CustomImage\Model\Observer\SetImageForItem"/>
    </event>
    <event name="checkout_cart_product_update_after">
        <observer name="foo_customimage_observer_set_price_for_item_update" instance="Foo\CustomImage\Model\Observer\SetImageForItem"/>
    </event>
</config>

Bây giờ đối với logic người quan sát, chúng tôi tạo một tệp tại app/code/Foo/CustomImage/Model/Observer/SetImageForItem.php

<?php

namespace Foo\CustomImage\Model\Observer;

use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;
use Magento\Quote\Model\Quote\ProductOptionFactory;
use Magento\Quote\Api\Data\ProductOptionExtensionFactory;
use Magento\Catalog\Model\CustomOptions\CustomOptionFactory;

class SetImageForItem implements ObserverInterface
{
    /** @var \Magento\Quote\Model\Quote\ProductOptionFactory  */
    protected $productOptionFactory;

    /** @var \Magento\Quote\Api\Data\ProductOptionExtensionFactory  */
    protected $extensionFactory;

    /** @var CustomOptionFactory  */
    protected $customOptionFactory;

    /**
     * @param ProductOptionFactory $productOptionFactory
     * @param ProductOptionExtensionFactory $extensionFactory
     * @param CustomOptionFactory $customOptionFactory
     */
    public function __construct(
        ProductOptionFactory $productOptionFactory,
        ProductOptionExtensionFactory $extensionFactory
        CustomOptionFactory $customOptionFactory
    ) {
        $this->productOptionFactory = $productOptionFactory;
        $this->extensionFactory = $extensionFactory;
        $this->customOptionFactory = $customOptionFactory;
    }

    public function execute(Observer $observer)
    {
        /** @var $item \Magento\Quote\Model\Quote\Item */
        $item    = $observer->getEvent()->getQuoteItem();//Gets the Quote Item Instance
        $request = $item->getBuyRequest(); // Gets the posted data sent to "Add to cart" controller action      
        $this->processOptions($item);       
        return $this;
    }//end execute()


    /**
     * @inheritDoc
     */
    public function processOptions(CartItemInterface $cartItem)
    {
        $options = $this->getOptions($cartItem);
        if (!empty($options) && is_array($options)) {
            $this->updateOptionsValues($options);
            $productOption = $cartItem->getProductOption()
                ? $cartItem->getProductOption()
                : $this->productOptionFactory->create();

            /** @var  \Magento\Quote\Api\Data\ProductOptionExtensionInterface $extensibleAttribute */
            $extensibleAttribute = $productOption->getExtensionAttributes()
                ? $productOption->getExtensionAttributes()
                : $this->extensionFactory->create();

            $extensibleAttribute->setCustomOptions($options);
            $productOption->setExtensionAttributes($extensibleAttribute);
            $cartItem->setProductOption($productOption);
        }
    }

    /**
     * Receive custom option from buy request
     *
     * @param CartItemInterface $cartItem
     * @return array
     */
    protected function getOptions(CartItemInterface $cartItem)
    {
        $buyRequest = !empty($cartItem->getOptionByCode('info_buyRequest'))
            ? unserialize($cartItem->getOptionByCode('info_buyRequest')->getValue())
            : null;
        return is_array($buyRequest) && isset($buyRequest['options'])
            ? $buyRequest['options']
            : [];
    }

    /**
     * Update options values
     *
     * @param array $options
     * @return null
     */
    protected function updateOptionsValues(array &$options)
    {
        foreach ($options as $optionId => &$optionValue) {
            /** @var \Magento\Catalog\Model\CustomOptions\CustomOption $option */
            $option = $this->customOptionFactory->create();
            $option->setOptionId($optionId);
            if (is_array($optionValue)) {
                $optionValue = implode(',', $optionValue);
            }
            $option->setOptionValue($optionValue);
            $optionValue = $option;
        }
    }
}

Tôi chưa thử mã, nhưng sẽ giúp bạn thêm dữ liệu mới vào tùy chọn sản phẩm của mình.

Tôi đã có một vấn đề tương tự và giải quyết phần hiển thị một hình ảnh khác như thế này. hãy cẩn thận: Nó có thể có lỗi, nếu tỷ lệ khung hình / kích thước của hình ảnh sản phẩm thực tế từ phụ trợ khác với tùy chỉnh.

di.xml

<type name="Magento\Checkout\Block\Cart\Item\Renderer">
    <plugin sortOrder="1" name="foo" type="Foo\Bar\Plugin\Block\Cart\Item\RendererPlugin"/>
</type>

RendererPlugin.php

<?php

namespace Foo\Bar\Plugin\Block\Cart\Item;

class RendererPlugin
{
    /**
     * Override cart image, if designer product
     *
     * @param \Magento\Checkout\Block\Cart\Item\Renderer $subject
     * @param \Magento\Catalog\Block\Product\Image $result
     * @see \Magento\Checkout\Block\Cart\Item\Renderer::getImage
     */
    public function afterGetImage(\Magento\Checkout\Block\Cart\Item\Renderer $subject, $result)
    {
    $item = $subject->getItem();
    $optionId = $this->options->getDesignerCodeOptionId($subject->getProduct());
    $designCode = $item->getOptionByCode('option_' . $optionId)->getValue();
    $design = $this->design->getByDesignCode($designCode);

    $previewImageUrl = $design->getData('preview_image_url');

    $result->setImageUrl($previewImageUrl);

    return $result; // recreate, to calculate aspect ratio an -- possible BUG: does not recalculate aspect ratio :-(

    }
}