[ADD] ecommerce/additional features: new features page

task-5136225

closes odoo/documentation#15216

Signed-off-by: Xavier Platteau (xpl) <xpl@odoo.com>

content/applications/websites/ecommerce/checkout.rst

@@ -165,9 +165,9 @@ as:
   <ecommerce/cross_upselling/accessory>`;
 - :guilabel:`Promo Code`: to allow customers to redeem :ref:`gift cards <ewallet_gift/gift-cards>`
   or apply :doc:`discount codes <../../sales/sales/products_prices/loyalty_discount>`;
-- :guilabel:`Add to Wishlist`: :ref:`Enable wishlists <ecommerce/products/wishlists>` to allow
+- :guilabel:`Add to Wishlist`: :ref:`Enable wishlists
-  signed-in users to remove a product from their cart and add it to their wishlist using the
+  <ecommerce/products/additional_features/wishlists>` to allow signed-in users to remove a product
-  :guilabel:`Save for later` option.
+  from their cart and add it to their wishlist using the :guilabel:`Save for later` option.
 
 .. note::
    - If a :doc:`fiscal position <../../finance/accounting/taxes/fiscal_positions>` is detected

content/applications/websites/ecommerce/customer_accounts.rst

@@ -118,8 +118,8 @@ available:
 .. note::
    - Settings are specific to each website, allowing you to configure a B2C website with guest
      checkout and a B2B website that requires customers to sign in.
-   - To use the :ref:`wishlist <ecommerce/products/wishlists>` feature, customers must
+   - To use the :ref:`wishlist <ecommerce/products/additional_features/wishlists>` feature,
-     create an account to save their favorite items for later.
+     customers must create an account to save their favorite items for later.
 
 .. _ecommerce/customer_accounts/multiple-websites:
 

content/applications/websites/ecommerce/products.rst

@@ -8,9 +8,8 @@ Products
 your :ref:`product pages <ecommerce/products/product-page>` directly from the Website app. It also
 allows you to add :ref:`product variants <ecommerce/products/product-variants>` and
 :ref:`digital files <ecommerce/products/digital-files>`, :ref:`translating
-<ecommerce/products/translation>` the product page content, :ref:`managing stock
+<ecommerce/products/translation>` the product page content, and :ref:`managing stock
-<ecommerce/products/stock-management>`, and enabling :ref:`product comparisons
+<ecommerce/products/stock-management>`.
-<ecommerce/products/product-comparison>`.
 
 .. _ecommerce/products/add-products:
 
@@ -118,7 +117,7 @@ Use the :guilabel:`Customize` tab to modify the page layout or add features:
    - :guilabel:`Share`: Add social media and email icon buttons allowing customers to share the
      product through those channels.
 
-- :guilabel:`Select Quantity`: Toggle the switch to allow customers to select the product quantity
+- :guilabel:`Quantity`: Toggle the switch to allow customers to select the product quantity
   they want to purchase.
 
 - :guilabel:`Tax Indication`: Toggle the switch to indicate if the price is
@@ -136,21 +135,21 @@ Use the :guilabel:`Customize` tab to modify the page layout or add features:
    - :guilabel:`Buy Now`: Add a :icon:`fa-bolt` :guilabel:`Buy Now` option to take the customer to
      the checkout page.
    - :guilabel:`Wishlist`: Add an :icon:`fa-heart-o` :guilabel:`Add to wishlist` option allowing
-     logged-in customers to save products in a wishlist.
+     logged-in customers to save products in a :ref:`wishlist
+     <ecommerce/products/additional_features/wishlists>`.
    - :guilabel:`Compare`: Add a :icon:`fa-exchange` :guilabel:`Compare` option, allowing customers
-     to :ref:`compare products <ecommerce/products/product-comparison>` based on their attributes.
+     to :ref:`compare products <ecommerce/products/additional_features/product-comparison>`
+     based on their attributes.
 
 - :guilabel:`Specification`: Select :guilabel:`Bottom of Page` to display a detailed list of the
   attributes and their values available for the product. This option only works for products with
   :ref:`variants <ecommerce/products/product-variants>` if the
