Jump to content

input type="radio" в вариантах товара


Recommended Posts

Хочу вместо select option сделать input type="radio"


Не понимаю как сделать чтоб скрипт обновлял цену


 


Сейчас все выглядит вот так



{if $product->variants|count > 0}
<!-- Выбор варианта товара -->
<form class="variants" action="/cart">

{* Это если вариант 1*}
{if $product->variants|count==1 && !$product->variant->name}
{foreach $product->variants as $v}<input id="product_{$v->id}" name="variant" value="{$v->id}"
type="radio" {if $product->variant->id==$v->id}checked{/if} style="display:none;"/>{/foreach}
{/if}
{if $product->variants|count==1}
{foreach $product->variants as $v}{$v->name}<input id="product_{$v->id}" name="variant"
value="{$v->id}" type="radio" {if $product->variant->id==$v->id}checked{/if}
style="display:none;"/>{/foreach}
{else}
{* А это если вариантов несколько *}
<select name="variant" class="selestvariant">
{foreach $product->variants as $v}
<option value="{$v->id}" {if $v->compare_price > 0}compare_price="{$v->compare_price|convert}"{/if} price="{$v->price|convert}">
{$v->name}
</option>
{/foreach}
</select>

{/if}

<div class="price">
<strike>
{if $product->variant->compare_price > 0}
{$product->variant->compare_price|convert}
{/if}
</strike>
<span class="pr">{$product->variant->price|convert}</span>
<span class="rouble">o</span>
</div>

{literal}
<script>
$(function() {
// Выбор вариантов
$('select[name=variant]').change(function() {
price = $(this).find('option:selected').attr('price');
compare_price = '';
if(typeof $(this).find('option:selected').attr('compare_price') == 'string')
compare_price = $(this).find('option:selected').attr('compare_price');
$(this).find('option:selected').attr('compare_price');
$(this).closest('form').find('span.pr').html(price);
$(this).closest('form').find('strike').html(compare_price);
return false;
});

});
</script>
{/literal}

<input type="submit" class="button" value="БЕРУ!" data-result-text="Хочу ЕЩЁ!"/>
</form>
<!-- Выбор варианта товара (The End) -->
{else}
Нет в наличии
{/if}

post-18318-0-02464500-1448529689_thumb.png

Link to post
Share on other sites

Сделал вот так, ценник меняется но input не подсвечивается как выбранный. Где ошибся?

{if $product->variants|count > 0}
		<!-- Выбор варианта товара -->
		<form class="variants" action="/cart">
			
         
         
         {* Это если вариант 1*}
        {if $product->variants|count==1  && !$product->variant->name}
            {foreach $product->variants as $v}<input id="product_{$v->id}" name="variant" value="{$v->id}" 
                type="radio" {if $product->variant->id==$v->id}checked{/if} style="display:none;"/>{/foreach}
        {/if}
        {if $product->variants|count==1}
            {foreach $product->variants as $v}{$v->name}<input id="product_{$v->id}" name="variant" 
                value="{$v->id}" type="radio" {if $product->variant->id==$v->id}checked{/if} 
                style="display:none;"/>{/foreach}
        {else}
        {* А это если вариантов несколько *}
         
        {foreach $product->variants as $v}
		<label>
			<input  value="{$v->id}" type="radio"    
            {if $v->compare_price > 0}
            compare_price="{$v->compare_price|convert}"
            {/if}    
            price="{$v->price|convert}"    
            {if $product->variant->id==$v->id}
            checked="checked"
            {/if}>
            <span>{$v->name}</span>
		</label>  
        {/foreach}
        {/if}	

            <div class="price">
                <strike>
                {if $product->variant->compare_price > 0}
                {$product->variant->compare_price|convert}
                {/if}
                </strike>
                <span class="pr">{$product->variant->price|convert}</span>
                <span class="rouble">o</span>
            </div>
         
         
              
    	{literal}
            <script>
                $(function() {
                    $(".variants label").live("click", function(){
               
                    price = $(this).find('input:checked').attr('price');
                    compare_price = '';
                    if(typeof $(this).find('input:checked').attr('compare_price') == 'string')
                        compare_price = $(this).find('input:checked').attr('compare_price');
                    $(this).find('input:checked').attr('compare_price');
                    $(this).closest('form').find('span.pr').html(price);
                    $(this).closest('form').find('strike').html(compare_price);
                    return false;		
                     
                    });
                });
            </script>
		{/literal}      

			<input type="submit" class="button" value="БЕРУ!" data-result-text="Хочу ЕЩЁ!"/>
		</form>     
      
		<!-- Выбор варианта товара (The End) -->
		{else}
			Нет в наличии
		{/if}

Link to post
Share on other sites

Как простой вариант - включить цену в список.
 
Как более сложный - через js-скрипт.
 

Сделал вот так, ценник меняется но input не подсвечивается как выбранный. Где ошибся?

 
Возможно стоит убрать: 
 

return false;
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...