T-Soft OS2 Snippets
VSCode snippets for T-Soft OS2 theme development (Twig + JavaScript).
Documentation:
- Twig data-toggle:
- Twig helper functions:
- JavaScript usage:
- JS helper functions:
- JS in Twig, callbacks, theme.js:
Setup
Install Twig Language 2 for better .twig highlighting:
https://marketplace.visualstudio.com/items?itemName=mblode.twig-language-2
Optional: Enable Emmet in Twig files. In VSCode settings (JSON):
"emmet.includeLanguages": {
"twig": "html"
}
Twig (OS2)
Key prefixes:
data-toggle → attribute completion with all OS2 togglestfor, tif, tifel, tinclude, textends, tblock, tset, tfilter, tprint, ttrans- Helper functions:
tformat, tvat, tsnippet, tdump, tmenu, turl, tform, tformdata, trequestpath, texchange, tcategory, tbrand, tmodel, tproduct, tquery, tasset, ttheme, tthemeasset, tcsrftoken, tsnippeturi
- Sections:
section-slider, section-banner
- Toggle examples:
toggle-popup, toggle-product-loader, toggle-showcase, toggle-light-gallery, toggle-zoom
Examples:
<div {{- "data-toggle=\"slider\"" -}}>
{{ format(P.PRICE) }}
{{ vat(P.PRICE_SELL, P.VAT) }}
{{ url(77, 'page') }}
{{ snippet('share', { IMAGE_URL: BLOG.IMG2.PATH, TITLE: BLOG.TITLE }) }}
{% include "snippet/path" %}
{% for ITEM in ITEMS %}{% endfor %}
{% set data = form('form_1', true) %}
<div data-toggle="showcase"></div>
JavaScript (OS2)
Key prefixes:
- Bootstrap and lifecycle:
domready, ON_PAGE_READY, themejs
- Twig → JS:
twig-json
- Requests and storage:
request, LocalApi.get, LocalApi.set, LocalApi.remove
- URL/cookie/utils:
getUrlParam, setUrlParam, deleteUrlParam, setCookie, getCookie, browser, isMobile, getLink
- Script helpers:
evalScripts, evalScriptsAdd, scriptAdd
- Language/Currency:
setLanguage, setCurrency
- UI helpers:
modal, modalClose, notify, drawerClose, mask, popoverAlert, popoverAlertHide, passwordToggle, captchaToggle
- Data helpers:
format, vat, priceToFloat, timeConverter, stringToObject, taxLoader
- Snippet utilities:
snippetUri, loadSnippet
- Form/validation/region:
checkValidity, formLoader, tsRegion
- Components:
components.init, component.init, component.call
Examples:
document.addEventListener('DOMContentLoaded', async () => {
await components.init();
});
ON_PAGE_READY.push(function () {});
const setting = {{ SETTING|json_encode|raw }};
const res = await request('GET', '/api/endpoint');
const data = await res.json();
notify({ text: 'Saved', className: 'success', duration: 3200 });
modal({ id: 'm1', title: 'Title', html: '...' });
const url = snippetUri('product-comment-form', { include: 'product-detail', product_id: 1 });
loadSnippet({ url, target: '#target', callback: (html) => {} });
What it looks like
License
MIT
| |
