How to add a picture and a hyperlink to the product to the email template for the client and the admin?

Question

css

Good time of the day! Please tell me the solution to the problem in a detailed answer, I am a noob. How in OpenCart 3.0.2.0 to make a conclusion in the letter of the client and the admin about the perfect order
1. display the image of the product in the leftmost column,
2. the name of the product has a hyperlink to the product leading to the site.
There is an installed modifier: ( https://opencart3x.ru/module/order/admin-order-email)
What should be added in which file? Thank you!

Answer 1

1) That's right.
2) In block styles, we describe only its appearance, indents, etc. The block does not know where it is and what its size is, elements can be positioned.
for example we have an authorization block in the header

<header class="header">
  <div class="header__auth">
    <div class="auth">
      <div class="auth__item"></div>
      <div class="auth__item"></div>
    </div>
  </div>
</header>

in .header__auth we describe the position and size of the element, in .auth we describe the appearance.
3) Only the element class, but there are exceptions, for example, using modifiers, sometimes you can use the cascade.
4) Maybe you call it exactly the same as other elements
example:

<ul class="props__list">
    <li class="props__item">
        <span class="props__label">Weight:</span>
        <span class="props__value">128</span>
    </li>
</ul>

You can see good examples here
5) I didn't quite understand the question.
6) cf = clearfix, a generally accepted class, is used as an exception to the BEM rules, although it is not welcome. For interactivity and clicks, you need to use modifiers.
example:
<a class="button button--is-active">click me</a>

Answer 2

1. Yes
2. The block should not have positioning, for this you can use mixes, for example:

<div class="header">
  <div class="logo header__logo"></div>
</div>

on .header__logo we broadcast positioning or make a wrapper element.
3. Only the element itself, it is better to avoid the cascade in the bem.
4. Element at element - this is not correct and means that this is a block, not an element. You can nest elements of the same block into each other.
5. Great, blocks inside other blocks are the norm.
6. A bad example, a good bem describes itself, based on the classes, you can almost say exactly what it is and why.