How to integrate additional Add-Ons to Mobile OSC 6.0
A) Your add-on needs to add code to an existing mobile page:
Follow the instructions of the add-on how to add the code snippets/modify the code in the correspondent desktop pages.
1. Functions or similar code which is added in the desktop page to the part between:
require('includes/application_top.php');
and:
$breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_XXXXXXXXX, '', 'SSL'));
Should be added in the mobile page between:
require_once('includes/application_top.php');
and:
$breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_XXXXXXXXX, '', 'SSL'));
2 . Java scripts which are added in the desktop page to the part between:
OSC 2.2.
<head>
And:
</head>
OSC 2.3.
require(DIR_WS_INCLUDES . 'template_top.php');
and:
<h1><?php echo HEADING_TITLE; ?></h1>
Should be added in the mobile page between:
$headerTitle->write();
And:
<div id="iphone_content">
3. Code which produces visible html output and is added in the desktop page to the part between:
OSC 2.2.
<!-- body_text //-->
And:
<!-- body_text_eof //-->
OSC 2.3.
<h1><?php echo HEADING_TITLE; ?></h1>
and:
require(DIR_WS_INCLUDES . 'template_bottom.php');
Should be added in the mobile page between:
<div id="iphone_content">
and:
<?php require(DIR_MOBILE_INCLUDES . 'footer.php');
B) You need to create an additional page for your add on:
1. Choose a mobile page which has a similar structure and content like the page you need for your add-on.
2. Make a copy of this mobile page and rename it to EXACT the same name like your add-on desktop page.
3. Open the desktop version of your add-on page and compare step by step the code following the 3 steps above.
4. Copy and replace the code snippets from the desktop page to the mobile page.
5. Change all occurencies of the function:
tep_href_link
To:
tep_mobile_link
6. If there are hardcoded directories, example:
includes/classes/add_on_class.php
Change to:
DIR_WS_CLASSES . 'add_on_class.php'
Same for: DIR_WS_INCLUDES etc.
7. Try to
replace table structures to <div> structures or jquery
mobile tables following the examples in existing mobile pages.
8. All
buttons, input fields, pull down menus etc. should be modified using the jquery library.
See other existing mobile pages for
more examples.
The new output
functions tep_button_jquery, tep_checkbox_jquery,
tep_input_jquery, tep_input_search_jquery
and tep_radio_jquery are defined in:
mobile/includes/functions/general.php
Example for
tep_button_jquery in mobile/index.php:
OSC 2.2.
tep_image_button('button_continue.gif',
IMAGE_BUTTON_CONTINUE)
tep_image_submit('button_continue.gif',
IMAGE_BUTTON_CONTINUE)
to:
<div id="bouton">
echo
tep_button_jquery(IMAGE_BUTTON_CONTINUE, tep_mobile_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'), 'b' ,
'button' , ' data-icon="home" data-inline="true"' );
echo
tep_button_jquery(IMAGE_BUTTON_CONTINUE, tep_mobile_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'), 'b' ,
'submit' , ' data-icon="home" data-inline="true"' );
</div>
OSC 2.3.
tep_draw_button(IMAGE_BUTTON_CONTINUE, 'triangle-1-e', null,
'primary');
to:
<div id="bouton">
echo
tep_button_jquery(IMAGE_BUTTON_CONTINUE, tep_mobile_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'), 'b' ,
'button' , ' data-icon="home" data-inline="true"' );
echo
tep_button_jquery(IMAGE_BUTTON_CONTINUE, tep_mobile_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'), 'b' ,
'submit' , ' data-icon="home" data-inline="true"' );
</div>
Example for
tep_checkbox_jquery in mobile/account_newsletter.php:
echo '<fieldset data-role="controlgroup">
<legend>'.MY_NEWSLETTERS_GENERAL_NEWSLETTER.'</legend>
'.tep_checkbox_jquery('newsletter_general',(($newsletter['customers_newsletter']
== '1') ? true : false),'a',1,$option = '' ).'
<label for="newsletter_general">'.TEXT_NEWSLETTERS.'</label>
</fieldset>';
Example for
tep_input_jquery in mobile/create_account.php:
<label for="firstname"
><?php echo
ENTRY_FIRST_NAME . (tep_not_null(ENTRY_FIRST_NAME_TEXT) ? '<span class="inputRequirement"> ' . ENTRY_FIRST_NAME_TEXT .
'</span>': ''); ?></label>
<?php
echo tep_input_jquery('firstname','','class="input"');
?>
Example for
tep_input_search_jquery in mobile/advanced_search.php:
<label
for="keywords"><?php
echo TEXT_KEYWORDS.':'; ?></label>
<?php
echo tep_input_search_jquery('keywords', '',INPUT_SEARCH,
'search');
?>
Example for
tep_radio_jquery in mobile/checkout_shipping.php:
echo tep_radio_jquery('shipping',$checked,'a',$quotes[$i]['id']
. '_' . $quotes[$i]['methods'][$j]['id'],'id="'.$quotes[$i]['id'] . '_' .
$quotes[$i]['methods'][$j]['id'].'"') ;
Example for
the responsive 3 column design in the product listing in catalog_mb.php,
you can find in mobile/includes/modules/products:
(see also : http://view.jquerymobile.com/1.3.2/dist/demos/widgets/grids/)
<div class="ui-grid-b ui-responsive">
<?php
$num_of_columns = 3;
$row = 0;
$col
= 0;
$listing_query = tep_db_query($listing_split->sql_query);
while ($listing = tep_db_fetch_array($listing_query))
{
if ($col
>= $num_of_columns) {
$col = 0;
}
$path
= '<a href="' . tep_mobile_link(FILENAME_PRODUCT_INFO,
'products_id=' . $listing['products_id']) . '">';
$img = tep_image(DIR_WS_IMAGES .$listing['products_image'],
$listing['products_name'], MOBILE_IMAGE_WIDTH,
MOBILE_IMAGE_HEIGHT);
$img = str_replace(
'border="0"','',$img); // W3C VALID HTML 5
if (tep_not_null($listing['specials_new_products_price'])) {
$price
= '<s>' . $currencies->display_price($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</s> <span
class="productSpecialPrice">' .
$currencies->display_price($listing['specials_new_products_price'],
tep_get_tax_rate($listing['products_tax_class_id']))
. '</span>';
} else {
$price
= $currencies->display_price($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id']));
}
$buy_button =
tep_button_jquery(IMAGE_BUTTON_IN_CART,tep_mobile_link(basename($PHP_SELF),
tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' .
$listing['products_id']),'b','button',' data-mini="true"');
if ($col == 0) {
echo '<div class="ui-block-a">';
} else if ($col == 1) {
echo '<div class="ui-block-b">';
} else if ($col == 2) {
echo '<div class="ui-block-c">';
}
?>
<div class="prodCell">
<div
class="ui-bar">
<?php echo $path . '<div class="prodImage">' . $img .
'</div>'; ?>
<div class="prodName">
<?php
if (strlen($listing['products_name'])
> MOBILE_PRODUCT_NAME_LENGTH) {
echo substr($listing['products_name'],
0, MOBILE_PRODUCT_NAME_LENGTH) . '...';
} else {
echo
$listing['products_name'];
}
?>
</div>
<div class="prodPrice">
<?php echo $price; ?>
</div></a>
<?php echo $buy_button;
?></div></div></div>
<?php
$col++;
}
?>
</div>
Example for
the responsive table design in shopping_cart.php:
(see also : http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-reflow/)
<table id="shopping-cart-table" data-role="table"
data-mode="reflow"
class="ui-body-d ui-shadow table-stripe ui-responsive table-stroke">
<thead>
<tr>
<th><?php echo
TABLE_HEADING_PRODUCTS; ?></th>
<th><?php echo
''; ?></th>
<th style="text-align:center"><?php
echo TABLE_HEADING_QUANTITY; ?></th>
<th><?php echo '';
?></th>
<th style="text-align:right"><?php
echo TABLE_HEADING_PRICE; ?></th>
</tr>
</thead>
<tbody>
<?php
$any_out_of_stock
= 0;
$products
= $cart->get_products();
for ($i=0, $n=sizeof($products); $i<$n; $i++) {
// Push all
attributes information in an array
if (isset($products[$i]['attributes'])
&& is_array($products[$i]['attributes'])) {
while (list($option, $value) = each($products[$i]['attributes'])) {
echo tep_draw_hidden_field('id[' .
$products[$i]['id']
. '][' . $option . ']', $value);
$attributes = tep_db_query("select popt.products_options_name,
poval.products_options_values_name, pa.options_values_price, pa.price_prefix
from " . TABLE_PRODUCTS_OPTIONS . " popt,
" . TABLE_PRODUCTS_OPTIONS_VALUES . " poval, " .
TABLE_PRODUCTS_ATTRIBUTES . " pa
where pa.products_id
= '" . (int)$products[$i]['id']
. "'
and pa.options_id = '" . (int)$option . "'
and pa.options_id = popt.products_options_id
and pa.options_values_id = '"
. (int)$value . "'
and pa.options_values_id = poval.products_options_values_id
and popt.language_id = '" . (int)$languages_id . "'
and poval.language_id = '" .
(int)$languages_id . "'");
$attributes_values = tep_db_fetch_array($attributes);
$products[$i][$option]['products_options_name']
= $attributes_values['products_options_name'];
$products[$i][$option]['options_values_id'] = $value;
$products[$i][$option]['products_options_values_name']
= $attributes_values['products_options_values_name'];
$products[$i][$option]['options_values_price'] =
$attributes_values['options_values_price'];
$products[$i][$option]['price_prefix'] = $attributes_values['price_prefix'];
}
}
}
for ($i=0, $n=sizeof($products); $i<$n; $i++) {
$products_image = '<a href="' . tep_mobile_link(FILENAME_PRODUCT_INFO, 'products_id='
. $products[$i]['id']) . '">' . tep_image(DIR_WS_IMAGES . $products[$i]['image'], $products[$i]['name'], SMALL_IMAGE_WIDTH/2, SMALL_IMAGE_HEIGHT/2) .
'</a>';
$products_name = '<a href="' . tep_mobile_link(FILENAME_PRODUCT_INFO, 'products_id='
. $products[$i]['id']) . '"><b>' .
$products[$i]['name'] . '</b></a>';
if (STOCK_CHECK == 'true') {
$stock_check = tep_check_stock($products[$i]['id'],
$products[$i]['quantity']);
if (tep_not_null($stock_check)) {
$any_out_of_stock = 1;
$products_name .=
$stock_check;
}
}
if (isset($products[$i]['attributes'])
&& is_array($products[$i]['attributes'])) {
reset($products[$i]['attributes']);
while (list($option, $value) = each($products[$i]['attributes'])) {
$products_name .=
'<br><small><i>
- ' . $products[$i][$option]['products_options_name']
. ' ' . $products[$i][$option]['products_options_values_name']
. '</i></small>';
}
}
$products_qty = tep_draw_input_field('cart_quantity[]',
$products[$i]['quantity'],
'size="2" text-align="right"') . tep_draw_hidden_field('products_id[]',
$products[$i]['id']);
$products_price = '<b>' . $currencies->display_price($products[$i]['final_price'], tep_get_tax_rate($products[$i]['tax_class_id']), $products[$i]['quantity']) .
'</b>';
$products_buttons = '<input value="'.IMAGE_BUTTON_UPDATE.'"
type="submit" name="refresh"
data-mini="true" data-inline="true"
data-role="submit" data-icon="check" data-theme="b">' . tep_button_jquery( IMAGE_BUTTON_REMOVE,tep_mobile_link(FILENAME_SHOPPING_CART,
'products_id=' . $products[$i]['id'] . '&action=remove_product'), 'b' , 'button' , 'data-icon="delete"
data-mini="true" data-inline="true"'
);
?>
<tr>
<th><?php echo
$products_image; ?></th>
<td><?php echo
$products_name; ?></td>
<td style="text-align:center"><?php
echo $products_qty; ?></td>
<td><?php echo
$products_buttons; ?></td>
<td style="text-align:right"><?php
echo $products_price; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
9. You can
find examples and the complete API documentation for the JQuery
Mobile library here:
http://jquerymobile.com/
10. If you need to distinguish in language files between links to desktop pages and mobile pages:
When the mobile application_top.php is loaded, the constant: 'MOBILE_SESSION' is defined and set to 'true'.
This constant can be used to determine if the mobile side or the desktop side is viewed.
Example: You included links to certain shop categories in the 'Welcome' text on index.php.
<a href="FILENAME_DEFAULT . '?cPath=61') . '"><u>My shop category</u></a>
To distinguish desktop and mobile page use this code:
<a href="' . (defined('MOBILE_SESSION') ? HTTP_MOBILE_SERVER . DIR_WS_HTTP_MOBILE . FILENAME_CATALOG_MB. '?cPath=61' : FILENAME_DEFAULT . '?cPath=61') . '"><u> My shop category </u></a>
Thats it
It would be very, very appreciated if you could add the support for your add-on to this support package.
If you have any difficulties to integrate your add-ons or other customizations to Mobile OSC, contact me at oscommerce.com:
User: raiwa
http://forums.oscommerce.com/user/249059-raiwa/
Or post in the support forum:
If you need more than just a short answer to a concrete question, you can contact me for a quote and I do the integration/customization for you.
Any
donation is very apreciated, it allows developing more free add-ons for you.
Thank you for your Support