hummingbird/templates/catalog/_partials/customization-modal.tpl at 056b0da4894a74605bcf3945fbf81712d2a7c499 · tblivet/hummingbird · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
{**
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 *}
{$componentName = 'product-customization-modal'}

<div id="product-customizations-modal-{$customization.id_customization}" class="modal fade product-customization-modal" tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="customizations-modal-{$customization.id_customization}-title">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <p class="h2 modal-title" id="customizations-modal-{$customization.id_customization}-title">{l s='Product customization' d='Shop.Theme.Checkout'}</p>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}"></button>
      </div>

      <div class="modal-body">
        {foreach from=$customization.fields item="field"}
          <div class="{$componentName}__line">
            <p class="{$componentName}__label">{$field.label}</p>

            {if $field.type == 'text'}
              <div class="{$componentName}__text">
                {if $field.id_module|intval}
                  {$field.text nofilter}
                {else}
                  {$field.text}
                {/if}
              </div>
            {elseif $field.type == 'image'}
              {assign var=image_modal_id value="{$componentName}_image--{mt_rand()}"}

              <a href="#{$image_modal_id}" data-bs-toggle="modal" data-bs-dismiss="modal" >
                <img class="{$componentName}__img" src="{$field.image.small.url}">
              </a>

              {append var='image_modals'
                value=[
                  "id"=>$image_modal_id,
                  "title"=>$field.label,
                  "image_url"=>$field.image.large.url
                ]
              }
            {/if}
          </div>
        {/foreach}
      </div>
    </div>
  </div>
</div>

{if isset($image_modals) && count($image_modals)}
  <div class="{$componentName}__popup">
    {foreach from=$image_modals item="image_modal"}
      <div class="modal fade" id="{$image_modal['id']}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
          <div class="modal-content">
            <div class="modal-header">
              <p class="h2 modal-title">{$image_modal['title']}</p>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}"></button>
            </div>

            <div class="modal-body">
              <img class="{$componentName}__img-popup img-fluid" src="{$image_modal['image_url']}">
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary"
                  data-bs-target="#product-customizations-modal-{$customization.id_customization}"
                  data-bs-toggle="modal"
                  data-bs-dismiss="modal"
                >
                  {l s='Back' d='Shop.Theme.Global'}
                </button>
            </div>
          </div>
        </div>
      </div>
    {/foreach}
  </div>
{/if}