Przycisk Dodaj do koszyka na stronie głównej.

PrestaShop to popularny system e-commerce, który umożliwia łatwe zarządzanie sklepem internetowym. Jednym z kluczowych elementów sklepu internetowego jest przycisk "Dodaj do koszyka", który pozwala klientom dodawać produkty do swojego koszyka. W tym artykule omówimy, jak dodać przycisk "Dodaj do koszyka" na stronie głównej w PrestaShop.

Krok 1: Przygotowanie pliku .tpl Pierwszym krokiem jest przygotowanie pliku .tpl, który zawiera kod HTML i szablon dla przycisku "Dodaj do koszyka". Plik ten można przygotować w edytorze tekstowym lub w edytorze WYSIWYG.

Kod HTML dla przycisku "Dodaj do koszyka" może wyglądać następująco:

<form action="{$link->getPageLink('cart')}" method="post">
    <input type="hidden" name="controller" value="cart" />
    <input type="hidden" name="add" value="1" />
    <input type="hidden" name="id_product" value="{$product.id_product}" />
    <input type="hidden" name="token" value="{$static_token}" />
    <button type="submit" class="btn btn-default add-to-cart">Dodaj do koszyka</button>
</form>

W tym kodzie używamy zmiennej {$link->getPageLink('cart')} jako adresu URL dla formularza. Zmienna ta jest zdefiniowana w PrestaShop i jest automatycznie przypisywana do strony koszyka. Wszystkie pozostałe zmienne są dynamicznie wyświetlane dla każdego produktu.

Krok 2: Dodaj przycisk "Dodaj do koszyka" na stronie głównej Po przygotowaniu pliku .tpl, należy umieścić kod HTML na stronie głównej. Można to zrobić, edytując plik homefeatured.tpl, który jest odpowiedzialny za wyświetlanie produktów na stronie głównej.

Aby dodać przycisk "Dodaj do koszyka" na stronie głównej, należy dodać kod HTML do bloku pętli:

{foreach from=$homeFeaturedProducts item=product name=homeFeaturedProducts}
    <div class="product-container">
        <div class="product-image-container">
            <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link">
                <img src="{$product.cover.bySize.home_default.url}" alt="{$product.name|escape:'htmlall':'UTF-8'}" class="homefeatured-product-image" />
            </a>
        </div>
        <h5 itemprop="name" class="product-name">
            <a href="{$product.link|escape:'htmlall':'UTF-8'}">{$product.name|truncate:30:'...'}</a>
        </h5>
        <div class="product-price-and-shipping">
            {if $product.show_price}
                <span class="price">{$product.price}</span>
            {/if}
            <a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View' mod