JSCS has been merged with Eslint since 2016. So for the sake of removing some technical debt, this project should be moved to Eslint.

In shoping-cart-advanced.tpl there is a piece of code which allows modification of gift products added to cart by cart rules:
{assign var='cannotModify' value=1} {* Display the gift product line *} {include file="$tpl_dir./shopping-cart-product-line.tpl" productLast=$product@last productFirst=$product@first noDeleteButton=0 cannotModify=0}

In shoping-cart.tpl it looks like that:
{assign var='cannotModify' value=1} {* Display the gift product line *} {include file="$tpl_dir./shopping-cart-product-line.tpl" productLast=$product@last productFirst=$product@first}
This difference allows of quantity change and removing gift products from cart which is clearly and unwanted outcome.

A lot of the Bourbon mixins are deprecated - can be seen when running "npm run compile-css":

[15:01:10] Starting 'compile-css'...
WARNING: [Bourbon] [Deprecation] `keyframes` is deprecated and will be removed in 5.0.0. We suggest using an automated prefixing tool, like Autoprefixer.
         on line 10 of node_modules/bourbon/app/assets/stylesheets/_bourbon-deprecate.scss, in mixin `-bourbon-deprecate`
         from line 17 of node_modules/bourbon/app/assets/stylesheets/_bourbon-deprecate.scss, in mixin `-bourbon-deprecate-for-prefixing`
         from line 3 of node_modules/bourbon/app/assets/stylesheets/css3/_keyframes.scss, in mixin `keyframes`
         from line 226 of sass/product.scss

[15:01:15] gulp-notify: [Gulp notification] Theme CSS compilation successful for Niara
[15:01:15] Finished 'compile-css' after 4.6 s

The Bourbon maintainers are suggesting using Autoprefixer for a replacement. So for the sake of removing some technical debt, I think this should be done.

Maybe it will be possible to remove Bourbon entirely - I have not checked all the code.

npm run scan-translations reports false alarm for string that contains nested curly brackets

