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