Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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

btrotsky

Автор: ,
в Opencart 3.x: Загальні питання

 Share

Recommended Posts

btrotsky Proficient

btrotsky

Опубліковано:
Опубліковано:

Помогите пожалуйста сделать слайдер в карточке товара, чтобы было как вот на этом сайте 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
Перейти до списку тем

  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду