5

I have used custom color picker in my extension and I remove it but got this error.

enter image description here

I checked following questions but not working anymore in Magento 2.2.1.

Magento 2.1.1 - How to add color picker in admin configuration options?

Magento 2 - How to add color picker in admin configuration options?enter link description here

2
  • did you run static:content and update your PUB folder? Because it seems like its calling from pub folder or may be cache Dec 5, 2017 at 19:58
  • yes I already did. js is loading but issue is "Uncaught Error: Mismatched anonymous define() module: function ($) {" ...color picker Dec 5, 2017 at 20:02

2 Answers 2

0

Your issue can be not shim jquery.

I also added ColorPicker to Magento Admin.

I think this can be resolved for you.

I used this ColorPicker: https://www.eyecon.ro/colorpicker/

Step 1: Add JS, add CSS file

  • In requirejs-config.js:
var config = {
    "shim": {
        "Package_Module::color_picker/colorpicker": ["jquery"]
    }
};
  • In default.xml:

Step 2: Add JS to block

Package_Module/Block/ColorPicker.php

namespace Package\Module\Block;

class ColorPicker extends \Magento\Config\Block\System\Config\Form\Field
{
    /**
     * @param \Magento\Backend\Block\Template\Context $context
     * @param Registry $coreRegistry
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context, array $data = []
    ) {
        parent::__construct($context, $data);
    }

    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element) {
        $html = $element->getElementHtml();
        $value = $element->getData('value');

        $html .= '
            
            require(["jquery"], function ($) {
                require(["Package_Module/color_picker/colorpicker"], function() {
                    $(document).ready(function () {
                        var $el = $("#' . $element->getHtmlId() . '");
                        $el.css("background-color", "'. $value .'");

                        // Attach the color picker
                        $el.ColorPicker({
                            color: "'. $value .'",
                            onChange: function (hsb, hex, rgb) {
                                $el.css("backgroundColor", "#" + hex).val("#" + hex);
                            }
                        });
                    });
                });
            });
            ';
        return $html;
    }
}

Step 3: Call for field config

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="colorpicker" translate="label" sortOrder="100">
            <label>ColorPicker</label>
        </tab>
        <section id="package_colorpicker" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>Theme Options</label>
            <tab>colorpicker</tab>
            <resource>Package_Module::config_theme_options</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <field id="main_color" translate="label comment" type="text" sortOrder="15" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Main Color</label>
                </field>
            </group>
        </section>
    </system>
</config>

Good Luck!

1
  • This answer doesn't make sense, what inside "In default.xml:"?
    – fudu
    Aug 18, 2020 at 7:24
-1
<preference for="Magento\Checkout\CustomerData\Cart" type="WebdesignStudenten\TablePricing\CustomerData\Cart" />

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

namespace WebdesignStudenten\TablePricing\CustomerData;

/**
 * Cart source
 */
class Cart extends \Magento\Checkout\CustomerData\Cart
{

    /**
     * Get array of last added items
     *
     * @return \Magento\Quote\Model\Quote\Item[]
     */
    protected function getRecentItems()
    {

        $items = [];
        if (!$this->getSummaryCount()) {
            return $items;
        }

        foreach (array_reverse($this->getAllQuoteItems()) as $item) {

            /* @var $item \Magento\Quote\Model\Quote\Item */
            if (!$item->getProduct()->isVisibleInSiteVisibility()) {
                $product =  $item->getOptionByCode('product_type') !== null
                    ? $item->getOptionByCode('product_type')->getProduct()
                    : $item->getProduct();

                $products = $this->catalogUrl->getRewriteByProductStore([$product->getId() => $item->getStoreId()]);
                if (!isset($products[$product->getId()])) {

                    if ($product->getId()){             
                        $items[] = $this->itemPoolInterface->getItemData($item); // "not visible individually" product having id 4 added into items array
                    }
                    continue;
                }
                $urlDataObject = new \Magento\Framework\DataObject($products[$product->getId()]);
                $item->getProduct()->setUrlDataObject($urlDataObject);
            }
            $items[] = $this->itemPoolInterface->getItemData($item);
        }
        return $items;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.