Prestashop 1.6 Добавление в корзину без окна, а с анимацией

sai_NT

Постоялец
Регистрация
10 Фев 2007
Сообщения
77
Реакции
94
Ищу решение как преобразить и сделать удобней добавление в корзину товара. Считаю открытие попап-окна не юзерфрендли и хотел бы что-то наподобие флай эффекта или другую анимацию, чтобы покупателю не приходилось нажимать кнопку «Продолжить покупки».
Буду рад вашей помощи.
 
Ищу решение как преобразить и сделать удобней добавление в корзину товара. Считаю открытие попап-окна не юзерфрендли и хотел бы что-то наподобие флай эффекта или другую анимацию, чтобы покупателю не приходилось нажимать кнопку «Продолжить покупки».
Буду вашей рад помощи.
Приветствую! Посмотрите в сторону шаблона Warehouse .. Там есть возможность переключить pop-up окно на simple fly одним кликом мыши.. И покупателю не придется нажимать "Продолжить покупки"
 
Приветствую! Посмотрите в сторону шаблона Warehouse .. Там есть возможность переключить pop-up окно на simple fly одним кликом мыши..

Благодарю. Гляну демку. Но у меня есть уже шаблон и не хотел бы его менять.
 
Пересмотрел все демки и не нашел в шаблоне Warehouse анимации при добавлении в корзину.
 
Hi This option you had it in the shopping cart module
 
Для просмотра ссылки Войди или Зарегистрируйся, а чтобы автоматически в корзину добавлялось, убираете блок отвечающий за вывод окна промежуточного в шаблоне tpl корзины
 
you have to modify 2 files ( ajax-cart.js ) ( product-list.tpl )
 
я правлю только blockcart.tpl, убираю вывод layer_cart , анимация уже на любителя прикручивается
 
what theme do you use ?
 
Hi.

Test with this:

For Prestashop 1.6.1.23

Files to edit:

1º -> themes > xxxxx > product-list.tpl
2º -> themes > xxxxx > js > modules > blockcart > ajax-cart.js
3º -> themes > xxxxx > css > global.css

We proceed:

1st - Open product.list.tpl and on line 163 approximately we look for the following code:

PHP:
<span>{l s='Add to cart'}</span>

We replace it with this:

PHP:
<span onClick="this.innerHTML='{l s='-AÑADIDO-'}'; return false" onmouseout="this.innerHTML='Add to cart';">{l s='Add to cart'}</span>

Further down on line 167 we will see the same code mentioned above:

PHP:
<span>{l s='Add to cart'}</span>

We also replace it with the following:

PHP:
<span onClick="this.innerHTML='{l s='-ADD-'}'; return false" onmouseout="this.innerHTML='Add to cart';">{l s='Add to cart'}</span>

NOTE: The following part of code: {l s = '- ADDED-'} must be translated, since once the client presses the button to add to the basket, it is like the confirmation that it is added correctly.

2nd - We open ajax-cart.js and in line 329 approximately we look for the following code:

PHP:
success: function(jsonData,textStatus,jqXHR)
            {

Right below we add the following code:

PHP:
// add the picture to the cart
    var $element = $(callerElement).parent().parent().parent().find('a.product_image img,a.product_img_link img');
    if (!$element.length)
        $element = $('#bigpic');
    var $picture = $element.clone();
    var pictureOffsetOriginal = $element.offset();
    pictureOffsetOriginal.right = $(window).innerWidth() - pictureOffsetOriginal.left - $element.width();

    if ($picture.length)
    {
        $picture.css({
            position: 'absolute',
            top: pictureOffsetOriginal.top,
            right: pictureOffsetOriginal.right
        });
    }

    var pictureOffset = $picture.offset();
    var cartBlock = $('#cart_block');
    if (!$('#cart_block')[0] || !$('#cart_block').offset().top || !$('#cart_block').offset().left)
        cartBlock = $(parent.document).find('.shopping_cart');
    var cartBlockOffset = cartBlock.offset();
    cartBlockOffset.right = $(window).innerWidth() - cartBlockOffset.left - cartBlock.width();

    // Check if the block cart is activated for the animation
    if (cartBlockOffset != undefined && $picture.length)
    {
        $picture.appendTo('body');
        $picture
            .css({
                position: 'absolute',
                top: pictureOffsetOriginal.top,
                right: pictureOffsetOriginal.right,
                zIndex: 9999
            })
            .animate({
                width: $element.attr('width')*0.66,
                height: $element.attr('height')*0.66,
                opacity: 0.2,
                top: cartBlockOffset.top + 30,
                right: cartBlockOffset.right + 15
            }, 1000)
            .fadeOut(100, function() {
                ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
                $(this).remove();
            });
    }

3rd - Open the global.css file and at the end add the following code:

PHP:
#layer_cart, .layer_cart_overlay {
display: none! important;
}

To finish, we cleaned the browser cache, cleaned the prestashop smarty cache and it should work correctly.

The edited files are attached.
 

Вложения

  • fly2cart.zip
    46,9 KB · Просмотры: 11
Последнее редактирование:
Назад
Сверху