Jump to content
Sign in to follow this  
btrotsky

Слайдер в карточке товара

Recommended Posts

Помогите пожалуйста сделать слайдер в карточке товара, чтобы было как вот на этом сайте https://bi.ua/rus/product/nabor-dlya-lepki-addo-ready-steady-dough-vesele-318-13121-n.html

 

Есть у меня код карточки товара

Спойлер
{{ header }}

<style>
.product-layouts.viewed {
    width: 24%;
    display: inline-block;
}
</style>

<div id="product-product" class="container product-product">
  <ul class="breadcrumb" style="float: left;">
    {% 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 }}
	<p class="page-title" style="display: none;">{{ heading_title }} </p>
	  <!-- Product row START -->
      <div class="row">
	  {% if column_left and column_right %}
	    {% set class = 'col-sm-9' %}
	  {% elseif column_left or column_right %}
        {% set class = 'col-sm-9' %}
      {% else %}
        {% set class = 'col-xs-12 col-sm-9 col-md-9' %}
      {% endif %}
	  	<div class="product-block">
        <div class="{{ class }} product-images">
		{% if thumb or images %}
		  <!-- Product Image thumbnails START -->
          <div class="thumbnails">
            {% if thumb %}
            <div class="product-image">
			  <a class="thumbnail" href="{{ popup }}" title="{{ heading_title }}">
			  <img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" />
			  {% if special %}
				 <span class="product-sale-icon">Sale</span>
				 <span class="product-percent">-{{ product_percent }}%</span>
			  {% endif %}
			  </a>
			</div>
            {% endif %}
			
		  <div class="additional-images-container">
            {% if images %}
			<div class="additional-images">
            {% for image in images %}
            <div class="image-additional">
			<a class="thumbnail" href="{{ image.popup }}" title="{{ heading_title }}"> 
				<img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" />
			</a>
			</div>
            {% endfor %}
			</div>
            {% endif %}
		  </div>
		  <!-- Product Image thumbnails END -->
		  </div>
        {% endif %}
        </div>
<script type="text/javascript">
$(".additional-images").owlCarousel({
	items: 3,
	itemsDesktop: [1199,2],
	itemsDesktopSmall: [991,2],
	itemsTablet: [767,3],
	itemsMobile: [480,2],
	autoPlay: false,
	navigation: true,
	pagination: false
});

// Custom Navigation Events
$(".additional-next").click(function(){
	$(".additional-images").trigger('owl.next');
})
$(".additional-prev").click(function(){
	$(".additional-images").trigger('owl.prev');
})
$(".additional-images-container .customNavigation").addClass('owl-navigation');

