Zobacz jak zrobić aby przyciski na Twoim sklepie były bardziej interaktywne i przyjemniejsze dla oka klientów:

Zobacz poradnik

{extends file='parent:catalog/_partials/miniatures/product.tpl'}
{block name='product_reviews'}
    {hook h='displayProductListReviews' product=$product}
    {if !$configuration.is_catalog}
        {if $product.customization_required === false}
            <form action="{$urls.pages.cart}" method="POST" class="add-to-cart-or-refresh btn-prod-list">
                <input type="hidden" name="token" value="{$static_token}">
                <input type="hidden" name="id_product" value="{$product.id}">
                <input type="hidden" name="qty" value="1">
                <button class="btn btn-primary add-to-cart" data-button-action="add-to-cart" type="submit" {if !$product.add_to_cart_url}disabled{/if}>
                    <i class="material-icons shopping_cart">shopping_cart</i>
                    <i class="material-icons shopping_cart">shopping_cart</i>
                    {l s='Add to cart' d='Shop.Theme.Actions'}
                </button>
            </form>
        {else}
            <div class="btn-prod-list">
                <a href="{$product.url}">
                    <button class="btn btn-primary add-to-cart" data-button-action="customization">
                        <i class="material-icons edit_icon">edit</i>
                        <i class="material-icons edit_icon">edit</i>
                        {l s='Customize' d='Shop.Theme.Actions'}
                    </button>
                </a>
            </div>
        {/if}
    {/if}
{/block}

.add-to-cart {
    position: relative;
    overflow: hidden;
}

button.btn.btn-primary.add-to-cart::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: -40px;
    width: 20px;
    height: 42px;
    background: rgba(255, 255, 255, .3);
    transform: skew(-26deg);
    transition: .5s;
}

button.btn.btn-primary.add-to-cart:hover::before {
    transform: translateX(-300px);
}

.add-to-cart i.shopping_cart,
.add-to-cart i.edit_icon {
    transition: .3s;
}

.add-to-cart:hover i.shopping_cart,
.add-to-cart:hover i.edit_icon {
    transform: translateY(34px);
}

i.shopping_cart:nth-child(2),
i.edit_icon:nth-child(2) {
    position: absolute;
    left: 20px;
    top: -24px;
}

{extends file='parent:catalog/_partials/product-add-to-cart.tpl'}

{block name='product_quantity'}
    <div class="product-quantity clearfix">
      <div> class="qty">
        <input
          type="number"
          name="qty"
          id="quantity_wanted"
          value="{$product.quantity_wanted}"
          class="input-group"
          min="{$product.minimal_quantity}"
          aria-label="{l s='Quantity' d='Shop.Theme.Actions'}"
        >
    </div>

    <div class="add">
        <button
          class="btn btn-primary add-to-cart"
          data-button-action="add-to-cart"
          type="submit"
          {if !$product.add_to_cart_url}
            disabled
          {/if}
        >
          <i> class="material-icons shopping_cart"></i>
          <i> class="material-icons shopping_cart"></i>
          {l s='Add to cart' d='Shop.Theme.Actions'}
        </button>
    </div>

      {hook h='displayProductActions' product=$product}
    </div>         
{/block}