Custom CSS & Javascript: Product Displays
Feature Enhancement: Activity Tracking
June 20, 2023
FAQ – Hidden Features: Part 1
July 12, 2023Displaying products on portal home pages
Currently, in order to showcase products on your portal's home page, you must hard-code the product image, name, and link. This can cause frustration when needing to update your product offerings so we have come up with a way to automatically pull your active products onto the home page with no need for hard-coding!
In this article we will show you how to add this code and various ways to style the products you pull in. Let's get started!
In this article we will show you how to add this code and various ways to style the products you pull in. Let's get started!
Pull Catalogues onto Home Page
To pull a full catalogue list from your "Products" page onto your home page is fairly straightforward. To do so, first add this HTML in the Homepage HTML box on the portal. This should go wherever you want the catalogues to display:
<section>
<div class="container">
<div class="catalogue-load"></div>
</div>
</section>
Next, add this code to the Custom Javascript box:
$(document).ready(function() {
var portalIdentity = new URLSearchParams(window.location.search).get('PortalId');
$(".page-home .catalogue-load").load("/ProductList.aspx?PortalId=" + portalIdentity + " .catalogue-container");
setTimeout(function() {
$('.page-home .single-catalogue-container').each(function() {
var productLink = $('.catalogue-header a', this).attr('href');
var newProductLink = "https://sitename.orderprintnow.com/" + productLink + "&PortalId=" + portalIdentity;
$('.panel-body a', this).attr('href', newProductLink);
});
}, 3000);
});
Important: be sure to change the instance of "sitename.orderprintnow.com" to your actual site name.
That's all folks! The available catalogues will now pull onto your portal's home page.
That's all folks! The available catalogues will now pull onto your portal's home page.
Pull Products onto Home Page
If you aren't using catalogues to organize your products, use the code below instead. Add the following to your portal's Homepage HTML box:
<section>
<div class="container">
<div class="product-load"></div>
</div>
</section>
And add this code to the Custom Javascript box:
$(document).ready(function() {
var portalIdentity = new URLSearchParams(window.location.search).get('PortalId');
$(".page-home .product-load").load("/ProductList.aspx?PortalId=" + portalIdentity + " .product-container");
setTimeout(function() {
$('.page-home .single-product-container').each(function() {
var productLink = $('.product-title a', this).attr('href');
var newProductLink = "https://sitename.orderprintnow.com/" + productLink;
var url = new URL(newProductLink);
var templateIdentity = url.searchParams.get('TemplateOrderItemId');
var finalLink = "https://sitename.orderprintnow.com/ProductDetails.aspx?TemplateOrderItemId=" + templateIdentity + "&PortalId=" + portalIdentity;
$('.product-title-link', this).attr('href', finalLink)
});
}, 3000);
});
Important: be sure to change the TWO instances of "sitename.orderprintnow.com" to your actual site name.
If you want to pull products from within a specific catalogue on the portal, simply add the Catalogue ID to the third line of the Javascript like below. The Catalogue ID can be found in the URL in your browser's address bar when viewing the Catalogue.
If you want to pull products from within a specific catalogue on the portal, simply add the Catalogue ID to the third line of the Javascript like below. The Catalogue ID can be found in the URL in your browser's address bar when viewing the Catalogue.
$(".page-home .product-load").load("/ProductList.aspx?CatalogId=1e7df011-7611-464c-8cc0-abc5bad17e7f&PortalId=" + portalIdentity + " .product-container");
Style Products as Grid Tiles
If your products have many details showing like in the image used in the previous section, you may want to simplify the look to appear more like how the Catalogues display. To do so, simply add the following code to your portal's Custom Javascript box:
.page-home .single-product-container {
width: 22%;
margin: 1%;
display: inline-grid;
box-shadow: 1px 2px 5px #ccc;
}
.page-home .product-image-container {
width: 100%;
}
.page-home .product-image-container img {
max-height: 180px;
margin: auto;
box-shadow: none;
}
.page-home .single-product-container .product-description-container,
.page-home .single-product-container .product-onlinemessage,
.page-home .single-product-container #upnlPrice {
display: none;
}
.page-home .single-product-container .product-details-container {
width: 100%;
text-align: center;
margin: 25px 0px 20px;
}
@media only screen and (max-width: 1000px) {
.page-home .single-product-container {
width: 100%;
}
}
All done! Enjoy your automatic product list propagation on your home page!
If you have any ideas for portal customizations you'd like to see us tackle or need help implementing any of this code, email our support team at support@docketmanager.ca