</script>
		{% if column_left and column_right %}
		{% set class = 'col-sm-3' %}
        {% elseif column_left or column_right %}
        {% set class = 'col-sm-3' %}
        {% else %}
        {% set class = 'col-xs-12 col-sm-3 col-md-3' %}
        {% endif %}
        <div class="{{ class }} product-details">
		<h1 class="product-name">{{ heading_title }}</h1>
		
		<table class="product-info">
            {% if manufacturer %}
            <tr><td>{{ text_manufacturer }}</td><td class="product-info-value"><a href="{{ manufacturers }}">{{ manufacturer }}</a></td></tr>
            {% endif %}
            <tr><td>{{ text_model }}</td><td class="product-info-value">{{ model }}</td></tr>
            {% if reward %}
            <tr><td>{{ text_reward }}</td><td class="product-info-value">{{ reward }}</td></tr>
            {% endif %}
            <tr><td>{{ text_stock }}</td><td class="product-info-value">{{ stock }}</td></tr>
          </table>

		  <!-- Product Rating START -->
          {% if review_status %}
		  <div class="rating">
          <div class="product-rating">
			{% for i in 1..5 %}
              {% if rating < i %}
			    <span class="fa fa-stack"><i class="fa fa-star off fa-stack-1x"></i></span>
			  {% else %}
			    <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i></span>
			  {% endif %}
            {% endfor %}
          </div>
		  <a class="product-total-review" href="" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;"><i class="fa fa-comment"></i>{{ reviews }}</a>
			<a class="product-write-review" href="" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;"><i class="fa fa-pencil"></i>{{ text_write }}</a>
		  </div>
          {% endif %}
		  <!-- Product Rating END -->

          {% if price %}
          <ul class="list-unstyled product-price">
            {% if not special %}
            <li>
              <h2>{{ price }}</h2>
            </li>
            {% else %}
			<li>
              <h2 class="price-new">{{ special }}</h2>
            </li>
            <li><span class="price-old">{{ price }}</span></li>
            {% endif %}
			{% if tax %}
            <li class="product-tax">{{ text_tax }} {{ tax }}</li>
            {% endif %}
			
            {% if points %}
            <li class="product-reward-points">{{ text_points }} {{ points }}</li>
            {% endif %}
			
            {% if discounts %}
            <li>
			<ul class="product-discounts">
				{% for discount in discounts %}
				<li>{{ discount.quantity }}{{ text_discount }}{{ discount.price }}</li>
				{% endfor %}
			</ul>
			</li>
            {% endif %}
          </ul>
          {% endif %}

		  <!-- Product Options START -->
          <div id="product" class="product-options">
		  {% if options %}
            <h3>{{ text_option }}</h3>
            {% for option in options %}
            {% if option.type == 'select' %}
            <div class="form-group{% 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>
                {% 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 class="form-group{% if option.required %} required {% endif %}">
              <label class="control-label">{{ option.name }}</label>
              <div id="input-option{{ option.product_option_id }}"> 
			  	{% for option_value in option.product_option_value %}
                <div class="radio">
                  <label>
                    <input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" />
                    {% 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 == 'checkbox' %}
            <div class="form-group{% if option.required %} required {% endif %}">
              <label class="control-label">{{ option.name }}</label>
              <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 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 class="form-group{% if option.required %} required {% endif %}">
              <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
              <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" placeholder="{{ option.name }}" id="input-option{{ option.product_option_id }}" class="form-control" />
            </div>
            {% endif %}
			
            {% if option.type == 'textarea' %}
            <div class="form-group{% 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 class="form-group{% 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 class="form-group{% 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 class="form-group{% 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 class="form-group{% 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 %}
			
            {% endfor %}
            {% endif %}
			
            {% if recurrings %}
            <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 product-quantity">
              <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 }}" />
              <button type="button" id="button-cart" data-loading-text="{{ text_loading }}" class="btn {% if stock_quantity<=0 %} {{ "btn-info" }} {% else %} btn-primary {% endif %} btn-lg btn-block" {% if stock_quantity<=0 %} {{ "disabled" }} {% endif %}>
			  {% if stock_quantity<=0 %} {{ stock }} {% else %}{{ button_cart }} {% endif %}</button>
            </div>
            {% if minimum > 1 %}
            <div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ text_minimum }}</div>
            {% endif %}
			</div>
		  <!-- Product Options END -->

		  <!-- Product Wishlist Compare START -->
          <div class="btn-group">
            <button class="btn btn-default product-btn-wishlist" type="button" class="btn btn-default" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product_id }}');"><i class="fa fa-heart"></i>
			{{ button_wishlist }} 
			</button> 
            <button class="btn btn-default product-btn-compare" type="button" class="btn btn-default" title="{{ button_compare }}" onclick="compare.add('{{ product_id }}');"><i class="fa fa-exchange"></i>
			{{ button_compare }}
			</button>
          </div>
		  <!-- Product Wishlist Compare END -->
			

            <!-- AddThis Button BEGIN -->
            <!--<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> 
            <!-- AddThis Button END --> 
		 </div>
		 <!-- Product option details END -->
		 </div>
		  </div>  <!-- Product row END -->
		 <!-- Product nav Tabs START -->
		  <div class="col-sm-12 product-tabs">
          <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 class="li-tab-review"><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>
                <p>{{ text_write }}</p>
                {% 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>
		  <!-- Product tab END -->
		   <!-- Related products START -->
		  {% if products %}
		  <div class="related-carousel products-list">
		  <div class="box-heading"><p>{{ text_related }}</p></div>
		  <div class="related-items products-carousel row">
			{% set i = 0 %}
			{% for product in products %}
			<div class="product-layouts">
			  <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>
				{% if product.special %}
				<div class="sale-icon">Sale</div>
				<span class="percent">-{{ product.percent }}%</span>
				{% endif %}
				</div>
	
				<div class="thumb-description">
					<div class="caption">
					  <p><a href="{{ product.href }}">{{ product.name }}</a></p>
					  {% if product.rating %}
						<div class="rating">
						  {% for i in 1..5 %}
						  {% if product.rating < i %}
						  <span class="fa fa-stack"><i class="fa fa-star off fa-stack-2x"></i></span>
						  {% else %}
						  <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>
						  {% endif %}
						   {% endfor %}
						</div>
						{% endif %}

					    <p class="description">{{ product.description }}</p>
						{% if product.price %}
						  <div 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 %}
						  </div>
						{% endif %}
					  
					  </div>
												
						<div class="button-group">
						  <button class="btn-cart {% if product.product_quantity<=0 %} {{ "disabled" }} {% endif %}" type="button" title="{% if product.product_quantity <=0 %}{{ product.product_stock }}{% else %}{{ button_cart }}{% endif %}" onclick="{% if product.product_quantity <=0 %}{% else %}cart.add('{{ product.product_id }}'){% endif %}"{% if product.product_quantity <=0 %}{{ "" }} {% endif %}>
						 {% if product.product_quantity <=0 %}
							{{ "<i class=\"fa fa-shopping-cart\"></i><span class=\"out of stock\">"~product.product_stock }}
							{% else %} 
							{{ "<i class=\"fa fa-shopping-cart\"></i> <span class=\"hidden-xs hidden-sm hidden-md\">"~button_cart }}
						{% endif %}
						</span></button>
						<button class="btn-wishlist" title="{{ button_wishlist }}"  onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i>
							<span title="{{ button_wishlist }}">{{ button_wishlist }}</span>
						</button>
						<button class="btn-compare" title="{{ button_compare }}"  onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i>
							<span title="{{ button_compare }}">{{ button_compare }}</span>
						</button>
						<button class="btn-quickview" type="button" title="{{ button_quickview }}" onclick="tt_quickview.ajaxView('{{ product.href }}')"><i class="fa fa-eye"></i>
				<span title="{{ button_quickview }}">{{ button_quickview }}</span>
				</button>
						</div>
				</div>
					
				</div>
			</div>
			{% endfor %}
		  </div>
		  </div>
		  {% endif %}
	  	  <!-- Related products END -->
	  </div>  <!-- id content END -->

      {% 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 }}
    {{ column_right }}
</div>
</div>

<script type="text/javascript"><!--
$('select[name=\'recurring_id\'], input[name="quantity"]').change(function(){
	$.ajax({
		url: 'index.php?route=product/product/getRecurringDescription',
		type: 'post',
		data: $('input[name=\'product_id\'], input[name=\'quantity\'], select[name=\'recurring_id\']'),
		dataType: 'json',
		beforeSend: function() {
			$('#recurring-description').html('');
		},
		success: function(json) {
			$('.alert-dismissible, .text-danger').remove();

			if (json['success']) {
				$('#recurring-description').html(json['success']);
			}
		}
	});
});
//--></script> 
<script type="text/javascript"><!--
	$('#button-cart').on('click', function() {
	$.ajax({
		url: 'index.php?route=checkout/cart/add',
		type: 'post',
		data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
		dataType: 'json',
		beforeSend: function() {
			$('#button-cart').button('loading');
		},
		complete: function() {
			$('#button-cart').button('reset');
		},
		success: function(json) {
			$('.alert-dismissible, .text-danger').remove();
			$('.form-group').removeClass('has-error');

			if (json['error']) {
				if (json['error']['option']) {
					for (i in json['error']['option']) {
						var element = $('#input-option' + i.replace('_', '-'));

						if (element.parent().hasClass('input-group')) {
							element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
						} else {
							element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
						}
					}
				}

				if (json['error']['recurring']) {
					$('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
				}

				// Highlight any found errors
				$('.text-danger').parent().addClass('has-error');
			}

			if (json['success']) {
				     $.notify({
				     	message: json['success'],
				     	target: '_blank'
				     },{
				     	// settings
				     	element: 'body',
				     	position: null,
				     	type: "info",
				     	allow_dismiss: true,
				     	newest_on_top: false,
				     	placement: {
				     		from: "top",
				     		align: "right"
				     	},
				     	offset: 20,
				     	spacing: 10,
				     	z_index: 2031,
				     	delay: 5000,
				     	timer: 1000,
				     	url_target: '_blank',
				     	mouse_over: null,
				     	animate: {
				     		enter: 'animated fadeInDown',
				     		exit: 'animated fadeOutUp'
				     	},
				     	onShow: null,
				     	onShown: null,
				     	onClose: null,
				     	onClosed: null,
				     	icon_type: 'class',
				     	template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-success" role="alert">' +
				     		'<button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button>' +
				     		'<span data-notify="message"><i class="fa fa-check-circle"></i>&nbsp; {2}</span>' +
				     		'<div class="progress" data-notify="progressbar">' +
				     			'<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
				     		'</div>' +
				     		'<a href="{3}" target="{4}" data-notify="url"></a>' +
				     	'</div>' 
				     });
					 
					 // Need to set timeout otherwise it wont update the total
					setTimeout(function () {
						$('#cart > button').html('<i class="fa fa-shopping-cart"></i><span class="cart-heading">Cart</span><span id="cart-total"> ' + json['total'] + '</span>');
					}, 100);
				     					
					$('#cart > ul').load('index.php?route=common/cart/info ul li');
				}
		},
        error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
	});
});
//--></script> 
<script type="text/javascript"><!--
$('.date').datetimepicker({
	language: '{{ datepicker }}',
	pickTime: false
});

$('.datetime').datetimepicker({
	language: '{{ datepicker }}',
	pickDate: true,
	pickTime: true
});

$('.time').datetimepicker({
	language: '{{ datepicker }}',
	pickDate: false
});

$('button[id^=\'button-upload\']').on('click', function() {
	var node = this;

	$('#form-upload').remove();

	$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');

	$('#form-upload input[name=\'file\']').trigger('click');

	if (typeof timer != 'undefined') {
    	clearInterval(timer);
	}

	timer = setInterval(function() {
		if ($('#form-upload input[name=\'file\']').val() != '') {
			clearInterval(timer);

			$.ajax({
				url: 'index.php?route=tool/upload',
				type: 'post',
				dataType: 'json',
				data: new FormData($('#form-upload')[0]),
				cache: false,
				contentType: false,
				processData: false,
				beforeSend: function() {
					$(node).button('loading');
				},
				complete: function() {
					$(node).button('reset');
				},
				success: function(json) {
					$('.text-danger').remove();

					if (json['error']) {
						$(node).parent().find('input').after('<div class="text-danger">' + json['error'] + '</div>');
					}

					if (json['success']) {
						alert(json['success']);

						$(node).parent().find('input').val(json['code']);
					}
				},
				error: function(xhr, ajaxOptions, thrownError) {
					alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
				}
			});
		}
	}, 500);
});
//--></script> 
<script type="text/javascript"><!--
$('#review').delegate('.pagination a', 'click', function(e) {
    e.preventDefault();

    $('#review').fadeOut('slow');

    $('#review').load(this.href);

    $('#review').fadeIn('slow');
});

$('#review').load('index.php?route=product/product/review&product_id={{ product_id }}');

$('#button-review').on('click', function() {
	$.ajax({
		url: 'index.php?route=product/product/write&product_id={{ product_id }}',
		type: 'post',
		dataType: 'json',
		data: $("#form-review").serialize(),
		beforeSend: function() {
			$('#button-review').button('loading');
		},
		complete: function() {
			$('#button-review').button('reset');
		},
		success: function(json) {
			$('.alert-dismissible').remove();

			if (json['error']) {
				$('#review').after('<div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
			}

			if (json['success']) {
				$('#review').after('<div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');
				$('input[name=\'name\']').val('');
				$('textarea[name=\'text\']').val('');
				$('input[name=\'rating\']:checked').prop('checked', false);
			}
		}
	});
});

$(document).ready(function() {

if(window.location.hash.substr(1)=='tab-review') {
	$('.nav.nav-tabs > li.li-tab-review a').trigger('click');
	$('html, body').animate({
        scrollTop: $(".product-tabs").offset().top
    }, 2000);
}

$('.thumbnails').magnificPopup({
		type:'image',
		delegate: 'a',
		gallery: {
			enabled: true
		}
	});

$(".product-write-review,.product-total-review").click(function() {
    $('html, body').animate({
        scrollTop: $(".product-tabs").offset().top
    }, 2000);
});

});
//--></script> 
{{ footer }} 

 

 

И есть модификатор который может это реализовать, но я никак не могу подставить правильно все и не получается

 

Спойлер
<?xml version="1.0" encoding="UTF-8"?>
<modification>
	<name>Carousel Product Image</name>
	<code>carousel_img</code>
	<version>3</version>
	<author>Ravilr forum.myopencart.com</author>
	<author_original>GreekOC \ Ален</author_original>
	
	<file path="catalog/view/theme/*/template/product/product.twig">


		<operation>
			<search><![CDATA[<ul class="thumbnails">]]></search>
			<add position="replace" offset="9"><![CDATA[]]></add>
		</operation>
		
		
		<operation>
			<search><![CDATA[<div class="{{ class }}"> {% if thumb or images %}]]></search>
			<add position="after"><![CDATA[
			<div class="swiper-viewport">
				<div class="swiper-container">
					<div class="swiper-wrapper">
					{% if thumb %}
					<div class="swiper-slide"><a class="thumbnail" href="{{ popup }}" title="{{ heading_title }}"><img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></div>
					{% endif %}

					{% if images %}
					{% for image in images %}
					<div class="swiper-slide"><a class="thumbnail" href="{{ image.popup }}" title="{{ heading_title }}"> <img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></div>
					{% endfor %}
					{% endif %}
					</div>
				</div>
				<div class="swiper-pager">
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
				</div>
			</div>
			]]></add>
		</operation>

		<operation>
			<search><![CDATA[$(document).ready(function() {]]></search>
			<add position="before"><![CDATA[
			$('.swiper-container').swiper({
				mode: 'horizontal',
				slidesPerView: 1,
				pagination: '.swiper-pagination',
				paginationClickable: true,
				nextButton: '.swiper-button-next',
				prevButton: '.swiper-button-prev',
				spaceBetween: 30,
				autoplay: 2500,
				autoplayDisableOnInteraction: true,
				loop: true
			});
			
			$(document).ready(function() {
				$('.swiper-container').magnificPopup({
					type:'image',
					delegate: 'a',
					gallery: {
						enabled: true
					}
				});
			});
			]]>
			</add>
		</operation>
		
	</file>
	
	<file path="catalog/controller/product/product.php">
		<operation>
			<search><![CDATA[$this->document->addScript('catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.js');]]></search>
			<add position="after"><![CDATA[
			$this->document->addStyle('catalog/view/javascript/jquery/swiper/css/swiper.min.css');
			$this->document->addStyle('catalog/view/javascript/jquery/swiper/css/opencart.css');
			$this->document->addScript('catalog/view/javascript/jquery/swiper/js/swiper.jquery.js');
			]]></add>
		</operation>
	</file> 
	
</modification>

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.