twigfiddle.com - Fiddle fyctuo v2 - Created on November 26, 2020 15:49

File
{{ header }}
<div id="product-product" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
      <div class="row"> {% if column_left or column_right %}
        {% set class = 'col-sm-6' %}
        {% else %}
        {% set class = 'col-sm-8' %}
        {% endif %}
        <div class="{{ class }}"> {% if label_builder %}
					<div id="label_builder">
						<div id="builder">
							{% if thumb %} 
								<a class="magnific default" href="{{ popup }}" title="{{ heading_title }}"><img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" class="img-responsive" /></a>
							{% endif %} 
							<img src="{{ label_builder_bg }}" id="lb-bgimage" class="img-responsive" style="display: none;" />

							{% set class = label_builder_label_image ? ' hasImage' : '' %} 

							<div id="lb_wrapper" class="{{ class }}" style="display: none;" data-image-width="{{ label_builder_label_image_width }}" data-image-height="{{ label_builder_label_image_height }}">
								{% set class = label_builder_rounded ? ' rounded' : '' %} 

								{% set style = label_builder_label_image ? "background-image: url('" ~ label_builder_label_image ~ "');" : '' %} 

								<div id="lb_label_outer" class="{{ trim(class) }}" style="{{ trim(style) }}" data-ratio="{{ label_ratio }}" data-curr-font="" data-curr-text-color="" data-curr-label-color="" data-offset="{{ label_builder_text_offset }}">
									<table id="lb_table">
										<tr>
											<td id="lb_image"></td>
											<td id="lb_text" data-curr-font="" data-curr-text-color="" data-curr-label-color=""></td>
										</tr>
									</table>
									<div id="lb_line_test_area"></div>
								</div>
							</div>
						</div>

						{% if (video_popup or images) %} 
							<div id="additionals">
								{% if video_popup %} 
									<a class="magnific video" href="{{ video_popup }}" title="{{ heading_title }}" rel="video"><img src="{{ thumb }}" alt="{{ text_watch_video }}" title="{{ heading_title }}" class="video img-responsive" /></a>
								{% endif %} 
								{% if images %} 
									{% for image in images %} 
										<a class="magnific" href="{{ image.popup. }}" title="{{ heading_title }}"> <img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" class="img-responsive" /></a>
									{% endfor %} 
								{% endif %} 
							</div>
						{% endif %} 
					</div>
				{% endif %}
				{% if thumb or images %}
          <ul class="thumbnails"{% if label_builder %} style="display: none;"{% endif %}>
            {% if thumb %}
            <li><a class="thumbnail" href="{{ popup }}" title="{{ heading_title }}"><img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
            {% endif %}
            {% if images %}
            {% for image in images %}
            <li class="image-additional"><a class="thumbnail" href="{{ image.popup }}" title="{{ heading_title }}"> <img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
            {% endfor %}
            {% endif %}
          </ul>
          {% endif %}
          <ul class="nav nav-tabs">
            <li class="active"><a href="#tab-description" data-toggle="tab">{{ tab_description }}</a></li>
            {% if attribute_groups %}
            <li><a href="#tab-specification" data-toggle="tab">{{ tab_attribute }}</a></li>
            {% endif %}
            {% if review_status %}
            <li><a href="#tab-review" data-toggle="tab">{{ tab_review }}</a></li>
            {% endif %}
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="tab-description">{{ description }}</div>
            {% if attribute_groups %}
            <div class="tab-pane" id="tab-specification">
              <table class="table table-bordered">
                {% for attribute_group in attribute_groups %}
                <thead>
                  <tr>
                    <td colspan="2"><strong>{{ attribute_group.name }}</strong></td>
                  </tr>
                </thead>
                <tbody>
                {% for attribute in attribute_group.attribute %}
                <tr>
                  <td>{{ attribute.name }}</td>
                  <td>{{ attribute.text }}</td>
                </tr>
                {% endfor %}
                  </tbody>
                {% endfor %}
              </table>
            </div>
            {% endif %}
            {% if review_status %}
            <div class="tab-pane" id="tab-review">
              <form class="form-horizontal" id="form-review">
                <div id="review"></div>
                <h2>{{ text_write }}</h2>
                {% if review_guest %}
                <div class="form-group required">
                  <div class="col-sm-12">
                    <label class="control-label" for="input-name">{{ entry_name }}</label>
                    <input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
                  </div>
                </div>
                <div class="form-group required">
                  <div class="col-sm-12">
                    <label class="control-label" for="input-review">{{ entry_review }}</label>
                    <textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
                    <div class="help-block">{{ text_note }}</div>
                  </div>
                </div>
                <div class="form-group required">
                  <div class="col-sm-12">
                    <label class="control-label">{{ entry_rating }}</label>
                    &nbsp;&nbsp;&nbsp; {{ entry_bad }}&nbsp;
                    <input type="radio" name="rating" value="1" />
                    &nbsp;
                    <input type="radio" name="rating" value="2" />
                    &nbsp;
                    <input type="radio" name="rating" value="3" />
                    &nbsp;
                    <input type="radio" name="rating" value="4" />
                    &nbsp;
                    <input type="radio" name="rating" value="5" />
                    &nbsp;{{ entry_good }}</div>
                </div>
                {{ captcha }}
                <div class="buttons clearfix">
                  <div class="pull-right">
                    <button type="button" id="button-review" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_continue }}</button>
                  </div>
                </div>
                {% else %}
                {{ text_login }}
                {% endif %}
              </form>
            </div>
            {% endif %}</div>
        </div>
        {% if column_left or column_right %}
        {% set class = 'col-sm-6' %}
        {% else %}
        {% set class = 'col-sm-4' %}
        {% endif %}
        <div class="{{ class }}">
          <div class="btn-group">
            <button type="button" data-toggle="tooltip" class="btn btn-default" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product_id }}');"><i class="fa fa-heart"></i></button>
            <button type="button" data-toggle="tooltip" class="btn btn-default" title="{{ button_compare }}" onclick="compare.add('{{ product_id }}');"><i class="fa fa-exchange"></i></button>
          </div>
          <h1>{{ heading_title }}</h1>
          <ul class="list-unstyled">
            {% if manufacturer %}
            <li>{{ text_manufacturer }} <a href="{{ manufacturers }}">{{ manufacturer }}</a></li>
            {% endif %}
            <li>{{ text_model }} {{ model }}</li>
            {% if reward %}
            <li>{{ text_reward }} {{ reward }}</li>
            {% endif %}
            <li>{{ text_stock }} {{ stock }}</li>
          </ul>
          {% if price %}
          <ul class="list-unstyled">
            {% if not special %}
            <li>
              <h2>{{ price }}</h2>
            </li>
            {% else %}
            <li><span style="text-decoration: line-through;">{{ price }}</span></li>
            <li>
              <h2>{{ special }}</h2>
            </li>
            {% endif %}
            {% if tax %}
            <li>{{ text_tax }} {{ tax }}</li>
            {% endif %}
            {% if points %}
            <li>{{ text_points }} {{ points }}</li>
            {% endif %}
            {% if discounts %}
            <li>
              <hr>
            </li>
            {% for discount in discounts %}
            <li>{{ discount.quantity }}{{ text_discount }}{{ discount.price }}</li>
            {% endfor %}
            {% endif %}
          </ul>
          {% endif %}
          <div id="product"> {% if options %}
            <hr>
            <h3>{{ text_option }}</h3>
            {% for option in options %}
{% set lb_option = option['label_builder_option'] %} 
				{% set lb_opt_ref = option['lb_opt_ref'] %} 
				{% set uses_images = option['uses_images'] %} 
				{% set uses_paging = option['paging'] %} 
				{% set per_page = option['paging_per_page'] %} 
				{% set val_based_font = option['val_based_font'] %} 
				{% set val_based_text_color = option['val_based_text_color'] %} 
				{% set val_based_label_color = option['val_based_label_color'] %} 

				{% set class = lb_opt_ref %} 
				{% set class ~ (lb_option ? ' lb_option' : '') %} 
				{% set class ~ (uses_images ? ' uses_images' : '') %} 
				{% set class ~ (uses_paging ? ' uses_paging' : '') %} 

				{% set data_tags = 'data-name="' ~ lb_opt_ref ~ '"' %} 
				{% set data_tags ~ (uses_paging ? ' data-perpage="' ~ per_page ~ '"' : '') %}
            {% if option.type == 'select' %}
            <div {{ data_tags }} class="form-group {{ class }}{% if option.required %} required {% endif %}">
              <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
              <select name="option[{{ option.product_option_id }}]" id="input-option{{ option.product_option_id }}" class="form-control">
                <option value="">{{ text_select }}</option>
{% set optvalcounter = 0 %}
				{% set numoptvals = option.product_option_value | length ?>
				{% set numoptpages = (numoptvals / per_page)|round(0, 'ceil') %}
                {% for option_value in option.product_option_value %}
                <option value="{{ option_value.product_option_value_id }}">{{ option_value.name }}
                {% if option_value.price %}
                ({{ option_value.price_prefix }}{{ option_value.price }})
                {% endif %} </option>
                {% endfor %}
              </select>
            </div>
            {% endif %}
            {% if option.type == 'radio' %}
            <div {{ data_tags }} class="form-group {{ class }}{% if option.required %} required {% endif %}">
              <label class="control-label">{{ option.name }}</label>
{% set optvalcounter = 0 %}
				{% set numoptvals = option.product_option_value | length ?>
				{% set numoptpages = (numoptvals / per_page)|round(0, 'ceil') %}
              <div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
                {% if uses_paging and optvalcounter == 0 %}
					<div class="optpagewrapper">
						<div class="optpagenav optpagenavprev"></div>
						<div class="optpagenav optpagenavnext"></div>
						<div class="optpages_outer">
							<div class="optpages">
				{% endif %}
				{% if uses_paging and optvalcounter % per_page == 0 %}
					<div class="optpage">
				{% endif %}
                {% set opt_class = 'radio' %}
				{% set opt_class ~ (option_value.safe_name == 'blank' or option_value.safe_name == 'no-image' ? ' blank' : '') %}
				{% set opt_class ~ (val_based_font ? ' font-' ~ option_value.safe_name : '') %}
				{% set opt_class ~ (val_based_label_color ? ' label_mockup' : '') %}

				{% set opt_other_tags  = '' %}
				{% set opt_other_tags ~ (val_based_font ? ' data-font="font-' ~ option_value.safe_name . '"' : '') %}
				{% set opt_other_tags ~ (val_based_text_color ? ' data-text-color="' ~ option_value.hexcode . '" style="background-color: #' .~ option_value.hexcode . ';"' : '') %}
				{% set opt_other_tags ~ (val_based_label_color ? ' data-label-color="' ~ option_value.hexcode . '" style="background-color: #' ~ option_value.hexcode . ';"' : '') %}

				<div class="{{ opt_class }}"{{ opt_other_tags }}>
                  <label>
                    <input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}"{% if option_value.selected %} selected="selected"{% endif %} />
                    {% if val_based_label_color and option_value.hexcode %}
					<span class="mockup" title="{{ option_value.name }}" style="background-color: #{{ option_value.hexcode }};"></span>
				{% else if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" /> {% endif %}                  
                    {{ option_value.name }}
                    {% if option_value.price %}
                    ({{ option_value.price_prefix }}{{ option_value.price }})
                    {% endif %} </label>
                </div>
                {% if uses_paging and (optvalcounter % per_page === (per_page - 1) or optvalcounter == numoptvals - 1) %}
					</div>
				{% endif %}
				{% if uses_paging and optvalcounter == numoptvals - 1 %}
							</div>
						</div>
					</div>
				{% endif %}

				{% set optvalcounter = optvalcounter + 1 %}
                {% endfor %} </div>
            </div>
            {% endif %}
            {% if option.type == 'checkbox' %}
            <div {{ data_tags }} class="form-group {{ class }}{% if option.required %} required {% endif %}">
              <label class="control-label">{{ option.name }}</label>
{% set optvalcounter = 0 %}
				{% set numoptvals = option.product_option_value | length ?>
				{% set numoptpages = (numoptvals / per_page)|round(0, 'ceil') %}
              <div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="option[{{ option.product_option_id }}][]" value="{{ option_value.product_option_value_id }}" />
                    {% if val_based_label_color and option_value.hexcode %}
					<span class="mockup" title="{{ option_value.name }}" style="background-color: #{{ option_value.hexcode }};"></span>
				{% else if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" /> {% endif %}
                    {{ option_value.name }}
                    {% if option_value.price %}
                    ({{ option_value.price_prefix }}{{ option_value.price }})
                    {% endif %} </label>
                </div>
                {% endfor %} </div>
            </div>
            {% endif %}
            {% if option.type == 'text' %}
            <div {{ data_tags }} class="form-group {{ class }}{% if option.required %} required {% endif %}">
              <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
              {% if option['text-opts'] %}
					{% for opt in text_opts %}
						<input type="text" data-name="{{ opt.lb_opt_ref }}" name="option[{{ opt.product_option_id }}]" value="{{ opt.value }}" placeholder="{% if opt.placeholder %}{{ opt.placeholder }}{% else %}{{ opt.name }}{% endif %}" id="input-option{{ opt.product_option_id }}" class="form-control" {% if opt.max_length > 0 %}maxlength="{{ opt.max_length * 1 }}"{% endif %} />
					{% endfor %}
				{% else %}
					<input type="text" name="option[{{ opt.product_option_id }}]" value="{{ option.value }}" placeholder="{{ option.name }}" id="input-option{{ option.product_option_id }}" class="form-control" {% if opt.max_length > 0 %}maxlength="{{ opt.max_length * 1 }}"{% endif %} />
				{% endif %}
            </div>
            {% endif %}
            {% if option.type == 'textarea' %}
            <div {{ data_tags }} class="form-group {{ class }}{% if option.required %} required {% endif %}">
              <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
              <textarea name="option[{{ option.product_option_id }}]" rows="5" placeholder="{{ option.name }}" id="input-option{{ option.product_option_id }}" class="form-control">{{ option.value }}</textarea>
            </div>
            {% endif %}
            {% if option.type == 'file' %}
            <div {{ data_tags }} class="form-group {{ class }}{% if option.required %} required {% endif %}">
              <label class="control-label">{{ option.name }}</label>
              <button type="button" id="button-upload{{ option.product_option_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default btn-block"><i class="fa fa-upload"></i> {{ button_upload }}</button>
              <input type="hidden" name="option[{{ option.product_option_id }}]" value="" id="input-option{{ option.product_option_id }}" />
            </div>
            {% endif %}
            {% if option.type == 'date' %}
            <div {{ data_tags }} class="form-group {{ class }}{% if option.required %} required {% endif %}">
              <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
              <div class="input-group date">
                <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD" id="input-option{{ option.product_option_id }}" class="form-control" />
                <span class="input-group-btn">
                <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                </span></div>
            </div>
            {% endif %}
            {% if option.type == 'datetime' %}
            <div {{ data_tags }} class="form-group {{ class }}{% if option.required %} required {% endif %}">
              <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
              <div class="input-group datetime">
                <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD HH:mm" id="input-option{{ option.product_option_id }}" class="form-control" />
                <span class="input-group-btn">
                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                </span></div>
            </div>
            {% endif %}
            {% if option.type == 'time' %}
            <div {{ data_tags }} class="form-group {{ class }}{% if option.required %} required {% endif %}">
              <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
              <div class="input-group time">
                <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="HH:mm" id="input-option{{ option.product_option_id }}" class="form-control" />
                <span class="input-group-btn">
                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                </span></div>
            </div>
            {% endif %}
            {% set optcounter = optcounter + 1 %}
            {% endfor %}
            
            {% endif %}
            {% if recurrings %}
            <hr>
            <h3>{{ text_payment_recurring }}</h3>
            <div class="form-group required">
              <select name="recurring_id" class="form-control">
                <option value="">{{ text_select }}</option>
                {% for recurring in recurrings %}
                <option value="{{ recurring.recurring_id }}">{{ recurring.name }}</option>
                {% endfor %}
              </select>
              <div class="help-block" id="recurring-description"></div>
            </div>
            {% endif %}
            <div class="form-group">
              <label class="control-label" for="input-quantity">{{ entry_qty }}</label>
              <input type="text" name="quantity" value="{{ minimum }}" size="2" id="input-quantity" class="form-control" />
              <input type="hidden" name="product_id" value="{{ product_id }}" />
              <br />
              <button type="button" id="button-cart" data-loading-text="{{ text_loading }}" class="btn btn-primary btn-lg btn-block">{{ button_cart }}</button>
            </div>
            {% if minimum > 1 %}
            <div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ text_minimum }}</div>
            {% endif %}</div>
          {% if review_status %}
          <div class="rating">
            <p>{% for i in 1..5 %}
              {% if rating < i %}<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span>{% else %}<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>{% endif %}
              {% endfor %} <a href="" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;">{{ reviews }}</a> / <a href="" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;">{{ text_write }}</a></p>
            <hr>
            <div class="addthis_toolbox addthis_default_style" data-url="{{ share }}"><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_tweet"></a> <a class="addthis_button_pinterest_pinit"></a> <a class="addthis_counter addthis_pill_style"></a></div>
            <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-515eeaf54693130e"></script> 
          </div>
          {% endif %} </div>
      </div>
      {% if products %}
      <h3>{{ text_related }}</h3>
      <div class="row"> {% set i = 0 %}
        {% for product in products %}
        {% if column_left and column_right %}
        {% set class = 'col-xs-8 col-sm-6' %}
        {% elseif column_left or column_right %}
        {% set class = 'col-xs-6 col-md-4' %}
        {% else %}
        {% set class = 'col-xs-6 col-sm-3' %}
        {% endif %}
        <div class="{{ class }}">
          <div class="product-thumb transition">
            <div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
            <div class="caption">
              <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
              <p>{{ product.description }}</p>
              {% if product.rating %}
              <div class="rating"> {% for j in 1..5 %}
                {% if product.rating < j %} <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span> {% else %} <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span> {% endif %}
                {% endfor %} </div>
              {% endif %}
              {% if product.price %}
              <p class="price"> {% if not product.special %}
                {{ product.price }}
                {% else %} <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span> {% endif %}
                {% if product.tax %} <span class="price-tax">{{ text_tax }} {{ product.tax }}</span> {% endif %} </p>
              {% endif %} </div>
            <div class="button-group">
              <button type="button" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');"><span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span> <i class="fa fa-shopping-cart"></i></button>
              <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
              <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
            </div>
          </div>
        </div>
        {% if column_left and column_right and (i + 1) % 2 == 0 %}
        <div class="clearfix visible-md visible-sm"></div>
        {% elseif column_left or column_right and (i + 1) % 3 == 0 %}
        <div class="clearfix visible-md"></div>
        {% elseif (i + 1) % 4 == 0 %}
        <div class="clearfix visible-md"></div>
        {% endif %}
        {% set i = i + 1 %}
        {% endfor %} </div>
        {% endif %}
        {% if tags %}
        <p>{{ text_tags }}
        {% for i in 0..tags|length %}
        {% if i < (tags|length - 1) %} <a href="{{ tags[i].href }}">{{ tags[i].tag }}</a>,
        {% else %} <a href="{{ tags[i].href }}">{{ tags[i].tag }}</a> {% endif %}
        {% endfor %} </p>
        {% endif %}
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
Format