使用下拉 select 菜单而不是 Spree 3.1.0 变体的单选按钮 (Rails 4.2)

Question

正如标题所说，我在 Rails 4.2 上使用 Spree 3.1.0 来建立商店。在产品展示页面上，我尝试根据客户的要求使用 Deface 将单选按钮替换为 drop-down。我有下拉菜单功能，但是当您 select 选择单选按钮时，价格不会在页面上更新。

这是我对菜单的覆盖：

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

辅助方法：

def create_dropdown(variant)
  price = variant.stock_items.count > 0 ? variant.price : Spree.t(:out_of_stock)
  "#{variant.options_text.sub('Size: ', '')} - #{price}"
end

下拉菜单按预期显示，但我希望页面上的价格显示显示 selected 变体的价格而不是基本价格。我已经搜索了一段时间，我发现的 two answers 对下拉菜单的工作很有帮助，但似乎没有维护价格功能。

谢谢！

Answer 1

为了实现这个你需要修改product.js.coffee

它应该看起来像这样

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

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

def create_dropdown(variant)
  price = variant.can_supply? ?  variant.price : Spree.t(:out_of_stock)
  "#{variant.options_text.sub('Size: ', '')} - #{price}"
end

使用 spree can_supply? 方法代替 varaint.stock_items.count

此外，您需要更改构建 select 框的方式，以便在 select_box_tag 的所有 option 上添加一个 class =32=]

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

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

使用下拉 select 菜单而不是 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)

ruby-on-rails

spree

deface

ruby-on-rails-4