Как изменить выпадающий список вариантов на кнопки

Правила раздела: faq.php?mode=okay
Модератор: Модераторы

apetruniv
apetruniv
Репутация: 4
Сообщения: 31
Зарегистрирован: 25.02.2019
С нами: 5 лет 1 месяц

Сообщение #1 apetruniv » 25.02.2019, 18:34

Хочу на сайт сделать вместо выпадающего списка вариантов, кнопки вариантов чтобы покупатель сразу видел какие есть предложения

Подскажите как это реализировать или покажите где это менять, буду очень благодарен и уверен что кому-то это также пригодится

Шаблон стандартный, версия движка 2.3
Вложения
Screenshot_6.png
Screenshot_7.png

makki M
makki M
Репутация: 199
Сообщения: 697
Зарегистрирован: 12.08.2016
С нами: 7 лет 7 месяцев
Откуда: Киев
Сайт

Сообщение #2 makki » 25.02.2019, 19:30

1) Верстка карточки товара
design/okay_shop/html/product.tpl

2) Тут можно будет добавить новые стили или изменить имеющиеся
design/okay_shop/css/style.css

3) Чтобы вместо селекта работали радиокнопки, в этом файле design/okay_shop/js/okay.js надо будет поменять код начиная со строк

Код: Выделить всё

/* Смена варианта в превью товара и в карточке */
$(document).on('change', '.fn_variant', function() {
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS 2 (с 3-й и 4-й версией не работаю)

apetruniv
apetruniv
Репутация: 4
Сообщения: 31
Зарегистрирован: 25.02.2019
С нами: 5 лет 1 месяц

Сообщение #3 apetruniv » 27.02.2019, 18:22

makki писал(а):1) Верстка карточки товара
design/okay_shop/html/product.tpl

2) Тут можно будет добавить новые стили или изменить имеющиеся
design/okay_shop/css/style.css

3) Чтобы вместо селекта работали радиокнопки, в этом файле design/okay_shop/js/okay.js надо будет поменять код начиная со строк

Код: Выделить всё

/* Смена варианта в превью товара и в карточке */
$(document).on('change', '.fn_variant', function() {

не получается(
помогите пожалуйста, в js не силен(

makki M
makki M
Репутация: 199
Сообщения: 697
Зарегистрирован: 12.08.2016
С нами: 7 лет 7 месяцев
Откуда: Киев
Сайт

Сообщение #4 makki » 27.02.2019, 19:45

в okay.js вместо

Код: Выделить всё

$(document).on('change', '.fn_variant', function() {
    var selected = $( this ).children( ':selected' ),

напишите

Код: Выделить всё

$(document).on('change', '.fn_variant', function() {
    var selected = $( this ),

в product.tpl вместо

Код: Выделить всё

<select name="variant" class="fn_variant variant_select{if $product->variants|count < 2} hidden{/if}">
                                    {foreach $product->variants as $v}
                                        <option value="{$v->id}" data-price="{$v->price|convert}" data-stock="{$v->stock}"{if $v->compare_price > 0} data-cprice="{$v->compare_price|convert}"{/if}{if $v->sku} data-sku="{$v->sku|escape}"{/if} {if $v->units}data-units="{$v->units}"{/if}>{if $v->name}{$v->name|escape}{else}{$product->name|escape}{/if}</option>
                                    {/foreach}
                                </select>

напишите

Код: Выделить всё

<div class="radio_variant {if $product->variants|count < 2} hidden{/if}">
                                    {foreach $product->variants as $v}
                                        <input class="fn_variant" name="variant" type="radio" id="variant_{$v->id}" data-price="{$v->price|convert}" data-stock="{$v->stock}"{if $v->compare_price > 0} data-cprice="{$v->compare_price|convert}"{/if}{if $v->sku} data-sku="{$v->sku|escape}"{/if}{if $v->units} data-units="{$v->units}"{/if} value="{$v->id}"{if $product->variant->id == $v->id} checked{/if}>
                                        <label for="variant_{$v->id}">{if $v->name}{$v->name|escape}{else}{$product->name|escape}{/if}</label>
                                    {/foreach}
                                </div>

в css добавьте

Код: Выделить всё

.radio_variant {
    margin-top: 20px;
}
.radio_variant input[type=radio] {
    display: none;
}
.radio_variant input[type="radio"]+label {
    padding: 10px 14px;
    text-align: center;
    border: 1px solid #b9b9b9;
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 6px;
}
.preview .radio_variant input[type="radio"]+label {
    padding: 5px 8px;
    margin-right: 6px;
    margin-top: 6px;
    margin-bottom: 0px;
}

.radio_variant input[type="radio"]+label:hover {
    cursor: pointer;
}

.radio_variant input[type="radio"]:checked+label {
    border: 1px solid #38c0f3;
}
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS 2 (с 3-й и 4-й версией не работаю)

apetruniv
apetruniv
Репутация: 4
Сообщения: 31
Зарегистрирован: 25.02.2019
С нами: 5 лет 1 месяц

Сообщение #5 apetruniv » 03.03.2019, 13:51

makki писал(а):в okay.js вместо

Код: Выделить всё

$(document).on('change', '.fn_variant', function() {
    var selected = $( this ).children( ':selected' ),

напишите

Код: Выделить всё

$(document).on('change', '.fn_variant', function() {
    var selected = $( this ),

в product.tpl вместо

Код: Выделить всё

<select name="variant" class="fn_variant variant_select{if $product->variants|count < 2} hidden{/if}">
                                    {foreach $product->variants as $v}
                                        <option value="{$v->id}" data-price="{$v->price|convert}" data-stock="{$v->stock}"{if $v->compare_price > 0} data-cprice="{$v->compare_price|convert}"{/if}{if $v->sku} data-sku="{$v->sku|escape}"{/if} {if $v->units}data-units="{$v->units}"{/if}>{if $v->name}{$v->name|escape}{else}{$product->name|escape}{/if}</option>
                                    {/foreach}
                                </select>

напишите

Код: Выделить всё

<div class="radio_variant {if $product->variants|count < 2} hidden{/if}">
                                    {foreach $product->variants as $v}
                                        <input class="fn_variant" name="variant" type="radio" id="variant_{$v->id}" data-price="{$v->price|convert}" data-stock="{$v->stock}"{if $v->compare_price > 0} data-cprice="{$v->compare_price|convert}"{/if}{if $v->sku} data-sku="{$v->sku|escape}"{/if}{if $v->units} data-units="{$v->units}"{/if} value="{$v->id}"{if $product->variant->id == $v->id} checked{/if}>
                                        <label for="variant_{$v->id}">{if $v->name}{$v->name|escape}{else}{$product->name|escape}{/if}</label>
                                    {/foreach}
                                </div>

в css добавьте

Код: Выделить всё

.radio_variant {
    margin-top: 20px;
}
.radio_variant input[type=radio] {
    display: none;
}
.radio_variant input[type="radio"]+label {
    padding: 10px 14px;
    text-align: center;
    border: 1px solid #b9b9b9;
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 6px;
}
.preview .radio_variant input[type="radio"]+label {
    padding: 5px 8px;
    margin-right: 6px;
    margin-top: 6px;
    margin-bottom: 0px;
}

.radio_variant input[type="radio"]+label:hover {
    cursor: pointer;
}

.radio_variant input[type="radio"]:checked+label {
    border: 1px solid #38c0f3;
}

Спасибо вам большое, все работает


Вернуться в «Вопросы по работе с OkayCMS»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 35 гостей