Loading...
Menu
Cart
Your shopping cart is empty!
Blog

Making a theme

This guide provides an overview of the theming process, along with important tools and techniques for customizing or building themes for VentoCart.

Directory Structure

Themes in VentoCart are stored under the catalog/view/template/ directory.  its folder, structured as follows:

catalog/view/ 
├── stylesheet/ # CSS files for styling 
├── template/ # plates templates for views 
├── javascript/ # JavaScript files for interactivity 
└── image/ # Theme-specific images 

 

Designing a Theme

When designing a theme—whether by editing the default templates  or modifying an example zip-extension theme—there are some key considerations to keep in mind:

A. Adding Stylesheets

To add a custom stylesheet to your theme, use the following method in the controller:

$this->document->addLink('catalog/view/theme/your-theme-name/stylesheet/custom.css', 'stylesheet');

B. Adding JavaScript

To include custom JavaScript files, use:

$this->document->addScript('catalog/view/theme/your-theme-name/javascript/custom.js');

C. Dynamic Image Resizing

VentoCart provides a dynamic image resizing function, which allows you to generate images of any size directly from HTML. To use this feature: index.php?route=product/product.getImage&image=x&width=y&height=z

<img src="index.php?route=product/product.getImage&image=catalog/image.jpg&width=300&height=200" alt="Dynamic Image">

D. Video Thumbnails

For video thumbnails, VentoCart automatically generates a snapshot of the video at the 20% mark and saves it as a $poster attribute. Use $poster to display the thumbnail image for videos in your theme.

Default Menu Enhancements

In VentoCart, the default menu system includes an image field array, which contains the menu’s associated image. This can be used to display custom visuals alongside menu items.

AJAX Integration for Newsletter

To handle newsletter subscriptions dynamically using AJAX, you can make a GET request to the following route:

Route: index.php?route=guest/newsletter

Parameters:

  • json=1 - Ensures the response is returned in JSON format.
  • action=subscribe - Specifies the action, in this case, subscribing.
  • email=email@example.com - The email address to subscribe.

    Response Structure

    On Success:

    The server returns:

    { "success": "Your subscription was successful. Thank you!" }
            Or
 
         { "error": "There was an issue with your subscription. Please try again." }