Перейти к содержимому


Фото
- - - - -

покупка в 1 клик на странице products


Best Answer chocolate_moles , 08.10.2018 - 18:52

Это в товар

<button type="button" class="js-one-click" 
        data-name="{$product->name|escape}" 
        data-id="{$product->variant->id}" 
        data-src="{$product->image->filename|resize:200:200}">Купить в 1 клик</button>

 
Это в низ index.tpl

<style>
#oneclick-image{
    width: 100px; 
    height: 100px; 
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
</style>

<div style="display: none">
    <form id="oneclick">
        <h2>Заказ в 1 клик "<span id="oneclick-product"></span>"</h2>

        <div id="oneclick-image"></div>

        <label>Имя</label>
        <input type="text" name="name" id="oneclick-name" required>

        <label>Телефон</label>
        <input type="tel" name="phone" id="oneclick-phone" required>

        <input type="submit" value="Заказать"> 
    </form> 
</div>

<script>
    (function($){
        'use strict';
        
        var name, id, src;
        
        $('.js-one-click').on('click', function(e){
            e.preventDefault();
            
            var $btn = $(this);
            
            name = $btn.data('name');
            id = $btn.data('id');
            src = $btn.data('src');
                
            $('#oneclick-product').text(name);
            $('#oneclick-image').css('background-image', 'url(' + src + ')');

            $.fancybox('#oneclick');
        });
        
        $('#oneclick').on('submit', function(e){
            e.preventDefault();
 
            $.ajax({
                type: "post",
                url: "ajax/oneclick.php",
                data: {
                    'amount': 1, 
                    'variant': id,
                    'name': $('#oneclick-name').val(),
                    'phone': $('#oneclick-phone').val() 
                },
                dataType: 'json',
                success: function(data){
                    alert('Ok!');
                }
            });
        });
        
    })(window.jQuery);
</script>
Перейти к посту


  • Чтобы отвечать, сперва войдите на форум
12 ответов в теме

#1 Kami

Kami
  • Пользователь
  • 214 сообщений
  • Откуда:Россия

Опубликовано 08.10.2018 - 16:29

В продолжение темы 

 

http://forum.simplac...упить-в-1-клик/

 

Так и не нашел ответа как сделать чтоб на странице products работал модуль "купить в 1 клик"

 

Вариант корса 

 

http://forum.simplac...1-клик/?p=67022

 

успехов не дал.

 

 

Вопрос в следующем.

 

имеем тот же самый oneclick.php

 

выводим кнопку в цикле вывода всех товаров.

 

<a href="#oneclick"  class="button various oneclick" data-name="{$product->name}" >в 1 клик</a>

добавляем атрибут  data-name

 

			<div id="oneclick" class="window" style="display: none;">
	<div id="oneclick_name_product"></div>
	
	<ul>
		<li><span>Ваше имя:</span><input class="onename" value="" type="text"></li>
		<li><span>Телефон:</span><input class="onephone" value="" type="text"></li>
	</ul>
	
	<button type="submit" name="enter" value="1" class="oneclickbuy button">Заказать</button>
</div>
{literal}
	<script>
	$(function() {

		$(".various").fancybox({
			helpers : {
				overlay : {
					locked : false
				}
			},
			closeBtn: false,
			fitToView: false,
			autoSize: true,
			minHeight: "0",
			minWidth: "350",
			scrolling: false,
			closeClick	: false,
			openEffect	: 'fade',
			closeEffect	: 'none'
		});

		$('.oneclickbuy').click( function() {

$("#oneclick_name_product").html($(this).data('name'));
var frm=$(this).closest('form.variants')                       
if(frm.find('input[name=variant]:checked').size()>0) variant = frm.find('input[name=variant]:checked').val();
if(frm.find('select[name=variant]').size()>0) variant = frm.find('select').val();


			
			if( !$('.onename').val() || !$('.onephone').val() ) { 
				alert("Заполните все поля!");
				return false;
			}

			$.ajax({
				type: "post",
				url: "/ajax/oneclick.php",
				data: {amount: 1, variant: variant, name: $('.onename').val() , phone: $('.onephone').val() },
				dataType: 'json'
			});
			
			$('.oneclick').hide(200);
			$("#oneclick").html("<div class='title'>Спасибо за заказ!</div><p>В ближайшее время с вами свяжется наш менеджер!</p><button type='submit' class='button' onclick='$.fancybox.close();$(\".oneclick\").hide();return false;'>Закрыть!</button>");
			
			return false;
			
		});

	});
	</script>
{/literal}

 

Вопрос в следующем, почему не подтягивается наименование товара с атрибута

 

$("#oneclick_name_product").html($(this).data('name'));

и второе, думаю нужен input под hidden чтоб туда присваивать value варианта.

 

Так ли это?

 

 

В целом нужно чтоб каждый товар было возможно купить в 1 клик в каталоге.

 

Ну и интересует изображение товара подтянуть.

 

Благодарен за любые подсказки.



#2 chocolate_moles

