DEV Community: Sampurna Chapagain

Bulk Price Update Tool For Magento2

Sampurna Chapagain — Sun, 06 Mar 2022 21:27:58 +0000

What is Magento?
Why use Magento?
What is Magento 2?
Advanced Pricing in Magento 2
Group Pricing
Special Pricing
Tier Pricing
Limitations of Magento 2
What are Extensions?
Introducing MagePsycho
Benefits of Magento 2 Regular, Special And Tier Price Importer Extension
Conclusion

This post is kindly sponsored by Magepsycho

What is Magento?

Magento is one of the most popular open-source eCommerce CMS platforms. CMS stands for Content Management System is an application used to manage all content related to a product or service in one central location.

In simple words, Magento is an application used to sell products and services online. Magento was first released on March 31, 2007. Some examples of popular brands using Magento include Coca-cola, TimberLand, Ford (to pick out 3 of many).

Why use Magento?

Day by day, the number of people selling products online is increasing. There are various eCommerce platforms where you can sell products online. But Magento should be your top choice. Today Magento E-commerce platform powers 0.6%of all websites on the Internet and it is extensively used for eCommerce web development.

There are lots of benefits to using Magento. Some of the key benefits are listed below:

Open Source
Scalable
SEO Friendly
Powerful Platform
Customization
Easy to integrate
Mobile Friendly
A huge Community

What is Magento 2?

Magento 2 was released in 2015 in order to solve the flaws of Magento 1.x versions. The current stable release version of Magento 2 is version 2.3.5. Magento 2 is comparatively faster than Magento 1.x as it supports the latest release of PHP which is version 7.
It is highly secure and the page load speed is quite good compared to Magento1. And, it also allows users to update the e-commerce websites automatically.

Advanced Pricing in Magento 2

Magento 2 offers a setting up Advanced Pricing for a specific product from the admin panel. The advanced pricing includes Group Price, Special Price, and Tier Price.

Some benefits of using advanced pricing are:

Results in more sales
Increase traffic to the website
Attracts new customers
Helps to create demand for new products
Clear outs the old stocks

Now, let’s understand each of the advanced pricing options:

- Group Pricing

The configuration made from the admin panel in order to set prices for discounted items based on different customer groups is called group pricing.

Customer grouping is the feature of Magento 2 which allows you to divide the customers into certain groups so that you can set a different discounted price for a specific group of customers. Customers can easily compare the difference between the regular price and group price on the product page which encourages them to buy the product.

Group Pricing
Pic Credit: Magento Docs

- Special Pricing

Special prices are offered to products for a certain time period. During that time period, the special prices are displayed on the product page instead of the regular price. However, the regular prices are also displayed after the special prices.

There are several benefits of offering special prices. Some of them are listed below:

It is suitable for the festive season. People can buy the product for a specific time period.
It helps to attract more customers as people will easily be convinced to buy the product seeing the difference between regular and special prices.
It helps to clear out the old stock products.

Special Pricing
Pic credit: Magento Docs

- Tier Pricing

Tier pricing is a pricing method used by sellers that are used to sell products within a particular range based on a specified target market.

Tier Pricing
Pic credit: Magento docs

The picture above is an example of Tier pricing where the seller is offering discounted prices for different quantities of water bottles.

Offering tier pricing for your product has several benefits including:

It plays a vital role in stock clearance.
It increases the number of sales since the products are sold in groups.
It attracts more customers. People love discounts.

Limitations of Magento 2

As discussed above, Magento 2 helps to set various advanced pricing. However, there is not an option to update the prices in a bulk. Imagine having a huge store where you need to go to every product and update their prices. It may not be a problem for a small store but for big stores with thousands of products, this will be a huge problem.

In order to solve this issue, MagePsycho came up with an extension that helps to update the prices of products in your store in a bulk. This means you can easily update the value of the price in a single go for tons of data.

What are Extensions?

As per the Magento docs, an extension is a custom module, language pack, or combination of custom modules and language packs, that adds new functionality to the core Magento product.

All extensions submitted to Commerce Marketplace are managed from the Extensions page in the Marketplace Developer Portal.

Extensions are needed in order to add some new features which are not provided by the Magento itself.

Introducing MagePsycho

Since the launch of their first product in 2009, they have been committed to creating high-quality Magento extensions and services for customers all around the world. Their team consists of Magento certified and Zend certified engineers.

They have developed around 100+ extensions which are available for Magento1 and Magento2.

Their main goal is to get you quality extensions that are functional, stable, and compatible with your applications.

Benefits of Magento 2 Regular, Special, and Tier Price Importer Extension

If you want to update the price of your store product you can easily update them from the admin panel. Imagine you have hundreds and thousands of products in your store and need to update the prices of those products, you will need to visit each product and update the prices of that product individually. It will definitely be an issue as it will be more time-consuming and there might be errors while done manually.

In order to solve this issue, MagePsycho have created the extension called Magento 2 Regular, Special & Tier Price Importer which is the fastest importer tool for updating different prices like regular, cost, MSRP/MAP, special, tier & customer group price via different methods like admin, CLI & cron jobs.

This extension is compatible with both Community and Enterprise editions of Magento with versions 2.1, 2.2, 2,3 and 2.4.

Conclusion

MagePsycho offers you 100+ extensions for Magento1 and Magento2 to make your life as a developer, store owner, or agency easier.

Magento 2 Regular, Special & Tier Price Importer extension bulk updates(add, update or delete) the prices of products with just a single CSV file. You simply need to upload a CSV file with all the cost details of products and this extension will update all the records in a single go. All the details regarding this extension with a proper installation guide can be found here.

Creating Responsive Navbar using React-Bootstrap

Sampurna Chapagain — Mon, 17 Jan 2022 07:24:04 +0000

React is a JavaScript library for creating user interfaces based on UI components . And, Bootstrap is a CSS framework for creating responsive applications. Here, in this blog post we will discuss how to use Bootstrap in our React applications .

From the official guide

React-Bootstrap is a complete re-implementation of the Bootstrap components using React. It has no dependency on either bootstrap.js or jQuery.

First, let us create a new react project using the command:

npx create-react-app react_bootstrap_navbar

Then add few new components to the project. We will create a new folder called components and add three components: Home, About, Contact .

Now, we will be adding some content inside those three components .



const Home = () => {
    return (
        <h1>Home Page</h1>
    );
}

export default Home;

Similarly add some texts to About and Contact components .

In App.js file, let's import all three components.


 javascript
function App() {
  return (
    <div className="App">
        <Home />
        <About />
        <Contact />
    </div>
  );
}

In order to install the React Bootstrap npm package we can simply go to terminal and use the command :

npm install react-bootstrap bootstrap@5.1.3
After that we need to import bootstrap.min.css file in index.js or App.js file .

import 'bootstrap/dist/css/bootstrap.min.css';

We are now ready to use all the features of React Bootstrap .

Let us create a new component called Navigationbar.js and add the following code which will be responsible for creating our navbar .

)

Let's understand some of the components and props from the above code:

Navbar component wraps the entire component .
expand prop allows us to collapse the navbar at given breakpoint and we also need to add collapseOnSelect prop .
Navbar.Toggle and Navbar.Collapse helps to get the mobile friendly navbar .
collapseOnSelect prop works only if we add eventKey prop for NavLink item .

Now, we will install React Router library for building functioning navigation routes .

npm i react-router-dom@5.3.0

In App.js file, let us import BrowserRouter (aliased as Router) , Route and Switch from React Router .

import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';

Moving on to our App.js file, let's add corresponding routes to the components.



function App() {
  return (
    <div className="App">
        <Router>
            <Navigationbar />
            <Switch>
                <Route exact path='/' component={Home}/>
                <Route path='/about' component={About}/>
                <Route path='/about' component={Contact}/>
            </Switch>
        </Router>
    </div>
  );
}

Here we are using Switch component which will render our components only when path will be matched .

Here's how our navbar looks on the desktop screen :

This is how the navbar looks on small screen devices :

You can find the demo and source code here

Conclusion:

In this blog post we saw how to create responsive navigation bar using React-Bootstrap front end framework . I hope you enjoyed reading this blog post. Feel free to share your thoughts below. You can find me on Twitter for daily content regarding Web development.

Thanks for reading. Happy Coding !

How to Change Bootstrap 5 navigation bar styling on scroll without using jQuery

Sampurna Chapagain — Thu, 13 Jan 2022 12:33:07 +0000

Suppose you want to change the background color of your bootstrap 5 navigation bar on scroll and you do not want to use jQuery for this behaviour . As the official documentation of Bootstrap says

Bootstrap 5 is designed to be used without jQuery, but it’s still possible to use our components with jQuery.

In this blog post, we will have a look about how can we achieve this behavior without the use of jQuery .

First, let us add a bootstrap 5 CDN in index.html file . Also let us import style.css file which is located inside stylesheets folder .

HTML Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Navigation bar Scroll</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="stylesheets/style.css">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
</html>

Then, inside the body tag add a navigation menu and three different div for home, about and services .

HTML Code


<body>
  <nav class="navbar navbar-expand-sm fixed-top">
    <div class="container">
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#services">Services</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div id="home">
  </div>

  <div id="about">
  </div>

  <div id="services">
  </div>
 </body>
<script src="script.js"></script>

Also, we have added a script tag to call script.js file after loading the HTML content . We will add logic to script.js file later .

Now, let us go to style.css file and add some styling in order to differentiate three sections: home, about and services .

CSS

#home {
    background-color: #00ffff;
}

#about {
    background-color: #0000ff;
}

#services {
    background-color: #a52a2a;
}
#home, #about, #services {
    height: 100vh;
}

Here you can see three sections occupying their respective heights with different background colors.

Now comes the interesting part !

We will now add logic to script.js file in order to change our nav bar styling on scroll .

JavaScript

const header = document.querySelector('.navbar');

window.onscroll = function() {
    var top = window.scrollY;
    console.log(top);
    if(top >= 100) {
        header.classList.add('darkNavBar');
    }
    else {
        header.classList.remove('darkNavBar');
    }
}

And, lastly update style.css file

.darkNavBar {
  background-color: #000000;
}

This is how our navbar looks !

Let us understand what the above javascript code does .

First, we have used document.querySelector to return the first Element within the document that matches the specified selector, in this case it's .navbar .
Then we have added a window.onScrollY function which basically checks if the number of pixels that the document is currently scrolled vertically is greater than or equal to 100 .
It it's true it adds a new class called darkNavBar to the querySelector i.e. .navbar .

Conclusion

This is how you can change the styling of navigation bar on scroll using JavaScript . I hope you enjoyed this blog post . Feel free to share your thoughts on this . You can find me on Twitter for daily contents on Web development .