Home Bigcommerc Tutorial Bigcommerce: Add show more products on homepage – stencil theme

Bigcommerce: Add show more products on homepage – stencil theme

by Bigcommerce Solutions
0 views

Add show more products on homepage

You have many featured products on the home page, making your homepage become long and make your home page look bad.

Here bicoso.net will guide you to more show buttons, this feature will help you to download more products when clicking on the show more. This will make your home page more compact and eye-catching.

Step 1: Open home.html file at templates > pages > home.html. Look this file and find the featured products:

{{#if products.featured}}
{{> components/products/featured products=products.featured columns=theme_settings.homepage_featured_products_column_count}}
{{/if}}

After open featured.html at templates > components > products > featured.html. Look the content of this file:

<h2 class=”page-heading”>{{lang ‘products.featured’ }}</h2>

<ul class=”productGrid productGrid–maxCol{{ columns }}” data-product-type=”featured”>
{{#each products}}
<li class=”product”>
{{>components/products/card theme_settings=../theme_settings customer=../customer}}
</li>
{{/each}}
</ul>

And edit this file like:

<div id=”homeFeaturedProducts”>
<h2 class=”page-heading”>{{lang ‘products.featured’ }}</h2>

<ul class=”productGrid productGrid–maxCol{{ columns }}” data-product-type=”featured”>
{{#each products}}
<li class=”product”>
{{>components/products/card theme_settings=../theme_settings customer=../customer}}
</li>
{{/each}}
</ul>
</div>
<style type=”text/css”>
.text-center {
text-align: center;
}
.showMoreProduct a.btn {
transition: all .3s ease 0s;
text-decoration: none;
display: inline-block;
margin-bottom: 0;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 100%;
max-width: 344px;
margin-bottom: 40px;
line-height: 33px;
font-size: 1rem;
font-weight: 700;
height: 36px;
padding: 0 25px;
letter-spacing: .1em;
border-radius: 0;
text-transform: uppercase;
color: #000;
border: 2px solid #000;
background: #fff;
}
.showMoreProduct a.btn:hover {
color: #fff;
background: #000;
border-color: #000;
}
.showMoreProduct a.btn.disabled {
pointer-events: none;
opacity: .5;
filter: alpha(opacity=50);
}
</style>

I had added ID for featured block and some style for SHOW MORE BUTTON.

Step 2: Create the new bicoso folder at assets > js > themes, and add new js file with name showMoreProducts.js at bicoso folder. And then add code to that file look like:

Step 3: Open home.js file at assets > js > themes > home.js and call showMoreProducts.js file and add code look like:

import PageManager from ‘./page-manager’;
import showMoreProducts from ‘./bicoso/showMoreProducts’;

export default class Home extends PageManager {
onReady() {
// call function here
showMoreProducts();
}
}

// cornerstone 2.2.0

OR

import PageManager from ‘./page-manager’;
import showMoreProducts from ‘./bicoso/showMoreProducts’;

export default class Home extends PageManager {
loaded(next) {

// call function here
showMoreProducts();
}
}

// Cornerstone 1.1.0

Step 4: View results

You may also like

1 comment

HOANG PHU VO September 17, 2018 - 6:24 AM

Thank you very much.
Cám ơn bác nhiều nhé!

Comments are closed.