{l s=\'%1$s: %2$s - %3$s\'|sprintf:$filter.name:{displayPrice price=$filter.values[0]}

Hi I am here to complain about the theme having no comments.

I find it extremely difficult to understand what is going on.

I've been spending hours in the order-opc-new-account.tpl trying to understand all the smarty tags being used, many of which seem to be specific to prestashop/thirty bees which also lack documentation.

In some templates there are hooks called with {hook h=', here there is {$HOOK_CREATE_ACCOUNT_TOP}. Manually searching code it points to controllers/front/AuthController.php which executes displayCustomerAccountFormTop aliased to createAccountTop. I can't understand what this hook calls and the fact that the file is devoid of comments makes it all the more frustrating.

The CSS calls for a max width of 280px on each input field, but all the input fields are left-aligned. On a 4k display this looks absolutely ridiculous. Editing the template is then necessary for acceptable user experience except that the sheer amount of code with no explanation makes is intimidating to edit.

blockwishlist button is placed in the same place as expand and compare buttons. some its CSS is put in product_list.css which IMO is not elegant solution. beside that, wishlist state is not changing on products list and product page.

As the title says. When you checkout, with more that one carrier, you have to pick the carriers logo, not the radio buttons. The radio buttons you cant click on.

This seems to be similar to issue #6, except that it is in the Pending Friends section of Referral module

Is not possible to show new products on homepage despite being hooked on display home, only the home featured and best sellers can be shown.

I - Value features with few characters
The value feature with few characters fits on the screen, the align the split line further to the right.

II - Value features with long characters
If the value feature with long characters doesn't fit on the screen, align the split line further to the left.

III - The solution: the alignment of the split line should align right after the feature

The TB does this well on mobile on features with long characters.

But should be an enhancement on:

• on mobile on the short description,
• on the computer on the short description,
• on the computer on the long description.

Steps to reproduce:

1. enable returns in Back Office > Orders > Merchandise Returns
2. go to My Account > Order History
3. select order for which returns should be available

Expected result:

List of products should display checkboxes to select products for return

Actual result:

Checkboxes are rendered, but are not visible and accessible for selection

Users trying to choose combinations on the product page currently get presented with all created combinations for that product. They should only be shown those combinations that are available for that product and not receive a "This combination does not exist for this product. Please select another combination" warning.

There are some duplicate files present, I'm not sure which ones are in use.

"tools/*" exists both in root-folder and in "js/"-folder.
"advanced-payment-api.js" exists both in root-folder and in "js/"-folder.

I think we should keep the copies in "js/"-folder. But I'm unsure if the other copies are referenced somewhere.

When you create a new user in the FO, the titles do not align. The first is out of line with the others.

Implement templates for custompayments module, so the look and feel is the same

Related to thirtybees/custompayments#7

See this forum post https://forum.thirtybees.com/topic/3492-niara-theme-cannot-remove-items-from-cart/

Niara seems to do something like the following on various places:

This can cause it to generate for example the following invalid HTML:

<p> Misschien heeft u gezien dat wij  spanningsgestuurde  en <a...</p>

As you can see, it generated an unclosed tag, i.e. <a in this example. To prevent this, you can call strip_tags first and afterwards call truncate, like the following:

<p>{$post->content|strip_tags:false|truncate:150}</p>

I see this line 162:
//.delivery_option_price { width: 160px; }

As it is commented the size is not fixed and different carriers prices doesn't align well

It works nice with:
.delivery_option_price { width: 20%; }

As I see the "format-js" Gulp-step, it's not as much a build step, as it is a lint-step.

1. The documentation (README) says that it is needed to run "npm run format-js" for building JS, I do not think this is necessary.

2. All files that is processed in the "format-js"-step is "copied" to the "js"-folder, this is not necessary as no changes to the files are made (nothing is actually being "built" - just linted).

3. The gulpfile.js is one of the files that goes through the "format-js"-step. And this is the only file that is actually copied to "js"-folder - where it does not belong, and this is fixed by a "hack" in .gitignore.

2 & 3 could be fixed by seeing this step as a linting step and not a necessary build-step, and NOT copy the files to "js"-folder where they already are.

ScrollTo plugin seems not to be working. It´s used in blocklayered.js and history.js

Tested https://front.thirtybees.com/coffee-and-tea in latest Chrome, Edge, Firefox, Android Browser

It is called when clicking pager links, leyared filter color-group, etc.

Expected behavior is to scroll to the top of '.product_list'.

Plugin requires jQuery >= v1.4, Thirtybees loads(?) jQuery v1.11.0 + jQuery Migrate v1.2.1
https://github.com/flesler/jquery.scrollTo/releases/tag/1.4.14

Any proposed solution?

Hi,

There are in both front- and back-end dependencies to several third parties.
The front-end calls out to (through niara theme css):

• fonts.googleapis.com (Raleway fronts weights 400, 500, 600 and 700)
• polyfill.io

The back-end calls out to (thus far detected):

• fonts.googleapis.com (many distributed references)
• www.gravatar.com (hardcoded references)

The most problematic are in the front-end, where you really would like to have isolated site content when you serve it from your server. This prevents any possible indirect third party tracking from user's website use. The actual extra data transferred from the front-end is rather minimal and insignificant if you consider caches on the browser side and the general huge images in articles/products/etc..
The Raleway font is licensed under the standard SIL license and can therefore be redistributed without any problem (and it is already included in the LICENSES file).

For the fonts in the front-end I would suggest to make the following change to the niara theme (see file-link below):

1. Add an @import url("font-Raleway.css"); to the global theme CSS file
2. Add the font-files (ttf files) and the font-Raleway.css file to the theme
3. remove the fonts.googleapis.com reference in the header.tpl file

The polyfill in the front-end is actually something from old-age times. The IntersectionObserver, which is requested in the polyfill, is implemented in most browsers. Question could then be why it it still needed. OTOH, if you want to make sure, then it would be no problem to add the polyfill to the set of loaded js files from a local source. Simply add the js file and change the reference in header.tpl. The polyfill code will actually check if it is natively supported. Adding the js-file requires an update of the LICENSES file to add https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document to it, which is the license of the polyfill. But that should be no problem at all.

I can't attach the files needed (github apparently does not let me), but they can be downloaded from https://www.vagrearg.org/upload/niara-frontend-files/

The back-end will need a bit more work because it is more integrated and partly hard-coded. However, the back-end references are not the largest problem for now. The customers are the ones needing most/best protection, so that automatically prioritizes the front-end.

--
Greetings Bertho

When we have 2 attribute values like “Color” and “Options”.

And we don’t have one of them we get the information:

Like the following example:

A good option is to not allowed select the stock=0 of that combinations.

For example:

After replacing JSCS with Eslint, we get a lot of JS errors when running "npm run format-js". These should be fixed.

On one-page checkout

1. Create account with 2 different addresses, stay logged in
2. Add item to cart and go to cart
3. In the recap change item amounts with product-controls, no problem so far
4. Switch address, now change item amounts with product-controls: totals are calculated correctly but individual item number (value of input type hidden) is not incremented/decremented

Attribute radio in product.tpl and product-wide.tpl also need to be wrapped in label in order to work properly.
Same as the commit by @Dh42 in issue #5.
Thanks!

i add 3 products to compare
then i delete 2 products and they dissapear
when i click to delete 3rd product, all 3 products reapear

Same happens if i compare just 2 products. When i want to delete last one, they magically reapear.

https://forum.thirtybees.com/topic/2331/cannot-delete-products-from-compare-list

Urls in srcset are escaped using html mode:

srcset="{$imageUrl|escape:'html':'UTF-8'} 211w"

It should be escaped using url, otherwise we have problems with spaces in path:

srcset="{$imageUrl|escape:'url':'UTF-8'} 211w"

Suggestion to update FontAwesome library at least to latest v4 release, which is 4.7.
Right now v4.6.3 is included. Version 4.7 has Telegram icon which is useful in contact information.

Maybe somebody has a better idea to update to recent version of FontAwesome, don't know about licensing.
As for version 4.7 it can just be copied over 4.6.3 (and adding Telegram icon to global.css) which I do with every TB update.

Product reviews don't validate because the markup is incorrect;

Based on https://developers.google.com/search/docs/data-types/review-snippet#microdata the ratingValue needs to be inside the reviewRating block in order to validate on google.

There is currently an issue with translation strings in this theme.
When running "npm run scan-translations" I get this:

Broken Smarty translation strings in theme templates:
[ [ 'modules/beesblogrecentposts/views/templates/hooks/home.tpl',
    '{l s=\'Read latest posts from our blog.\' mod=\'beesblog\'}' ],
  [ 'modules/blocknewproducts/views/templates/hook/blocknewproducts_home.tpl',
    '{l s=\'Our\' mod=\'blockbestsellers\'}',
    '{l s=\'new\' mod=\'blockbestsellers\'}',
    '{l s=\'Products\'}',
    '{l s=\'Browse our new arrivals.\' mod=\'blockbestsellers\'}' ],
  [ 'modules/blocklayered/blocklayered.tpl',
    '{l s=\'%1$s: %2$s - %3$s\'|sprintf:$filter.name:{displayPrice price=$filter.values[0]}' ] ]
[13:58:34] Finished 'scan-translations' after 1.92 s

There are three tabs, New arrivals, Popular and Best sellers.

• Clicking on Popular apparently does nothing.
• Clicking on Best sellers removes the part above Our featured products and appends best sellers below this section, without heading. Which then looks like no best sellers, but twice as many featured products.

I installed a fresh TB110 with the Niara theme.

Then I noticed that the New Products module gave an image not found error. When I looked closer I found that the shop was trying to load 17-medium_default/thee.jpg. When I looked in the images page of the back office I found that all image formats there start with Niara-. That means that there isn't any normal "medium-default".

This problem might happen with other modules too.

With Advanced or One Page Checkout Advanced, you have click on Carrier logo or text to select it - clicking on radio button does nothing. It's the same issue as #5.

By default availability status is hidden.

This can fixed with small tweeking code and using: ksimunovic@fbb993f

Bad or missing config.xml in theme in /home1/ntpbkvmy/public_html/mhandcraft-test/themes/community-theme-default.

in /niara/blob/master/modules/beesblogrecentposts/views/templates/hooks/home.tpl
Line 51 is:
<p><a class="btn btn-primary" href="{$post->link|escape:'htmlall':'UTF-8'}" title="{$post->title|escape:'htmlall':'UTF-8'}">Read More</a></p>

but should be:
<p><a class="btn btn-primary" href="{$post->link|escape:'htmlall':'UTF-8'}" title="{$post->title|escape:'htmlall':'UTF-8'}">{l s='Read More' mod='beesblogrecentposts'}</a></p>

In /niara/blob/master/modules/beesblogrelatedproducts/views/templates/hooks/product.tpl

Line 42 is:
<p><a class="btn btn-primary" href="{$post.link|escape:'htmlall':'UTF-8'}" title="{$post.title|escape:'htmlall':'UTF-8'}">Read More</a></p>

Should be:
<p><a class="btn btn-primary" href="{$post.link|escape:'htmlall':'UTF-8'}" title="{$post.title|escape:'htmlall':'UTF-8'}">{l s='Read More' mod='beesblogrelatedproducts'}</a></p>

Same in these files:
beesblogpopularposts/views/templates/hooks/home.tpl
beesblogpopularposts/views/templates/hooks/product.tpl
beesblogrecentposts/views/templates/hooks/product.tpl

Discussion see https://forum.thirtybees.com/topic/1819-1819/price-hidden-from-visitors-but-still-displays-in-source-code

In the customer groups options for visitors and guests I have selected not to show prices. This has hidden the price in the front office however if you view the source code, the pricing information is available…

When cart contains products that requires multiple packages (for example two products each with different carrier), then shipping tab looks very weird:

It does not show information about carriers, logos, etc. The situation would be even worse if multiple shipping options would be offered.

The expected layout should look something like this:

Note: the html markup is there, it's just hidden. We need to determine why, and fix it

Google wants autocomplete attributes when there are password fields in the page. See the attached image of the user registration page:

Niara theme includes Raleway font from google. While it works, it's not ideal for default theme. We should either:

1. Replace Raleway font with some common font
2. Include this font into asset folder

Note: if we opt for solution #2 then we should use gulp-google-webfont utility

Javascript variable msg_newsl is sometimes not defined. The code that uses that should check if it exists before referencing it.