Related products - "You may also like.."

iwNZ

Hi all, what's the easiest way to show 'related product' at the bottom of each product page?

StephenBlignault

@iwNZ Hi there.

I have implemented at least 2 very popular methods in the past.

Option 1: (Moderate) Show all products from the current category
Option 2: (Advanced) Custom Field called Related Products

Option 1:
On product detail template:

<logic:variable as="arrCategoryIds" value="[? \Components\Commerce\Products\Categories::getAllIdsForProduct($product['product_id']) ?]" />
<logic:variable as="category" value="[? \Components\Commerce\Products\Categories::get($arrCategoryIds[0]) ?]" />

<div class="categoryRow">
	<h2>Category Products <small>([? $category['product_category_title'] ?])</small></h2>
	<div class="shop-grid">
		<logic:variable as="currentProduct" value="[? $product ?]" />
		<data:repeater id="grid-product" class="grid-product-wrap" as="product"
			datasource="\Components\Commerce\Products::getAllForCategoryAndBrandRecursive($category['product_category_id'], null)"
			paging="true" pagingrows="20" pagingautorender="true"
		>
			<data:template component="\Components\Commerce\Products" type="list" />
		</data:repeater>
		<logic:variable as="product" value="[? $currentProduct ?]" />
	</div>
</div>

Option 2:
This option is a lot more complicated:

step 1 you need to create a custom field called Related Product Ids. Use a Custom UI type, and choose Text < 255 Characters.
step 2 then on each product you select your related products
step 3 add a data:repeater on the product detail page to list through the related product ids, a lot like what I showed in option 1.

Your Custom UI code should look like this, or similar:

<forms:row label="Related Products">
	<logic:variable as="selected_product_ids" value="[? [] ?]" />
	<logic:if test="$product['product_related_products']">
		<logic:variable as="selected_product_ids" value="[? unserialize( $product['product_related_products'] ) ?]" />
	</logic:if>
	
	<forms:selectlist id="product_related_products" datacolumn="product_related_products" value="" as="relatedProduct" width="300" height="120" style="font-size: 80%;">
		<forms:option value=""></forms:option>
		
		<data:repeater as="relatedProduct" datasource="\Components\Commerce\Products::getAllConsole()">
		
			<logic:if test="in_array($relatedProduct['product_id'], $selected_product_ids, false)">
				<forms:option value="[? $relatedProduct['product_id'] ?]" title="[? $relatedProduct['product_title'] ?]" selected="selected" />
			</logic:if>
			<logic:else>
				<forms:option value="[? $relatedProduct['product_id'] ?]" title="[? $relatedProduct['product_title'] ?]" />
			</logic:else>
			
		</data:repeater>
		
	</forms:selectlist>
	
	<p style="margin-top: 8px;"><em><small>Hold CMD or Ctrl to select multiple products</small></em></p>

</forms:row>

Hope this sets you on the right path.