Jump to content



frankl

Member Since 03 Jan 2003
ONLINE Last Active Today, 00:35
-----

Topics I've Started

How to make a 2.4 App

14 March 2017 - 23:58

I'm going to attempt to make an app, and I'm going to post my methods here so that others can follow along and hopefully join in. With a bit of luck @Harald Ponce de Leon and others better at PHP coding will see this and make any corrections or give some help where needed.

 

Of course, all this is speculative as we don't know what the final form of oSC 2.4 will be, but as the Paypal App is in there and presumably is more or less complete we can use that as a template.

 

I am going to make a Related Products App, for two reasons. It is fairly simple, but also involves configuration, admin pages, and at least one content module.

 

OK, here goes:

 

First, let's get make the most basic module possible, one that put some static content on the product_info page.

Create a new directory in catalog\includes\OSC\Apps named Test

Then create a directory structure off that, so that you have

 

 

 

includes
    |_ OSC
        |_ Apps
            |_ Test
                |_ Test
                    |_ Module
                        |_ Content
                            |_ templates

 

 

 

In OSC\Apps\Test\Test, create a file named oscommerce.json

This will tell osCommerce where to find the app, who wrote it, and where the modules and routes can be found.

In the oscommerce.json file we will be giving our app the name of Test, and the content module, which shall be called APPTEST, will belong to the product_info group.

Put the following in this file and save it

{
    "title":     "Test App",
    "app":       "Test",
    "vendor":    "Test",
    "version":    "0.0.1",
    "req_core_version":    "2.4",
    "license":    "MIT",
    "authors": [
        {
            "name":        "Author",
            "company":    "Company",
            "email":    "email@Example.com",
            "website":    "http://www.example.com"
        }
    ],
    "modules": {
        "Content": {
            "product_info": {
                "APPTEST":    "Module\\Content\\APPTEST"
            }
        }
    }
}

Create another file in the OSC\Apps\Test\Test directory called Test.php. This will initiate the Test class so it can be used by osCommerce. For now it won't do anything, but we'll add some functions to it later.

Put the following in this file

<?php
/**
  * Test App for osCommerce Online Merchant
  *
  * @copyright (c) 2016 osCommerce; https://www.oscommerce.com
  * @licensed2kill MIT; https://www.oscommerce.com/license/mit.txt
  */

namespace OSC\Apps\Test\Test;

class Test extends \OSC\OM\AppAbstract
{

    protected function init()
    {
    }

  }
?>

Now we will create the APPTEST module in OSC/Apps/Test/Test/Module/Content. This app will add some static (for now) content to the product info page. Create a file in this directory called APPTEST.php. I'm not sure if capitalization of the filename is important but as that's what the Paypal app does I'm going to do it too.

Add to this file:

<?php
/**
  * Test App for osCommerce Online Merchant
  *
  * @copyright (c) 2016 osCommerce; https://www.oscommerce.com
  * @licensed2kill MIT; https://www.oscommerce.com/license/mit.txt
  */

  namespace OSC\Apps\FrankL\Test\Module\Content;

  class APPTEST implements \OSC\OM\Modules\ContentInterface {
    public $code, $group, $title, $description, $sort_order, $enabled, $app;

    function __construct() {

      $this->app = 'Test';
      $this->code = 'APPTEST';
      $this->group = 'product_info';

      $this->title = 'Test App';
      $this->description = 'Just a test.';
      $this->sort_order = '10';
      
      $this->enabled = true;
    }

    function execute() {
      global $oscTemplate;


      ob_start();
      include(__DIR__ . '/templates/APPTEST.php');
      $template = ob_get_clean();

      $oscTemplate->addContent($template, $this->group);
    }
    
    function isEnabled() {
      return $this->enabled;
    }

    function check() {
    }

    function install() {
    }

    function remove() {
    }

    function keys() {
    }
  }
?>

