Setting Up OpenCart with PKB-theme

This guide provides comprehensive instructions for installing, configuring, and integrating OpenCart with your knowledge base or blog built with PKB-theme.

Prerequisites

Before beginning the installation, ensure you have:

Web server with PHP 7.3+ and MySQL 5.6+
cURL and ZIP PHP extensions enabled
At least 100MB of disk space
FTP or SSH access to your server
Database credentials
Ability to create subdomains or subdirectories

Installation Process

Step 1: Prepare Your Server Environment

Create a dedicated subdomain (recommended) or subdirectory for your store:
```
store.yourdomain.com
```
or
```
yourdomain.com/store
```

Create a MySQL database and user:

CREATE DATABASE opencart;
CREATE USER 'opencart_user'@'localhost' IDENTIFIED BY 'secure_password';
GRANT ALL PRIVILEGES ON opencart.* TO 'opencart_user'@'localhost';
FLUSH PRIVILEGES;

Step 2: Download and Extract OpenCart

Download the latest version from OpenCart’s website
Extract the OpenCart package:
```
unzip opencart-*.zip
```

Upload the extracted files to your server:

# Using FTP or SFTP client
# Or if using SSH:
scp -r upload/* user@server:/path/to/store/

Step 3: Set Required Permissions

For Linux/Unix servers:

# Base directories
chmod 0755 /path/to/store/system/
chmod 0755 /path/to/store/image/
chmod 0755 /path/to/store/image/cache/
chmod 0755 /path/to/store/image/catalog/
chmod 0755 /path/to/store/config.php
chmod 0755 /path/to/store/admin/config.php

# Storage directories
chmod 0755 /path/to/store/system/storage/cache/
chmod 0755 /path/to/store/system/storage/logs/
chmod 0755 /path/to/store/system/storage/download/
chmod 0755 /path/to/store/system/storage/upload/
chmod 0755 /path/to/store/system/storage/modification/

Step 4: Run the Web Installer

Navigate to your store URL (e.g., store.yourdomain.com) to launch the installer
Follow the installation wizard:
- Accept the license agreement
- Verify that your server meets all requirements
- Enter your database details (database name, username, password)
- Create admin credentials (remember these!)
- Complete the installation
Delete the installation directory for security:
```
rm -rf /path/to/store/install/
```

Post-Installation Configuration

Step 1: Basic Store Setup

Log in to your admin panel at store.yourdomain.com/admin or yourdomain.com/store/admin
Navigate to System → Settings → Your Store
Configure essential settings:
- Store name
- Store owner
- Address
- Email
- Telephone
- Store logo
- Configure meta tags for SEO

Step 2: Product Categories and Products

Create essential product categories (System → Catalog → Categories)
Add your initial products (System → Catalog → Products)
- Include detailed descriptions, images, and SEO metadata
- Set pricing, stock levels, and shipping weights

Step 3: Payment and Shipping Methods

Configure shipping methods (System → Extensions → Shipping)
- Enable methods appropriate for your business
- Set shipping rates and zones
Set up payment methods (System → Extensions → Payment)
- Configure at least one payment gateway
- Common options: PayPal, Stripe, bank transfer, cash on delivery
- Follow specific instructions for each payment provider

Integrating with PKB-theme

Method 1: iFrame Integration

For a simple integration without extensive development:

Add a new page to your PKB-theme site:

+++
title = "Shop"
date = 2023-08-20T10:00:00-07:00
draft = false
+++

<div class="store-container">
  <iframe src="https://store.yourdomain.com" width="100%" height="800px" style="border: none;"></iframe>
</div>

Add custom CSS to your theme to style the iframe container:

.store-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

Method 2: API Integration

For a deeper integration with your PKB-theme:

Enable OpenCart’s API (System → Users → API)
- Create a new API user
- Set appropriate permissions
- Generate and copy the API key

Create an API integration script in your PKB-theme project:

<?php
// Simple product display integration
$api_url = 'https://store.yourdomain.com/index.php?route=api/product/product&id=';
$api_key = 'YOUR_API_KEY';

function getProduct($product_id) {
    global $api_url, $api_key;
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $api_url . $product_id . '&api_token=' . $api_key);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $response = curl_exec($ch);
    curl_close($ch);
    return json_decode($response, true);
}

// Usage example:
$product = getProduct(42);
echo '<div class="product">';
echo '<h3>' . $product['name'] . '</h3>';
echo '<p>' . $product['description'] . '</p>';
echo '<p>Price: $' . $product['price'] . '</p>';
echo '<a href="' . $product['href'] . '">View Product</a>';
echo '</div>';
?>

Create a Hugo shortcode to display products:

<!-- layouts/shortcodes/opencart-product.html -->
{{ $productId := .Get 0 }}
<div class="product-card" id="product-{{ $productId }}">
  <script>
    fetch('/api/get-product.php?id={{ $productId }}')
      .then(response => response.json())
      .then(data => {
        const productCard = document.getElementById('product-{{ $productId }}');
        productCard.innerHTML = `
          <img src="${data.thumb}" alt="${data.name}">
          <h3>${data.name}</h3>
          <p class="price">${data.price}</p>
          <a href="${data.href}" class="button">View Product</a>
        `;
      });
  </script>
</div>

Use the shortcode in your markdown:

Check out this product:

{{< opencart-product 42 >}}

Method 3: Shared Header/Footer

For a seamless experience:

Extract your PKB-theme header/footer as HTML templates
Modify OpenCart’s theme to include your site’s header and footer:
- Edit /catalog/view/theme/your_theme/template/common/header.twig
- Edit /catalog/view/theme/your_theme/template/common/footer.twig
Ensure consistent styling by sharing CSS files between your sites

Security Considerations

Install an SSL certificate and force HTTPS for both your blog and store
Regularly update OpenCart to the latest version
Enable brute force protection with options like:
- Admin login throttling
- Changing the default admin path
- Using an .htaccess file to restrict admin access by IP
Set up regular database backups
Use strong, unique passwords for all admin accounts

Performance Optimization

Enable OpenCart’s built-in caching
Use a CDN for your product images
Optimize product images before uploading
Consider installing the “OCSpeed” or similar performance optimization extension
Set up server-side caching with Redis or Memcached if available

Conclusion

You now have a fully functional OpenCart store integrated with your PKB-theme website. Remember to regularly update both platforms to ensure security and functionality. For advanced customization, consider hiring a developer familiar with both OpenCart and Hugo to create a more seamless integration.

For troubleshooting and support, visit the OpenCart Forum or refer to the official documentation.

PKB-theme Demo

OpenCart Integration Guide