Guide for Automatic Related Products for Magento 2

Motivate customers to purchase more from your store using special blocks with cross-sells, up-sells, or related products. Automatically promote products with smart algorithms for product relation and increase the average order value.

• Create attractive product offerings using smart relation algorithm
• Utilize various conditions to differentiate products display
• Show related items based on customers' views or purchases
• Exclude out-of-stock products from the display
• Use automatic relation results instead of manual configuration

To configure the extension please go to Stores → Configuration → Amasty Extensions → Automatic Related Products and expand the General section.

Data Gathered Period (days) - specify a time period for stats data gathering that will be used in related, up-selling, cross-selling, ‘bought together’ and ‘viewed together’ products.

Order Status - specify the order status that needs to be considered when the system selects matching products for the 'Bought together' condition.

Ignore Anchor Categories in 'Same As' Condition - If enabled, the rule condition 'Category is the same as Current Product Categories' will consider only non-anchor categories the product belongs to.

In the Bundle Packs section, you can fine-tune the main settings of product bundle packs.

Display Position - choose the position to display product bundle packs: below product info, on a product tab, or in a custom position.

Tab Title - when displaying bundle packs on a product tad, specify a custom title for the tab.

Choose CMS Page - Choose a CMS page to show bundle packs on.

Add Bundle Packs Link to Top Menu - choose the position for a bundle packs link on the top menu.

Bundle Packs Item Label - specify the bundle packs item label that will be used for a link in the top menu.

Bundle Pack Title in Confirmation Popup - Here you can specify the bundle pack title to be displayed in the confirmation popup (used in the top menu).

Display Popup for Options Choosing - Use this setting to configure the display of the popup for choosing custom product options.

The setting offers two ways of display:

• 'Only if Product has Required Options' - choose this option to show the popup only if a product has any required options to be configured;
• 'Always' - if set to 'Always', the popup will be displayed even if the product has only non-required options to choose from.

Apply Bundle Discounts for Items That Were Added Separately -

• Set this setting to 'No' if you want a discount to be applied to a certain combination of products bought in a format of the bundle only.
• Set this setting to 'Yes' if you're okay if a customer accidentally gets a discount in case certain 2 or 3 products get to the shopping cart together without being added to the cart intentionally as a bundle.

Display Upsell Message in Cart - display one random hint message in a cart, telling a customer which products to add to get the Bundle Pack discount.

Display Bundle Pack in Cart - display one random Bundle Pack in a cart, telling a customer which Bundle Pack he can add to get a discount.

If you want to set a custom position for Bundle Pack Display, copy the necessary embedding code and paste in a suitable position.

Order Status Used for Statistics - Please select an Order Status to be used in the calculation of the quantity of ordered bundle packs.

Data Gathering Period for Recommendations (days) - The value defines the time period of statistical data the module will gather for the recommendation section (bought and viewed together) of Bundle Packs. Leave empty (or 0) for lifetime statistics.

Bought Together Order Status for Recommendations - Please select an Order Status to be used for recommendations of Bundle Pack Products.

To create rules for linking products, please go to Catalog → Amasty Related Products → Related Product Rules.

On the product rules grid, you can see all existing rules for displaying related, up-sell and cross-sell items on different pages and in various positions in your store.

The rules are sorted by the ID and the Name. You can see the Status of each rule and change it right from the grid by clicking the necessary rule and setting the Enable Rule option to Yes or No.

All the rules are provided with the information about the Store View, Rule Type, its Position on the frontend. You can also check the Priority of each rule.

Check the progress and effectiveness of each product block performance by tracking the number of Views, Clicks, CTR, Orders Made and the final Revenue.

amasty_mostviewed_analytics_collect_view
amasty_mostviewed_analytics_collect_click
amasty_mostviewed_analytics_clear_temp

pref_mostviewed_view_temp - cleared
pref_mostviewed_click_temp - cleared
pref_mostviewed_analytics - contains data

Change the columns’ position with a handy drag-and-drop function.

The dropdown menu allows to Delete, Enable, Disable, Duplicate or Edit each rule or several rules in one click.

To create a new algorithm for displaying relevant products automatically, click Add New Rule button and expand the Rule Information tab.

Enable Rule - set to Yes to activate the rule.

