Exercises – Frontend workshop

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.

app/design/frontend/TQ/theme-thongquach/web/css/source/_theme.less

@button-primary__border: 1px solid @color-gray;

Exercise 6.0

Remove product name from items on category page.

app/design/frontend/Vaimo/theme-thongquach/Magento_Catalog/templates/product/list.phtml

Exercise 7.0

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

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2009-2017 TQ Group. All rights reserved.
 * See LICENSE.txt for license details.
 **/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="top.search" destination="footer" before="form.subscribe"/>
    </body>
</page>

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

<?xml version="1.0"?>
<!--
/**
* Copyright © 2009-2017 TQ Group. All rights reserved.
* See LICENSE.txt for license details.
**/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="form.subscribe" remove="true" />
    </body>
</page>

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

<?xml version="1.0"?>
<!--
/**
* Copyright © 2009-2017 TQ Group. All rights reserved.
* See LICENSE.txt for license details.
**/
-->
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="product.attributes">
            <arguments>
                <argument translate="true" name="title" xsi:type="string">More Information Changed</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Exercise 8.0

  1. Create a js file in your theme.
  1. Include the js file using require-js.
/**
 * Copyright © 2009-2017 TQ Group. All rights reserved.
 * See LICENSE.txt for license details.
 **/

var config = {
    "map": {
        "*": {
            listProducts: "js/list-products"
        }
    },
};

<ol class="ol1">
	<li class="li2"><span class="s2">Intiate the js using data-mage-init on the div with the class products inside list.phtml (the template used in exercise 6)</span></li>
</ol>
<ol class="ol1">
	<li class="li2"><span class="s2">The script should add a class, color or console log a string when the product list is rendered.</span></li>
</ol>

/**
 * Copyright © 2009-2017 Vaimo Group. All rights reserved.
 * See LICENSE.txt for license details.
 */
define([
    'jquery'
], function($) {
    "use strict";
    console.log('list-products.js in the theme champion league is loaded!');

    $.widget("vaimo.listProducts", {
        options: {
            priceProducts: '.price-box .price', // Class name for price product of items.
            color: '#fff000', // Yellow color.
        },

        /**
         * Bind events to the appropriate handlers.
         * @private
         */
        _create: function () {
            this._changePriceProducts(
                this.element.find(this.options.priceProducts),
                this.options.color
            );
            console.log('Function _changePriceProducts is loaded!');
        },

        /**
         * Change color for price product of items.
         * @param element
         * @param color
         * @private
         */
        _changePriceProducts: function(element, color) {
            $(element).css('color', color);
            console.log('Price product of items is changed!');
        },
    });
});

Exercise 9.0

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

app/design/frontend/TQ/theme-thongquach/Magento_Checkout/web/template/minicart/content.phtml

content.html<!-- /**  * Copyright © 2016 Magento. All rights reserved.  * See COPYING.txt for license details.  */ -->
<div class="block-title">
    <strong>
        <span class="text"><!-- ko i18n: 'My Cart' --><!-- /ko --></span>
        <span             class="qty empty"             data-bind="css: { empty: !!getCartParam('summary_count') == false },                        attr: { title: $t('Items in Cart') }">
            <!-- ko text: getCartParam('summary_count') --><!-- /ko -->
        </span>
    </strong></div>
<div class="block-content">
    <button type="button"             id="btn-minicart-close"             class="action close"             data-action="close"             data-bind="attr: { title: $t('Close') }">
        <span><!-- ko i18n: 'Close' --><!-- /ko --></span>
    </button>

    <!-- ko if: getCartParam('summary_count') -->
<div class="items-total">
            <span class="count"><!-- ko text: getCartParam('summary_count') --><!-- /ko --></span>
            <!-- ko if: getCartParam('summary_count') == 1 -->
                <!-- ko i18n: 'item' --><!-- /ko -->
            <!-- /ko -->
            <!-- ko if: getCartParam('summary_count') > 1 -->
                <!-- ko i18n: 'items' --><!-- /ko -->
            <!-- /ko --></div>
<!-- ko if: getCartParam('possible_onepage_checkout') -->
            <!-- ko foreach: getRegion('subtotalContainer') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!-- /ko -->
        <!-- /ko -->

        <!-- ko foreach: getRegion('extraInfo') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!-- /ko -->

    <!-- /ko -->

    <!-- ko if: getCartParam('summary_count') -->
    <strong class="subtitle"><!-- ko i18n: 'Recently added item(s)' --><!-- /ko --></strong>
<div data-action="scroll" class="minicart-items-wrapper">
<ol id="mini-cart" class="minicart-items" data-bind="foreach: { data: getCartParam('items'), as: 'item' }">
            <!-- ko foreach: $parent.getRegion($parent.getItemRenderer(item.product_type)) -->
                <!-- ko template: {name: getTemplate(), data: item, afterRender: function() {$parents[1].initSidebar()}} --><!-- /ko -->
            <!-- /ko --></ol>
</div>
<!-- /ko -->

    <!-- ko ifnot: getCartParam('summary_count') -->
        <strong class="subtitle empty" data-bind="visible: closeSidebar()">
            <!-- ko i18n: 'You have no items in your shopping cart.' --><!-- /ko -->
        </strong>
        <!-- ko if: getCartParam('cart_empty_message') -->

<!-- ko text: getCartParam('cart_empty_message') --><!-- /ko -->
<div class="actions">
<div class="secondary">
                    <a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
                        <span><!-- ko text: $t('View and edit cart') --><!-- /ko --></span>
                    </a></div>
</div>
<!-- /ko -->
    <!-- /ko -->

    <!-- ko if: getCartParam('summary_count') -->
<div class="actions">
<div class="secondary">
            <a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
                <span><!-- ko i18n: 'View and edit cart' --><!-- /ko --></span>
            </a></div>
</div>
<!-- /ko -->
<div id="minicart-widgets" class="minicart-widgets">
        <!-- ko foreach: getRegion('promotion') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!-- /ko --></div>
<!-- ko if: getCartParam('summary_count') -->
        <!-- ko if: getCartParam('possible_onepage_checkout') -->
<div class="actions">
<div class="primary">
                <button                     id="top-cart-btn-checkout"                     type="button"                     class="action primary checkout"                     data-bind="attr: {title: $t('Go to Checkout')}">
                    <!-- ko i18n: 'Go to Checkout' --><!-- /ko -->
                </button>
<div data-bind="html: getCartParam('extra_actions')"></div>
</div>
</div>
<!-- /ko -->
    <!-- /ko --></div>
<!-- ko foreach: getRegion('sign-in-popup') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s