4

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

  • did you run static:content and update your PUB folder? Because it seems like its calling from pub folder or may be cache – Abhishek Panchal Dec 5 '17 at 19:58
  • yes I already did. js is loading but issue is "Uncaught Error: Mismatched anonymous define() module: function ($) {" ...color picker – Magento2 Devloper Dec 5 '17 at 20:02
0
<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;
    }
}
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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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