Dział na sklepie Presta Shop „pliki do pobrania” (bazujący na załącznikach do produktów) [Aktualizacja]

Jest to stosunkowo prosta modyfikacja, a daje nam możliwość łatwego zarządzania plikami w obrębie takiego działu na stronie. Nie wymaga także żadnego późniejszego edytowania tabelek w HTML, wgrywania plików przez edytor tekstowy i innych dość skomplikowanych kwestii informatycznych. Dodanie pliku do listy organiczna się po prostu dodaniem nowego załącznika do produktu. I tyle.

Jak zrobić taką modyfikację?

Wgranie załączników do sklepu.

Wchodzimy w dział:

Katalog -> Załączniki

Następnie poprzez przycisk „Dodaj załącznik” w górnym panelu wgrywamy pliki aby każdy z nich znalazł się na tej liście.

Tworzenie produktu z załącznikami.

Na początek tworzymy produkt – widmo, w którym będą podpięte załączniki. Nie musi on mieć żadnej ceny, zdjęć czy innych cech. Nie będzie używany do sprzedaży.

Nazwijmy go po prostu:

„Produkt z plikami do pobrania – nie usuwać!”

Widoczność ustawmy na „Nigdzie”

Następnie zapisujemy produkt, notujemy numer ID tego produktu (jest on widoczny na liście produktów) i ponownie go edytujemy.

Wchodzimy potem w dział „Załączniki” w edycji tego produktu i za pomocą poniższego panelu dodajemy pliki do listy. Kolejność kliknięć prezentuje poniższy obrazek:

Dodanie nowego załącznika na liście polega po prostu na podłączeniu nowego pliku w tym miejscu.

Utworzenie strony CMS będącej podstroną z plikami do pobrania.

W dziale:

„Preferencje -> CMS”

tworzymy nową podstronę. Nazywamy ją wg uznania. Np.

„Pliki do pobrania”

W razie potrzeby wprowadzamy tekst w treści. Np.

„To są nasze pliki do pobrania etc.”

(Będzie on widoczny nad plikami do pobrania)

Po zapisaniu podstrony włączamy ją aby była opublikowana. Następnie notujemy jej numer ID. Jest on widoczny na liście wszystkich stron w dziale „Preferencje -> CMS”.

Ostatnią kwestią związaną z tym punktem jest doczepienie tej strony CMS do odp. bloku cms. Robimy to poprzez konfigurację modułu:

Moduły -> Pole szukaj -> Block CMS -> Konfiguruj

Ewentualnie wpinamy ją w menu główne. Służą do tego rozmaite moduły. Znajdujemy je i konfigurujemy w analogiczny sposób:

Poziome menu

Mega menu

itp.

Modyfikacje programistyczne.

Gotowe, wszystkie kwestie związane z treściami mamy gotowe. Musimy teraz jednorazowo zmodyfikować kod Presta Shop, aby korzystał on z tych funkcjonalności.

Zmiany w PHP

Otwieramy plik:

controllers/front/CmsController.php

Wklejamy tam nową metodę (funkcję) pod inną funkcją:

public static function getAttachmentsStatic($id_lang, $id_product)
{
return Db::getInstance(_PS_USE_SQL_SLAVE_)->executeS('
SELECT *
FROM '._DB_PREFIX_.'product_attachment pa
LEFT JOIN '._DB_PREFIX_.'attachment a ON a.id_attachment = pa.id_attachment
LEFT JOIN '._DB_PREFIX_.'attachment_lang al ON (a.id_attachment = al.id_attachment AND al.id_lang = '.(int)$id_lang.')
WHERE pa.id_product = '.(int)$id_product);
}

W tym samym pliku znajdujemy inną metodę:

public function initContent()

Na jej początku np. pod kodem:

$this->context->smarty->assign('cgv_id', Configuration::get('PS_CONDITIONS_CMS_ID'));

Dopisujemy nasz kod:

$this->context->smarty->assign('attachments', $this->getAttachmentsStatic($this->context->language->id,123));

Gdzie 123 to ID naszego produktu (patrz wyżej)

Zmiany w szablonie

Otwieramy plik:

themes/{TWÓJ-SZABLON}/cms.tpl

gdzie „default-bootstrap” to nazwa naszego szablonu.

Pod fragmentem kodu:

{$cms->content}

Wklejamy ten kod:

{if $cms->id == '10'}
	{if isset($attachments) && $attachments}
		<div class="list-group download">
		{foreach from=$attachments item=attachment}
		<a class="list-group-item" href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html'}"><span class="fa fa-download fa-fw"></span>{$attachment.file_name|escape:'htmlall':'UTF-8'}</a> 
		{/foreach}
		</div>
	{/if}
{/if}

Gdzie 10 – to ID naszej strony CMS (patrz wyżej).

Wygląd listy z plikami (stylowanie CSS)

Napędza ją Twitter Bootstrap oraz dodatek Font Awsome.

Jednak asekuracyjnie możemy dodać poniższe jeśli nie wygląda ona atrakcyjnie. Jak wyświetlanie jest prawidłowe nie rób tego.

W pliku:

themes/{TWÓJ-SZABLON}/css/global.css

(gdzie „default-bootstrap” to nazwa naszego szablonu)

Dopisujemy reguły:

.list-group-item {
background-color: white;
border: 1px solid #dddddd;
display: block;
margin-bottom: -1px;
padding: 10px 15px;
position: relative;
}

Natomiast w pliku:

themes/{TWÓJ-SZABLON}/header.tpl

doklejamy przed znacznikiem:

</head>

Ten kod:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Gotowe!