Flexbe выпадающий список вариантов товара

[Нейтин]

Всем привет.

При переходе с тильды на флексби столкнулся с проблемой, что у карточек товара нельзя задавать варианты товара.



Переходить на тильду, после того как познакомился с редактором во флексби, не хотелось. Поэтому решил написать костыль сам.

Возможно пригодится еще кому то.

--

1. Добавляем html секцию в самый низ лендинга и вставляем в нее следующий код:

<script>
window.onload=function(){$('[data-type="neytin_select_variat"]').parents(".element-container").attr("style","flex-grow: 1;"),$('[data-type="neytin_select_variat"]').parents(".element-content").attr("style","display: flex; align-items: flex-end;"),$('[data-type="neytin_select_variat"]').parents(".element-item").addClass("fill-space");var t=$("[data-type=neytin_select_variat]").parents(".elements-list").find("button").find(".btn-content"),e=t.html()+'<svg class="btn-icon success-icon" viewBox="0 0 18 14"><path d="M 2.205 5.77223L 0 7.92347L 6.3 14L 18 2.15124L 15.795 0L 6.3 9.74699L 2.205 5.77223Z"></path></svg>';t.html(e),$("[data-type=neytin_select_variat]").parents(".elements-list").find("button").click(function(){var t,e=$("[data-type=neytin_select_variat]",$(this).parents(".elements-list"));e.find(":selected")?(product=flexbe_cli.helpers.getProductInfo(this),product.title+=" "+e.find(":selected").attr("data-title"),product.price=parseInt(e.find(":selected").val()),product.id+=":"+product.title+product.price,(t=$(this)).addClass("animate-add-to-cart"),setTimeout(function(){t.removeClass("animate-add-to-cart")},450),(e=flexbe_cli.widget.cart.getItem(product.id))?(e.count+=1,flexbe_cli.widget.cart.dispatch("updateCount",e)):flexbe_cli.widget.cart.dispatch("addItem",product)):alert("Выберите один из вариантов товара")})};
</script>

2. Далее в карточку товара, перед кнопкой добавляем выпадающий список, как на картинке выше:

<div class="element-container fill-space">
    <div class="text-style-content font-size-text">
        <select data-type="neytin_select_variat" style="width: 100%; padding: 5px;">
            <option value="5500" data-title="8 литров">8 литров - 5500 руб.</option>
            <option value="3500" data-title="4 литра">4 литра - 3500 руб.</option>
        </select>
    </div>
</div>

В этом коде Вам надо будет добавить свои option:

<option value="5500" data-title="8 литров">8 литров - 5500 руб.</option>

value="5500" - это цена варианта товара
data-title="8 литров" - этот текст добавим к имени товара при добавлении товара
8 литров - 5500 руб. - это текст, что видит покупатель

3. На кнопках, что снизу выпадающего списка, действие по клику ставим - Ничего не делать

Все, сохраняем и проверяем.

 

[Victoriys]

огонь спасибо. !!!

У них кстати раньше была такая штука по дефолту, но они ее зачем то выпилили.

 

[Ирина К]

Огромное спасибо, еще как пригодилось!

 

[1nSane]

и после индексации можно будет спалить все ленды, которые использовали лайфхак и найти форумчан