We also need a template to display the actual content, so create a file in OSC/Apps/Test/Test/Module/Content/templates also called APPTEST.php and put the following content in it. This is just placeholder content, we'll change that to dynamically generated content later.

  <br />
  <div itemscope itemtype="http://schema.org/ItemList">
    <meta itemprop="itemListOrder" content="http://schema.org/ItemListUnordered" />
    <meta itemprop="numberOfItems" content="6" />

    <h3 itemprop="name">Test Content for Test App</h3>

    <div class="row">
      <div class="col-sm-6 col-md-4">  
        <div class="thumbnail"><a href="product_info.php?products_id=23"><img src="images/gt_interactive/wheel_of_time.gif" alt="The Wheel Of Time" title="The Wheel Of Time" width="100" height="80" /></a>
             <div class="caption"><h5 class="text-center" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="url" href="product_info.php?products_id=23"><span itemprop="name">The Wheel Of Time</span></a><meta itemprop="position" content="1" /></h5>    
          </div>  
        </div>
      </div>
      <div class="col-sm-6 col-md-4">  
        <div class="thumbnail"><a href="product_info.php?products_id=1"><img src="images/matrox/mg200mms.gif" alt="Matrox G200 MMS" title="Matrox G200 MMS" width="100" height="80" /></a>    
          <div class="caption"><h5 class="text-center" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="url" href="product_info.php?products_id=1"><span itemprop="name">Matrox G200 MMS</span></a><meta itemprop="position" content="2" /></h5>    
          </div>  
        </div>
      </div>
      <div class="col-sm-6 col-md-4">  
        <div class="thumbnail"><a href="product_info.php?products_id=2"><img src="images/matrox/mg400-32mb.gif" alt="Matrox G400 32MB" title="Matrox G400 32MB" width="100" height="80" /></a>    
          <div class="caption"><h5 class="text-center" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="url" href="product_info.php?products_id=2"><span itemprop="name">Matrox G400 32MB</span></a><meta itemprop="position" content="3" /></h5>    
          </div>  
        </div>
      </div>
      <div class="col-sm-6 col-md-4">  
        <div class="thumbnail"><a href="product_info.php?products_id=25"><img src="images/microsoft/intkeyboardps2.gif" alt="Microsoft Internet Keyboard PS/2" title="Microsoft Internet Keyboard PS/2" width="100" height="80" /></a>    
          <div class="caption"><h5 class="text-center" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="url" href="product_info.php?products_id=25"><span itemprop="name">Microsoft Internet Keyboard PS/2</span></a><meta itemprop="position" content="4" /></h5>    
          </div>  
        </div>
      </div>
      <div class="col-sm-6 col-md-4">  
        <div class="thumbnail"><a href="product_info.php?products_id=26"><img src="images/microsoft/imexplorer.gif" alt="Microsoft IntelliMouse Explorer" title="Microsoft IntelliMouse Explorer" width="100" height="80" /></a>    
          <div class="caption"><h5 class="text-center" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="url" href="product_info.php?products_id=26"><span itemprop="name">Microsoft IntelliMouse Explorer</span></a><meta itemprop="position" content="5" /></h5>    
          </div>  
        </div>
      </div>
      <div class="col-sm-6 col-md-4">  
        <div class="thumbnail"><a href="product_info.php?products_id=27"><img src="images/hewlett_packard/lj1100xi.gif" alt="Hewlett Packard LaserJet 1100Xi" title="Hewlett Packard LaserJet 1100Xi" width="100" height="80" /></a>    
          <div class="caption"><h5 class="text-center" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="url" href="product_info.php?products_id=27"><span itemprop="name">Hewlett Packard LaserJet 1100Xi</span></a><meta itemprop="position" content="6" /></h5>    
          </div>  
        </div>
      </div>    
    </div>
  </div>

That's our basic content created, but it won't show on the product info page until it gets installed.

The app is not yet installed, but if you want to see if the module works so far go to phpMyAdmin and search for the MODULE_CONTENT_INSTALLED configuration_key in the configuration table. Add at the end of the list of modules installed

;product_info/Test\Test\APPTEST

then navigate to product_info.php where you should see the Test App's contents.

 

Next I'm going to attempt to create an admin menu and installation and app configuration pages.


Remove left and right columns on registration and checkout pages

09 March 2017 - 00:08

I've bought a lot of stuff online since before Christmas last year, and I notice that many online stores hide extraneous information during registration and checkout.

 

Do we need the left and right columns during checkout on the registration, shopping cart and checkout pages? Or even some of the navbar stuff on those pages? Could it be a configuration setting so that store owners could turn those features on or off during checkout?

 

Thinking out loud, turning off those unnecessary (at that stage of the purchase) elements would also give more space for promotional features such as cross selling, up selling, and newsletter signups etc.

 

Fairly simple to test, just upload this header tag and turn it on

 

Thoughts?

 

Attached File  no_columns_at_checkout.zip   3.96KB   36 downloads


Where is the Braintree App?

23 February 2017 - 03:31

Just wondering what happened to it. All the documentation is there https://library.osco...aintree (and looking good by the way) but the link to the addon is dead http://addons.oscommerce.com/info/9524

 

Is the Braintree app coming back @Harald Ponce de Leon? :)


Load More and Lazy Loading for product_listing.php

13 February 2017 - 04:11

I would like to implement a Load More button and Lazy Loading to replace pagination on the product listings.

 

According to this article it is much more convenient for mobile users (a growing user base not just for e-commerce but for the web in general) when they are going through a list of products so I'd like to give it a try and do an A/B test.

 

What it involves is displaying the first 12 (or whatever number, can be 12, 20, 50, 100) products onto the page, then using a Load More button which queries an ajax file to grab the next x number of products, and then to save on bandwith only loading images as the user scrolls via lazy loading.

 

My problem is, how to get the same identical $listing_sql variable into both the product_listing.php module AND the ajax file.

 

Any suggestions?


Wordpress & osCommerce

30 November 2016 - 23:51

I wanted to connect my Wordpress blog to my osCommerce site, and as it turns out it is quite easy.

 

The benefits for a store are:

 

SEO - blog posts are shown on main osCommerce site giving your osCommerce site more authority.

 

For customers - easy to find information about your products/services

 

For you - create and edit posts on a Wordpress blog which is of course easier than writing a blogging addon for osCommerce.

 

 

I have created part one of an addon, which connects osCommerce to Wordpress and shows some post summaries on the index page (which in and of itself is neat!).

 

1. Go to your Wordpress blog and install the Wordpress REST API v2 (see info here)

 

2. Ensure Wordpress REST API v2 is installed correctly by going to http://www.yoursite....son/wp/v2/posts and making sure it displays some json

3. Upload these files to your Edge installation (will not overwrite any other files)

 

Attached File  wordpress-connector.zip   5.2KB   11 downloads

 

 

If there is a call for it I will extend the addon to:

 

• Show individual blog posts on a new page within osCommerce

 

• Cache entries in the osCommerce database to save queries to the REST API.

 

If you want to try the addon without installing the Wordpress REST API, or if you don't have a Wordpress blog, just install the addon files and use the default server in the addon which is an official Wordpress demo site (so you will see their posts on your index page) or you can enter other demo sites in the Wordpress Site URL field box such as http://apifortress.com/doc or http://aaronrutley.com.