Using a drop down select menu instead of radio buttons for Spree 3.1.0 variants (Rails 4.2)
正如标题所述,我正在Rails 4.2上使用Spree 3.1.0来建立商店。在产品的"显示"页面上,我尝试根据客户的要求使用Deface将单选按钮替换为下拉菜单。我具有下拉菜单功能,但是当您选择单选按钮一样的价格时,页面上的价格不会更新。
这是我对菜单的替代:
1 2 3 4 5 6 7 | Deface::Override.new( virtual_path: 'spree/products/_cart_form', name: 'add_variants_dropdown_to_product_show', replace:"ul.list-group", text:" <%= select_tag 'variant_id', options_for_select(@product.variants_and_option_values(current_currency).collect{ |v| [create_dropdown(v), v.id] })%> ") |
和辅助方法:
1 2 3 4 | def create_dropdown(variant) price = variant.stock_items.count > 0 ? variant.price : Spree.t(:out_of_stock) "#{variant.options_text.sub('Size: ', '')} - #{price}" end |
下拉菜单按预期显示,但我希望页面上的价格显示可以显示所选变体的价格,而不是基本价格。我已经搜索了一段时间,我发现的两个答案对于使下拉菜单正常工作很有帮助,但是似乎并没有参与维护价格功能。
谢谢!
为此,您需要修改product.js.coffee
它应该看起来像这样
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | Spree.ready ($) -> Spree.addImageHandlers = -> thumbnails = ($ '#product-images ul.thumbnails') ($ '#main-image').data 'selectedThumb', ($ '#main-image img').attr('src') thumbnails.find('li').eq(0).addClass 'selected' thumbnails.find('a').on 'click', (event) -> ($ '#main-image').data 'selectedThumb', ($ event.currentTarget).attr('href') ($ '#main-image').data 'selectedThumbId', ($ event.currentTarget).parent().attr('id') thumbnails.find('li').removeClass 'selected' ($ event.currentTarget).parent('li').addClass 'selected' false thumbnails.find('li').on 'mouseenter', (event) -> ($ '#main-image img').attr 'src', ($ event.currentTarget).find('a').attr('href') thumbnails.find('li').on 'mouseleave', (event) -> ($ '#main-image img').attr 'src', ($ '#main-image').data('selectedThumb') Spree.showVariantImages = (variantId) -> ($ 'li.vtmb').hide() ($ 'li.tmb-' + variantId).show() currentThumb = ($ '#' + ($ '#main-image').data('selectedThumbId')) if not currentThumb.hasClass('vtmb-' + variantId) thumb = ($ ($ '#product-images ul.thumbnails li:visible.vtmb').eq(0)) thumb = ($ ($ '#product-images ul.thumbnails li:visible').eq(0)) unless thumb.length > 0 newImg = thumb.find('a').attr('href') ($ '#product-images ul.thumbnails li').removeClass 'selected' thumb.addClass 'selected' ($ '#main-image img').attr 'src', newImg ($ '#main-image').data 'selectedThumb', newImg ($ '#main-image').data 'selectedThumbId', thumb.attr('id') Spree.updateVariantPrice = (variant) -> variantPrice = variant.data('price') ($ '.price.selling').text(variantPrice) if variantPrice Spree.disableCartForm = (variant) -> inStock = variant.data('in-stock') $('#add-to-cart-button').attr('disabled', !inStock) radios = ($ '.variant_option') if radios.length > 0 selectedRadio = $('#variant_id').find ':selected' Spree.showVariantImages selectedRadio.attr('value') Spree.updateVariantPrice selectedRadio Spree.disableCartForm selectedRadio $('#variant_id').change (event) -> selected = $(this).find ':selected' Spree.showVariantImages selected.value Spree.updateVariantPrice (selected) Spree.disableCartForm (selected) Spree.addImageHandlers() |
查看所做的更改以确保现在所有事件都反映在"选择"框而不是单选按钮上
我还建议您仔细阅读下面的代码,并更改变量名称,以满足当前的情况。 (
1 2 3 4 | def create_dropdown(variant) price = variant.can_supply? ? variant.price : Spree.t(:out_of_stock) "#{variant.options_text.sub('Size: ', '')} - #{price}" end |
使用大礼包
此外,您需要更改构建选择框的方式,以便在我正在product.js.coffee
中使用的所有
1 2 3 4 5 6 7 | Deface::Override.new( virtual_path: 'spree/products/_cart_form', name: 'add_variants_dropdown_to_product_show', replace:"ul.list-group", text:" <%= select_tag 'variant_id', options_for_select(@product.variants_and_option_values(current_currency).collect{ |v| [create_dropdown(v), v.id, {'data-price' => v.price_in(current_currency).money, 'data-in-stock' => v.can_supply?, class: 'variant_option' }] })%> ") |
这应该可以解决您的问题。如果您仍然无法实现目标,请告诉我。