chocolate_moles
  • Фрилансер
  • 459 сообщений
  • Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Санкт-Петербург

Опубликовано 08.10.2018 - 18:52   Best Answer

Это в товар

<button type="button" class="js-one-click" 
        data-name="{$product->name|escape}" 
        data-id="{$product->variant->id}" 
        data-src="{$product->image->filename|resize:200:200}">Купить в 1 клик</button>

 
Это в низ index.tpl

<style>
#oneclick-image{
    width: 100px; 
    height: 100px; 
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
</style>

<div style="display: none">
    <form id="oneclick">
        <h2>Заказ в 1 клик "<span id="oneclick-product"></span>"</h2>

        <div id="oneclick-image"></div>

        <label>Имя</label>
        <input type="text" name="name" id="oneclick-name" required>

        <label>Телефон</label>
        <input type="tel" name="phone" id="oneclick-phone" required>

        <input type="submit" value="Заказать"> 
    </form> 
</div>

<script>
    (function($){
        'use strict';
        
        var name, id, src;
        
        $('.js-one-click').on('click', function(e){
            e.preventDefault();
            
            var $btn = $(this);
            
            name = $btn.data('name');
            id = $btn.data('id');
            src = $btn.data('src');
                
            $('#oneclick-product').text(name);
            $('#oneclick-image').css('background-image', 'url(' + src + ')');

            $.fancybox('#oneclick');
        });
        
        $('#oneclick').on('submit', function(e){
            e.preventDefault();
 
            $.ajax({
                type: "post",
                url: "ajax/oneclick.php",
                data: {
                    'amount': 1, 
                    'variant': id,
                    'name': $('#oneclick-name').val(),
                    'phone': $('#oneclick-phone').val() 
                },
                dataType: 'json',
                success: function(data){
                    alert('Ok!');
                }
            });
        });
        
    })(window.jQuery);
</script>

Изменено: chocolate_moles, 08.10.2018 - 22:22


#3 Kami

Kami
  • Пользователь
  • 214 сообщений
  • Откуда:Россия

Опубликовано 08.10.2018 - 20:53

Это в товар

<button type="button" class="js-one-click" 
        data-name="{$product->name|escape}" 
        data-id="{$product->variant->id}" 
        data-src="{$product->image->filename|resize:200:200}">Купить в 1 клик</button>

 
Это вниз index.tpl

<form id="oneclick">
    <h2>Заказ в 1 клик</h2>

    <label>Имя</label>
    <input type="text" name="name" id="oneclick-name" required>
    <label>Телефон</label>
    <input type="text" name="phone" id="oneclick-phone" required>

    <input type="submit" value="Заказать"> 
</form> 


<script>
    (function($){
        'use strict';
        
        var name, id, src;
        
        $('.js-one-click').on('click', function(e){
            e.preventDefault();
            
            var $btn = $(this);
            
            name = $btn.data('name');
            id = $btn.data('id');
            src = $btn.data('src');
                
            $.fancybox('#oneclick');
        });
        
        $('#oneclick').on('submit', function(e){
            e.preventDefault();
 
            $.ajax({
                type: "post",
                url: "ajax/oneclick.php",
                data: {
                    'amount': 1, 
                    'variant': id,
                    'name': $('#oneclick-name').val(),
                    'phone': $('#oneclick-phone').val() 
                },
                dataType: 'json',
                success: function(data){
                    alert('Ok!');
                }
            });
        });
        
    })(window.jQuery);
</script>

 

Спасибо, а во всплывающую форму вывести изображение и заголовок товара который в данный момент приобретаем, не подскажете?



#4 Noxter

Noxter

    Simpla Developer

  • Фрилансер
  • 6 834 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Киев

Опубликовано 08.10.2018 - 21:09

Ужас! Результат кривых рук, на выходе говнокод.

#5 Kami

Kami
  • Пользователь
  • 214 сообщений
  • Откуда:Россия

Опубликовано 08.10.2018 - 21:12

Ужас! Результат кривых рук, на выходе говнокод.

 

о каком коде идет речь? о том что chocolate_moles предоставил?



#6 chocolate_moles

chocolate_moles
  • Фрилансер
  • 459 сообщений
  • Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Санкт-Петербург

Опубликовано 08.10.2018 - 21:54

Спасибо, а во всплывающую форму вывести изображение и заголовок товара который в данный момент приобретаем, не подскажете?

 

Обновил предыдущее свое сообщение



#7 Kami

Kami
  • Пользователь
  • 214 сообщений
  • Откуда:Россия

Опубликовано 08.10.2018 - 22:05

Обновил предыдущее свое сообщение

:)  Спасибо, получается если фото нет то заглушку уже не выведешь?



#8 chocolate_moles

chocolate_moles
  • Фрилансер
  • 459 сообщений
  • Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Санкт-Петербург

Опубликовано 08.10.2018 - 22:14

:)  Спасибо, получается если фото нет то заглушку уже не выведешь?

 

data-src="{$product->image->filename|resize:200:200}"

замените на

data-src="{if $product->image}{$product->image->filename|resize:200:200}{else}design/{$settings->theme|escape}/images/no-image.png{/if}"

