JSFiddle - React, Tailwind, and code Playground

by mickt

HTML

<!-- Список товаров-->
<ul class="products">
<table>
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">Наимеваноние&nbsp;</th>
    <th scope="col">Внутрений код&nbsp;</th>
    <th scope="col">Количество&nbsp;</th>
    <th scope="col">Цена&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
    {foreach $products as $product}
<tr>
<!-------------------------------------->
<!-- Товар-->


<!-- Фото товара -->
<td>

{if $product->image}

<div class="image">

<a href="{$product->image->filename|resize:800:600:w}" class="zoom" data-rel="group">

<img src="foto.png" alt="FOTO" /></a>

</div>

{/if}

</td>

<!-- Фото товара (The End) -->


<td>
 <div class="product_info">
 
 <!-- Название товара -->
 <h3 class="{if $product->featured}featured{/if}"><a data-product="{$product->id}" href="products/{$product->url}">{$product->name|escape}</a></h3>
 <!-- Название товара (The End) -->

</td>

{if $product->variants|count > 0}
<!-- Выбор варианта товара -->
{foreach $product->variants as $v}
<td>
{$product->id}
</td>
<td>
{$v->stock} шт.
</td>
<td>
<span class="price">{$v->price|convert}  <span class="currency">{$currency->sign|escape}</span></span>
</td>
<td nowrap="nowrap">

<form class="variants" action="/cart">
    <table>
    {foreach $product->variants as $v}
    <tr class="variant">
        <td>
            <input id="product_{$v->id}" name="variant" value="{$v->id}" type="radio" class="variant_radiobutton" {if $v@first}checked{/if} {if $product->variants|count<2}style="display:none;"{/if}/>
        </td>
        <td>
        {if $v->name}<label class="variant_name" for="product_{$v->id}">{$v->name}</label>{/if}
        </td>
        
    </tr>
    {/foreach}
    </table>
    <div class="qty">
        <input class="count" type="text" size="2" name="amount" value="1">
        
        <input type="submit" class="button" value="в корзину" data-result-text="добавлено"/>
        
    </div>
</form>

</td>
{/foreach}
<!-- Выбор...