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

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:
{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;
}
1Komentarze
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?