在“产品”页面“Spree”中添加一个按钮

时间:2014-08-13 18:42:15

标签: ruby-on-rails spree

我正在使用SpreeCommerce系统来构建商业网站。我想在产品页面上添加一个按钮,在“添加到购物车”按钮旁边,该按钮将链接到每个产品页面的不同页面。我搜索了他们的文档,我无法弄清楚他们甚至在哪里添加购物车按钮。

编辑:如果不清楚,我不知道我想编辑的代码在哪里。我知道如何编辑它以及我应该放什么,但我不知道在哪里放它。如果它不像其他编辑狂欢(你只是复制一个文件并进行更改),那么我需要更多的帮助,但我不知道要复制什么文件。

1 个答案:

答案 0 :(得分:0)

1)运行bundle open spree,导航到core / app / spree / product / show.html.erb n 2)检查浏览器上的元素并找到按钮的位置。 3)使用deface覆盖它。

以下是一个例子:

我在div#cart-form之前放了一个按钮(未经测试的相应修改)

Deface::Override.new(:virtual_path  => "spree/product/show",
                         :insert_before => "div#cart-form",
                         :text          => "<button name="button">Click me</button>",
                         :name          => "button_product_show")

假设文件名是button_product_show.rb

我会将此文件放在app/overrides/spree/button_product_show.rb

spree / product / show.html.erb如下所示(至少在我使用的版本上):

<div data-hook="product_show" itemscope itemtype="http://schema.org/Product">
  <% @body_id = 'product-details' %>

  <div class="columns six alpha" data-hook="product_left_part">
    <div class="row" data-hook="product_left_part_wrap">

      <div id="product-images" data-hook="product_images">
        <div id="main-image" data-hook>
          <%= render :partial => 'image' %>
        </div>
        <div id="thumbnails" data-hook>
          <%= render :partial => 'thumbnails' %>
        </div>
      </div>

      <div data-hook="product_properties">
        <%= render :partial => 'properties' %>
      </div>

    </div>
  </div>

  <div class="columns ten omega" data-hook="product_right_part">
    <div class="row" data-hook="product_right_part_wrap">

      <div id="product-description" data-hook="product_description">

        <h1 class="product-title" itemprop="name"><%= accurate_title %></h1>

        <div itemprop="description" data-hook="description">
          <%= product_description(@product) rescue t(:product_has_no_description) %>
        </div>

        <div id="cart-form" data-hook="cart_form">
          <%= render :partial => 'cart_form' %>
        </div>

      </div>

      <%= render :partial => 'taxons' %>

    </div>
  </div>

</div>

可在此处找到更多信息:http://guides.spreecommerce.com/developer/view.html