Конфликт формы ввода PrestaShop в product.tpl - PullRequest
Новая
       9

Конфликт формы ввода PrestaShop в product.tpl

0 голосов
/ 17 июня 2019

Когда я пытаюсь выбрать цвет футболки, у меня возникает конфликт ввода, и вместо того, чтобы изменить и выбрать цвет, он появляется на странице оформления заказа. Мне нужно разделить варианты в product.tpl для конкретной категории. Поэтому я использовал вкладки типа «шаги», чтобы избежать вложенных форм (я скрывал варианты групп по css для каждого шага).

Я пытался переместить часть формы после вкладок, но выбор вариантов не работает таким образом. 

{block name='product_buy'}
            <form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh">
              <input type="hidden" name="token" value="{$static_token}">
              <input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id">
              <input type="hidden" name="id_customization" value="{$product.id_customization}" id="product_customization_id">

                <ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">Tab One</li>
    <li class="tab-link" data-tab="tab-2">Tab Two</li>
    <li class="tab-link" data-tab="tab-3">Tab Three</li>
    <li class="tab-link" data-tab="tab-4">Tab Four</li>
</ul>

<div id="tab-1" class="tab-content current">
      <div class="product-actions">



  {block name='product_variants'}
  <div class="product-variants">
<div class="product-variants-conf">
 {foreach from=$groups key=id_attribute_group item=group}
{if !empty($group.attributes)}
<div class="clearfix product-variants-item">
  <span class="control-label">{$group.name}</span>
  {if $group.group_type == 'select'}
    <select
      class="form-control form-control-select"
      id="group_{$id_attribute_group}"
      data-product-attribute="{$id_attribute_group}"
      name="group[{$id_attribute_group}]">
      {foreach from=$group.attributes key=id_attribute item=group_attribute}
        <option value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} selected="selected"{/if}>{$group_attribute.name}</option>
      {/foreach}
    </select>
  {elseif $group.group_type == 'color'}
    <ul id="group_{$id_attribute_group}">
      {foreach from=$group.attributes key=id_attribute item=group_attribute}
        <li class="float-xs-left input-container">
          <label class="accordion--form__label">
            <input class="input-color2" type="submit" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
            <span
              {if $group_attribute.html_color_code}class="color2" style="background-color: {$group_attribute.html_color_code}" {/if}
              {if $group_attribute.texture}class="color2 texture" style="background-image: url({$group_attribute.texture})" {/if}
            ><span class="sr-only">{$group_attribute.name}</span>  </span>

          </label>

        </li>
      {/foreach}
    </ul>
  {elseif $group.group_type == 'radio'}
    <ul id="group_{$id_attribute_group}">
      {foreach from=$group.attributes key=id_attribute item=group_attribute}
        <li class="input-container float-xs-left">
          <label class="accordion--form__label">
            <input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
            <span class="radio-label">{$group_attribute.name}</span>
          </label>
        </li>
      {/foreach}
    </ul>
  {/if}
</div>
{/if}
 {/foreach}


              {/block}
          </div>
          </div>
        </div>
</div>
   <div id="tab-2" class="tab-content">
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
  <div id="tab-3" class="tab-content">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div id="tab-4" class="tab-content">
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>


              {block name='product_add_to_cart'}
                {include file='catalog/_partials/product-add-to-cart.tpl'}
              {/block}

              {* Input to refresh product HTML removed, block kept for compatibility with themes *}
              {block name='product_refresh'}{/block}
            </form>
          {/block}

Я пробовал с аккордеоном, но вложение форм, очевидно, не работает. Кажется, что варианты не могут работать, если вы меняете позиции.

В .js 

$(document).ready(function(){

$('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
})

})
...