Question

当我尝试选择T恤的颜色时，我遇到输入冲突，而不是更改并选择颜色，而是出现在结帐页面上。我需要在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');
})

})

product.tpl中的PrestaShop输入表单冲突

0 个答案: