I'm trying to display the thumbnail images of each product on category page in Stencil CLI - BigCommerce with the option to slide. The most logical thing to do was to take the snippet from product-view.html and just paste it in card.html, unfortunately, it was to easy to be true.
I've tried changing the handlebars multiple times and replacing the a href url, but still no luck.
<ul class="productView-thumbnails"{{#gt product.images.length 5}} data-slick='{
"infinite": false,
"mobileFirst": true,
"slidesToShow": 5,
"slidesToScroll": 1
}'{{/gt}}>
{{#each product.images}}
<li class="productView-thumbnail">
<a
class="productView-thumbnail-link"
href="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
data-image-gallery-item
data-image-gallery-new-image-url="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
data-image-gallery-zoom-image-url="{{getImage this 'zoom_size' (cdn ../theme_settings.default_image_product)}}">
<img class="lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage this 'productview_thumb_size' (cdn ../theme_settings.default_image_product)}}" alt="{{this.alt}}" title="{{this.alt}}">
</a>
</li>
{{/each}}
</ul>
Any ideas ? Thanks.
I believe it's not possible using handlebars helpers. according to documentation, product thumbnails is not assigned as global attributes. so it won't work if you copy the code to category template.
Related
I am having difficulty understanding how the module that deals with generating links in the prestashop footer was written. The module is the ps_linklist and inside it contains a view / template / hook / linkblock.tpl which should contain the code needed to generate the links. The problem is that the code is as follows:
{foreach $linkBlocks as $linkBlock}
<h3>{$linkBlock.title|escape:'html':'UTF-8'}</h3>
<ul>
{foreach $linkBlock.links as $link}
<li>
<a
id="{$link.id}-{$linkBlock.id}"
class="{$link.class}"
href="{$link.url|escape:'html':'UTF-8'}"
title="{$link.description|escape:'html':'UTF-8'}"
{if !empty($link.target)} target="{$link.target|escape:'html':'UTF-8'}" {/if}
>
{$link.title|escape:'html':'UTF-8'}
</a>
</li>
{/foreach}
</ul>
{/foreach}
But the generated html is different, it includes a lot of information that cannot be generated by this code, so it is impossible for me to understand how to change the column layout of this section ... how to make things easy complex ...
enter image description here
I tried the same code as mentioned in the link below, but for some reason on my end it loads (clones) only the items from the current page, not the ones from the next page ???? Any ideas why ?
How to add Infinite Scroll to BigCommerce Category page
<ul class="productGrid" data-infinite-scroll='{ "path": ".pagination-link", "append": ".product", "history": false }'>
{{#each products}}
<li class="product">
{{>components/products/card show_compare=../show_compare show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer}}
</li>
{{/each}}
</ul>
<script src="https://unpkg.com/infinite-scroll#3/dist/infinite-scroll.pkgd.js"></script>
It looks like all pagination links have the class .pagination-link, including the numbered ones (1,2,3 etc). What's happening is that the Infinite Scroll library is grabbing the first element with that class, which happens to be page=1, so that's the first page that's being appended.
Try updating your code to this to specify that the path link should be the 'Next' pagination link:
<ul class="productGrid" data-infinite-scroll='{ "path": ".pagination-item--next .pagination-link", "append": ".product", "history": false }'>
{{#each products}}
<li class="product">
{{>components/products/card settings=../settings show_compare=../show_compare show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer event=../event position=(add #index 1)}}
</li>
{{/each}}
</ul>
Thanks for the heads up--I'll update my previous answer on the post you linked to :)
i got a simple static site with a main navigation. working with the metalsmith generator.
Is there a native way to set current menu items active?
My current unautomated solution:
I just made a workaround like following.
A MD file page1.md as source of content with some variables i can define at top:
---
title: this is the site title
currentPage1: current
layout: main.html
---
<article class="featurette">
<p class="lead">Some content text...</p>
</article>
and my layout HTML file main.html. Where handlebars is used as engine.
i just post the part of the menu here:
<ul class="nav">
<li>
Link to Page1
</li>
<li>
Link to Page2
</li>
</ul>
both are going through the metalsmith rendering.
I got a current class on the Page1 in the menu.
Question
My solution is working so far, but as my site scales. I need to define the "current" for every site again and again. If I don't watch out this will lead to misconfiguration...
I do like to have freedom on my main navigation markup, as there are some specialities in. So I'm fine with creating this for new pages by myself.
Can i set active menu items somehow with the metalsmith-permalinks or metalsmith-canonical plugin or does there exists a metalsmith plugin suited for this case or maybe with another clever JS manipulation?
Use metalsmith-collections to create a collection of pages
.use(collections({
pages: {
pattern: '*.html'
}
}))
Then in your template loop through them to create your links:
{{#each collections.pages}}
<li>
<a href="{{path}}" {{#if_eq ../id this.id}} class="active" {{/if_eq}}>{{title}}</a>
</li>
{{/each}}
You will need to register a block helper like this: Handlebars.js if block helper ==
Make sure each page ID is unique.
For example:
---
id: phillip
layout: base.hbs
tagline: I haven't thought of one.
pagename: phils page
href: /phil/
navorder: 3
private: true
---
Based on the starter kit I have created a new app. I would like to link the different pages to a set of icons in the app-toolbar.
I got it working with:
<a href="/main-stream">
<paper-icon-button icon="icons:view-stream"></paper-icon-button>
</a>
But I think I am missing something here. Is there a better way?
in your app-Component you have a variable called page. This variable indicates the current view that is shown. To modify its value you can use the iron-selector like in the demo app.
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="[[rootPath]]view1">View One</a>
<a name="view2" href="[[rootPath]]view2">View Two</a>
<a name="view3" href="[[rootPath]]view3">View Three</a>
</iron-selector>
Copied from:https://github.com/PolymerElements/polymer-starter-kit/blob/master/src/my-app.html
I am getting issue to show the secondary images.
I need to show secondary Image code to Swap product image on category page in bigcommerce.
Please share me the code if some one do it
$(".ProductList li:first-child img")
.mouseover(function() {
$(this).attr("src", "http://cdn2.bigcommerce.com/n-pktq5q/b2aus7wd/products/88/images/460/cmpltunknwn_wolfgold_view003__18141.1396558339.1280.1280.jpg?c=1");
})
.mouseout(function() {
$(this).attr("src", "http://cdn2.bigcommerce.com/n-pktq5q/b2aus7wd/products/88/images/461/cmpltunknwn_wolfgold_view001__55714.1396558344.330.330.jpg?c=1");
})
Find the code: in templates >> components >> products >> card.html
<img src="{{getImage image 'productgallery_size' (cdn theme_settings.default_image_product)}}" alt="{{image.alt}}" title="{{image.alt}}">
And insert the code below after the previous code:
{{#each (limit images 2)}}
{{#if #index '>' 0}}
<img src="{{getImage this 'productgallery_size' (cdn theme_settings.default_image_product)}}" alt="{{this.alt}}" title="{{this.alt}}">
{{/if}}
{{/each}}