где design/{$settings->theme|escape}/images/no-image.png путь к изображению заглушки


Изменено: chocolate_moles, 08.10.2018 - 22:16


#9 Noxter

Noxter

    Simpla Developer

  • Фрилансер
  • 6 834 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Киев

Опубликовано 09.10.2018 - 01:25


о каком коде идет речь? о том что chocolate_moles предоставил?


Да вообще подход к реализации, то бишь всё скопом.

#10 phukortsin

phukortsin
  • Пользователь
  • 594 сообщений
  • Программирование, Пользователь
  • Версия CMS:2.x
  • Откуда:Львов

Опубликовано 09.10.2018 - 10:16

Ужас! Результат кривых рук, на выходе говнокод.

 

Да вообще подход к реализации, то бишь всё скопом.

 

Если бы дело ограничивалось тем, что некрасиво запихали разнородный материал в один файл, было бы полбеды.

Но есть и более существенные недостатки.

1. При подаче заказе  возникает сначала fancybox-окно для ввода данных полкупателя, а потом поверх него еще alert-окно. И по окончании заказа, надо отдельно кликнуть для закрытия alert-окна, и отдельно кликнуть для закрытия fancybox-окна.  Для доработки под названием '1 клик' - явный перебор...

2. В текущем виде не работает правильно в случае, если у товара несколько вариантов. Надо, например, кнопку в цикле вариантов менять  примерно так:

<button type="button" ...data-id="{$v->id}" ...>Купить в 1 клик</button>

А лучше, конечно, ставить одну кнопку с соответствующей доработкой для определения варианта...



#11 DarAmal

DarAmal
  • Пользователь
  • 703 сообщений
  • Дизайн, Верстка
  • Версия CMS:2.x

Опубликовано 20.10.2018 - 21:20

Это в товар

<button type="button" class="js-one-click" 
        data-name="{$product->name|escape}" 
        data-id="{$product->variant->id}" 
        data-src="{$product->image->filename|resize:200:200}">Купить в 1 клик</button>

 
Это в низ index.tpl

<style>
#oneclick-image{
    width: 100px; 
    height: 100px; 
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
</style>

<div style="display: none">
    <form id="oneclick">
        <h2>Заказ в 1 клик "<span id="oneclick-product"></span>"</h2>

        <div id="oneclick-image"></div>

        <label>Имя</label>
        <input type="text" name="name" id="oneclick-name" required>

        <label>Телефон</label>
        <input type="tel" name="phone" id="oneclick-phone" required>

        <input type="submit" value="Заказать"> 
    </form> 
</div>

<script>
    (function($){
        'use strict';
        
        var name, id, src;
        
        $('.js-one-click').on('click', function(e){
            e.preventDefault();
            
            var $btn = $(this);
            
            name = $btn.data('name');
            id = $btn.data('id');
            src = $btn.data('src');
                
            $('#oneclick-product').text(name);
            $('#oneclick-image').css('background-image', 'url(' + src + ')');

            $.fancybox('#oneclick');
        });
        
        $('#oneclick').on('submit', function(e){
            e.preventDefault();
 
            $.ajax({
                type: "post",
                url: "ajax/oneclick.php",
                data: {
                    'amount': 1, 
                    'variant': id,
                    'name': $('#oneclick-name').val(),
                    'phone': $('#oneclick-phone').val() 
                },
                dataType: 'json',
                success: function(data){
                    alert('Ok!');
                }
            });
        });
        
    })(window.jQuery);
</script>

Спасибо за реализацию. Очень удобно.

Только вот возник вопрос. Разместил также все это на страничку товара (product.tpl) в сам товар и работает отлично.

Также на данной странице есть товары "Похожие/связанные товары", так вот когда кнопку привязываю к этим товарам, то при нажатии кнопки окошка тянет именно главный товар и только его. Получает он не видит "Связанные товары".

 

Можно ли это как-то обыграть?

 

Спасибо большое



#12 chocolate_moles

chocolate_moles
  • Фрилансер
  • 459 сообщений
  • Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Санкт-Петербург

Опубликовано 21.10.2018 - 04:45

Спасибо за реализацию. Очень удобно.

Только вот возник вопрос. Разместил также все это на страничку товара (product.tpl) в сам товар и работает отлично.

Также на данной странице есть товары "Похожие/связанные товары", так вот когда кнопку привязываю к этим товарам, то при нажатии кнопки окошка тянет именно главный товар и только его. Получает он не видит "Связанные товары".

 

Можно ли это как-то обыграть?

 

Спасибо большое

 

Скорее всего у вас для связанных товаров в коде кнопки нужно заменить $product на $related_product



#13 DarAmal

DarAmal
  • Пользователь
  • 703 сообщений
  • Дизайн, Верстка
  • Версия CMS:2.x

Опубликовано 21.10.2018 - 14:33

Скорее всего у вас для связанных товаров в коде кнопки нужно заменить $product на $related_product

Огромное спасибо. Точно помогло ))






0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых