Tworzymy przycisk Dodaj do koszyka
   16/08/2021 09:00:00    Komentarze 1
Tworzymy przycisk Dodaj do koszyka

Poradnik pokazuje jak dodać na listingach produktów przycisk dodaj do koszyka w Twoim sklepie PrestaShop 1.7 jest to prosta modyfikacja z którą poradzi sobie każdy więc zapraszam do poradnika:

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}

#products .thumbnail-container,
.featured-products .thumbnail-container,
.product-accessories .thumbnail-container,
.product-miniature .thumbnail-container {
    height: 360px;
}

#products .thumbnail-container .product-thumbnail img,
.featured-products .thumbnail-container .product-thumbnail img,
.product-accessories .thumbnail-container .product-thumbnail img,
.product-miniature .thumbnail-container .product-thumbnail img {
    margin: 0;
}

#products .product-description,
.featured-products .product-description,
.product-accessories .product-description,
.product-miniature .product-description {
    height: 112px;
}

#products .highlighted-informations,
.featured-products .highlighted-informations,
.product-accessories .highlighted-informations,
.product-miniature .highlighted-informations {
    height: calc(42px + 3.125rem);
}

.btn-prod-list {
    display: flex;
    justify-content: center;
    align-items: center;
}

Komentarze ()

1Komentarze

    • Avatar
      Michał

      Witam,
      mam pytanie, wykonałem wszystko jak w Pana instrukcji niestety na urządzeniach mobilnych przycisk nie mieści się i wygląda to słabo.
      Tak miało być czy coś przeoczyłem?

      cze 9, 2022

Zostaw komentarz