Rule Name - create the rule title that will be displayed on your backend settings so that you could easily manage it from the grid.

Priority - only one rule can be applied in one position, but if some products fall under several rules, the extension will execute the rule with the highest priority. Here 1 is the highest priority.

Stores - set up products display according to the particular store.

Customer Groups - specify particular customer groups for which the block will be visible or just select the 'ALL GROUPS' option to enable applying the rule for all groups.

Go to the ‘Where to Display’ Conditions tab.

Block Position - customize the location for your related products block. Choose its position on the Product Page, Shopping Cart Page or Category Page.

If Add into Native Up-sells Block on a product page or Add into Native Cross-sells Block on a shopping cart page is chosen, you will have an option to specify the Replace Type.

The extension matches related products automatically. However, you can not only replace manually added products, but also append to them.

After specifying the position, choose the conditions to define the products the “related items” block will be displayed according to color, size, price, category, etc. You can use the combination of the attributes if needed.

Show only for ‘Out of Stock’ Products - enable this option to display related products block for ‘out of stock’ products and provide customers with the items they can purchase.

Check the products that fall under the conditions created by clicking the Preview Products button.

You can see the Thumbnail, the Name, the Type and other additional information about each product. Use handy filters to find necessary products according to the name, type, price, status, visibility, etc.

To sort the items that will be shown at the related products block, expand the Products to Display tab.

Conditions - select the attributes according to which the products will be shown.

Click Preview Products to check the products list if needed.

If you want to show related products block on a product page, specify the Source Type.

Source Type - choose the way for related products to be assorted.

Only Product Conditions - choose this source type to display the items that fall under the conditions specified.

Viewed Together - enable this type to let the system show the products according to the history of views based on the statistical data.

Bought Together - this type displays products according to the statistical data of purchases.

Apply “Same As” Condition - enable this option to select products by the same attribute value to display in the block.

For ‘same as’ condition you can set any attribute value: category, material, size, color, price and etc. For example, you can choose how to show products: display from any category or only from the same category with the selected item. The price is also variable.

If you would like to show related items on a category page, you also may enable the option to display the products from the current category only.

Please note that it is possible to use both 'is' and 'is not' configurations for the 'same as' condition.

To customize the related products block according to your needs, go to the Display Settings tab.

Block Title - add a custom title to capture customers' attention.

Sort by - define the way to display the products: sort them by name, price, newest or leave it random.

Block Layout - choose the style of the block: grid or slider.

Display “Add to Cart” Button - enable this option to let your customers add products to the cart right from the block.

Max Products to Display - specify the suitable for your website max number of products displayed in a product block.

Show “Out of Stock” Products - exclude out-of-stock items from displaying to provide your customers with the products they can purchase immediately.

According to the rules, the extension matches related products automatically. However, you can replace or add related items manually in each product block.

Go to the Catalog → Products.

Choose the product needed and expand the Related Products, Up-Sells, and Cross-Sells tab.

To add items to the necessary category, click the Add Related/Up-Sell/Cross-Sell Products button.

Choose the items and hit the Add Selected Products button.

On the preview grid you may see the information about the products: the thumbnail, the name, active status and attribute set, SKU, price.

Also, you can Remove them in one click if needed.

To configure and manage product bundle packs, please, go to Catalog → Bundle Packs.

Here, you can do the following:

• easily manage all existing bundle packs (add new/delete, enable/disable and duplicate existing);
• get the necessary information on each of them (including Main and Bundle Pack Products included, Discount Amount and Discount Type, the date of creation, etc.);
• check the statistics and analyze the bundle packs' sales (Qty ordered) to get valuable insights and improve their performance;
• check the general recommendations upon the specific bundle packs and follow hyperlinks leading to packs to enhance their performance in accordance with the recommendations.

To create a new bundle pack, please, go to Catalog → Bundle Packs → Add New Pack button.

Status - set to Yes to make the bundle pack active.

Enable From - specify the period during which the bundle pack will be active. The bundle will be automatically enabled and disabled on the specified date and time.

Bundle Pack Name - define the name of a bundle pack (for internal use only).

Store - choose the store views to show a bundle pack for.

Customer Groups - select customers groups to show a bundle pack for.

Title - specify the bundle pack title that will be displayed on the products page.

