在非商店頁面上將產品添加到購物車

Question

我們正在為企業使用Odoo 12軟件。

我們要復制產品頁面上“添加到購物車”按鈕的行為。 因此，我們想在其他頁面上添加一個按鈕，然后當您單擊該按鈕時，將產品添加到購物車並重定向到購物車。 產品被硬編碼到該按鈕。

這是產品頁面模板上使用的表單：

       <form t-if="product._is_add_to_cart_possible()" action="/shop/cart/update" method="POST">
          <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
          <div class="js_product js_main_product">
            <t t-placeholder="select">
              <input type="hidden" class="product_id" name="product_id" t-att-value="product_variant.id"/>
              <input type="hidden" class="product_template_id" name="product_template_id" t-att-value="product.id"/>
              <t t-if="first_possible_combination" t-call="sale.variants">
                <t t-set="ul_class" t-value="'flex-column'"/>
                <t t-set="parent_combination" t-value="None"/>
              </t>
              <t t-else="">
                <ul class="d-none js_add_cart_variants" t-att-data-attribute_exclusions="{'exclusions: []'}"/>
              </t>
            </t>
            <t t-call="website_sale.product_price"/>
            <p t-if="True" class="css_not_available_msg alert alert-warning">This combination does not exist.</p>
            <a role="button" id="add_to_cart" class="btn btn-primary btn-lg mt8 js_check_product a-submit" href="#">Add to Cart</a>
          </div>
        </form>

我們產品的信息： product.id = 135和product_template.id = 83 。

我發現，使用/web/content/.../.../web.assets_frontend.js調用負責添加到購物車的javascript。 這是一個很大的文件，但是您可以在此處查看示例： file 。

我應該在自定義頁面上添加哪個qweb / form / js / ...以便將產品添加到購物車？

感謝您的幫助，我已經堅持了很長時間！

編輯 ：正如@Philippe Pageau指出的那樣，我可以使用一些代碼來獲取正確的產品了。 我嘗試使用此代碼（我能想到的最簡單的表單版本）與表單一起實現它：

      <t t-set="products" t-value="request.env['product.product'].search([['id', '=', 135]])"/>
        <t t-foreach="products" t-as="product">
          <form action="/shop/cart/update" method="POST">
             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
             <input type="hidden" class="product_id" name="product_id" value="135"/>
             <input type="hidden" class="product_template_id" name="product_template_id" value="83"/>
             <a role="button" id="add_to_cart" class="btn btn-primary btn-lg mt8 js_check_product a-submit" href="#">Add to Cart</a>
          </form>
      </t>

但這無能為力，我想念什么？

編輯2 ：

感謝@Adan Cortes，我們現在已經走得更遠了，但仍然有1個問題。

現在，當用戶單擊按鈕時，產品將以特定數量添加到購物車中。

現在是我的代碼：

<t t-set="products" t-value="request.env['product.product'].search([['id', '=', 135]])"/>
      <t t-foreach="products" t-as="product">
        <div id="product_detail" class="oe_website_sale">
          <form action="/shop/cart/update" method="POST">
              <h4 t-esc="product.name"/>
              <h6 t-esc="product.price"/>
              <input class="form-control" data-min="1" name="add_qty" value="1"/>
              <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
              <input type="hidden" class="product_id" name="product_id" value="135"/>
              <a role="button" id="add_to_cart" class="btn btn-primary btn-lg mt8 js_check_product a-submit" href="#">Add to Cart</a>
          </form>
        </div>
      </t> 

但這是我最后的問題：

• 此代碼未顯示產品價格。 <h6 t-esc="product.price"/>顯示0.00 。 那么如何顯示價格？

• 最后，是否可以僅使用一個按鈕和一個表單一次添加多個產品？

Answer 1

以下代碼有效：

<div id="product_detail" class="oe_website_sale">
    <form action="/shop/cart/update" method="POST">
        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
        <input type="hidden" class="product_id" name="product_id" value="135"/>
        <a role="button" id="add_to_cart" class="btn btn-primary btn-lg mt8 js_check_product a-submit" href="#">Add to Cart</a>
    </form>
</div>

但是請注意，使用數據庫ID會使您的模塊在其他地方無法使用。 您最好使用xmlids。

您缺少的相關JavaScript位於：

<path_to_v12>/addons/website_sale/static/src/js/website_sale.js

135 sAnimations.registry.WebsiteSale = sAnimations.Class.extend(ProductConfiguratorMixin, {
136     selector: '.oe_website_sale',
137     read_events: {
138         'change form .js_product:first input[name="add_qty"]': '_onChangeAddQuantity',
139         'mouseup .js_publish': '_onMouseupPublish',
140         'touchend .js_publish': '_onMouseupPublish',
141         'change .oe_cart input.js_quantity[data-product-id]': '_onChangeCartQuantity',
142         'click .oe_cart a.js_add_suggested_products': '_onClickSuggestedProduct',
143         'click a.js_add_cart_json': '_onClickAddCartJSON',
144         'click .a-submit': '_onClickSubmit',
145         'change form.js_attributes input, form.js_attributes select': '_onChangeAttribute',
146         'mouseup form.js_add_cart_json label': '_onMouseupAddCartLabel',
147         'touchend form.js_add_cart_json label': '_onMouseupAddCartLabel',
148         'click .show_coupon': '_onClickShowCoupon',
149         'submit .o_website_sale_search': '_onSubmitSaleSearch',
150         'change select[name="country_id"]': '_onChangeCountry',
151         'change #shipping_use_same': '_onChangeShippingUseSame',
152         'click .toggle_summary': '_onToggleSummary',
153         'click input.js_product_change': 'onChangeVariant',
154         'change .js_main_product [data-attribute_exclusions]': 'onChangeVariant',
155     },

和<path_to_v12>/addons/website_sale/static/src/js/website_sale_tracking.js

  5 sAnimations.registry.websiteSaleTracking = sAnimations.Class.extend({
  6     selector: '.oe_website_sale',
  7     read_events: {
  8         'click form[action="/shop/cart/update"] a.a-submit': '_onAddProductIntoCart',
  9         'click a[href="/shop/checkout"]': '_onCheckoutStart',
 10         'click div.oe_cart a[href^="/web?redirect"][href$="/shop/checkout"]': '_onCustomerSignin',
 11         'click form[action="/shop/confirm_order"] a.a-submit': '_onOrder',
 12         'click form[target="_self"] button[type=submit]': '_onOrderPayment',
 13     },

編輯添加

表單數據由以下控制器處理和調度：

<path_to_v12>/addons/website_sale/controllers/main.py

414     @http.route(['/shop/cart/update'], type='http', auth="public", methods=['POST'], website=True, csrf=False)
415     def cart_update(self, product_id, add_qty=1, set_qty=0, **kw):
416         """This route is called when adding a product to cart (no options)."""
418         sale_order = request.website.sale_get_order(force_create=True)
419         if sale_order.state != 'draft':
420             request.session['sale_order_id'] = None
421             sale_order = request.website.sale_get_order(force_create=True)
422 
423         product_custom_attribute_values = None
424         if kw.get('product_custom_attribute_values'):
425             product_custom_attribute_values = json.loads(kw.get('product_custom_attribute_values'))
426 
427         no_variant_attribute_values = None
428         if kw.get('no_variant_attribute_values'):
429             no_variant_attribute_values = json.loads(kw.get('no_variant_attribute_values'))
430 
431         sale_order._cart_update(
432             product_id=int(product_id),
433             add_qty=add_qty,
434             set_qty=set_qty,
435             product_custom_attribute_values=product_custom_attribute_values,
436             no_variant_attribute_values=no_variant_attribute_values
437         )
438         return request.redirect("/shop/cart")

Answer 2

據我了解，您需要索取產品，因為它不僅要索要產品，還索要模板。

我為我的采購訂單頁面提取了所有產品。 因此，這就是我創建產品變量的方式。

<t t-set="products" t-value="request.env['product.product'].search([])/>
<t t-foreach="products" t-as="product">
<!-- your code here -->
</t>

搜索特定產品

.search(['id', '=', yourId])

請注意，即使指定ID，它也會返回一個數組