Перейти к содержанию
Официальный форум поддержки Simpla

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


Перейти к решению Решено chocolate_moles,

Рекомендуемые сообщения

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

 

http://forum.simplacms.ru/topic/8892-%D0%BA%D1%83%D0%BF%D0%B8%D1%82%D1%8C-%D0%B2-1-%D0%BA%D0%BB%D0%B8%D0%BA/

 

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

 

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

 

http://forum.simplacms.ru/topic/8892-купить-в-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 клик в каталоге.

 

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

 

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

Ссылка на сообщение
Поделиться на другие сайты
  • Решение

Это в товар

<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
Ссылка на сообщение
Поделиться на другие сайты

 

Это в товар

<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>

 

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

Ссылка на сообщение
Поделиться на другие сайты

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

 

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

Ссылка на сообщение
Поделиться на другие сайты

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

 

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

Ссылка на сообщение
Поделиться на другие сайты

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

 

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
Ссылка на сообщение
Поделиться на другие сайты

 

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

 

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

 

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

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

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

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

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

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

Ссылка на сообщение
Поделиться на другие сайты
  • 2 недели спустя...

 

Это в товар

<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) в сам товар и работает отлично.

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

 

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

 

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

Ссылка на сообщение
Поделиться на другие сайты

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

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

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

 

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

 

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

 

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

Ссылка на сообщение
Поделиться на другие сайты

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

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

Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...