0

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

这是我对菜单的覆盖：

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

下拉菜单按预期显示，但我希望页面上的价格显示显示所选变体的价格而不是基本价格。我一直在寻找这个，我发现的两个 答案有助于使下拉菜单正常工作，但似乎并没有涉及维护价格功能。

谢谢！

4

1 回答 1

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

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

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

使用 spreecan_supply?方法而不是varaint.stock_items.count

此外，您需要更改构建选择框的方式以添加我在 product.js.coffee 中使用的所有option类select_box_tag

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

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

于 2017-07-11T05:50:31.463 回答