dpdp Опубликовано 6 июня, 2013 Жалоба Поделиться Опубликовано 6 июня, 2013 (изменено) Исправлено и дополнено благодаря комментариям Заморочился исправить радиобаттоны на селект. Речь идет о Simpla 2.2. и выше Конечно с точки зрения интерфейсов селект это отстой. Но в случае ограниченности места и вариантов больше двух-трех радиобаттоны превращаются в кошмар. За основу взял пример отсюда: http://vitam.16mb.com/page/zamena-radiobutton-na-select Но меня не устроило то, что варианты товаров могут быть и выключены из видимости или наличия, а выпадающий список все равно будет показываться. Выпадающий список с одним вариантом вообще не нужен. И когда в категории в каждом товаре есть выпадающий список с одним вариантом, то в какой-то момент клиент перестанет туда заглядывать. Итак код: /ваш-шаблон/design/html/products.tpl находим строки: <table> {foreach $product->variants as $v} <tr class="variant"> <td> <input id="variants_{$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="variants_{$v->id}">{$v->name}</label>{/if} </td> <td> {if $v->compare_price > 0}<span class="compare_price">{$v->compare_price|convert}</span>{/if} <span class="price">{$v->price|convert} <span class="currency">{$currency->sign|escape}</span></span> </td> </tr> {/foreach} </table> Заменяем на: {* Это если вариант 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" > {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>{$product->variant->price|convert}</span> {$currency->sign|escape} </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').html(price); $(this).closest('form').find('strike').html(compare_price); return false; }); }); </script> {/literal} Эти же пункты нужно сделать так же и для /ваш-шаблон/design/html/main.tpl (для стартовой страницы магазина) Еще нужно поменять в корзине /ваш-шаблон/design/js/ajax_cart.js заменить 11 строку: data: {variant: variant}, поменять на: data: {variant: ($(this).find('input[name=variant]:checked').val() || $(this).find('select[name=variant]').val())}, У меня все заработало. На странице product.tpl я не стал ничего менять потому что там достаточно места именно для радиобаттонов, как раз там они уместны. потому что клиент сразу видит все варианты товара. PS. Я не программист, просто хочу понять сможет ли симпла выполнять мои задачи, поэтому если знаете как улучшить или исправить. то что я написал, буду только рад! PS2. И всем спасибо, чьи комментарии на этом форуме я использовал, вот решил сделать компиляцию результата в благодарность. Изменено 7 июня, 2013 пользователем dpdp Цитата Ссылка на сообщение Поделиться на другие сайты
ps-simpla Опубликовано 6 июня, 2013 Жалоба Поделиться Опубликовано 6 июня, 2013 А как у тебя будет работать {* Это если вариант один *} {foreach $product->variants as $v} {$v->name} {/foreach} если нету input с name=variant что ты будешь передавать в корзину? У меня все заработало. - Очень странно))) Цитата Ссылка на сообщение Поделиться на другие сайты
dpdp Опубликовано 6 июня, 2013 Автор Жалоба Поделиться Опубликовано 6 июня, 2013 (изменено) Да, ты полностью прав. Не программист я. Помоги исправить! У меня вот только на такой вариант сейчас хватило мыслей: (но реально добавляются в корзину любые позиции) {* Это если вариант один и без имени*} {if $product->variants|count==1 && !$product->variant->name} <select name="variant" style='display:none;'> {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} {* Это если вариант один и с именем*} {if $product->variants|count==1} <select name="variant" style='display:none;'> {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> {foreach $product->variants as $v} {$v->name} {/foreach} {else} {* А это если вариантов несколько *} <select name="variant" > {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} Но это как-то не красиво. Кто-то знает как улучшить? Я потом добавлю в первое сообщение. Изменено 6 июня, 2013 пользователем dpdp Цитата Ссылка на сообщение Поделиться на другие сайты
ps-simpla Опубликовано 6 июня, 2013 Жалоба Поделиться Опубликовано 6 июня, 2013 http://forum.simplacms.ru/topic/4649-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B0-%D0%B2-%D0%BA%D0%BE%D1%80%D0%B7%D0%B8%D0%BD%D1%83-%D0%BD%D0%B5-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82/ вот поднимали эту тему уже Цитата Ссылка на сообщение Поделиться на другие сайты
dpdp Опубликовано 6 июня, 2013 Автор Жалоба Поделиться Опубликовано 6 июня, 2013 http://forum.simplacms.ru/topic/4649-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B0-%D0%B2-%D0%BA%D0%BE%D1%80%D0%B7%D0%B8%D0%BD%D1%83-%D0%BD%D0%B5-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82/ вот поднимали эту тему уже Спасибо, исправил первое сообщение на правильный вариант! Цитата Ссылка на сообщение Поделиться на другие сайты
ps-simpla Опубликовано 7 июня, 2013 Жалоба Поделиться Опубликовано 7 июня, 2013 {* Вариант один*} {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} </select> {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} </select> {else} - убрать надо. И зачем {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} </select> дублируешь? Цитата Ссылка на сообщение Поделиться на другие сайты
dpdp Опубликовано 7 июня, 2013 Автор Жалоба Поделиться Опубликовано 7 июня, 2013 Все поправил. Что-то редактор проглючил. Теперь в шапке нормальная версия. Благодарю вас! Цитата Ссылка на сообщение Поделиться на другие сайты
Dr_Brown Опубликовано 12 июня, 2013 Жалоба Поделиться Опубликовано 12 июня, 2013 Как решается, если товар акционный ? Цитата Ссылка на сообщение Поделиться на другие сайты
el_salvaje Опубликовано 28 июня, 2013 Жалоба Поделиться Опубликовано 28 июня, 2013 Почему с точки зрения интерфейсов селект - отстой? Выпадающий список экономнее радиокнопок, а стилизуется селект очень легко, достаточно наложить на него сверху другой элемент (обычно юзают span) и придать ему желаемый вид, есть до кучи готовых решений, да возьмите первые 10 ссылок по запросу style select, например, http://byrichardpowell.github.io/Style-Select/, и найдете там решение для вас Цитата Ссылка на сообщение Поделиться на другие сайты
dpdp Опубликовано 30 июня, 2013 Автор Жалоба Поделиться Опубликовано 30 июня, 2013 Почему с точки зрения интерфейсов селект - отстой? 1. Потому что всегда подразумевают два клика.2. потому что не дают обзор сразу всех вариантов выбора. Почитайте что-то по дизайну интерфейсов. Интерфейсы создаются не для экономии места, а для удобства использования. Цитата Ссылка на сообщение Поделиться на другие сайты
Danya Опубликовано 17 августа, 2013 Жалоба Поделиться Опубликовано 17 августа, 2013 сделал всё по инструкции, отображается всё правильно, только вот теперь не работает выбор количества товара перед помещением в корзину http://forum.simplacms.ru/topic/1762-kolichestvo-tovara-pered-pomecsheniem-v-korzinu/ товар добавляется только в количестве 1 шт. версия 2.0.2код файла ajax-cart.js: // Аяксовая корзина $('form.cart').live('submit', function(e) { e.preventDefault(); var button = $(this).find('input[type="submit"]'); $.ajax({ url: "ajax/cart.php", data: {variant: ($(this).find('input[name=variant]:checked').val() || $(this).find('select[name=variant]').val()), amount: $(this).find('select[name="amount"]').val() }, dataType: 'json', success: function(data){ $('#cart_informer').html(data); if(button.attr('added_text')) button.val(button.attr('added_text')); } }); var o1 = $(this).offset(); var o2 = $('#cart_informer').offset(); var dx = o1.left - o2.left; var dy = o1.top - o2.top; var distance = Math.sqrt(dx * dx + dy * dy); $(this).closest('.product').find('.image img').effect("transfer", { to: $("#cart_informer"), className: "transfer_class" }, distance); $('.transfer_class').html($(this).closest('.product').find('.image').html()); $('.transfer_class').find('img').css('height', '100%'); return false;});так же пробовал код, он тоже работает, но количество не добавляет: // Аяксовая корзина $('form.cart').live('submit', function(e) { e.preventDefault(); button = $(this).find('input[type="submit"]'); if($(this).find('input[name=variant]:checked').size()>0) variant = $(this).find('input[name=variant]:checked').val(); if($(this).find('select[name=variant]').size()>0) variant = $(this).find('select').val(); var amount = $('select[name="amount"]').val(); $.ajax({ url: "ajax/cart.php", data: {variant: variant, amount: amount}, dataType: 'json', success: function(data){ $('#cart_informer').html(data); if(button.attr('added_text')) button.val(button.attr('added_text')); }, amount: $(this).find('select[name="amount"]').val(), }); var o1 = $(this).offset(); var o2 = $('#cart_informer').offset(); var dx = o1.left - o2.left; var dy = o1.top - o2.top; var distance = Math.sqrt(dx * dx + dy * dy); $(this).closest('.product').find('.image img').effect("transfer", { to: $("#cart_informer"), className: "transfer_class" }, distance); $('.transfer_class').html($(this).closest('.product').find('.image').html()); $('.transfer_class').find('img').css('height', '100%'); return false; }); Подскажите пожалуйста, где ошибка? Цитата Ссылка на сообщение Поделиться на другие сайты
mart Опубликовано 17 августа, 2013 Жалоба Поделиться Опубликовано 17 августа, 2013 Сделайте после получения данных amout в том же Хроме console.log(amout);Возможно Вы не получаете из формы данные. Цитата Ссылка на сообщение Поделиться на другие сайты
Danya Опубликовано 18 августа, 2013 Жалоба Поделиться Опубликовано 18 августа, 2013 спасибо, заработало! Цитата Ссылка на сообщение Поделиться на другие сайты
Yaroslav Опубликовано 30 сентября, 2013 Жалоба Поделиться Опубликовано 30 сентября, 2013 Все, кто реализовал данный функционал, проверьте работу с iphone, на apple-девайсах сайт стал загружаться очень долго, заменил обратно на radiobuttons, сново стал работать быстро. Цитата Ссылка на сообщение Поделиться на другие сайты
Mordovin Опубликовано 31 марта, 2014 Жалоба Поделиться Опубликовано 31 марта, 2014 Ребят помогите пожалуйста решить проблему, сделал выпадающий список все вроде бы отлично, но после выбора значения из списка меняется надпись на кнопке, подскажите, как сделать чтобы мои надписи кнопки не менялись? Кнопка пока не нажата имеет надпись купить, после нажатия меняется на добавленно приложил файл, как должно быть и там же отметил, что происходит после выбора http://yadi.sk/d/Dd9Tbi1bLZnB6 {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" > {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>{$product->variant->price|convert}</span> {$currency->sign|escape} </div> <!-- Кнопка купить--> <div class="funcs-buttons"> <!-- Start. Collect information about Variants, for future processing --> <div class="frame-count-buy js-variant-219 js-variant"> <div class="btn-buy"> <button class="btnBuy infoBut" type="submit" class="button" value="Купить" data-result-text="Добавлено" > <span class="text-el"> <input type="submit" class="text-el" value="Купить" data-result-text="Добавлено"/> </span> </button> </div> </div> </div> <!-- Кнопка купить--> </form> <!-- Выбор варианта товара (The End) --> {else} Нет в наличии {/if} </li> <!-- Товар (The End)--> {if $smarty.foreach.fproducts.iteration%5 == 0} </ul> </p></div> {if $smarty.foreach.fproducts.iteration != $featured_products|@count} <div> {/if} {/if} {/foreach} </div></div> {/if} Цитата Ссылка на сообщение Поделиться на другие сайты
Kpoxa Опубликовано 1 апреля, 2014 Жалоба Поделиться Опубликовано 1 апреля, 2014 Ребят помогите пожалуйста решить проблему, сделал выпадающий список все вроде бы отлично, но после выбора значения из списка меняется надпись на кнопке, подскажите, как сделать чтобы мои надписи кнопки не менялись? Кнопка пока не нажата имеет надпись купить, после нажатия меняется на добавленно приложил файл, как должно быть и там же отметил, что происходит после выбора Уберите data-result-text="Добавлено" и будет вам счастье. Цитата Ссылка на сообщение Поделиться на другие сайты
Mordovin Опубликовано 1 апреля, 2014 Жалоба Поделиться Опубликовано 1 апреля, 2014 Уберите data-result-text="Добавлено" и будет вам счастье.Тут вы не правы, как раз таки добавлено у меня и должно получиться после нажатия на кнопку, а ошибка выделена красным, вместо купить и добавлена на кнопке пишет цену, что мне не нужно Читайте пожалуйста внимательней Цитата Ссылка на сообщение Поделиться на другие сайты
Mordovin Опубликовано 1 апреля, 2014 Жалоба Поделиться Опубликовано 1 апреля, 2014 {foreach $product->variants as $v}{$v->name}<input id="product_{$v->id}" name="variant" если в этой строке убираю name="variant", то с кнопкой все нормально, но цена не меняется Цитата Ссылка на сообщение Поделиться на другие сайты
seolink Опубликовано 11 мая, 2015 Жалоба Поделиться Опубликовано 11 мая, 2015 Поддерживаю не работает после смены варианта появляется цена Цитата Ссылка на сообщение Поделиться на другие сайты
Kosjak76 Опубликовано 11 мая, 2015 Жалоба Поделиться Опубликовано 11 мая, 2015 Не знаю, что там у вас не работает, решение рабочее на 1000%, возможно, вывод цены находится за пределами ФОРМЫ, это можно решить изменением джаваскрипта Цитата Ссылка на сообщение Поделиться на другие сайты
Kosjak76 Опубликовано 11 мая, 2015 Жалоба Поделиться Опубликовано 11 мая, 2015 <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').html(price); $(this).closest('form').find('strike').html(compare_price); return false; }); }); </script> Вместо этого желательно вынести в отдельный файл и там определять, что куда и зачем... Цитата Ссылка на сообщение Поделиться на другие сайты
Noxter Опубликовано 11 мая, 2015 Жалоба Поделиться Опубликовано 11 мая, 2015 Давно уже разместил статейку http://simpla-addons.org/blog/modules/2xx-varianty-tovara-vypadayuschim-spiskom на эту тему. Цитата Ссылка на сообщение Поделиться на другие сайты
seolink Опубликовано 11 мая, 2015 Жалоба Поделиться Опубликовано 11 мая, 2015 после Цитата Ссылка на сообщение Поделиться на другие сайты
Noxter Опубликовано 11 мая, 2015 Жалоба Поделиться Опубликовано 11 мая, 2015 после Тут не форум экстрасенсов, без просмотра кода мало кто сможет помочь в решении вопроса. Цитата Ссылка на сообщение Поделиться на другие сайты
seolink Опубликовано 11 мая, 2015 Жалоба Поделиться Опубликовано 11 мая, 2015 Полностью ваш код с сайта вот ссылка http://pizza.seolink.msk.ru/catalog/pitstsa Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.