-  :ref:`Product comparison tool <ecommerce/products/product-comparison>` is enabled in the Website
+  :ref:`Product comparison tool <ecommerce/products/additional_features/product-comparison>` is
-  :guilabel:`Settings`.
+  enabled in the Website :guilabel:`Settings`.
 
 .. note::
-   - :guilabel:`Variants`, :icon:`fa-heart-o` :guilabel:`Wishlist`, and :icon:`fa-exchange`
+   - :guilabel:`Product Variants` must be enabled by going to :menuselection:`Website -->
-     :guilabel:`Compare` options must be enabled by going to
+     Configuration --> Settings`, in the :guilabel:`eCommerce` section.
-     :menuselection:`Website --> Configuration --> Settings`, in the :guilabel:`Shop - Products`
-     section.
    - Enabled functions apply to all product pages.
    - Products with single values for their attributes do not generate variants but are still
      displayed in the :guilabel:`Product Specifications`.
@@ -234,9 +233,9 @@ go to :menuselection:`Website --> eCommerce --> Attributes`, click on the attrib
    - To display the product attributes in the :doc:`product catalog <products/catalog>`,
      set the :guilabel:`Attributes` feature to :guilabel:`Left` using the website editor.
    - To group attributes under the same section when
-     :ref:`comparing products <ecommerce/products/product-comparison>`, go to the
+     :ref:`comparing products <ecommerce/products/additional_features/product-comparison>`, go to
-     :guilabel:`eCommerce Category` field and either select an :doc:`existing category or create a
+     the :guilabel:`eCommerce Category` field and either select an :doc:`existing category or create
-     new one <../../websites/ecommerce/products>`.
+     a new one <../../websites/ecommerce/products>`.
 
 .. note::
    Two attribute values are needed to make the filter visible.
@@ -345,54 +344,10 @@ In the :guilabel:`Inventory Defaults` sub-section, fill in those fields:
   on the product page. The available quantity is calculated based on the :guilabel:`On hand`
   quantity minus the quantity already reserved for outgoing transfers.
 
-.. _ecommerce/products/product-comparison:
-
-Product comparison
-==================
-
-To allow website visitors to compare products based on their attributes, go to
-:menuselection:`Website --> Configuration --> Settings`, scroll down to the
-:guilabel:`Shop - Products` section, and enable :guilabel:`Product Comparison Tool`.
-
-The :icon:`fa-exchange` (:guilabel:`Compare`) icon is now available on each product card on the main
-shop page when customers hover their mouse over it. To compare products, customers can click the
-:icon:`fa-exchange` (:guilabel:`Compare`) option on the products they want to compare, then click
-:icon:`fa-exchange` :guilabel:`Compare` in the pop-up window at the bottom of the page to reach the
-comparison summary.
-
-.. image:: products/products-compare.png
-   :alt: Product comparison window
-
-.. note::
-   - The :guilabel:`Product Comparison Tool` is only available for products with
-     :ref:`attributes <ecommerce/products/product-variants>`.
-   - Selecting the :icon:`fa-exchange` (:guilabel:`Compare`) option from a product page is also
-     possible.
-
-.. _ecommerce/products/wishlists:
-
-Wishlists
-=========
-
-The :icon:`fa-heart-o` :guilabel:`Add to wishlist` button allows customers to add products
-to their wishlist, i.e., save them for later. To enable it, go to :menuselection:`Website -->
-Configuration --> Settings`, scroll down to the :guilabel:`Shop - Products` section, and enable
-:guilabel:`Wishlists`. The button is available on each product page and can be disabled in the
-:ref:`website editor <ecommerce/products/product-page>` if needed.
-
-.. image:: products/products-add-to-wishlist.png
-   :alt: Add to wishlist button
-
-.. tip::
-   - You can also display a :icon:`fa-heart-o` (:guilabel:`Wishlist`) button when hovering the mouse
-     over the product on the :ref:`shop page <ecommerce/catalog/additional-features>`.
-   - Customers can move products from their cart to their wishlist by clicking the :guilabel:`Save
-     for later` button in the :guilabel:`Order overview` :ref:`checkout step
-     <ecommerce/checkout/review_order>`.
-
 .. toctree::
    :titlesonly:
 
    products/catalog
    products/prices
    products/cross_upselling
