Code Monkey home page Code Monkey logo

prestashop-product-files's Introduction

Prestashop Product Files

Minimum PHP Version Minimum Prestashop Version GitHub release

Presentation

An easy way to attach files and documents to the product (multi-languages, multi-shops).

  • Add files to the product in the admin. Multi-shops and multi-languages compatible.
  • Display files on the frontend with a widget.

Product files in admin

Frontedn widget files display

Requirements

  • Prestashop >= 1.7.6.0
  • PHP >= 7.2.0

Installation

Download the pixel_product_files.zip file from the last release assets.

Admin

Go to the admin module catalog section and click Upload a module. Select the downloaded zip file.

Manually

Move the downloaded file in the Prestashop modules directory and unzip the archive. Go to the admin module catalog section and search for "File".

Configuration

Admin

On the product page in admin, select "Modules", then "Configure" for the "Product Files" module.

Product files

Click "Add a file" to attach a file to the product.

When the shop is multi-shops or multi-languages, the file will be assigned to the current shop in the current language, except if the "Available in all shops/languages" option is checked.

Product files

The title and description fields are localizable.

Widget

In the product page template, add the following Widget:

{widget name='pixel_product_files'}

Widget options:

  • id_product: Force the display for the given product id
  • id_shop: Force the display for the given shop id
  • id_lang: Force the display for the given language id
  • template: Custom template path
  • icons_path: Custom icon images base URL

Example:

{widget name='pixel_product_files' id_product='1' id_lang='1' id_shop='1' template='module:pixel_product_files/product-files.tpl' icons_path="`$urls.base_url`img/file-icons/"}

With product-files.tpl in themes/{themeName}/modules/pixel_product_files/product-files.tpl directory.

Template

In a custom template, browse the files as follows:

{foreach from=$files item=file}
    {assign var="extension" value=$file->getFile()|pathinfo:$smarty.const.PATHINFO_EXTENSION}

    File URL: {$path.docs}{$file->getFile()}
    Icon: {$path.icons}{$icons[$extension]}
    Title: {$file->getTitle()}
    Description: {$file->getDescription()}
{/foreach}

Icons

Frontend file icons are divided into several categories:

Category Icon File extensions
Document document.png pdf, odt, doc, opt, docx, rtf
Table table.png csv, ods, xls, xlsx
Presentation presentation.png pptx, pptm, ppt, odp
Image image.png png, gif, svg, webp, jpeg, jpg, bmp, avif, apng, ico, tiff
Video video.png avi, mp4, m4v
Audio audio.png mp3, ogg, flac, wav, m4a, wma, aac
Archive archive.png zip, rar, gz, tar, bz2, xz, 7z

Other files extension are not allowed.

Set you own icon files with the icons_path option:

{widget name='pixel_product_files' icons_path="`$urls.base_url`img/file-icons/"}

Then add icons in the img/file-icons directory:

  • /img/file-icons/document.png
  • /img/file-icons/table.png
  • /img/file-icons/presentation.png
  • ...

In the template, display the icon as follows:

{foreach from=$files item=file}
    {assign var="extension" value=$file->getFile()|pathinfo:$smarty.const.PATHINFO_EXTENSION}
    {if isset($icons[$extension])}
        <img src="{$path.icons}{$icons[$extension]}" alt="{$file->getTitle()}" />
    {/if}
{/foreach}

prestashop-product-files's People

Contributors

magentix avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.