[ADD] eCommerce: add product page

Adding a product page for the eCommerce section, currently does not
exist. V16, forward to master.

closes odoo/documentation#3112

Taskid: 2903859
Signed-off-by: Aarab Tom (toaa) <toaa@odoo.com>

content/applications/websites/ecommerce/managing_products.rst

@@ -7,6 +7,7 @@ Manage my products
 .. toctree::
    :titlesonly:
 
+   managing_products/products
    managing_products/catalog
    managing_products/multi_images
    managing_products/variants

content/applications/websites/ecommerce/managing_products/products.rst

@@ -0,0 +1,266 @@
+==================
+Product management
+==================
+
+Odoo allows you to create, import, and manage your products' pages all within the **Website** app.
+
+Add products to the catalog
+===========================
+
+To add a product to your catalog, you can either do it in:
+
+- From anywhere on your website, click :menuselection:`+ New --> Product`. Enter the name of your
+  product, and :guilabel:`Save`;
+- :menuselection:`Website --> eCommerce --> Products --> Create`;
+- or by :ref:`importing data <import-data>` using XLSX or CSV files. To do so, go to
+  :menuselection:`Website --> eCommerce --> Products`. Click on :guilabel:`Favorites` and
+  :ref:`Import records <import-data>`.
+
+.. seealso::
+   - :doc:`../../../sales/sales/products_prices/products/import`
+   - :doc:`Product-related documentation <../../../sales/sales>`
+
+Publish
+-------
+
+Upon creation, products are defaulted as :guilabel:`Unpublished` in your eCommerce catalog. To make
+a product visible to visitors, go to :menuselection:`Website --> Site --> Homepage`, click on your
+**main shop** page, select the product, and enable it as :guilabel:`Published` in the top-right
+corner.
+
+.. tip::
+   To publish **large batches** of products, the most convenient fashion is to go to
+   :menuselection:`Website --> eCommerce --> Products`. Here, remove the :guilabel:`Published`
+   filter by clicking on the :guilabel:`x` right to it, and then select the :guilabel:`List` view.
+   Next, click the :guilabel:`dropdown toggle` button (located right below the :guilabel:`List`
+   button) and enable :guilabel:`Is published`. Click the :guilabel:`Is Published` column to
+   re-order it either by **published** or **unpublished** products. Finally, select the products to
+   publish by ticking their box on the extreme-right, and tick any box of the selected products in
+   the :guilabel:`Is Published` column to publish them all.
+
+.. image:: products/products-buttons.png
+   :align: center
+   :alt: List and dropdown toggle buttons
+
+Product page design
+===================
+
+Once a product is created, you can access its **product page** through the :guilabel:`Shop` page by
+clicking on the product, and then clicking :guilabel:`Edit`. Here, you can change the page's
+**additional functions**, **layout**, **add content**, etc. Note that **enabled functions** apply to
+*all* product pages.
+
+.. _ecommerce-functions:
+
+Additional functions
+--------------------
+
+In the **website builder** window, click :guilabel:`Customize` to enable additional functions:
+
+- :guilabel:`Customers: Rating` allows customers to submit product reviews;
+  :guilabel:`Share` adds social media and email icon buttons to share the product via those
+  channels;
+- :guilabel:`Select Quantity`: if enabled, allows to choose the quantity added to cart;
+- :guilabel:`Tax Indication`: notifies if the price is **VAT included** or **excluded**;
+- :guilabel:`Variants`: shows all possible
+  :doc:`variants </applications/sales/sales/products_prices/products/variants>` of the product as a
+  :guilabel:`Products List`; :guilabel:`Options` as selectable options to compose the variant
+  yourself;
+- :guilabel:`Cart`: :guilabel:`Buy Now` adds a checkout button taking the customer directly to the
+  checkout page; :guilabel:`Wishlist` allows to add the product to a wishlist;
+- :guilabel:`Specification`: allows you to select where the :guilabel:`Specifications` section is
+  displayed. This option displays a list of all variant attributes and values of a product, but only
+  works for products *with* variants.
+
+.. note::
+   - To allow **wishlists**, the option must be enabled in :menuselection:`Website --> Configuration
+     --> Settings --> Shop - Products`;
+   - To access the :guilabel:`Variants` options, the :doc:`Product Variants
+     <../../../sales/sales/products_prices/products/variants>` option must first be enabled under
+     :menuselection:`Website --> Configuration --> Settings --> Shop - Products`.
+
+Layout
+------
+
+Within the same :guilabel:`Customize` tab as the :ref:`functions <ecommerce-functions>`, the layout
+configuration can be changed according to your needs.
+
+- :guilabel:`Images Width`: changes the width of the product images displayed on the page;
+- :guilabel:`Layout`: the :guilabel:`Carousel` layout displays a large, main image with smaller ones
+  underneath; whereas the :guilabel:`Grid` displays four images in a square layout (see pictures
+  below);
+- :guilabel:`Image Zoom`: choose which image zooms are available, either
+  :guilabel:`Pop-up on Click`, when hovering over the image (:guilabel:`Magnifier on hover`), on
+  :guilabel:`Both`, or :guilabel:`None`;
+- :guilabel:`Thumbnails`: decide how the thumbnails should be aligned, either **vertically**
+  (:guilabel:`Left`), or **horizontally** (:guilabel:`Right`);
+- :guilabel:`Main Image`: click :guilabel:`Replace` to change the product's main image;
+- :guilabel:`Extra Images`: click :guilabel:`Add` or :guilabel:`Remove all` to add or remove extra
+  product images. You can also add images and videos via **URL**.
+
+.. note::
+   Images must either be in PNG or JPG format. To trigger the zoom, the image has to be bigger than
+   1024x1024.
+
+.. image:: products/products-layout.png
+   :align: center
+   :alt: Product images layout
+
+Add content
+-----------
+
+You can use **building blocks** (:menuselection:`Edit --> Blocks`) to add content to your product
+page. These blocks can be used to add extra text and picture galleries, features such as
+:guilabel:`Call to Actions`, :guilabel:`Comparisons`, etc.
+
+Depending on *where* you drop the **building block**, it may be available either on the product page
+*only*, or on the *whole* website. **Building blocks** dropped at the very top or very bottom of the
+page are available on the *whole* website, where **building blocks** put underneath the product
+description are only displayed on the *product* page *(see image below)*.
+
+.. image:: products/products-blocks.png
+   :align: center
+   :alt: Building blocks on product page
+
+Download link
+-------------
+
+To add a downloadable file (ex.: user's manual, notice of use, etc.) on the product page, drag and
+drop a :guilabel:`Text` block from :menuselection:`Edit --> Blocks` on the page. Once placed, click
+within the :guilabel:`Text` block, and under the :guilabel:`Inline Text` section, select either
+:menuselection:`Insert Media --> Documents` or :guilabel:`Insert or edit link` and enter the URL in
+the :guilabel:`Your URL` field.
+
+.. note::
+   The difference with :ref:`digital files <ecommerce-digital-file>` is that digital files can only
+   be downloaded *after* checkout.
+
+.. image:: products/products-media.png
+   :align: center
+   :alt: Media and link buttons
+
+.. _ecommerce-digital-file:
+
+Digital files
+-------------
+
+Should your product be sold with a certificate, manual user, or any other relevant document, it is
+possible to add a download link for customers at the end of the checkout. To do that, first enable
+:guilabel:`Digital Content` under :menuselection:`Website --> Configuration --> Settings --> Shop -
+Checkout Process`. Then, on the **product's template**, click on :menuselection:`More --> Digital
+Files` and :guilabel:`Create` a new file.
+
+.. image:: products/products-digital-files.png
+   :align: center
+   :alt: Digital Files menu
+
+For the configuration:
+
+- :guilabel:`Name`: the name of your file;
+- :guilabel:`Type:` select if it is either a **file** or a **URL**. Accordingly, you either have a
+  :guilabel:`File Content (base64)` field to upload your file, or a :guilabel:`URL` field to enter
+  your URL.
+- :guilabel:`Website`: the website on which that file is *available*. If you want it available for
+  *all* websites, leave it empty.
+
+The file is then available after checkout in the **purchase order** section found on the customer's
+portal.
+
+Product configuration
+=====================
+
+Multiple languages
+------------------
+
+If multiple languages are available on your website and you wish to have the product's information
+translated, it is necessary to encode this translated information in the **product's template**.
+Fields with multiple languages available are identifiable by their abbreviation language (ex.
+:abbr:`EN (English)`) next to their field.
+
+.. image:: products/products-field-translation.png
+   :align: center
+   :alt: Field translation
+
+The **eCommerce-related** fields to translate are:
+
+- :guilabel:`Product name`;
+- :guilabel:`Out-of-Stock Message` (under the :guilabel:`Sales` tab);
+- :guilabel:`Sales Description` (under the :guilabel:`Sales` tab);
+
+.. note::
+   Having untranslated content on a web page may be detrimental to the user experience and
+   :doc:`SEO <../../../websites/website/optimize/seo>`.
+.. note::
+   To check the language(s) of your website, go to :menuselection:`Website --> Configuration -->
+   Settings --> Website Info section`.
+
+.. seealso::
+   - :doc:`../../../websites/website/optimize/seo`
+   - :ref:`Multi-language support <seo-multilanguage>`
+
+Website availability
+--------------------
+
+A product can be set available on either *one* or *all* websites, but it is not possible to select
+*some* websites and not others. To define a product's availability, go to :menuselection:`Website
+--> eCommerce --> Products`, select your product, and in the :guilabel:`Sales` tab, click the
+:guilabel:`Website` you wish the product to be available on. Leave the field empty for the products
+to be available on *all* websites.
+
+Stock management
+================
+
+Under the :menuselection:`Website --> Configuration --> Settings --> Shop - Products`, you can
+enable and configure inventory management options.
+
+.. important::
+   To display the stock level on the product page, the :guilabel:`Product Type` on the **product's
+   form** must be set to :guilabel:`Storable` (only available when the **Inventory** app is
+   installed).
+
+Inventory
+---------
+
+In the :guilabel:`Inventory Defaults` sub-section, you can select the eCommerce selling strategy of
+products:
+
+- :guilabel:`Warehouse`: if you have multiple warehouses, you can define the warehouse associated to
+  your website. If you have multiple websites, you can select a different one per website;
+- :guilabel:`Out-of-Stock (Continue Selling)`: enabling it allows customers to continue placing
+  orders even when the product is **out-of-stock**.
+  Leave it  unchecked to **prevent orders**;
+- :guilabel:`Show Available Qty`: enabling it displays the available quantity left under a specified
+  threshold on the product page. The available quantity is calculated based on the 'On hand'
+  quantity minus the quantity already reserved for outgoing transfers.
+
+.. todo:: add ref to cart.rst about preventing sale if price = 0
+
+Selling as kit
+--------------
+
+If you are selling non-prepackaged kits (i.e., the kits are made of individual products), we
+recommend you read the related documentation to keep track of your stock.
+
+.. seealso::
+   :doc:`../../../inventory_and_mrp/manufacturing/management/kit_shipping`
+
+Product comparison
+==================
+
+You can enable a **product comparison tool** for your eCommerce by going to
+:menuselection:`Website --> Configuration --> Settings --> Shop - Products`, and ticking
+:guilabel:`Product Comparison Tool`. This tool allows to save products' **specifications** and
+compare them against each other on a single page.
+
+On the product page, scroll down to the :guilabel:`Specifications` section and click
+:guilabel:`Compare`. Repeat the same process for all products you wish to compare. Then, click the
+:guilabel:`Compare` button of the pop-up window at the bottom of the page to reach the comparison
+summary.
+
+.. note::
+   The :guilabel:`Product Comparison Tool` can only be used if **attributes** are set on the
+   **product's template**.
+
+.. image:: products/products-compare.png
+   :align: center
+   :alt: Product comparison window

content/applications/websites/website/optimize/seo.rst

@@ -254,6 +254,8 @@ Here are Odoo strategies to manage links:
 Multi-Language Support
 ======================
 
+.. _seo-multilanguage:
+
 Multi-Language URLs
 -------------------
 

redirects/16.0.txt

@@ -19,7 +19,7 @@ applications/finance/payment_acquirers/wire_transfer.rst applications/finance/pa
 # applications/websites
 
 applications/websites/ecommerce/getting_started/catalog.rst applications/websites/ecommerce/managing_products/catalog.rst                        # /getting_started/catalog -> /managing_products/catalog
-applications/websites/ecommerce/getting_started/product_page.rst applications/websites/ecommerce/managing_products/catalog.rst                   # /getting_started/product_page -> /managing_products/catalog
+applications/websites/ecommerce/getting_started/product_page.rst applications/websites/ecommerce/managing_products/products.rst                  # /getting_started/product_page -> /managing_products/products
 applications/websites/ecommerce/shopper_experience/payment_acquirer.rst applications/websites/ecommerce/shopper_experience/payment_providers.rst # payment_acquirer -> payment_providers