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

[sai_NT]

Ищу решение как преобразить и сделать удобней добавление в корзину товара. Считаю открытие попап-окна не юзерфрендли и хотел бы что-то наподобие флай эффекта или другую анимацию, чтобы покупателю не приходилось нажимать кнопку «Продолжить покупки».
Буду рад вашей помощи.

 

[vitos1401]

Ищу решение как преобразить и сделать удобней добавление в корзину товара. Считаю открытие попап-окна не юзерфрендли и хотел бы что-то наподобие флай эффекта или другую анимацию, чтобы покупателю не приходилось нажимать кнопку «Продолжить покупки».
Буду вашей рад помощи.

Приветствую! Посмотрите в сторону шаблона Warehouse .. Там есть возможность переключить pop-up окно на simple fly одним кликом мыши.. И покупателю не придется нажимать "Продолжить покупки"

 

[sai_NT]

Приветствую! Посмотрите в сторону шаблона Warehouse .. Там есть возможность переключить pop-up окно на simple fly одним кликом мыши..

Благодарю. Гляну демку. Но у меня есть уже шаблон и не хотел бы его менять.

 

[sai_NT]

Пересмотрел все демки и не нашел в шаблоне Warehouse анимации при добавлении в корзину.

 

[zen1]

Hi This option you had it in the shopping cart module

 

[Belena27089]

Для просмотра ссылки Войди или Зарегистрируйся, а чтобы автоматически в корзину добавлялось, убираете блок отвечающий за вывод окна промежуточного в шаблоне tpl корзины

 

[zen1]

you have to modify 2 files ( ajax-cart.js ) ( product-list.tpl )

 

[Belena27089]

я правлю только blockcart.tpl, убираю вывод layer_cart , анимация уже на любителя прикручивается

 

[zen1]

what theme do you use ?

 

[Freiserk]

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:

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

We replace it with this:

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

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

We also replace it with the following:

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

success: function(jsonData,textStatus,jqXHR)
            {

Right below we add the following code:

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

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