Nevím jak dál s konfigurátorem

Zdravím Vás,
Našel jsem si úžasná konfigurátor produktu který bych chtěl integrovat do našeho systému ale absolutně nevím jak dál postupovat.

Konfigurátor
GIT

Vysvětlení:

• Funguje na naprosto jednoduché bázi máme udělaný nějaký soubor viz. product-01.html ve které je struktura toho daného produktu

<li data-selection="colors" class="builder-step first-load">
	<section class="cd-step-content">
		<header>
			<h1>Select Color</h1>
			<span class="steps-indicator">Step <b>2</b> of 4</span>
		</header>

		<ul class="cd-product-previews">
			<li class="selected"><img src="img/product01_col01.jpg" alt="Product Preview" class="product-preview"></li>
			<li><img src="img/product01_col02.jpg" alt="Product Preview" class="product-preview"></li>
			<li><img src="img/product01_col03.jpg" alt="Product Preview" class="product-preview"></li>
		</ul>

		<ul class="cd-product-customizer">
			<li data-content="White - $0" data-price="0" class="selected"><a data-color="white" href="#0">White - $0</a></li>
			<li data-content="Mineral Grey - $550" data-price="550"><a data-color="grey" href="#0">Mineral Grey - $550</a></li>
			<li data-content="Orange Metallic - $550" data-price="550"><a data-color="orange" href="#0">Orange Metallic - $550</a></li>
		</ul>
	</section>
</li>

<li data-selection="accessories" class="builder-step first-load">
	<section class="cd-step-content">
		<header>
			<h1>Accessories</h1>
			<span class="steps-indicator">Step <b>3</b> of 4</span>
		</header>

		<ul class="accessories-list options-list">
			<li class="js-option" data-price="1080">
				<p>BMW Charging Station</p>

				<span class="price">$1.080</span>

				<div class="check"></div>
			</li>

			<li class="js-option" data-price="1895">
				<p>BMW Maintenance Program Upgrade</p>

				<span class="price">$1.895</span>

				<div class="check"></div>
			</li>

			<li class="js-option" data-price="975">
				<p>1 Year BMW Maintenance Program Upgrade</p>

				<span class="price">$975</span>

				<div class="check"></div>
			</li>
		</ul>
	</section>
</li>

<li data-selection="summary" class="builder-step first-load">
	<section class="cd-step-content">
		<header>
			<h1>Summary</h1>
			<span class="steps-indicator">Step <b>4</b> of 4</span>
		</header>

		<ul class="summary-list">
			<li>
				<h2>Model</h2>

				<img src="img/product01_col01.jpg" alt="Alfa Romeo Giulietta" class="product-preview">

				<h3>BMW i3</h3>

				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit saepe facilis hic, unde, numquam vel. Blanditiis sed laboriosam ratione nulla atque molestias at explicabo aperiam reprehenderit culpa nihil, quis totam cupiditate dolores in quisquam magnam inventore nobis, rem adipisci eveniet illum.
				</p>
			</li>

			<li data-summary="colors">
				<h2>Color</h2>

				<span class="summary-color">
					<em class="color-swatch" data-color="red"></em>
					<em class="color-label">Red Passion</em>
				</span>
			</li>

			<li data-summary="accessories">
				<h2>Accessories</h2>

				<ul class="summary-accessories">
					<li>
						<p>Uconnect 6.5" colour touchscreen radio navigation sytem with Bluetooth &amp; DAB ($1050)</p>
					</li>

					<li>
						<p>Audio &amp; telephone controls on steering wheels ($750)</p>
					</li>
				</ul>
			</li>
		</ul>
	</section>
</li>

A pak je samostatný script který tuto strukturu načítá

<div class="cd-builder-steps">
		<ul>
			<li data-selection="models" class="active builder-step">
				<section class="cd-step-content">
					<header>
						<h1>Select Model</h1>
						<span class="steps-indicator">Step <b>1</b> of 4</span>
					</header>

					<a href="https://codyhouse.co/?p=16220" class="cd-nugget-info hide-on-desktop">Article &amp; Download</a>

					<ul class="models-list options-list cd-col-2">
						<li class="js-option js-radio" data-price="42400" data-model="product-01">
							<span class="name">BMW i3</span>
							<img src="img/product01_col01.jpg" alt="BMW i3">
							<span class="price">from $42.400</span>
							<div class="radio"></div>
						</li>

					</ul>
				</section>
			</li>
			<!-- additional content will be inserted using ajax -->
		</ul>
	</div>

Kde je data-model=„product-01“ a ten načítá ten daný soubor s daty product-01.html

Představa:

• A má má představa je mýt tento konfigurátor jako modul(TO už mám) ve který bude nějaký component product_ID.lette ve kterém bude daná struktura která bude na principu foreach abych to nemusel mít staticky ale dynamicky.
• Jenže problém je v tom že nevím jak pak nasměrovat ten data-model na tu šablonu lette.
• Jak udělat aby se ta lette šablona mohla být jen jedna a přitom to fungovalo jako kdyby každý produkt měl svoji šablonu

Vrtá mi to hlavou a absolutně nemůžu přijít na nějaké vhodné řešení.

Tak mě napadlo napsat sem jelikož mi zde vždycky pomohli dojít k řešení které je efektivní

Díky všem za rady popřípadě doplním informace když bude někdo potřebovat něco vědět.