Magento 2 - Generieren Sie ein Anpassungsbild auf der Produktseite und fügen Sie es den Produktoptionen im Warenkorb hinzu

Ich muss zulassen, dass Benutzer ein Anpassungsbild auf der Produktseite erstellen und dieses Bild dann an das Produkt anhängen, wenn Benutzer ein Produkt in den Warenkorb legen.

Das Erstellen eines benutzerdefinierten Produktoptionstyps scheint sehr schwierig zu sein.

Ich denke, dass die einfachste Lösung darin besteht, die Produktvorlage anzupassen, indem der Image Builder hinzugefügt wird, und dann das generierte Bild in den Produktoptionen durch einen Beobachter hinzuzufügen, der das Bild von der Anfrage nimmt und es in die Produktoptionen einfügt.

Ich bin neu in Magento, könnte es die richtige Lösung sein? Wie kann ich implementieren? Ich kann ein Modul erstellen.

Mit dem Ereignis können Sie checkout_cart_product_add_afterdie Produktabbildinformationen ändern.

Zunächst müssen Sie auf Ihrer Produktdetailseite ein ausgeblendetes Feld im Formular "In den Warenkorb" hinzufügen, z.

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

Wenn Sie mit Javascript den Wert für das Feld für die vom Benutzer generierte Bild-URL hinzufügen, wird dieser Wert in den info_buyRequestOptionen für Angebotspositionen gespeichert

Wir müssen die Datei erstellen app/code/Foo/CustomImage/etc/events.xml, um Beobachter an die Ereignisse anzuhängen:

1. checkout_cart_product_add_after : Ereignis wird beim Hinzufügen zum Warenkorb ausgelöst
2. checkout_cart_product_update_after : Ereignis wird beim Warenkorb-Update ausgelöst (Zum Hinzufügen zum Warenkorb von der Warenkorb-Bearbeitungsseite)

<?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>

Für die Beobachterlogik erstellen wir nun eine Datei unter 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;
        }
    }
}

Ich habe den Code nicht ausprobiert, sollte Ihnen aber helfen, Ihrer Produktoption neue Daten hinzuzufügen.

Ich hatte ein ähnliches Problem und löste den Teil, ein anderes Bild wie dieses zu zeigen. Achtung: Es kann zu Fehlern kommen, wenn sich das Seitenverhältnis / die Größe des tatsächlichen Produktbilds vom Backend vom benutzerdefinierten unterscheidet.

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 :-(

    }
}