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

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-скриптов т.к. местами он избыточен и хаотично раскидан так как-будто его писали разные люди в разное время без ориентира на уже написанное, и добавив некоторых функций навести красоту.
  

  ответить