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

Отправка Ajax запроса в модуль OpenCart


Aky

Recommended Posts

Есть вот такой вот код в модуле:

Спойлер

<div id="latest">
	<div class="container-fluid wrp">
		<h3 class="huge_title">Новинки</h3>
		<div class="row">
			<div class="col-md-12 col-lg-12 col-md-offset-0 col-lg-offset-1">
				<div id="latest_slideshow" class="owl-carousel my_carousel">
					<?php for ($i = 0; $i <= count($products)-1; $i+=3) { ?>
					<div class="item">
						<?php if(array_key_exists ($i, $products)){?>
						<div class="product-layout left_item">
						<?php $product = $products[$i]?>
							<div class="product-thumb transition">
								<div class="image">
									<a href="<?php echo $product['href']; ?>">
										<img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" />
									</a>
								</div>
								<div class="caption">
									<h4>
										<a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a>
									</h4>
									<p><?php echo $product['description']; ?></p>
									<?php if ($product['price']) { ?>
									<p class="price"> 
										<?php echo $product['price']; ?>   
									</p>
									<?php } ?>
								</div>
								<div class="button-group">
									<button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>');">
										<i class="i_cart"></i>
									</button>
								</div>
							</div>
						</div>
						<?php }?>
						<?php if(array_key_exists ($i+1, $products)){?>
						<div class="product-layout center_item">
							<?php $product = $products[$i+1]?>
							<div class="product-thumb transition">
								<div class="image">
									<a href="<?php echo $product['href']; ?>">
										<img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" />
									</a>
								</div>
								<div class="caption">
									<h4>
										<a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a>
									</h4>
									<p><?php echo $product['description']; ?></p>
									<?php if ($product['price']) { ?>
									<p class="price"> 
										<?php echo $product['price']; ?> 
									</p>
									<?php } ?>
									<button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>');">
										<i class="i_cart"></i>
									</button>
								</div>
							</div>
						</div>
						<?php }?>
						<?php if(array_key_exists ($i+2, $products)){?>
						<div class="product-layout right_item">
							<?php $product = $products[$i+2]?>
							<div class="product-thumb transition">
								<div class="image">
									<a href="<?php echo $product['href']; ?>">
										<img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" />
									</a>
								</div>
								<div class="caption">
									<h4>
										<a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a>
									</h4>
									<p><?php echo $product['description']; ?></p>
									<?php if ($product['price']) { ?>
									<p class="price"> 
										<?php echo $product['price']; ?> 
									</p>
									<?php } ?>
								</div>
								<div class="button-group">
									<button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>');">
										<i class="i_cart"></i>
									</button>
								</div>
							</div>
						</div>
						<?php }?>
					</div>
					<?php } ?>

 

				</div>
			</div>
		</div>
	</div>
</div> 

 

 

Он выводит 3 товара в одной item  слайдера. 

 

Задача сделать так что бы в мобильной версии выводился только один товар в одном item.

 

Спойлер

 
<?php if( width <= 320px ){

	<?php for ($i = 0; $i <= count($products)-1; $i++) { ?>
	<div class="item">
		<?php if(array_key_exists ($i, $products)){?>
		<div class="product-layout left_item">
			<?php $product = $products[$i]?>
			<div class="product-thumb transition">
				<div class="image">
					<a href="<?php echo $product['href']; ?>">
						<img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" />
					</a>
				</div>
				<div class="caption">
					<h4>
						<a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a>
					</h4>
					<p><?php echo $product['description']; ?></p>
					<?php if ($product['price']) { ?>
					<p class="price"> 
						<?php echo $product['price']; ?>   
					</p>
					<?php } ?>
				</div>
				<div class="button-group">
					<button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>');">
						<i class="i_cart"></i>
					</button>
				</div>
			</div>
		</div>
		<?php } ?>
	</div>
	<?php } ?>

}else{
	
	//Тут код вывода трех товаров.

} ?>

 

 

Возможно ли это вообще сделать? Если да то как будет правильнее?   

 @freelancer  @fanatic

@spyOn   @AlexDW @Bn174uk @spectre @OCdevWizard @chukcha

 

Надіслати
Поділитися на інших сайтах


В owl - карусели есть опция по настройке вывода кол-ва блоков в зависимости от разрешения экрана, смотрите документацию.

Или если хотите то юзайте костыль аля:

if ($(window).width() <= 320) {
  $('#latest .item:gt(0)').hide(); 
  // или 
  $('#latest .item:gt(0)').remove();
}

 

Надіслати
Поділитися на інших сайтах

1 час назад, OCdevWizard сказал:

В owl - карусели есть опция по настройке вывода кол-ва блоков в зависимости от разрешения экрана, смотрите документацию.

Или если хотите то юзайте костыль аля:


if ($(window).width() <= 320) {
  $('#latest .item:gt(0)').hide(); 
  // или 
  $('#latest .item:gt(0)').remove();
}

 

 

Я все это знаю. 

 

Как можно сделать это правильно?  И на php, если это возможно. 

 

 

Если делать так как предлагаете вы, это нужно будет разбирать все item искать все внутренние блоки, вытаскивать их и вставлять по отдельности в новый item.

Это же заморочено не? 

Надіслати
Поділитися на інших сайтах


1 час назад, Aky сказал:

Если делать так как предлагаете вы, это нужно будет разбирать все item искать все внутренние блоки, вытаскивать их и вставлять по отдельности в новый item.

Это же заморочено не? 

$('#latest .item:gt(0)').hide();

это скрывает\удаляет все элементы кроме первого с класом .item внутри блока #latest для разрешения экрана <= 320 px

Надіслати
Поділитися на інших сайтах

48 минут назад, OCdevWizard сказал:

$('#latest .item:gt(0)').hide();

это скрывает\удаляет все элементы кроме первого с класом .item внутри блока #latest для разрешения экрана <= 320 px

 

Как найти взаимопонимание на этом форуме? 

Надіслати
Поділитися на інших сайтах


1 час назад, Aky сказал:

Как найти взаимопонимание на этом форуме? 

учить мат.часть, тогда и форум не нужен.

Надіслати
Поділитися на інших сайтах

21 минуту назад, Aky сказал:

Как найти взаимопонимание на этом форуме? 

 

1 час назад, Aky сказал:

И на php, если это возможно. 

для начала понять, что вашу задачу, лучше решать на css, js

Надіслати
Поділитися на інших сайтах

вы должны понять что использовать php для решения этой задачи - это не грамотно, нет смысла нагружать сервер хоть и небольшой но "не нужной" нагрузкой. 

css\js это все что вам нужно.

Дерзайте.

Надіслати
Поділитися на інших сайтах

11 минут назад, fanatic сказал:

 

для начала понять, что вашу задачу, лучше решать на css, js

 

Окей. Да будет так. 

 

Но сейчас там реализовано на PHP и это понятно, так как стандартный вывод товаров проходит через цикл foreach/for и через тот же php реализован вывод трех товаров вместо одного. 

 

И вы предлагаете разобрать и заново собрать слайд на мобильных устройствах  так как нужно средствами JS/CSS

 

 

 

Надіслати
Поділитися на інших сайтах


@Aky

Ну если уже приспичило прям на php пилить, сделайте 2 блока разных для десктопа и для мобайла.

Далее показывайте/скрывайте из средствами CSS в зависимости от размера экрана.

Решение так себе, но если вы прям категорически хотите копать землю топорм(php), а не лопатой(js), то сгодится вполне.

Змінено користувачем spyOn
Надіслати
Поділитися на інших сайтах


я вообще не понимаю в чем проблема.  выводим товары, в настройках  owlcarusel  задаем количество выводимых товаров для разных разрешений экрана.  или я что-то пропустил

Надіслати
Поділитися на інших сайтах

1 час назад, fanatic сказал:

я вообще не понимаю в чем проблема.  выводим товары, в настройках  owlcarusel  задаем количество выводимых товаров для разных разрешений экрана.  или я что-то пропустил

тоже самое советовал.

1 час назад, spyOn сказал:

Ну если уже приспичило прям на php пилить, сделайте 2 блока разных для десктопа и для мобайла.

не вариант, смысл два раза foreach делать.

Надіслати
Поділитися на інших сайтах

@fanatic В одной item выводится товара, вот в чем проблема. На десктопе должно быть 3 товара  в 1 item на мобильных должен быть 1 товар в 1 item

 

14 часов назад, OCdevWizard сказал:

не вариант, смысл два раза foreach делать.

 

@OCdevWizard Тоже так думаю.

Надіслати
Поділитися на інших сайтах


2 часа назад, Aky сказал:

В одной item выводится товара, вот в чем проблема. На десктопе должно быть 3 товара  в 1 item на мобильных должен быть 1 товар в 1 item

так а почему не сделать в одном item = 1 товар?

Надіслати
Поділитися на інших сайтах

3 минуты назад, OCdevWizard сказал:

так а почему не сделать в одном item = 1 товар?

На PHP ? 

 

По дизайну так. На десктопе выводить три товара. В мобилки один. 

Надіслати
Поділитися на інших сайтах


1 час назад, Aky сказал:

На PHP ? 

на html

Надіслати
Поділитися на інших сайтах

Так а причем здесь php и ajax ?

Это все настраивается в js. Например как сделанно у меня:

    var sliderBlock = $("селектор");
    if (sliderBlock.length > 0) {
        var items = 8,
            itemsDesktop = 8,
            itemsDesktopSmall = 6,
            itemsTablet = 4,
            itemsMobile = 2;
        sliderBlock.owlCarousel({
            items: items,
            itemsDesktop: [1199, itemsDesktop],
            itemsDesktopSmall: [980, itemsDesktopSmall],
            itemsTablet: [768, itemsTablet],
            itemsTabletSmall: false,
            itemsMobile: [360, itemsMobile],
            navigation: true,
            pagination: false,
            rewindNav: false,
            navigationText: ["", ""],
            scrollPerPage: true,
            slideSpeed: 500,
            beforeInit: function rtlSwapItems(el) {
                if ($("body").hasClass("rtl")) el.children().each(function (i, e) {
                    $(e).parent().prepend($(e))
                })
            },
            afterInit: function afterInit(el) {
                if ($("body").hasClass("rtl")) this.jumpTo(1000)
            }
        })
    }

В этом примере на мобильных будет 2 элемента в слайдере а на десктопе - 8.

Надіслати
Поділитися на інших сайтах


13 минут назад, vtkach сказал:

Так а причем здесь php и ajax ?

Это все настраивается в js. Например как сделанно у меня:


    var sliderBlock = $("селектор");
    if (sliderBlock.length > 0) {
        var items = 8,
            itemsDesktop = 8,
            itemsDesktopSmall = 6,
            itemsTablet = 4,
            itemsMobile = 2;
        sliderBlock.owlCarousel({
            items: items,
            itemsDesktop: [1199, itemsDesktop],
            itemsDesktopSmall: [980, itemsDesktopSmall],
            itemsTablet: [768, itemsTablet],
            itemsTabletSmall: false,
            itemsMobile: [360, itemsMobile],
            navigation: true,
            pagination: false,
            rewindNav: false,
            navigationText: ["", ""],
            scrollPerPage: true,
            slideSpeed: 500,
            beforeInit: function rtlSwapItems(el) {
                if ($("body").hasClass("rtl")) el.children().each(function (i, e) {
                    $(e).parent().prepend($(e))
                })
            },
            afterInit: function afterInit(el) {
                if ($("body").hasClass("rtl")) this.jumpTo(1000)
            }
        })
    }

В этом примере на мобильных будет 2 элемента в слайдере а на десктопе - 8.

 

Вы внимательно прочитали суть вопроса ? 

 

 

Я понимаю то что можно стандартными настройками сделать либо 1 items либо 2 items в том или ином расширении, но мне не это нужно. 

Надіслати
Поділитися на інших сайтах


9 минут назад, vtkach сказал:

зачем в item 3 товара?

чтобы листалось по 3.  но, как по мне, не вижу прикола в листании по 3 шт.

Надіслати
Поділитися на інших сайтах

3 minutes ago, fanatic said:

чтобы листалось по 3.  но, как по мне, не вижу прикола в листании по 3 шт.

Так подождите, листается как раз по "items". В том примере что я приводиле, у меня на десктопе 8 товаров выводится и листается по 8 тоже.

Наверное ТС не описал точно задачу которую ему нужно сделать и что в итоге он хочет получить.

Надіслати
Поділитися на інших сайтах


Оставил вывод 3-х товаров по умолчанию.

 

На мобильных убрал все owl-item, сделал слайд destroy, обернул все div в owl-item  и по новой инициализировал owl_carousel.  

 

Готово. 

Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
×
×
  • Створити...

Important Information

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