Discount Type - three discount types are available, please choose one of them from the dropdown:

Fixed - set 'Fixed' type of the discount to apply a discount like '$10', i.e. the fixed sum of money; Percentage - set 'Percentage' type of the discount to apply a discount like 10% from the final price of the bundle pack, which means that the actual discount amount will vary from bundle to bundle; Conditional Discounts - choose this option if you want to configure a differentiated discount depending on how many products are added to the cart.

Discount Amount - specify the discount amount.

Apply Discount to the Main Product - enable the option to apply the discount to the main product in a bundle pack.

Apply discount if - Choose from the two available options:

• Any Bundle Product is Chosen - the discount will be applied if any product from the bundle is chosen;
• All Bundle Products are Chosen - the discount will be applied only if all products from the bundle are chosen.

Upsell Message - specify the upsell message that will be displayed in a shopping cart. Use variables: {product_names}, {discount_amount}. The upsell message will appear only when the Bundle Packs → 'Display Upsell Message in Cart' setting is enabled in the configuration.

On the Bundle Pack Products and Main Products grids, you can choose the main and bundle pack products accordingly. Choose the order of bundle pack products on the appropriate grid via drag-and-drop and specify each bundle pack product quantity.

To manage all existing cron tasks, please, go to System → Cron Tasks List.

Here, you can see all the existing cron tasks and their statuses. Run cron tasks and generate their schedule by clicking the ‘Run Cron’ button. Also, delete tasks in bulk, apply filtering and sorting options when it is needed.

Automatically show highly demanded items on a product page.

Increase revenue with up-selling products based on specified parameters.

Get more orders by showing cross-selling products on a shopping cart page.

The extension adds one more column to the Orders grid and ads an extra notice to the order info to show more details about the purchased bundle packs:

The extension provides a separate grid for tracking sales statistics of the bundle packs - the 'Bundle Pack Sales' grid.

Here's the description of the columns that you can find on the grid:

• Date purchased - date when the bundle pack was ordered;
• Order ID - ID of the orders containing the bundle packs;
• Grand Total (Base) - the base price of the ordered bundle;
• Grand Total (Purchased) - actual bundle price (in main store currency);
• Order status - actual order status;
• Bundle Pack - name of the bundle pack;
• Bundle Items - names of the products from the bundle purchased.

Here's how product bundle packs display on the frontend:

1. On the product tab:

With adjusted bundle pack products quantity:

2. After product description:

3. In the shopping cart:

4. On a CMS page:

The extension also works smoothly on mobile devices if combined with a ready-made PWA solution, due to which store admin can significantly improve the user shopping experience on smartphones.

If the add-on is installed, Venia theme will be displayed for this extension in the following way:

Products in a bundle on Venia storefront:

Products in a related items block on a product page with Venia:

You can freely add new components like blocks with related products or bundles on any place in your Venia-based store. For this, please navigate to store backend and configure the related product items display by specifying the following in the extension parameters:

For the blocks with the related products you need to specify:

• categoryId - ID of the category or product for which the related offering will be displayed;
• Position - you need to specify the position where the related offering will be displayed on the front.

Please have a look at the list of the available positions for this extension working in combination with the PWA add-on:

• 'product_before_related',
• 'product_after_related',
• 'product_into_related',
• 'product_before_upsell',
• 'product_after_upsell',
• 'product_into_upsell',
• 'product_content_top',
• 'product_content_tab',
• 'product_before_tab',
• 'product_content_bottom',
• 'product_sidebar_top',
• 'product_sidebar_bottom',
• 'cart_before_crosssel',
• 'cart_after_crosssel',
• 'cart_into_crosssel',
• ‘cart_content_top',
• 'cart_content_bottom',
• 'category_content_top',
• 'category_content_bottom',
• 'category_sidebar_top',
• 'category_sidebar_bottom',
• 'custom'

For the bundle packs you need to specify:

• Id - the ID of the product for which the bundle packs’ display is configured.

Here’s an example of how to add the related product components on the Cart page:

1. Copy the component’s folder of the search page into the folder with our components:

cd myproject
mkdir -p src/lib/components/
cp -R node_modules/@magento/venia-ui/lib/components/CartPage src/lib/components/

