Added ability to show related products

README.md

@@ -249,11 +249,6 @@ Enables/disable the menu setup in `/admin/settings/menu`.
 
 This is the text which will be displayed at the top of your menu.
 
-##### Menu position
-
-You can set position where your menu will be displayed. Setting the value to `side` will position the menu to the left of your products, setting the value to `top`
-will create a 'breadcrumb' menu at the top of the page
-
 ##### Paypal (Payments)
 
 The Paypal config file is located: `/config/payment/config/paypal.json`. A example Paypal settings file is provided:

config/settings.json

@@ -40,5 +40,6 @@
             "shipping": {},
             "discount": {}
         }
-    }
+    },
+    "showRelatedProducts": true
 }

config/settingsSchema.json

@@ -143,6 +143,10 @@
                     "shipping": "shipping-basic"
                 }
             }
+        },
+        "showRelatedProducts": {
+            "type": "boolean",
+            "default": true
         }
     },
     "required": [

locales/en.json

@@ -203,5 +203,7 @@
 	"Currency ISO": "Currency ISO",
 	"Currency used for Blockonomics conversion": "Currency used for Blockonomics conversion",
 	"Logout": "Logout",
-	"Company": "Company"
+	"Company": "Company",
+	"View": "View",
+	"Related products": "Related products"
 }

routes/index.js

@@ -337,6 +337,7 @@ router.post('/checkout/removediscountcode', async (req, res) => {
 router.get('/product/:id', async (req, res) => {
     const db = req.app.db;
     const config = req.app.config;
+    const productsIndex = req.app.productsIndex;
 
     const product = await db.products.findOne({ $or: [{ _id: getId(req.params.id) }, { productPermalink: req.params.id }] });
     if(!product){
@@ -358,11 +359,29 @@ router.get('/product/:id', async (req, res) => {
     // show the view
     const images = await getImages(product._id, req, res);
 
+    // Related products
+    let relatedProducts = {};
+    if(config.showRelatedProducts){
+        const lunrIdArray = [];
+        const productTags = product.productTags.split(',');
+        const productTitleWords = product.productTitle.split(' ');
+        const searchWords = productTags.concat(productTitleWords);
+        searchWords.forEach((word) => {
+            productsIndex.search(word).forEach((id) => {
+                lunrIdArray.push(getId(id.ref));
+            });
+        });
+        relatedProducts = await db.products.find({
+            _id: { $in: lunrIdArray, $ne: product._id }
+        }).limit(4).toArray();
+    }
+
     res.render(`${config.themeViews}product`, {
         title: product.productTitle,
         result: product,
         productOptions: productOptions,
         images: images,
+        relatedProducts,
         productDescription: stripHtml(product.productDescription),
         metaDescription: config.cartTitle + ' - ' + product.productTitle,
         config: config,

views/themes/Cloth/product.hbs

@@ -97,5 +97,59 @@
             </div>
         </div>
     </div>
+    {{#if config.showRelatedProducts}}
+        {{#if relatedProducts}}
+        <div class="col-sm-12">
+            <h4>Related products</h4>
+            <div class="row">
+                {{#each relatedProducts}}
+                <div class="col-md-3">
+                    <div>
+                        {{#if productPermalink}}
+                            <div class="product-wrapper">
+                                <a href="/product/{{this.productPermalink}}">
+                                    <div class="vertical-center img-thumbnail">
+                                        {{#if productImage}}
+                                            <img class="img-fluid" src="{{this.productImage}}" alt="...">
+                                        {{else}}
+                                            <img class="img-fluid" src="/uploads/placeholder.png" alt="...">
+                                        {{/if}}
+                                    </div>
+                                    <h3 class="product-title product-title-home top-pad-10">
+                                        {{this.productTitle}}
+                                    </h3>
+                                </a>
+                            </div>
+                        {{else}}
+                            <a href="/product/{{this._id}}">
+                                <div class="vertical-center img-thumbnail">
+                                    {{#if productImage}}
+                                        <img class="img-fluid" src="{{this.productImage}}" alt="...">
+                                    {{else}}
+                                        <img class="img-fluid" src="/uploads/placeholder.png" alt="...">
+                                    {{/if}}
+                                </div>
+                                <h3 class="product-title product-title-home top-pad-10">
+                                    {{this.productTitle}}
+                                </h3>
+                            </a>
+                        {{/if}}
+                        <h3 class="product-price mp-0 text-center">
+                            {{currencySymbol ../config.currencySymbol}}{{formatAmount productPrice}}
+                        </h3>
+                        <p class="text-center">
+                            {{#if productPermalink}}
+                            <a class="btn btn-primary" href="/product/{{this.productPermalink}}">{{ @root.__ "View" }}</a>
+                            {{else}}
+                            <a class="btn btn-primary" href="/product/{{this._id}}">{{ @root.__ "View" }}</a>
+                            {{/if}}
+                        </p>
+                    </div>
+                </div>
+                {{/each}}
+            </div>
+        </div>
+        {{/if}}
+    {{/if}}
 </div>
 <input type="hidden" id="productId" value="{{result._id}}">