Commercetools APP - Selected Product name for the locale defined in the app setup not shown

[Engerim]

In this file is a handlebar template set which uses "name.en" to show the product name of a product. But we don't have this locale so nothing shows up. I think it is better to use the defined locale from the app setup.

apps/apps/commercetools/src/vendor/ct-picker.min.js

Line 8718 in 7e1e3df

'<style>#ctp-wrapper{all:unset;color:#1a1a1a;font-family:\'Open Sans\',sans-serif;font-size:13px}#ctp-wrapper dialog{padding:0;border:0;border-radius:.6rem;box-shadow:0 0 1em #000;font-family:\'Open Sans\',sans-serif}#ctp-wrapper dialog::backdrop{background-color:rgba(0,0,0,.4)}.ctp-container{width:100%}.ctp-h1{display:block;margin-block-start:.67em;margin-block-end:.67em;margin-inline-start:0;margin-inline-end:0;font-weight:700;font-size:1.8rem;font-weight:300;margin:0}.ctp-h2{display:block;margin-block-start:.67em;margin-block-end:.67em;margin-inline-start:0;margin-inline-end:0;font-weight:700;font-size:1.3rem;font-weight:300;margin:0}.ctp-row{display:grid;grid-template-rows:repeat(1,1fr);grid-template-columns:repeat(8,1fr)}.ctp-col-1{grid-column-end:span 1}.ctp-push-col-1{grid-column-start:1}.ctp-col-2{grid-column-end:span 2}.ctp-push-col-2{grid-column-start:2}.ctp-col-3{grid-column-end:span 3}.ctp-push-col-3{grid-column-start:3}.ctp-col-4{grid-column-end:span 4}.ctp-push-col-4{grid-column-start:4}.ctp-col-5{grid-column-end:span 5}.ctp-push-col-5{grid-column-start:5}.ctp-col-6{grid-column-end:span 6}.ctp-push-col-6{grid-column-start:6}.ctp-col-7{grid-column-end:span 7}.ctp-push-col-7{grid-column-start:7}.ctp-col-8{grid-column-end:span 8}.ctp-push-col-8{grid-column-start:8}.ctp-list-container{overflow-y:auto;height:500px;padding-left:10px;padding-right:25px;min-width:650px;padding-top:5px}.ctp-header-column{background:#213c45;color:#e6e6e6;height:35px;-webkit-box-align:center;align-items:center;padding-left:5px;border-bottom:1px solid #e6e6e6;padding-top:5px}.ctp-column{border-right:1px solid grey;align-items:center;border-bottom:1px solid #e6e6e6;border-right:1px solid #e6e6e6;padding-left:5px;padding-top:5px}.ctp-row[data-selected=true]{border:2px solid #00b39e;background-color:#00b39e33}.ctp-thumbnail{position:relative;max-height:70px;overflow:hidden;margin:0 auto}.ctp-button-primary{box-shadow:inset 0 1px 0 0 #497d76;background:linear-gradient(to bottom,#00b39e 5%,#0da38f 100%);background-color:#00b39e;border:1px solid #88c9c0;color:#fff;text-shadow:0 1px 0 #23756a}.ctp-button-primary:hover{background:linear-gradient(to bottom,#0da38f 5%,#00b39e 100%);background-color:#0da38f}.ctp-button-light{box-shadow:inset 0 1px 0 0 #fff;background:linear-gradient(to bottom,#fff 5%,#f6f6f6 100%);background-color:#fff;border:1px solid #dcdcdc;color:#1a1a1a;text-shadow:0 1px 0 #fff}.ctp-button-light:hover{background:linear-gradient(to bottom,#f6f6f6 5%,#fff 100%);background-color:#f6f6f6}.ctp-button{border-radius:6px;display:inline-block;cursor:pointer;padding:10px 24px;text-decoration:none;height:16px}.ctp-button:active{position:relative;top:1px}.ctp-category-product-label{font-size:smaller;color:#999}.ctp-search-input{box-sizing:border-box;display:inline-block;width:100%;background-color:#fff;border-radius:6px;border-style:solid;border-width:1px;color:#1a1a1a;font-weight:500;font-size:1rem;font-family:Open Sans,sans-serif!important;padding:7.5px 10px;outline:0;box-shadow:none;-webkit-appearance:none}.ctp-filter-box{background-color:#f2f2f2;border-radius:6px;margin:0 0 16px;padding:10px}</style> <script id=ctp-product-item type=text/x-handlebars-template> {{#each results}}\n <div class="ctp-row" data-id="{{id}}" data-role="action" {{#shouldSelect id}}{{/shouldSelect}}>\n <div class="ctp-col-1 ctp-column">\n {{masterVariant.sku}}\n </div>\n <div class="ctp-col-2 ctp-column">\n {{name.en}}\n </div>\n <div class="ctp-col-2 image ctp-column">\n <img src="{{masterVariant.images.0.url}}" class="ctp-thumbnail"/>\n </div>\n <div class="ctp-col-1 ctp-column">\n {{#formatPrice masterVariant.prices 0 "EUR"}}{{/formatPrice}}\n </div>\n <div class="ctp-col-2 ctp-column">\n <a class="ctp-button ctp-button-light" href="{{#mcLink id }}{{/mcLink}}" rel="noopener noreferrer"\n target="_blank" onclick="event.stopPropagation();">{{#getLabel "openInMc"}}{{/getLabel}}</a>\n </div>\n </div>\n {{/each}} </script> <script id=ctp-category-item type=text/x-handlebars-template> {{#each results}}\n <div class="ctp-row" data-id="{{id}}" data-role="action" {{#shouldSelect id}}{{/shouldSelect}}>\n <div class="ctp-col-1 ctp-column">\n {{key}}\n </div>\n <div class="ctp-col-2 ctp-column">\n <span>{{name}}</span><br/>\n <span class="ctp-category-product-label">{{stagedProductCount}} {{#getLabel "categoryProductCountLabel"}}{{/getLabel}}</span>\n </div>\n <div class="ctp-col-2 ctp-column">\n {{slug}}\n </div>\n <div class="ctp-col-2 ctp-column">\n {{#if ancestors}}\n {{#each ancestors}}\n | {{name}}\n {{/each}}\n {{/if}}\n </div>\n <div class="ctp-col-1 ctp-column">\n <a class="ctp-button ctp-button-light" href="{{#mcLink id }}{{/mcLink}}" rel="noopener noreferrer"\n target="_blank" onclick="event.stopPropagation();">{{#getLabel "openInMc"}}{{/getLabel}}</a>\n </div>\n </div>\n {{/each}} </script> <script id=ctp-picker-template type=text/x-handlebars-template> {{#isDialog}}\n <dialog id="ctp-popup">\n {{/isDialog}}\n <div class="ctp-container">\n <div class="ctp-row">\n <div class="ctp-col-8">\n <div class="ctp-filter-box">\n {{#if displayOptions.showHeader}}\n <div class="ctp-row">\n <div class="ctp-col-8">\n <h1 class="ctp-h1">{{#getLabel "title"}}{{/getLabel}}</h1>\n </div>\n </div>\n {{/if}}\n <div class="ctp-row">\n <div class="ctp-col-2" style="padding:10px">\n <b>{{#getLabel "searchText"}}{{/getLabel}}</b>\n </div>\n <div class="ctp-col-5">\n <input type="text" id="ctp-search-input" class="ctp-search-input"\n placeholder="{{#getLabel \'searchPlaceHolder\'}}{{/getLabel}}"/>\n </div>\n <div class="ctp-col-1" style="text-align: left;margin-left:5px">\n <a class="ctp-button ctp-button-primary" id="ctp-search-button" data-event="search"\n href="#">{{#getLabel "searchButton"}}{{/getLabel}}</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class="ctp-row">\n <div class="ctp-col-8 ctp-list-container">\n \x3c!--Should depend on the type--\x3e\n {{#ifValue pickerMode equals="product"}}\n <div class="ctp-row">\n <div class="ctp-col-1 ctp-header-column">\n {{#getLabel \'skuHeader\'}}{{/getLabel}}\n </div>\n <div class="ctp-col-2 ctp-header-column">\n {{#getLabel \'productNameHeader\'}}{{/getLabel}}\n </div>\n <div class="ctp-col-2 ctp-header-column">\n {{#getLabel \'imageHeader\'}}{{/getLabel}}\n </div>\n <div class="ctp-col-1 ctp-header-column">\n {{#getLabel \'priceHeader\'}}{{/getLabel}}\n </div>\n <div class="ctp-col-2 ctp-header-column">\n {{#getLabel \'actionHeader\'}}{{/getLabel}}\n </div>\n </div>\n {{/ifValue}}\n\n {{#ifValue pickerMode equals="category"}}\n <div class="ctp-row">\n <div class="ctp-col-1 ctp-header-column">\n {{#getLabel \'categoryKeyHeader\'}}{{/getLabel}}\n </div>\n <div class="ctp-col-2 ctp-header-column">\n {{#getLabel \'categoryNameHeader\'}}{{/getLabel}}\n </div>\n <div class="ctp-col-2 ctp-header-column">\n {{#getLabel \'categorySlugHeader\'}}{{/getLabel}}\n </div>\n <div class="ctp-col-2 ctp-header-column">\n {{#getLabel \'categoryParentHeader\'}}{{/getLabel}}\n </div>\n <div class="ctp-col-1 ctp-header-column">\n {{#getLabel \'actionHeader\'}}{{/getLabel}}\n </div>\n </div>\n {{/ifValue}}\n <div class="ctp-row">\n <div class="ctp-col-8" id="ctp-list">\n </div>\n </div>\n </div>\n </div>\n <div class="ctp-row" style="margin-top:10px">\n\n <div class="ctp-filter-box ctp-col-8">\n <div class="ctp-row">\n <div class="ctp-col-5 ctp-push-col-2" style="vertical-align: middle;">\n <span id="ctp-status-text">\n </span>\n </div>\n {{#if displayOptions.showSelectButton}}\n <div class="ctp-col-1">\n <a class="ctp-button ctp-button-primary" id="ok" data-event="select" href="#">{{#getLabel\n "saveButton"}}{{/getLabel}}</a>\n </div>\n {{#if displayOptions.showCancelButton}}\n <div class="ctp-col-1">\n <a class="ctp-button ctp-button-light" id="cancel" data-event="cancel" href="#">{{#getLabel\n "cancelButton"}}{{/getLabel}}</a>\n </div>\n {{/if}}\n {{/if}}\n </div>\n </div>\n </div>\n </div>\n {{#isDialog}}\n </dialog>\n {{/isDialog}} </script> ';

[Engerim]

@gmenoiaa

[davidfateh]

@giotiskl would you mind taking a look at the file in question and giving some more background information on how it was produced? It appears this is a vendor script which we necessarily may not want to change ourselves.

[giotiskl]

@Engerim excuse my late reply. Thank you for raising the issue, we will be looking into it.

[Engerim]

okay thanks

[Engerim]

@giotiskl is there any news? as it is still not working

[davidfateh]

Hi @Engerim. I believe this issue is quite old at this point. Are you still experiencing this? It appears that the code in question is provided by commercetools which means if the issue still stands, you may have to open a ticket with them to inspect their vendor code and make the appropriate changes.

Let me know if you have any questions. I'm going to close this issue for now but feel free to re-open if you think there is still something to be discussed.