Как создавать табы

Всем привет. В доках карта описано, что можно создавать табы. Но два часа просидел и хоть убей не понимаю как это все применить на практике.

Вот есть страница например Оплата и доставка. Как на ней сделать табы, используя информацию с доки?

Вот пробовал создать с помощью смарти блока, не работает.

<div class="tabs-wrapper cm-js">
	<div class="tabs-buttons cm-j-tabs">
		<button id="tab_1" class="tabs-button">Кнопка</button>
		<button id="tab_2" class="tabs-button">Кнопка</button>
		<button id="tab_3" class="tabs-button">Кнопка</button>
	</div>
	<div class="tabs-content cm-tabs-content">
		<div id="content_1" class="tabs-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, natus at
			perferendis
			deleniti maxime alias nostrum eveniet nam minus soluta facilis esse quo debitis, porro explicabo tempora eaque
			cumque recusandae?</div>
		<div id="content_2" class="tabs-item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet nemo quasi
			accusantium
			necessitatibus, impedit sit in velit commodi nulla vero iusto illum numquam, voluptatem odio molestiae sint
			deserunt fuga molestias.
			Doloribus facere nisi, beatae alias eum eos earum dicta quaerat mollitia esse asperiores error. Laudantium dolorum
			excepturi error reiciendis, non veritatis enim voluptas consequatur esse facere ad aspernatur, nostrum magnam.
			Animi ad rerum nulla similique fugiat ducimus assumenda, quaerat nesciunt saepe libero totam, quod quia deleniti,
			aut cum neque facere eaque vero incidunt suscipit. Suscipit aut sit dolor repellendus deserunt!
			Magnam, delectus ipsam vero ut, iure nisi numquam vitae non suscipit tenetur, ipsum modi? Ullam libero et laborum
			reprehenderit consequatur consequuntur nihil cumque maiores autem in, velit, enim corporis accusamus!
			Iusto ipsam consequuntur dolor vitae necessitatibus minima debitis illo similique animi neque quod voluptas cum,
			reiciendis magnam labore omnis dolorem pariatur perferendis quos possimus eveniet expedita molestiae doloribus
			praesentium? Eum?
			Maiores totam sunt, nemo ipsam corporis a voluptatibus nam praesentium nihil laudantium voluptas nobis et quidem
			unde ut tenetur nostrum dignissimos earum facilis quisquam. Dolorem expedita reprehenderit quisquam consequuntur
			perspiciatis.
			Quae nobis, error totam asperiores, enim ratione ex repudiandae nemo veniam, pariatur sint esse alias ab at
			eveniet animi non ad iusto? Fugiat tenetur et vero rem alias quam qui?</div>
		<div id="content_3" class="tabs-item">Lorem*6</div>
	</div>
</div>

Дальше сами до ума доведите вот рабочий вариант

{script src="js/tygh/tabs.js"}
	<div class="tabs-buttons cm-j-tabs">
    <ul class="ty-tabs__list">
		<li id="tab_1" class="tabs-button cm-js">Кнопка</li>
		<li id="tab_2" class="tabs-button cm-js">Кнопка</li>
		<li id="tab_3" class="tabs-button cm-js">Кнопка</li>
</ul>
	</div>
	<div class="tabs-content cm-tabs-content">
		<div id="content_tab_1" class="tabs-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, natus at
			perferendis
			deleniti maxime alias nostrum eveniet nam minus soluta facilis esse quo debitis, porro explicabo tempora eaque
			cumque recusandae?</div>
		<div id="content_tab_2" class="tabs-item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet nemo quasi
			accusantium
			necessitatibus, impedit sit in velit commodi nulla vero iusto illum numquam, voluptatem odio molestiae sint
			deserunt fuga molestias.
			Doloribus facere nisi, beatae alias eum eos earum dicta quaerat mollitia esse asperiores error. Laudantium dolorum
			excepturi error reiciendis, non veritatis enim voluptas consequatur esse facere ad aspernatur, nostrum magnam.
			Animi ad rerum nulla similique fugiat ducimus assumenda, quaerat nesciunt saepe libero totam, quod quia deleniti,
			aut cum neque facere eaque vero incidunt suscipit. Suscipit aut sit dolor repellendus deserunt!
			Magnam, delectus ipsam vero ut, iure nisi numquam vitae non suscipit tenetur, ipsum modi? Ullam libero et laborum
			reprehenderit consequatur consequuntur nihil cumque maiores autem in, velit, enim corporis accusamus!
			Iusto ipsam consequuntur dolor vitae necessitatibus minima debitis illo similique animi neque quod voluptas cum,
			reiciendis magnam labore omnis dolorem pariatur perferendis quos possimus eveniet expedita molestiae doloribus
			praesentium? Eum?
			Maiores totam sunt, nemo ipsam corporis a voluptatibus nam praesentium nihil laudantium voluptas nobis et quidem
			unde ut tenetur nostrum dignissimos earum facilis quisquam. Dolorem expedita reprehenderit quisquam consequuntur
			perspiciatis.
			Quae nobis, error totam asperiores, enim ratione ex repudiandae nemo veniam, pariatur sint esse alias ab at
			eveniet animi non ad iusto? Fugiat tenetur et vero rem alias quam qui?</div>
		<div id="content_tab_3" class="tabs-item">Lorem*6</div>
	</div>

спасибо!