PART 1.5 – Exercises

Exercises

This page includes all exercises from entire workshop. All custom code should be add to project repository and pushed on the branch named FE-M2-workshop_Name-Surname. Each commit should be named by Exercise number, i.e. hg commit -m”Exercise 1.0″. Some exercises, you will not be able to push, but please, do them on your local version as they will be necessary to continue with following exercises.

Exercise 1.0

Before workshop, make sure your local environment is ready. You will find some documentation in following links: Installation, Import exercise project (Create and Import Magento 2 projects with Aja) and Install sample / demo data.

During workshop, please, import m2-fe-workshop project, then install the sample data (instruction link above).

Exercise 2.0

Please, choose name for your theme and create directory in app/design as we will use this approach for our exercises.

Exercise 3.0

Please, create necessary files in your theme and set it up in admin panel.

In any case, you can follow documentation.

Exercise 4.0

Please, install grunt or gulp to your project.

Exercise 5.0

Overwrite button’s colour and link’s colour on your site.

Exercise 6.0

Remove product name from items on category page.

Exercise 7.0

7.1. Choose any element and move it to different place.

7.2. Choose another element and remove it from the site.

7.3. Change title of one of the tabs on product page.

Exercise 8.0

  1. Create a js file in your theme.
  2. Include the js file using require-js.
  3. Intiate the js using data-mage-init on the div with the class products inside list.phtml (the template used in exercise 6)
  4. The script should add a class, color or console log a string when the product list is rendered.

Exercise 9.0

Move the ‘Go to checkout’ button to the bottom of the mini cart (below view and edit cart).

 

Exercise 10.0

Create your own widget based on https://bitbucket.org/vaimo/module-example-widget/overview or extend it by adding some additional fields.


Questions


Add README file to your branch and answer following questions:

  1. Where do you find Blank and Luma themes?
  2. What are the files needed to create a theme?
  3. Where can I find the UI library?
  4. How do you override a module phtml in you theme?
  5. How do you override xml files?
  6. Where do you add your custom variables?
  7. Where do you override Magento variables?
  8. Where can you find styles for modules?
  9. Where you have to define your additional custom less file?
Advertisements