使用下拉选择菜单代替Spree 3.1.0变体(Rails 4.2)的单选按钮

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()

查看所做的更改以确保现在所有事件都反映在"选择"框而不是单选按钮上
我还建议您仔细阅读下面的代码,并更改变量名称,以满足当前的情况。 (radios-> options仅用于命名约定)

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

使用大礼包can_supply?方法代替varaint.stock_items.count

此外,您需要更改构建选择框的方式,以便在我正在product.js.coffee

中使用的所有select_box_tagselect_box_tag的所有option中添加一个类。

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' }] })%>
")

这应该可以解决您的问题。如果您仍然无法实现目标,请告诉我。