+   products/additional_features

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

@@ -0,0 +1,145 @@
+===================
+Additional features
+===================
+
+Odoo eCommerce provides additional features for online shops, including a :ref:`product comparison
+<ecommerce/products/additional_features/product-comparison>` tool, a :ref:`wishlist
+<ecommerce/products/additional_features/wishlists>`, and :ref:`product highlight options
+<ecommerce/products/additional_features/product-highlight>`.
+
+.. _ecommerce/products/additional_features/product-comparison:
+
+Product comparison
+==================
+
+The :icon:`fa-exchange` (:guilabel:`Add to compare`) button allows website visitors to compare
+products based on their :ref:`attributes <ecommerce/products/product-variants>`. Customers can
+click this button to select the products they wish to compare, then click :guilabel:`Compare` in
+the pop-up window at the bottom of the page to see the comparison summary.
+
+.. image:: additional_features/product-comparison.png
+   :alt: Product comparison window
+
+This button can be enabled independently in different sections of the website:
+
+.. tabs::
+
+   .. tab:: Product page
+
+      Go to a product page, open the website editor, go to the :guilabel:`Style` tab, navigate to
+      the :guilabel:`Products Details` section, and toggle the :icon:`fa-exchange`
+      :guilabel:`Compare` button. Once done, it becomes available on each product page that has
+      attributes.
+
+   .. tab:: Catalog page
+
+      To display the :icon:`fa-exchange` (:guilabel:`Compare`) button on the
+      :ref:`shop page <ecommerce/catalog/product-listing>`, open the website editor, go to
+      the :guilabel:`Style` tab, and click the :icon:`fa-paint-brush` (:guilabel:`paint brush`) icon
+      next to :guilabel:`Product Design`. In the :guilabel:`Actions` section, toggle the
+      :icon:`fa-exchange` (:guilabel:`Compare`) button, and choose between :guilabel:`Inline` and
+      :guilabel:`On Hover`.
+
+.. note::
+   You can only compare a maximum of four products at a time.
+
+.. _ecommerce/products/additional_features/wishlists:
+
+Wishlist
+========
+
+The :icon:`fa-heart-o` (:guilabel:`Add to wishlist`) button allows customers to add products
+to their wishlist, i.e., save them for later. It is enabled by default and available on each
+product page.
+
+This button can be enabled independently in different sections of the website:
+
+.. tabs::
+
+   .. tab:: Product page
+
+      Go to a product page, open the website editor, go to the :guilabel:`Style` tab, navigate to
+      the :guilabel:`Products Details` section, and toggle the :icon:`fa-heart`
+      :guilabel:`Wishlist` button. Once done, it becomes available on each product page.
+
+   .. tab:: Catalog page
+
+      To display the :icon:`fa-heart-o` (:guilabel:`Wishlist`) button on the
+      :ref:`shop page <ecommerce/catalog/product-listing>`, open the website editor, go to
+      :guilabel:`Style`, and click the :icon:`fa-paint-brush` (:guilabel:`paint brush`) icon next to
+      :guilabel:`Product Design`. In the :guilabel:`Actions` section, toggle the :icon:`fa-heart`
+      (:guilabel:`Wishlist`) button and choose between :guilabel:`Fixed` and :guilabel:`Fixed -
+      On Hover`.
+
+   .. tab:: Header
+
+      To display the :icon:`fa-heart` (:guilabel:`Wishlist`) icon in the header, open the website
+      editor, click the header, navigate to the :guilabel:`Show/Hide Elements` section, and toggle
+      the :icon:`fa-heart` (:guilabel:`Wishlist`) icon next to :guilabel:`Show Empty`. If it is not
+      enabled, the wishlist icon only appears when an item has been added to the wishlist. The
+      number of items in the wishlist is also displayed next to the icon.
+
+Wishlist page
+-------------
+
+It is possible to customize the layout of the :guilabel:`My Wishlist` page. To do so, open
+the website editor while on the wishlist page, and in the :guilabel:`Style` tab under the
+:guilabel:`Wishlist Page` section, choose a :guilabel:`Products Design`. Depending on the selected
+design, adapt the layout according to :guilabel:`Desktop` or :guilabel:`Mobile` devices.
+Click the :icon:`fa-paint-brush` (:guilabel:`paint brush`) icon next to :guilabel:`Products Design`
+to access more customization options.
+
+.. tip::
+   - Customers can move products from their cart to their wishlist by clicking the :guilabel:`Save
+     for later` button in the :guilabel:`Order summary` :ref:`checkout step
+     <ecommerce/checkout/review_order>`.
+   - On the :guilabel:`My Wishlist` page, customers can move products from their wishlist to the
+     cart.
+
+.. _ecommerce/products/additional_features/product-highlight:
+
+Product highlight
+=================
+
+The eCommerce app allows you to highlight products to increase their visibility. To do so, go to
+:menuselection:`Website --> eCommerce --> Product Ribbons`. You can either use one of the
+preconfigured ribbons (:guilabel:`Sold out`, :guilabel:`Sale`, :guilabel:`Out of stock` or
+:guilabel:`New!`) or create a :guilabel:`New` one. Add a ribbon name, and select the method to
+:guilabel:`Assign` it:
+
+- :guilabel:`Manually`: assign the ribbon manually.
+- :guilabel:`On Sale`: the ribbon is displayed when the product is on sale, e.g., when using a
+  :ref:`comparison price <ecommerce/prices/permanent-discounts>`.
+- :guilabel:`When New`: the ribbon is displayed when a new product is added. Specify the number of
+  :guilabel:`days after publication` it should be displayed.
+- :guilabel:`when out of stock`: the ribbon is displayed when the product is currently no longer
+  available.
+
+Choose its :guilabel:`Position`, either :guilabel:`Left` or :guilabel:`Right`, and a
+:guilabel:`Style`, either :guilabel:`Ribbon` or :guilabel:`Badge`. Define the :guilabel:`Text Color`
+and the :guilabel:`Background Color`. Then :guilabel:`Save`. The ribbon is now available for all
+the ecommerce products.
+
+.. image:: additional_features/badge-applied.png
+   :alt: Product with badge
+
+.. tip::
+   - There are other ways to create a new product ribbon:
+
+     - Access the product form, and under the :guilabel:`Sales` tab, change or create the ribbon in
+       the :guilabel:`Ribbon` field.
+     - Edit/create ribbons from the :doc:`website editor <../../website/web_design>`.
+       To do so, go to the :guilabel:`Style` tab, and navigate to the :guilabel:`Product Details`
+       section. Click the green :icon:`fa-plus` (:guilabel:`Create`) icon next to the
+       :guilabel:`Ribbon` field or the :icon:`fa-pencil-square-o` (:guilabel:`Edit`) icon next to
+       the :guilabel:`Ribbon` label. The :guilabel:`Assign` feature is not available for
+       configuration in the website editor.
+
+       .. image:: additional_features/create-new-ribbon.png
+          :alt: Create a new ribbon in the website editor
+
+   - It is also possible to add ribbons for specific :ref:`product variants
+     <ecommerce/products/product-variants>`. To do so, go to :menuselection:`Website -->
+     eCommerce --> Products` and select a product. Click the :guilabel:`Variants` smart button,
+     choose a variant, and add a ribbon in the :guilabel:`Variant Ribbon` field of the
+     :guilabel:`Sales` section.

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

