Giter VIP home page Giter VIP logo

encomagestore's Introduction

Magento 2.3.3 Sidebar Widget Module

The module is a directory that contains blocks, controllers, models, helper, etc - that are related to a specific business feature. In Magento 2, modules live in app/code directory of a Magento installation, with this format: app/code/<Vendor>/<ModuleName>.

In our case this is app/code/Encomagestore/CustomWidget.

Our module has name Encomagestore_CustomWidget. It works on Magento 2 and displays three random simple products with an image, a name and a price in the left additional sidebar of each page of the Magento 2 Luma theme site.

Encomagestore_CustomWidget developement steps

  • Step 1: Create a directory for the module like above format.
  • Step 2: Declare module by using configuration file module.xml.
  • Step 3: Declare widget by using configuration file widget.xml.
  • Step 4: Register module by registration.php.
  • Step 5: Enable the module with bin/magento module:enable Encomagestore_CustomWidget and php bin/magento setup:upgrade console commands.
  • Step 6: Create a widget template file samplewidget.phtml.
  • Step 7: Create a widget block class SampleWidget.php.
  • Step 8: Create frontend layout with default.xml and styling with random.css.
  • Step 9: Flush cache with php bin/magento cach:clean command.

If you have followed all above steps, you will see the title 'Random Products' in left additional sidebar and three random simple products from the site store with an image, a name and a price in each of them.

encomagestore's People

Contributors

olegokovalyov avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.