Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>T-Soft V5 SnippetsNew to Visual Studio Code? Get it now.
T-Soft V5 Snippets

T-Soft V5 Snippets

tsoft-v5-snippet

|
216 installs
| (5) | Free
tsoft v5 snippets for smarty, javascript and scss
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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

  1. To have a better syntax highligting in .tpl files, it is adviced to install Smarty Template Support beforehand.

  2. 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".

Settings

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`);

tsubmitform ⇥

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')

tscrollToElm ⇥

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: () => {
    }
});

tpublishingPopupCallback ⇥

window.publishingPopupCallback=function(){
    
}

ttooltip ⇥

T.tooltip(T(`selector`)[0], {
    placement:`top`
});

tcheckvalidity ⇥

if(!T.checkValidity(e.target)) return;

tpriceToFloat ⇥

T.priceToFloat(strPrice);

tvat ⇥

T.vat(price, vat);

tformat ⇥

T.format(number);

ttimeconverter ⇥

T.timeConverter(1652702396000, `d.m.y`);

tbuttonlock ⇥

const button = T(`#form_submit_button`)[0];
T.buttonLock.dom = button;
T.buttonLock.tmp = button.innerHTML;
T.buttonLock.lock();

tbuttonunlock ⇥

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`

scomment ⇥

`/srv/service/product-detail/comments/${product_id}`

scommentpoint ⇥

`/srv/service/product-detail/comment-average/${product_id}`

sbrand ⇥

`/srv/service/filter/get/brands`

srelatedblock ⇥

`/srv/service/content/getBlock/1070/product/${product_id}`

srelated ⇥

`/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

extraformat ⇥

{format price=($P.PRICE_SELL - ($P.PRICE_SELL * $P.NUMERIC1/100))}

extraformat ⇥

{format price=($P.PRICE_SELL - ($P.PRICE_SELL * $P.NUMERIC1/100))}

extravat ⇥

{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_FAVOURITE_BUTTON

DISPLAY_COMPARISON_BUTTON ⇥

DISPLAY_COMPARISON_BUTTON

DISPLAY_CART_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}

tformat ⇥

{format price=$P.PRICE_SELL}

|string_format ⇥

|string_format:'%.1f'

|date_format ⇥

|date_format:'Y,m,d,H,i,s'

|strip_tags|escape ⇥

|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

MENU ⇥

MENUoptions

titeration ⇥

$smarty.foreach.name.iteration

RELATED_PRODUCTS ⇥

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

scomment ⇥

/srv/service/product-detail/comments/${$P.ID}

scommentpoint ⇥

/srv/service/product-detail/comment-average/${$P.ID}

sbrand ⇥

/srv/service/filter/get/brands

srelatedblock ⇥

/srv/service/content/getBlock/1070/product/${$P.ID}

srelated ⇥

/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 f-w- ⇥

{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

$button ⇥

$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;

i-scrollbar ⇥

 @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;

mediamin ⇥

@media (min-width: $mdScreen){

}

mediamax ⇥

@media (max-width: $mdScreen - 1){

}

keyframes ⇥

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

WHAT IT LOOKS LIKE

Settings

Settings

Settings

Source

MIT

License

MIT

  • JAVASCRIP
  • SMARTY
  • SCSS
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft