Month: August 2018

Posted on

How to import simple product in magento 2 using CSV?

You can import simple products in Magento 2 by CSV from the admin panel.

Log in to the admin panel with your credentials.
Go To System -> Data Transfer -> Import
From Entity Type Select Products.
Select Add/Update from Import Behavior settings.

Create a CSV file to import only simple products. I have created simple products CSV file, Download Simple-Products-CSV for check possible column, and data of the simple product.

There are many columns for import product in Magento 2. Check Some of the useful column description with details,

sku => Product Unique SKU
attribute_set_code => Product Attribute Set code(get from Stores -> Product -> Attribute sets)
product_type => simple for import simple product(Possible types simple,configurable,bundle,grouped,downloadable,virtual)
website_id => 1 (Select id from Stores -> All stores -> Website choose your website and get id)
product_websites => base (Select website code from Stores -> All stores -> Website choose your website and get code)
name => Product name (keep unique name so dont face error for URL key)
short_description => Product short description
description => Product long description
categories => Products categories (Keep comma separated for multiple cateory, Give full path from Default Category to your category, Ex. Default Category/Gear/Bags)
tax_class_name => Product Tax class name
meta_title => Product meta title for SEO
meta_keywords => Product meta keyword for SEO
meta_description => Product description for SEO
price => Product Original Price
special_price => Product Special price
product_online => 1(Possible value 1 or 2, if 1 enable and 2 for disable product)
color => Product color (Optional attributes)
size => Product Size (Optional attributes)
weight => 1 (if value is 0 product is virtual)
visibility => Not Visible Individually (Possible values Not Visible Individually, or Catalog or Catalog, Search or Search)
qty => Product Qty
is_in_stock => 1 (Product is in stock or out of stock)
base_image => /pic1.jpg (Product main image in product page)
small_image => /pic1.jpg (Product small image in cart page)
thumbnail_image => /pic1.jpg (Product thumbnail image in listing page)
additional_images => /pic1.jpg,/pic2.jpg,/pic3.jpg (Product additional image for product page gallery)

For Image import using CSV, give product name with prefix as /.
Example Product name is pic1.jpg, gives the name for a column is /pic1.jpg

Also, you must keep the product image under the pub/media/import folder.

Pub media folder must have full writable permission to image upload.

Check Import configurable product in Magento 2.

Download Simple Product Demo CSV Sheet, Simple-Products-CSV

Don’t forget to run  indexer command using a command line,
php bin/magento indexer:reindex

Posted on

What is the use of Add/Update, Replace, Delete behaviour of product import?

When you import products using CSV in Magento 2 by the native functionality of Magento from System -> Data Transfer -> Import
Select Entity Type -> Products
Import Behavior dropdown display Add/Update, Replace, Delete options.

(1)Add/Update Product: Product are added into admin catalog -> product.from CSV file.

In This scenario, if product is already exist, at that time content are updated for that product and if product is not already available in catalog, create new product.

(2)Replace: Replace works as remove same old product and generate new product with new id.

If you have already a product with SKU ABC and its product id is 1, and you can choose Replace from the dropdown at import time, new Product ABC are created with new id 2 so remove same product with id 1 and generate the new product with new id.

(3)Delete: Remove all product from catalog, match with given SKU from a csv file.

Posted on

How to create custom jQuery Widget using Magento 2?

You can simply create jQuery widget using Magento 2 by just simple steps. Using jQuery widget you can pass dynamic value from php to js file.

Many times you need to pass dynamic value using phtml file to js file, In this scenario, you can help jQuery widget for getting dynamic value from a template or phtml file.

I have just created simple module for better understanding of widget. You can see many places inthe core code of magento which used jQuery widget.

Lets start with simple module, Rbj_DemoWidget,  Create registration.php file for our module register,
File path, app/code/Rbj/DemoWidget/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Rbj_DemoWidget',
    __DIR__
);

Create module.xml file for configure our module entry to setup_module table.
File path, app/code/Rbj/DemoWidget/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Rbj_DemoWidget" setup_version="1.0.0">
    </module>
</config>

We have create one front action for call our template, Create one routes.xml file,

File path, app/code/Rbj/DemoWidget/etc/frontend/routes.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="demo" frontName="demo">
            <module name="Rbj_DemoWidget" />
        </route>
    </router>
</config>

In our routes.xml file, We have set frontname as demo. so we can access our template using storeUlr/demo/ControllerfoldeName/actionPhp
Now we create Controller action file called Index.php file,
File path, app/code/Rbj/DemoWidget/Controller/Index/Index.php

<?php
namespace Rbj\DemoWidget\Controller\Index;

class Index extends \Magento\Framework\App\Action\Action
{
    /**
     * Index action
     *
     * @return $this
     */
    public function execute()
    {
        $this->_view->loadLayout();
        $this->_view->getLayout()->getBlock('page.main.title')->setPageTitle('DemoWidget');
        $this->_view->renderLayout();
    }
}

In controller, we have just set page title only and load and render layout for render our layout.
Our final Url will be STORE_URL/demo/index/index

Create our action handle in layout folder,
File path, app/code/Rbj/DemoWidget/view/frontend/layout/demo_index_index.xml
XML file demo_index_index.xml,

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="demo.page" template="Rbj_DemoWidget::magento-widget.phtml"></block>
        </referenceContainer>
    </body>
</page>

File path, app/code/Rbj/DemoWidget/view/frontend/requirejs-config.js
Create requirejs-config.js file for our js declaration,

var config = {
    "map": {
        "*": {
            "myCustomWidget": "Rbj_DemoWidget/js/my-custom-widget"
        } 
    }
};

Our widget name will be myCustomWidget.

File path, app/code/Rbj/DemoWidget/view/frontend/web/js/my-custom-widget.js
Create my-custom-widget.js file for declaring our widget,

define([
    'jquery',
    'jquery/ui'
    ], function($){
        $.widget('mage.myCustomWidget', {
            options: {
                abcd: 1,
                passvalue:'test'
            },
            /**
             * Widget initialization
             * @private
             */
             _create: function() {
			    alert(this.options.passvalue);	custom message
			    alert(this.options.abcd); // 123
            }
        });

    return $.mage.myCustomWidget;
});

In above js file, We have created the custom widget in Magento 2, Here you must need to pass jquery/ui as dependencies for call our custom widget in any phtml file.

_create function is used for call our default method and variable when our widget initialized. You can pass dynamic variable from the template. Here options object variable will be changed based on a value of template file.

Create template magento-widget.phtml file,File path, app/code/Rbj/DemoWidget/view/frontend/templates/magento-widget.phtml

<div class="maindiv">
    <div class="secondary">
        Widget Example using Magento 2
    </div>
<div> 
<script type="text/x-magento-init">
    {
        ".maindiv": {
            "myCustomWidget": {
                "passvalue": "custom message",
                "abcd": 123
            }
        }
    }
</script>

Here we will call our customWidget in a template file,
Pass variable from here to override js variable.
We have set variable name passvalue and value to override default js value.

So you can pass a custom dynamic value like the above example and override default value.

Final result,
passvalue variable default value is test and we can pass the custom message so test value will be overridden with the custom message
same for abcd variable default value 1 will override with 123.

When you run the front action,
You got alert with value of passvalue equals to custom message and  abcd value equals 123.