@@ -9,9 +9,8 @@ is the shop page of your website.
 The product catalog includes a :ref:`top bar <ecommerce/catalog/top-bar>`, a :ref:`side panel
 <ecommerce/catalog/side-panel>`, and a :ref:`product listing area
 <ecommerce/catalog/product-listing>`. With Odoo, you can :ref:`customize the layout
-<ecommerce/catalog/customize-layout>`, filter by :ref:`categories and attributes
+<ecommerce/catalog/customize-layout>`, and filter by :ref:`categories and attributes
-<ecommerce/catalog/categories>`, and use :ref:`additional features
+<ecommerce/catalog/categories>`.
-<ecommerce/catalog/additional-features>` according to your needs.
 
 You can customize the shop page using the website editor. To access it, go to the shop page,
 click :guilabel:`Edit` in the upper-right corner, and navigate to the :guilabel:`Customize` tab.
@@ -191,42 +190,6 @@ the extreme left or right, and `<` `>` allow to move it one row to the left or r
    :menuselection:`Website --> eCommerce --> Products`, switching to the list view, and
    dragging and dropping the products within the list.
 
-Product highlight
------------------
-
-You can highlight products to make them more visible on the shop page. To do so, go
-to the website editor and click the product to highlight. In the :guilabel:`Product` section, you
-can choose the size of the product image by clicking the grid, and you can also add a
-:guilabel:`Ribbon`. This displays a banner across the product's image, such as :guilabel:`Sale`,
-:guilabel:`Sold out`, :guilabel:`Out of stock` or :guilabel:`New!`.
-
-.. image:: catalog/catalog-product-highlighting.png
-   :alt: Ribbon highlight
-
-To create a new ribbon, click the green :icon:`fa-plus` (:guilabel:`Create`) icon next to the
-:guilabel:`Ribbon` field. Then add a :guilabel:`Ribbon name`, define its :guilabel:`Position`,
-and choose a :guilabel:`Background` and a :guilabel:`Text` label. To edit the ribbon, click the
-:icon:`fa-pencil-square-o` (:guilabel:`Edit`) icon next to the :guilabel:`Ribbon` label.
-
-.. image:: catalog/catalog-ribbons.png
-   :alt: Create a new ribbon.
-
-The ribbon is now available for all the eCommerce products.
-
-.. tip::
-   - There are other ways to create a new ribbon:
-
-     - Go to :menuselection:`Website --> eCommerce --> Product Ribbons` and click :guilabel:`New`.
-     - Activate the :doc:`developer mode <../../../general/developer_mode>`, access the product
-       form, and under the :guilabel:`Sales` tab, change or create the ribbon in the
-       :guilabel:`Ribbon` field.
-
-   - It is also possible to add ribbons for specific :ref:`product variants
-     <ecommerce/products/product-variants>`. To do so, go to :menuselection:`Website -->
-     eCommerce --> Products` and select a product. Click the :guilabel:`Variants` smart button,
-     choose a variant, and add a ribbon in the :guilabel:`Variant Ribbon` field of the
-     :guilabel:`Sales` section.
-
 .. _ecommerce/catalog/customize-layout:
 
 Shop and category page design
@@ -252,23 +215,6 @@ display it only when filtering by that specific category.
    - eCommerce categories can also be added as :ref:`mega menu items
      <website/header_footer/mega-menus>` for quick access.
 
-.. _ecommerce/catalog/additional-features:
-
-Additional features
-===================
-
-You can access and enable additional feature buttons such as a :guilabel:`Add to cart` or
-:guilabel:`Wishlist` button or a :guilabel:`Comparison list`. To do so, open the website editor,
-click the desired feature buttons. All three buttons appear when hovering the mouse over
-a product's image.
-
-- :icon:`fa-shopping-cart` (:guilabel:`Add to cart`): adds a button to
-  :doc:`add the product to the cart <../checkout>`;
-- :icon:`fa-exchange` (:guilabel:`Compare`): adds a button to compare products based on
-  their price, variant, etc.;
-- :icon:`fa-heart-o` (:guilabel:`Wishlist`): adds a button to :ref:`wishlist
-  <ecommerce/products/wishlists>` the product.
-
-
 .. seealso::
-   :doc:`Products <../products>`
+   - :doc:`Products <../products>`
+   - :doc:`additional_features`