Edit the component searchPage.js. Change all relative ways of components import to absolute:

@magento/venia-ui/lib/PATCH_TO_COMPONENT_FOLDER 

for example:

import Button from '../Button';

to

import Button from '@magento/venia-ui/lib/components/Button';

Add import of the component Related Products import RelatedProducts from

'../../components/AmRelatedProducts';

Choose the place where to place the component:

<RelatedProducts categoryId={3} position={'cart_content_bottom'}/>

As a result, the file searchPage.js should look like the following below:

import React, { useMemo } from 'react';

import { useCartPage } from '@magento/peregrine/lib/talons/CartPage/useCartPage';

import { Title } from '@magento/venia-ui/lib/components/Head';
import Button from '@magento/venia-ui/lib/components/Button';

import PriceAdjustments from '@magento/venia-ui/lib/components/SearchPage/PriceAdjustments';
import PriceSummary from '@magento/venia-ui/lib/components/SearchPage/PriceSummary';
import ProductListing from '@magento/venia-ui/lib/components/SearchPage/ProductListing';
import { mergeClasses } from '@magento/venia-ui/lib/classify';
import defaultClasses from '@magento/venia-ui/lib/components/SearchPage/cartPage.css';
import { GET_CART_DETAILS } from '@magento/venia-ui/lib/components/SearchPage/cartPageQueries';
import RelatedProducts from '../../components/AmRelatedProducts';


const CartPage = props => {
   const talonProps = useCartPage({
       queries: {
           getCartDetails: GET_CART_DETAILS
       }
   });

   const {
       handleSignIn,
       hasItems,
       isSignedIn,
       isCartUpdating,
       setIsCartUpdating
   } = talonProps;

   const classes = mergeClasses(defaultClasses, props.classes);

   const signInDisplay = useMemo(() => {
       return !isSignedIn ? (
           <Button
               className={classes.sign_in}
               onClick={handleSignIn}
               priority="high"
           >
               {'Sign In'}
           </Button>
       ) : null;
   }, [classes.sign_in, handleSignIn, isSignedIn]);

   const productListing = hasItems ? (
       <ProductListing setIsCartUpdating={setIsCartUpdating} />
   ) : (
       <h3>There are no items in your cart.</h3>
   );

   const priceAdjustments = hasItems ? (
       <PriceAdjustments setIsCartUpdating={setIsCartUpdating} />
   ) : null;
   const priceSummary = hasItems ? (
       <PriceSummary isCartUpdating={isCartUpdating} />
   ) : null;

   return (
       <div className={classes.root}>
           <Title>{`Cart - ${STORE_NAME}`}</Title>
           <div className={classes.heading_container}>
               <h1 className={classes.heading}>Cart</h1>
               {signInDisplay}
           </div>
           <div className={classes.body}>
               <div className={classes.items_container}>{productListing}</div>
               <div className={classes.price_adjustments_container}>
                   {priceAdjustments}
               </div>
               <div className={classes.summary_container}>
                   <div className={classes.summary_contents}>
                       {priceSummary}
                   </div>
               </div>
               <div className={classes.recently_viewed_container}>
                   <a href="https://jira.corp.magento.com/browse/PWA-270">
                       Recently Viewed to be completed by PWA-270.
                   </a>
               </div>
           </div>

           <RelatedProducts categoryId={3} position={'cart_content_bottom'}/>
       </div>
   );
};

export default CartPage;

2. Add the edited file into the override map of standard components componentOverrideMapping.js

[`@magento/venia-ui/lib/сomponents/CartPage/cartPage.js`]: 'src/lib/сomponents/CartPage/cartPage.js',

module.exports = componentOverride = {
   [`@magento/venia-ui/lib/RootComponents/Category/category.js`]: 'src/lib/RootComponents/Category/category.js',
   [`@magento/venia-ui/lib/RootComponents/Product/product.js`]: 'src/lib/RootComponents/Product/product.js',
   [`@magento/venia-ui/lib/сomponents/CartPage/cartPage.js`]: 'src/lib/сomponents/CartPage/cartPage.js',
};

3. Run the Watch command: ‘yarn watch’.

Rate the user guide

from 2 votes (Details)       0 visitor votes 1 visitor votes 0 visitor votes 0 visitor votes 1 visitor votes