Tsoft E-commerce V5 snippets
Javascript, smarty (.tpl) and scss snippets
The aim of this extention is to help tsoft.com.tr and tsoftecommerce.com frontend developers.
ADVICES TO BE DONE BEFOREHAND
To have a better syntax highligting in .tpl files, it is adviced to install Smarty Template Support beforehand.
For Emmet Abbreviations you can paste the following into your settings.json file (press F1, then search Open Settings (JSON))
F1 + > Open Setting (JSON) ⇥
"emmet.includeLanguages": {
"smarty": "html"
}
==
or you can write includeLanguages in the setting input field and add item => "smarty" and value =>"html".

SNIPPET PREFIXES
JAVASCRIPT V5
Here is Javascript code snippets for tsoftecommerce.com V5.
ON_PAGE_READY ⇥
ON_PAGE_READY.push(()=>{
//alt şablonlardaki js işlemleri bu fonksiyon içine yazılmalıdır
})
cl ⇥
console.log();
cv ⇥
console.log('variable',variable);
ael ⇥
selector.addEventListener("click",e=>{
console.log(e)
});
docready ⇥
document.addEventListener("DOMContentLoaded",e=>{
console.log(e)
});
vuecreateapp ⇥
Vue.createApp(appName).mount('#appSelector');
vuescript ⇥
window['appName'] = {
data() {
return {
P:``,
}
},
}
Vue.creatApp(appName).mount(`#app-selector`);
T(`#selector`).on('submit', e => {
e.stopPropagation();
e.preventDefault();
const formEl = e.target;
if(!T.checkValidity(formEl))
return;
var data = new FormData(formEl);
axios.post('/srv/service/servicepath', data).then(response => {
const result = response.data;
console.log('result:', result);
formEl.reset();
T.notify({
text:"element",
className: 'success',
duration: 3200
});
});
});
newswiper ⇥
new Swiper(selector, {
slidesPerView: 2,
spaceBetween: T.isMobile() ? 8 : 15,
navigation: {
nextEl: `#swiper-next-${BLOCK.ID}`,
prevEl:`#swiper-prev-${BLOCK.ID}`,
},
pagination: {
el: '.swiper-pagination',
clickable: true
},
breakpoints: {
576: {
slidesPerView: 3
},
768: {
slidesPerView: 4
}
}
});
axiosget ⇥
axios.get("url").then((res)=> {
console.log(res.data);
})
.catch((error)=> {
console.log(error);
})
axiospost ⇥
axios.post("url", formData).then((res)=> {
console.log(res.data);
})
.catch((error)=> {
console.log(error);
})
fetchget ⇥
fetch("users.json").then(res=> res.json())
.then(data=> {
data.forEach(el => {
console.log(el);
});
})
.catch(err => console.log(err))
tcartcallback ⇥
Cart.callback.add.push((res)=>{
console.log(res)
})
tready ⇥
T.ready(function(){
})
tisEmptyObject ⇥
T.isEmptyObject(obj)
teach ⇥
T.each(T(`div`),(i, el)=>{
console.log(i, el);
});
tsetCookie ⇥
T.setCookie(cookieName, cookieValue, exdays)
tgetCookie ⇥
T.getCookie(cookieName)
tblock ⇥ BLOCK
BLOCK.
tsetting ⇥ SETTING
SETTING.
timage ⇥ IMAGE
IMAGE.
tgetlink ⇥
T.getLink(`param`,'value','link');
tpopshow ⇥
popoverAlert.show(
T(`selector`)[0], msg, false, `btn btn-danger text-left`, true, `inline`
);
tpophide ⇥
popoverAlert.hide(item, [`btn`, `btn-outline-danger`, `text-left`]);
tpophideall ⇥
popoverAlert.hideAll();
tloadSubFolder ⇥
loadSubFolder({
pageId: 1,
blockParentId: 1000,
subFolder: 'subfoldername',
params: { oneparam: oneparam, twoparam: twoparam },
success: function(loadRes){
T.modal({ html: loadRes, width:'480px' });
evalScripts(loadRes)
}
});
tisMobile ⇥
T.isMobile()
tgetUrlParam ⇥
getUrlParam('param')
scrollToElm(`[href='#id']`);
tlocalApi ⇥
LocalApi.get(`key`);
tevalScripts ⇥
evalScripts(content);
ts ⇥ tselector
T(`selector`);
twrap ⇥
T.wrap(T(`toWrapSelector`)[0],'','classname');
taddclass ⇥
T(`selector`).addClass('active');
tremoveclass ⇥
T(`selector`).removeClass('active');
ttoggleclass ⇥
T(`selector`).toggleClass('active');
thasclass ⇥
T(`selector`).hasClass('active');
tindex ⇥
T(`selector`).index();
tclick ⇥
T(`#selector`).on(`click`, e => {
e.stopPropagation();
e.preventDefault();
const el = e.target;
});
toffclick ⇥
T(`#selector`).off(`click`, e => {
e.stopPropagation();
e.preventDefault();
const el = e.target;
});
toneclick ⇥
T(`#selector`).one(`click`, e => {
e.stopPropagation();
e.preventDefault();
const el = e.target;
});
ttrigger ⇥
T(`selector`).trigger('click');
thtml ⇥
T(`selector`).html('element');
ttext ⇥
T(`selector`).text('text');
theightset ⇥
T(`selector`).height(400);
theightget ⇥
T(`selector`).height();
tshow ⇥
T(`selector`).show(`flex`);
thide ⇥
T(`selector`).hide();
tnotify ⇥
T.notify({
text:`messageandtext`,
className: `success`,
duration: 3200,
stopOnFocus: true,
close: true,
gravity:`top`,
position: `left`,
iconClass: `ti-thumbs-up`,
});
tmodal ⇥
T.modal({
id: 'new-modal',
class: `classname`,
width: `480px`,
title: `ModalTitle`,
html: result.statusText,
close: true,
openCallback: () => {
},
closeCallback: () => {
}
});
window.publishingPopupCallback=function(){
}
T.tooltip(T(`selector`)[0], {
placement:`top`
});
tcheckvalidity ⇥
if(!T.checkValidity(e.target)) return;
tpriceToFloat ⇥
T.priceToFloat(strPrice);
tvat ⇥
T.vat(price, vat);
T.format(number);
ttimeconverter ⇥
T.timeConverter(1652702396000, `d.m.y`);
const button = T(`#form_submit_button`)[0];
T.buttonLock.dom = button;
T.buttonLock.tmp = button.innerHTML;
T.buttonLock.lock();
T.buttonLock.unlock();
Tsoft most used servives
sretrunnotes ⇥
`/srv/service/order-v4/order-return/${product_id}`
svideo ⇥
`/srv/service/gallery/video-detail/${product_id}`
sfastlook ⇥
`/srv/service/product-detail/view/606`
sfolders ⇥
`/srv/service/content/get/${BLOCK.ID}/folder_name`
slanguage ⇥
`/srv/service/language/change/${tr}`
scurrency ⇥
`/srv/shopping/shopping/set-currency/${tl}`
scountry ⇥
`/srv/shopping/shopping/set-country/${TR}`
sproductlist ⇥
`/srv/service/content/get-block/1003/category/${catID}`
scatservice ⇥
`/srv/service/category/get/${catID}`
scatproduct ⇥
`/srv/service/product/filter/category/${catID}?pg=1`
sgettree ⇥
`/srv/service/category/getTree/${catID}`
sgetblock ⇥
`/srv/service/content/get-block/1018/content/${içerik_id}`
sinstallment ⇥
`/srv/service/product-detail/credit-card-installment-list/${product_id}/${sub_product_id}`
spaymentoptions ⇥
`/srv/service/product-detail/payment-options/${product_id}/${sub_product_id}`
scampaignproduct ⇥
`/srv/campaign-v2/campaign/get-list-by-type/product/${product_id}`
scampaigncart ⇥
`/srv/campaign-v2/campaign/get-list-by-type/cart`
scampaigncat ⇥
`/srv/campaign-v2/campaign/get-list-by-type/category/${id}`
scart ⇥
`/srv/service/cart/load?link=sepet`
`/srv/service/product-detail/comments/${product_id}`
`/srv/service/product-detail/comment-average/${product_id}`
sbrand ⇥
`/srv/service/filter/get/brands`
`/srv/service/content/getBlock/1070/product/${product_id}`
`/srv/service/product/get-related-products/${product_id}/1`
ssubstitution ⇥
`/srv/service/product/get-related-products/${product_id}/2`
saccessory ⇥
`/srv/service/product/get-related-products/${product_id}/3`
scomplement ⇥
`/srv/service/product/get-related-products/${product_id}/4`
SMARTY
Here is Smarty code snippets for tsoftecommerce.com V5.
border- ⇥
border-options
fw- ⇥
fw-options
text- ⇥
text-options
btn- ⇥
btn-options
btn-outline- ⇥
btn-outline-options
bg- ⇥
btn-outline-options
pos-rd ⇥
position-desktop-relative
pos-sd ⇥
position-desktop-sticky
pos-ad ⇥
position-desktop-absolute
pos-fd ⇥
position-desktop-fixed
pos-r ⇥
position-relative
pos-s ⇥
position-sticky
pos-a ⇥
position-absolute
pos-f ⇥
position-fixed
column ⇥
flex-direction-column
row-f ⇥
flex-direction-row
row-r ⇥
flex-direction-row-reverse
wrap ⇥
flex-wrap
wrap-r ⇥
flex-wrap-reverse
shrink ⇥
flex-shrink-options
a-center ⇥
align-items-center
a-end ⇥
align-items-flex-end
a-start ⇥
align-items-flex-start
j-center ⇥
justify-content-center
j-between ⇥
justify-content-between
j-between ⇥
justify-content-between
j-around ⇥
justify-content-around
j-evenly ⇥
justify-content-evenly
j-start ⇥
justify-content-flex-start
j-end ⇥
justify-content-flex-end
container ⇥
container-options
{format price=($P.PRICE_SELL - ($P.PRICE_SELL * $P.NUMERIC1/100))}
{format price=($P.PRICE_SELL - ($P.PRICE_SELL * $P.NUMERIC1/100))}
{vat price=($P.PRICE_SELL - ($P.PRICE_SELL * $P.NUMERIC1/100)) vat=$P.VAT}
vuetemplate ⇥
<div id="selector" class="row" v-cloak>
</div>
<script>
const appName = {
data() {
return {
}
}
};
Vue.createApp(appName).mount('selector');
</script>
IS_ADMIN_LOGGED ⇥
IS_ADMIN_LOGGED
IS_LAZY_LOAD_ACTIVE ⇥
IS_LAZY_LOAD_ACTIVE
IS_MEMBER_LOGGED_IN ⇥
IS_MEMBER_LOGGED_IN
IS_MOBILE ⇥
IS_MOBILE
IS_VENDOR ⇥
IS_VENDOR
LANGUAGE ⇥
LANGUAGE
LANGUAGE_SELECTED ⇥
LANGUAGE_SELECTED
LANGUAGE_LIST ⇥
LANGUAGE_LIST
IS_HTTPS_ACTIVE ⇥
IS_HTTPS_ACTIVE
FILTER_PROPERTY_LIST ⇥
FILTER_PROPERTY_LIST
IS_RECOMMENDATION_ACTIVE ⇥
IS_RECOMMENDATION_ACTIVE
SYMBOL_ ⇥
SYMBOL_options
LAZY_LOAD_LOADING_IMAGE ⇥
LAZY_LOAD_LOADING_IMAGE
DISPLAY_FAVOURITE_BUTTON
DISPLAY_COMPARISON_BUTTON
DISPLAY_CART_BUTTON
DISPLAY_LANGUAGES ⇥
DISPLAY_LANGUAGES
CAMPAIGN_LIST ⇥
CAMPAIGN_LIST
CURRENCY_LIST ⇥
CURRENCY_LIST
data-toggle ⇥
data-toggle="options"
CURRENCY ⇥
CURRENCY
CHILDREN ⇥
CHILDREN
CHILDREN|@count ⇥
CHILDREN|@count
MEDIUM_WEBP_JPG ⇥
MEDIUM_WEBP_JPG
VARIANT_TYPE_ID ⇥
VARIANT_TYPE_ID
VARIANT_IDS ⇥
VARIANT_IDS
TITLE ⇥
TITLE
SMALL ⇥
SMALL
MEDIUM ⇥
MEDIUM
BIG ⇥
BIG
P ⇥
P.options
SUB ⇥
SUB.options
VARIANT_FEATURE1_LIST ⇥
VARIANT_FEATURE1_LIST
tsubfolder ⇥
/srv/service/content-v5/sub-folder/{$PAGE_ID/{$BLOCK.PARENT_ID}/subfoldername/?product={$P.ID}&variant={$P.VARIANT_ID}
tfor ⇥
{for $i=1 to $P.STOCK}
$i
{/for}
tvat ⇥
{vat price=$P.PRICE_SELL vat=$P.VAT}
{format price=$P.PRICE_SELL}
|string_format:'%.1f'
|date_format:'Y,m,d,H,i,s'
|strip_tags|escape:'html'
|strpos ⇥
|strpos:''
|default ⇥
|default:''
|replace ⇥
|replace:'':''
|count ⇥
|@count
| ⇥
|options
texchange ⇥
{exchange price=$P.PRICE_SELL from=$P.TARGET_CURRENCY to='USD'}
THEME_FOLDER ⇥
THEME_FOLDER
ASSETS ⇥
ASSETS
TABS ⇥
TABS
MENUoptions
titeration ⇥
$smarty.foreach.name.iteration
RELATED_PRODUCTS_IDS1_options
SYMBOL_ ⇥
SYMBOL_options
ADDITIONAL_FIELD ⇥
ADDITIONAL_FIELD_options
NUMERIC1 ⇥
NUMERIC1
COUNTER ⇥
COUNTER
debugserver ⇥
<pre>{$smarty.server|@debug_print_var}</pre>
explode ⇥
{assign var="CATARRAY" value=","|explode:$P.CATEGORY_IDS}
inarray ⇥
{in_array('20', array('10','20','30'))}
mathsmarty ⇥
{math assign="SEPETTUTARI" equation="x*((100+v)/100)*((100-y)/100)" x=$P.PRICE_SELL y=$P.ADDITIONAL_FIELD_1 v=$P.VAT}
wame ⇥
https://api.whatsapp.com/send?phone=9{$WHATSAPP_NO}&text=
jsondecode ⇥
json_decode($P.VARIANT_DATA, true)
pid ⇥
{$P.ID}
bid ⇥
BLOCK.ID
jsvoid ⇥
javascript:void(0)
|substr ⇥
|substr:0:5
urlpage ⇥
{url type='page' id='68'}
predebug ⇥
<pre>{arr|@debug_print_var}</pre>
var_dump ⇥
<pre>{$arr|@var_dump}</pre>
editorfiles ⇥
/Data/EditorFiles/v5images/
debug ⇥
{debug}
/literal ⇥
{debug}
BLOCK ⇥
BLOCK.options
SETTING ⇥
SETTING.options
IMAGE ⇥
IMAGE.options
SERVICES
sretrunnotes ⇥
/srv/service/order-v4/order-return/${$P.ID}
ssearch ⇥
/srv/service/order-v4/order-return/${$P.ID}
svideo ⇥
/srv/service/gallery/video-detail/${$P.ID}
sfastlook ⇥
/srv/service/product-detail/view/606
sfolders ⇥
/srv/service/content/get/block_id/folder_name
slanguage ⇥
/srv/service/language/change/tr
scurrency ⇥
/srv/shopping/shopping/set-currency/tl
scountry ⇥
/srv/shopping/shopping/set-country/TR
sproductlist ⇥
/srv/service/content/get-block/1003/category/catID
scatservice ⇥
/srv/service/category/get/catID
scatproduct ⇥
/srv/service/product/filter/category/catID?pg=1
sgettree ⇥
/srv/service/category/getTree/catID
sgetblock ⇥
/srv/service/content/get-block/1018/content/içerik_id
sinstallment ⇥
/srv/service/product-detail/credit-card-installment-list/${$P.ID}/${$P.VARIANT_ID}
spaymentoptions ⇥
/srv/service/product-detail/payment-options/${$P.ID}/${$P.VARIANT_ID}
scampaignproduct ⇥
/srv/campaign-v2/campaign/get-list-by-type/product/${$P.ID}
scampaigncart ⇥
/srv/campaign-v2/campaign/get-list-by-type/cart
scampaigncat ⇥
/srv/campaign-v2/campaign/get-list-by-type/category/id
scart ⇥
/srv/service/cart/load?link=sepet
/srv/service/product-detail/comments/${$P.ID}
/srv/service/product-detail/comment-average/${$P.ID}
sbrand ⇥
/srv/service/filter/get/brands
/srv/service/content/getBlock/1070/product/${$P.ID}
/srv/service/product/get-related-products/${$P.ID}/1
ssubstitution ⇥
/srv/service/product/get-related-products/${$P.ID}/2
saccessory ⇥
/srv/service/product/get-related-products/${$P.ID}/3
scomplement ⇥
/srv/service/product/get-related-products/${$P.ID}/4
hover- ⇥
block,inline-block,flex,inline-flex,none,hidden,visible,transition-none,scale,scale-lg,grayscale,grayscale-reverse,blur,blur-reverse,opacity,opacity-reverse,to-up,to-down,to-left,to-right,shadow,bg-transparent,text-primary,bg-primary,border-primary
effect-w- ⇥
effect-wrapper
category f-w- ⇥
{category id="{$TABLE_ID}" assign="MY_CATEGORY"}
product f-w- ⇥
{product id="{$P.ID}" assign="MY_PRODUCT"}
{menu key="MENU_FOOTER" assign="MENU_FOOTER"}
SCSS V5
Here is Scss code snippets for tsoftecommerce.com V5.
transparentize ⇥
transparentize($bgPrimary, 0.5);
darken ⇥
darken($bgPrimary, 10%)
lighten ⇥
lighten($bgPrimary, 10%)
$gridColumns ⇥
$gridColumns
$gridPadding ⇥
$gridPadding
$mobileGridPadding ⇥
$mobileGridPadding
$xxlScreen ⇥
$xxlScreen
$xlScreen ⇥
$xlScreen
$lgScreen ⇥
$lgScreen
$mdScreen ⇥
$mdScreen
$smScreen ⇥
$smScreen
$bg ⇥
$bgoptions
$bgBody
$bgPrimary
$bgSecondary
$bgWhite
$bgBlack
$bgGray
$bgLight
$bgDarkGray
$bgSuccess
$bgInfo
$bgWarning
$bgDanger
$border ⇥
$borderoptions
$borderBody
$borderPrimary
$borderSecondary
$borderWhite
$borderBlack
$borderGray
$borderLight
$borderDarkGray
$borderSuccess
$borderInfo
$borderWarning
$borderDanger
$borderRadius
$buttonoptions
$buttonPrimary
$buttonSecondary
$buttonWhite
$buttonBlack
$buttonGray
$buttonLight
$buttonDarkGray
$buttonSuccess
$buttonInfo
$buttonWarning
$buttonDanger
$text ⇥
$textoptions
$textPrimary
$textSecondary
$textWhite
$textBlack
$textGray
$textLight
$textDarkGray
$textSuccess
$textInfo
$textWarning
$textDanger
$textColor
$headingColor ⇥
$headingColor
$font ⇥
$fontoptions
$fontH1
$fontH2
$fontH3
$fontText
$fontMaster
clamp ⇥
clamp(13px,1vw,20px)
importsetting ⇥
@import "setting.scss";
@import "mixin.scss";
i-mask ⇥
mask:url(#{$assets}/image_path);
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
-webkit-mask:url(#{$assets}/image_path);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: cover;
background-color:$bgPrimary;
@include scrollbar(5, 5, $bgPrimary);
i-lineclamp ⇥
@include line-clamp(2);
i-j-evenly ⇥
@include justify-content-evenly;
i-j-center ⇥
@include justify-content-center;
i-j-start ⇥
@include justify-content-flex-start;
i-j-end ⇥
@include justify-content-flex-end;
i-j-between ⇥
@include justify-content-between;
i-j-around ⇥
@include justify-content-around;
i-a-end ⇥
@include align-items-flex-end;
i-a-start ⇥
@include align-items-flex-start;
i-row ⇥
@include flex-direction-row;
i-column ⇥
@include flex-direction-column;
i-wrap ⇥
@include flex-wrap;
i-flex ⇥
@include d-flex;
i-inlineflex ⇥
@include d-inline-flex;
i-allcenter ⇥
@include d-flex;
@include align-items-center;
@include justify-content-center;
i-block ⇥
@include BLOCK {
}
boxshadow ⇥
box-shadow: 0 0 10px 0 rgb(40 40 40 / 30%);
textshadow ⇥
text-shadow: 1px 1px 2px $bgBlack, 0 0 1em $bgBlack, 0 0 0.2em $bgBlack;
lineclamp ⇥
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
@media (min-width: $mdScreen){
}
@media (max-width: $mdScreen - 1){
}
keyframes ⇥
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
WHAT IT LOOKS LIKE



Source
MIT
License
MIT