Add a button

If you have multiple response buttons, you can add another one. For example, in the “Photos of product and price tag” task, you can add the response option “There is a different store at this address”.

Let's add a new button to the “Photos of product and price tag” task template, in which the performer will need to upload several photos and write a comment.

What it looks like

Before:

After:

When the performer clicks the new button:

For your convenience, here is ready-made code with the new button for the “Photos of product and price tag” template. Use it to check your own code. You can find our additions to the code by searching for the word “customization”.

Ready-made code
{{#if reviewMode}}
    <div class="header-review">
        <div class="header-review__title">
            {{texts.task_title}}
        </div>
        <div class="header-review__buttons">
            {{#if (equal verdict "ok")}}
                <div class="header-review__btn header-review__btn_green">
                    {{texts.btn_ok.title}}
                </div>
            {{/if}}
            {{#if (equal verdict "no_price")}}
                <div class="header-review__btn header-review__btn_red">
                    {{texts.btn_no_price.title}}
                </div>
            {{/if}}
            {{#if (equal verdict "no_item")}}
                <div class="header-review__btn header-review__btn_red">
                    {{texts.btn_no_item.title}}
                </div>
            {{/if}}
            {{#if (equal verdict "no_shop")}}
                <div class="header-review__btn header-review__btn_red">
                    {{texts.btn_no_shop.title}}
                </div>
            {{/if}}

            <!-- customization fragment start -->
            <!-- New verdict for the interface header -->
            {{#if (equal verdict "new_verdict")}}
              <div class="header-review__btn header-review__btn_red">
                {{texts.btn_new.title}}
              </div>
            {{/if}}
            <!-- customization fragment end -->

        </div>
    </div>
{{else}}
    <div class="header">
        {{texts.task_title}}
    </div>
{{/if}}

<div class="info">
    {{#if reviewMode}}
        <div class="info__review">
            <div class="info__review-block">
                <div class="info__title">
                    {{texts.info_name}}
                </div>
                <div class="info__content">
                    {{name}}
                </div>
            </div>
            <div class="info__review-block">
                <div class="info__title">
                    {{texts.info_address}}
                </div>
                <div class="info__content">
                    {{address}}
                </div>
            </div>
        </div>
    {{else}}
        <div class="info__block">
            <div class="info__title">
                {{texts.info_name}}
            </div>
            <div class="info__content">
                {{name}}
            </div>
        </div>
        <div class="info__block">
            <div class="info__title">
                {{texts.info_address}}
            </div>
            <div class="info__content">
                {{address}}
            </div>
        </div>
    {{/if}}
    <div class="info__block">
        <div class="info__title">
            {{texts.info_description}}
        </div>
        <div class="info__content">
            {{product}}
        </div>
    </div>
    <div class="info__block">
        <div class="info__content">
            <a href={{image}} target="_blank" class="info__link">Link to product image</a>
        </div>
    </div>
</div>

{{#if reviewMode}}
    <div class="review">
        <div class="review__map">
            <div id="{{concat 'map_' id}}" style="width: 100%; height: 400px;"></div>
        </div>
        {{#if (equal verdict "ok")}}
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_ok.question_1.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_facade}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">←</span>
                                    <span class="review__rotate review__rotate_right">→</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_ok.question_2.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_item}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">←</span>
                                    <span class="review__rotate review__rotate_right">→</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_ok.question_3.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_price}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">←</span>
                                    <span class="review__rotate review__rotate_right">→</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
        {{/if}}
        {{#if (equal verdict "no_price")}}
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_price.question_1.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_facade}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">←</span>
                                    <span class="review__rotate review__rotate_right">→</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_price.question_2.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_item}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">←</span>
                                    <span class="review__rotate review__rotate_right">→</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
        {{/if}}
        {{#if (equal verdict "no_item")}}
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_item.question_1.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_facade}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">←</span>
                                    <span class="review__rotate review__rotate_right">→</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_item.question_2.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_shelf}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">←</span>
                                    <span class="review__rotate review__rotate_right">→</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            {{#if comment}}
                <div class="review__block">
                    <div class="review__title">
                        {{texts.btn_no_item.question_3.title}}
                    </div>
                    <div class="review__comment">
                        {{field type="textarea" name="comment" width="100%" rows=5}}
                    </div>
                </div>
            {{/if}}
        {{/if}}
        {{#if (equal verdict "no_shop")}}
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_shop.question_1.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_around}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">←</span>
                                    <span class="review__rotate review__rotate_right">→</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_shop.question_2.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_address}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">←</span>
                                    <span class="review__rotate review__rotate_right">→</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_shop.question_3.title}}
                </div>
                <div class="review__comment">
                    {{field type="textarea" name="comment" width="100%" rows=5}}
                </div>
            </div>

            <!-- customization fragment start -->
            <!-- New verdict with uploaded data -->
            {{#if (equal verdict "new_verdict")}}
              <div class="review__block">
                <div class="review__title">
                  {{texts.btn_new.question_1.title}}
                </div>
                <div class="review__imgs-grid">
                  {{#each imgs}}
                    <div class="review__grid-item">
                      <div class="review__grid-inner">
                        <img src="{{this}}" class="review__img" data-rotationdeg="0">
                        <div class="review__rotate-panel">
                          <span class="review__rotate review__rotate_left">←</span>
                          <span class="review__rotate review__rotate_right">→</span>
                        </div>
                      </div>
                    </div>
                  {{/each}}
                </div>
              </div>
              <div class="review__block">
                <div class="review__title">
                  {{texts.btn_new.question_2.title}}
                </div>
                <div class="review__comment">
                  {{field type="textarea" name="new_comment" width="100%" rows=5}}
                </div>    
              </div>
            {{/if}}
            <!-- customization fragment end -->

        {{/if}}
    </div>
{{else}}
    <div class="main">
        <div class="main__title">
            Select a task completion option:
        </div>
        <div class="main__container">
            <div class="main__popup main__popup_hidden">No answer selected</div>
            <div class="main__block">
                <div class="main__btn main__btn_green">
                    {{texts.btn_ok.title}}
                </div>
                <div class="main__content">
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_ok.question_1.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_ok.question_1.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_ok.question_1.example_link_1}}" target="_blank" class="main__ex-link">Example</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_facade" camera=true preview=true compress=false validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_ok.question_2.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_ok.question_2.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_ok.question_2.example_link_1}}" target="_blank" class="main__ex-link">Example</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_item" camera=true preview=true compress=false validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_ok.question_3.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_ok.question_3.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_ok.question_3.example_link_1}}" target="_blank" class="main__ex-link">Example</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_price" camera=true preview=true compress=false validation-show="top-left"}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="main__block">
                <div class="main__btn main__btn_red">
                    {{texts.btn_no_price.title}}
                </div>
                <div class="main__content">
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_no_price.question_1.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_no_price.question_1.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_no_price.question_1.example_link_1}}" target="_blank" class="main__ex-link">Example</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_facade" camera=true validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_no_price.question_2.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_no_price.question_2.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_no_price.question_2.example_link_1}}" target="_blank" class="main__ex-link">Example</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_item" camera=true validation-show="top-left"}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="main__block">
                <div class="main__btn main__btn_red">
                    {{texts.btn_no_item.title}}
                </div>
                <div class="main__content">
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_no_item.question_1.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_no_item.question_1.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_no_item.question_1.example_link_1}}" target="_blank" class="main__ex-link">Example</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_facade" camera=true validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_no_item.question_2.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_no_item.question_2.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_no_item.question_2.example_link_1}}" target="_blank" class="main__ex-link">Example</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_shelf" camera=true validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__content-title">
                            {{texts.btn_no_item.question_3.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_no_item.question_3.description}}
                        </div>
                        <div class="main__comment">
                            {{field type="textarea" name="comment" width="100%" rows=5 validation-show="top-left"}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="main__block">
                <div class="main__btn main__btn_red">
                    {{texts.btn_no_shop.title}}
                </div>
                <div class="main__content">
                    <div class="main__content-block">
                        <div class="main__text main__text_req">
                            {{texts.btn_no_shop.question_1.description}}
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_around" camera=true validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__text main__text_req">
                            {{texts.btn_no_shop.question_2.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_no_shop.question_2.example_link_1}}" target="_blank" class="main__ex-link">Example</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_address" camera=true validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_no_shop.question_3.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_no_shop.question_3.description}}
                        </div>
                        <div class="main__comment">
                            {{field type="textarea" name="comment" width="100%" rows=5 validation-show="top-left"}}
                        </div>
                    </div>
                </div>
            </div>

            <!-- customization fragment start -->
            <div class="main__block">
              <div class="main__btn main__btn_red">
                {{texts.btn_new.title}}
              </div>
              <div class="main__content">
                <div class="main__content-block">
                  <div class="main__content-title main__content-title_req">
                    {{texts.btn_new.question_1.title}}
                  </div>
                  <div class="main__text">
                    {{texts.btn_new.question_1.description}}
                  </div>
                  <div class="main__ex">
                    <a href="{{texts.btn_new.question_1.example_link_1}}" target="_blank" class="main__ex-link">Example</a>
                  </div>
                  <div class="main__imgs">
                    {{field type="file-img" name="imgs" camera=true validation-show="top-left"}}
                  </div>          
                </div>
                <div class="main__content-block">
                  <div class="main__content-title main__content-title_req">
                    {{texts.btn_new.question_2.title}}
                  </div>
                  <div class="main__text">
                    {{texts.btn_new.question_2.description}}
                  </div>
                  <div class="main__comment">
                    {{field type="textarea" name="new_comment" width="100%" rows=5 validation-show="top-left"}}
                  </div>
                </div>
              </div>      
            </div>
            <!-- customization fragment end -->

        </div>
    </div>
{{/if}}
Editing the output specification

Add 2 new fields to the output data specification:

imgs — An array of files with photos.

new_comment — A mandatory comment string.

Editing HTML
  1. The HTML code consists of blocks describing various interface elements. Each block may contain other blocks within it. There may be several nesting levels. For example, the block with a response button description contains other blocks with input fields. Each field contains other elements, such as a title and a comment field.

    Each block looks like this:

    <div class="block_name">
      <!-- code for the block that may contain nested blocks -->
      ...
    </div>
  2. Find the main block (it starts with <div class="main">). It contains several main_block blocks within it, each describing one of the buttons. For example, the “Photos of product and price tag” template has 4 response buttons, which means that its main block contains 4 main_block blocks for each of the buttons.

    Each button has a name for accessing its properties. For example, the buttons in the “Photos of product and price tag” template are named btn_ok, btn_no_price, btn_no_item, and btn_no_shop. Add a new button with the name btn_new. To do this, paste the following code after the last main__block block. It will add a new button for uploading photos and writing a comment.

    <div class="main__block">
      <div class="main__btn main__btn_red">
        {{texts.btn_new.title}}
      </div>
      <div class="main__content">
        <div class="main__content-block">
          <div class="main__content-title main__content-title_req">
            {{texts.btn_new.question_1.title}}
          </div>
          <div class="main__text">
            {{texts.btn_new.question_1.description}}
          </div>
          <div class="main__ex">
            <a href="{{texts.btn_new.question_1.example_link_1}}" target="_blank" class="main__ex-link">Example</a>
          </div>
          <div class="main__imgs">
            {{field type="file-img" name="imgs" camera=true validation-show="top-left"}}
          </div>          
        </div>
        <div class="main__content-block">
          <div class="main__content-title main__content-title_req">
            {{texts.btn_new.question_2.title}}
          </div>
          <div class="main__text">
            {{texts.btn_new.question_2.description}}
          </div>
          <div class="main__comment">
            {{field type="textarea" name="new_comment" width="100%" rows=5 validation-show="top-left"}}
          </div>
        </div>
      </div>      
    </div>
  3. Update the acceptance mode.

    The review block contains the code for each button in the acceptance mode. This code is located in the following blocks:

    {{#if (equal verdict "ok")}}
      <!-- code for the "ok" button in acceptance mode -->
      <div class="review__block">
        <!-- code for the "ok" button field in acceptance mode -->
        ...
      </div>
      ...
    {{/if}}

    The value of the response button selected by the performer is passed to the verdict variable specified in the output specification.

    For example, in the “Photos of product and price tag” template, 4 values are described for 4 buttons: ok, no_price, no_item, and no_shop. Let's add a new_verdict output value for the new button btn_new.

    Find the desired button by searching for the string {{#if (equal verdict "response_button_value")}}, then find the review__block field where you want to add a new field and insert the following code after it:

    <!-- New verdict with uploaded data -->
    {{#if (equal verdict "new_verdict")}}
      <div class="review__block">
        <div class="review__title">
          {{texts.btn_new.question_1.title}}
        </div>
        <div class="review__imgs-grid">
          {{#each imgs}}
            <div class="review__grid-item">
              <div class="review__grid-inner">
                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                <div class="review__rotate-panel">
                  <span class="review__rotate review__rotate_left">←</span>
                  <span class="review__rotate review__rotate_right">→</span>
                </div>
              </div>
            </div>
          {{/each}}
        </div>
      </div>
      <div class="review__block">
        <div class="review__title">
          {{texts.btn_new.question_2.title}}
        </div>
        <div class="review__comment">
          {{field type="textarea" name="new_comment" width="100%" rows=5}}
        </div>    
      </div>
    {{/if}}

    Update the interface header in the acceptance mode. Find the header-review block that contains such blocks for each button:

    {{#if (equal verdict "ok")}}
        <div class="header-review__btn header-review__btn_green">
            {{texts.btn_ok.title}}
        </div>
    {{/if}}

    This block describes the btn_ok button and its output value ok. Paste the following code after the last button block:

    <!-- New verdict for the interface header -->
    {{#if (equal verdict "new_verdict")}}
      <div class="header-review__btn header-review__btn_red">
        {{texts.btn_new.title}}
      </div>
    {{/if}}
Editing JS
  1. The JS code consists of blocks describing various interface elements. These blocks can be nested (buttons contain a set of fields, fields contain a set of elements, and so on). Each block is enclosed in curly brackets.

    The elements are described as follows:

    'property': 'value'

    The value can also consist of several properties, in which case it is enclosed in curly brackets and forms the next level of nesting.

  2. The texts constant at the very beginning of the file stores all texts for each button.

    Each button has a name for accessing its properties. For example, the buttons in the “Photos of product and price tag” template are named btn_ok, btn_no_price, btn_no_item, and btn_no_shop.

    For example, in the “Photos of product and price tag” template, the texts for the btn_ok button are located in the following code block:

    var texts = {
        //<common header text>
        'btn_ok': {
            'title': 'I found the price tag for the product',
            'question_1': {
                //<texts for the first field (photos of the store's front)>
            },
            'question_2': {
                //<texts for the second field (product photos)>
            },
            'question_3': {
                //<texts for the third field (photo of the price tag)>
            }
        },
  3. To add the texts for the new btn_new button, put a comma after the curly bracket that closes the last button block and insert the following code:

    'btn_new': {
      'title': 'New button',
      'question_1': {
        'title': 'Photos',
        'description': 'Take at least 2 photos',
        'example_link_1': 'link to an example of a photo'
      },
      'question_2': {
        'title': 'Mandatory comment',
        'description': 'Please write a comment'
      }  
    }
    Change the values of the title, description, and example_link_1 properties. The title property contains a title displayed above the field; the description property contains a question or a hint for performers, and the example_link_1 property contains a link to the example of an image.
  4. Find the verdictsOut variable. In the “Photos of product and price tag” template, it looks like this:

    var verdictsOut = ['ok', 'no_price', 'no_item', 'no_shop'];

    Add the new_verdict output value to the new button like this:

    var verdictsOut = ['ok', 'no_price', 'no_item', 'no_shop', 'new_verdict'];
  5. Find the getTemplateData function. It contains several blocks that look like this:

    if (<field checking condition>) {
        ...
        <code for displaying the uploaded data>
        ...
    }

    Paste the following code after any of these blocks. It is used to send the photos uploaded by the performer to the input data. You need this to display the data in the acceptance mode:

    if (outputValues.imgs && outputValues.imgs.length > 0) {
      data.imgs = [];
      for (var i = 0; i < outputValues.imgs.length; i++) {
        data.imgs.push(workspaceOptions.apiOrigin + '/api/attachments/' + outputValues.imgs[i] + '/preview');
      }
    }
  6. Add validation.

    Find the validate function. It contains the code for checking whether the fields in each of the buttons are filled in. For example, in the “Photos of product and price tag” template, the code looks like this:

      else if (solution.output_values.verdict === 'ok') {
        // code for checking the ok button fields
        if (!solution.output_values.imgs_facade || solution.output_values.imgs_facade.length === 0) {
            // code for checking the imgs_facade field
        }
    
        if (!solution.output_values.imgs_item || solution.output_values.imgs_item.length === 0) {
            // code for checking the imgs_item field
        }
    
        if (!solution.output_values.imgs_price || solution.output_values.imgs_price.length === 0) {
            // code for checking the imgs_price field
        }
    
    } else if (solution.output_values.verdict === 'no_price') {
        //  code for checking the no_price button fields
        }
    } else if (solution.output_values.verdict === 'no_item') {
        //  code for checking the no_item button fields
        }
    } else if (solution.output_values.verdict === 'no_shop') {
        // code for checking the no_shop button fields
    }
    

    Paste the following code after the closing curly bracket with the verdict for the last button:

    else if (solution.output_values.verdict === 'new_verdict') {
      if (!solution.output_values.imgs || solution.output_values.imgs.length === 0) {
        this.errors = this.addError('Attach photos', "imgs", this.errors);
      } else if (solution.output_values.imgs.length < 2) {
        this.errors = this.addError('There must be at least 2 photos', "imgs", this.errors);
      }
    
      if (!solution.output_values.new_comment || solution.output_values.new_comment.trim() === '') {
        this.errors = this.addError('Write a comment', "new_comment", this.errors);
      }
    }