Кнопка "добавить в корзину" в каталоге товаров

Работаю с самописным шаблоном. На данный момент кнопка "в корзину" есть только в карточке товара. Нужно добавить эту кнопку в каталоге товаров. Пожалуйста, подскажите какой код нужно вставить в файл list-tumbs, чтобы эта кнопка работала? Код кнопки из карточки товара не работает.  В карточке товара это реализовано так: 

<div class="col-sm-6 pad-0">
<div class="ticket1-button-wrap ticket1-button-wrap1">
<input type="hidden" name="product_id" value="{$product.id}">
<button class="btn" type="submit">
Купить
</button>
</div>
</div>

Скрипт с файла product.js:


2 ответа

  • 1
    Алексей Webasyst 9 ноября 2018 13:00 #

    Установите рядом шаблон default и посмотрите в нём реализацию подобного.

  • 1
    replicant 9 ноября 2018 13:20 #

    Вот пример на основе default

    list-thumbs.html

    <div itemprop="offers" class="offers" itemscope itemtype="http://schema.org/Offer">
                {if $available}
                    <form class="purchase addtocart" {if $p.sku_count > 1}data-url="{$p.frontend_url}{if strpos($p.frontend_url, '?')}&{else}?{/if}cart=1"{/if} method="post" action="{$wa->getUrl('shop/frontendCart/add')}">
                        <div class="pricing">
                            {if $p.compare_price > 0}<span class="compare-at-price nowrap"> {shop_currency($p.compare_price)}</span> {/if}
                            <span class="price nowrap">{shop_currency($p.price)}</span>
                            <meta itemprop="price" content="{shop_currency($p.price, null, null, 0)}">
                            <meta itemprop="priceCurrency" content="{$wa->shop->currency()}">
                        </div>
                        <input type="hidden" name="product_id" value="{$p.id}">
                        {if $p.sku_count < 2}
                        <span class="qty">
                            <div class="minus"></div>
                            <input type="number" class="quantity-num" step="1" max="{$p.count}" size="3" min="1" name="quantity" value="1" />
                            <div class="plus"></div>
                        </span>
                        {/if}
                        <input type="submit" value="{$add2cart_label}">
                    <i class="adding2cart"></i>
                    <span class="added2cart" style="display: none;">товар добавлен в<br><a href="{$wa->getUrl('shop/frontend/cart')}">корзину покупок</a></span>
                    </form>
                    <link itemprop="availability" href="http://schema.org/InStock" />
                {else}
                    <span class="price nowrap">{shop_currency($p.price)}</span>
                    <meta itemprop="price" content="{shop_currency($p.price, null, null, 0)}">
                    <meta itemprop="priceCurrency" content="{$wa->shop->currency()}">
                    <div class="out-of-stock"><span>под заказ по телефону <a href="tel:+0 000 000-0000">+0 000 000-0000</a></span></div>
                    <link itemprop="availability" href="http://schema.org/OutOfStock" />
                {/if}
            </div>

    shop.js

    /* ADD TO CART */
    $('main.maincontent .container').on('submit','.product-list form.addtocart',function(){var f=$(this);f.find('.adding2cart').show();if(f.data('url')){var d=$('#dialog');var c=d.find('.cart');c.load(f.data('url'),function(){f.find('.adding2cart').hide();c.prepend('<a href="#" class="dialog-close">&times;</a>');d.show()});return!1}
    $.post(f.attr('action')+'?html=1',f.serialize(),function(response){f.find('.adding2cart').hide();if(response.status=='ok'){var cart_total=$(".cart-total");cart_total.closest('#cart').removeClass('empty');if(MatchMedia("only screen and (max-width: 760px)")){f.find('input[type="submit"]').hide();f.find('input[type="button"]').hide();f.find('span.qty').hide();f.find('span.added2cart').show();setTimeout(function(){f.find('input[type="submit"]').show();f.find('input[type="button"]').show();f.find('span.qty').show();f.find('span.added2cart').hide()},2600);cart_total.html(response.data.total);$('.cart-count').html(response.data.count)}else{f.find('input[type="submit"]').hide();f.find('input[type="button"]').hide();f.find('span.qty').hide();f.find('span.added2cart').show();setTimeout(function(){f.find('input[type="submit"]').show();f.find('input[type="button"]').show();f.find('span.qty').show();f.find('span.added2cart').hide()},2600);var origin=f.closest('form');var block=$('<div></div>').append(origin.html());block.css({'z-index':100500,background:'#fff',top:origin.offset().top,left:origin.offset().left,width:origin.width()+'px',height:origin.height()+'px',position:'absolute',overflow:'hidden'}).appendTo('body').css({'border':'1px solid #eee','padding':'20px','background':'#fff'}).animate({top:cart_total.offset().top,left:cart_total.offset().left,width:'10px',height:'10px',opacity:0.6},300,function(){$(this).remove();cart_total.html(response.data.total);$('.cart-count').html(response.data.count)})}}else if(response.status=='fail'){alert(response.errors)}},"json");return!1})

    Или, как выше сказал Алексей, подглядывайте в default смелее. Изобретать велосипед похвально, но долго и делать это стоит лишь в обучающих целях. На основе default можно сделать очень неплохую тему дизайна. Оптимизировать код js-скриптов т.к. местами он избыточен и хаотично раскидан так как-будто его писали разные люди в разное время без ориентира на уже написанное, и добавив некоторых функций навести красоту.

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите