[ADD] eCommerce: add to cart page

Adding add to cart page to the eCommerce section. Forward to master.

closes odoo/documentation#3495

Taskid: 3099603
X-original-commit: d09e6a83aa
Signed-off-by: Aarab Tom (toaa) <toaa@odoo.com>
This commit is contained in:
Tom Aarab (toaa) 2022-12-09 15:40:31 +00:00
parent 3713f5ac77
commit c2d98f96f0
11 changed files with 113 additions and 24 deletions

View File

@ -24,6 +24,7 @@ products and increase your average cart sizes.
:titlesonly:
ecommerce/managing_products
ecommerce/checkout_payment_shipping
ecommerce/taxes
ecommerce/shopper_experience
ecommerce/maximizing_revenue

View File

@ -0,0 +1,10 @@
:nosearch:
===============================
Checkout, payment, and shipping
===============================
.. toctree::
:titlesonly:
checkout_payment_shipping/cart

View File

@ -0,0 +1,99 @@
===========
Add to cart
===========
The :guilabel:`Add to Cart` button can be customized in multiple ways. You can:
- Choose on which page customers go after clicking the 'Add to Cart' button;
- Hide the 'Add to Cart' button to prevent sales;
- Add a 'Buy Now' button to skip the cart step and lead customers straight to checkout;
- Create additional 'Add to Cart / Buy Now' buttons;
- Add an 'Order Again' button to the customer portal.
'Add to Cart' action customization
==================================
When customers click on the :guilabel:`Add to Cart` button, the product is added to their cart, and
customers remain **by default** on the product's page. However, customers can either immediately be
**redirected** to their cart, or given the choice on what to do through a **dialog box**.
To change the default behavior, go to :menuselection:`Website --> Configuration --> Settings`. Under
the :guilabel:`Shop - Checkout Process` section, look for :guilabel:`Add to Cart` and select one of
the options.
.. note::
If a product has **optional products**, the **dialog box** will always appear.
.. todo:: add :ref: to optional products when published.
Replace 'Add to Cart' button by 'Contact Us' button
===================================================
You can replace the 'Add to Cart' button with a 'Contact Us' button which redirects users to the URL
of your choice.
.. note::
Hiding the :guilabel:`Add to Cart` button is often used by B2B eCommerces that need to restrict
purchases only to customers with an account, but still want to display an online product catalog
for those without.
.. todo:: add :ref: to sign-up section doc when published to note
To do so, go to :menuselection:`Website --> Configuration --> Settings --> Shop - Products` and tick
:guilabel:`Prevent Sale of Zero Priced Product`. This creates a new :guilabel:`Button url` field
where you can enter the **redirect URL** to be used. Then, set the price of the product to `0.00`
either from the **product's template**, or from a
:doc:`pricelist <../../../sales/sales/products_prices/prices/pricing>`.
.. image:: cart/cart-contactus.png
:align: center
:alt: Contact us button on product page
.. note::
The 'Contact Us' button and '*Not Available For Sale*' text can both be modified using the
**website builder** on the product's page (:menuselection:`Edit --> Customize`) by clicking on
them.
Customizable 'Add to Cart' button
=================================
You can also create a customizable 'Add to Cart' button and link it to a specific product. The
**customized button** can be added on any page of the website as an **inner content** building
block, and is an *additional* button to the regular :guilabel:`Add to Cart` button.
To add it, go on the :guilabel:`Shop` page of your choice, click :menuselection:`Edit --> Blocks`
and place the building block. Once placed, you have the following options:
- :guilabel:`Product`: select the product to link the button with. Selecting a product renders the
:guilabel:`Action` field available;
- :guilabel:`Action`: choose if the button should :guilabel:`Add to Cart` or :guilabel:`Buy Now`
(instant checkout).
.. image:: cart/cart-add.png
:align: center
:alt: Customizable 'Add to Cart' button
'Buy Now' button
================
You can enable the 'Buy Now' button to instantly take the customer to **checkout** instead
of adding the product to the cart. The :guilabel:`Buy Now` button is an *additional* button and
does not replace the :guilabel:`Add to Cart` button. To enable it, go to
:menuselection:`Website --> Configuration --> Settings --> Shop - Checkout Process` and tick
:guilabel:`Buy Now`.
.. image:: cart/cart-buy-now.png
:align: center
:alt: Buy Now button
Re-order from portal
====================
Customers have the possibility to **re-order** items from **previous sales orders** on the customer
portal. To do so, go to :menuselection:`Website --> Configuration --> Settings --> Shop - Checkout
Process` and enable :guilabel:`Re-order From Portal`. Customers can find the :guilabel:`Order Again`
button on their **sales order** from the **customer portal**.
.. image:: cart/cart-reorder.png
:align: center
:alt: Re-order button

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

@ -1,14 +1,12 @@
:nosearch:
==================
Manage my products
==================
========
Products
========
.. toctree::
:titlesonly:
managing_products/products
managing_products/catalog
managing_products/multi_images
managing_products/variants
../../sales/sales/products_prices/products/import

View File

@ -1,19 +0,0 @@
=========================================
How to display several images per product
=========================================
By default your product web page displays the main image of your product only.
If you like to show your products under several angles, you can turn the image into a carrousel.
.. image:: multi_images/multi_images01.png
:align: center
* Check *Several images per product* in :menuselection:`Website Admin --> Configuration --> Settings`.
* Open a product detail form and upload images from *Images* tab. Hit *Create* in Edit mode to get the upload wizard.
.. image:: multi_images/multi_images02.png
:align: center
.. note::
Such extra image are common to all the product variants (if any).

Binary file not shown.

Before

Width:  |  Height:  |  Size: 120 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB