Adding a Product Preview button

[Foster660]

G'day all...
I've nearly pulled all my hair out trying to get this idea working, so now I better raise my hand and ask for some expert assistance.

I'm trying to add a 'product preview' to the product listing page, like this -


Simple enough so far... the code I've added to get this far is by copy & paste from other sections, edited to suit what I'm doing...
from 'tpl_product_info_display.php'

<!--bof Preview Box  JD-->
<?php
if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
  // do nothing
} else {
?>
<?php
    $the_button = '<canvas id="id[' . TEXT_PREFIX . $products_options_names->fields['products_options_id'] . ']" width="300" height="25" style="border:1px solid #000000;"></canvas><br> ' . zen_get_products_quantity_min_units_display((int)$_GET[
'products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_preview(BUTTON_IMAGE_IN_CART, BUTTON_UPDATE_PREVIEW_ALT);
    $display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
  ?>
  <?php if ($display_qty != '' or $display_button != '') { ?>
    <div id="productPreview">
    <?php
      echo $display_button;
    ?></div>
  <?php } // display qty and button ?>
<?php } // CUSTOMERS_APPROVAL == 3 ?>
<!--eof Preview Box JD-->

from 'stylesheet.css'

#productPreview {
    float: left; //right;
    text-align: center;
    margin: 1em;
    border: 1px solid #000000;
    padding: 1em;
    }

and from 'html_output.php'

   function zen_image_preview($image, $alt = '', $parameters = '', $sec_class = '') {
    global $template, $current_page_base, $zco_notifier;
    
    //if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes' && strlen($alt)<30) return zenCssButton($image, $alt, 'submit', $sec_class, $parameters);
    if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes' && strlen($alt)<30) return zenCssButton($image, $alt, 'button', $sec_class, $parameters);
    
    $zco_notifier->notify('PAGE_OUTPUT_IMAGE_BUTTON');

    return $image_preview;
  }

In the last one, if I use the 2nd line with the blue text, clicking on the new preview button does nothing (as I would expect).
Edit it out, and if I use the 1st line with the red text, clicking on it operates the 'add to cart' - same as if I bought a product. (not what I wanted)

I can't for the life of me workout what happens with the 'submit' part of the code and where it proceeds to next.
I want to (instead of adding to cart), update the entered text attribute for the product, and put it into the 'canvas' element to show it as a preview in the font that I will use to make the product.

Somewhere, I've done something wrong or missed something... I'd appreciate if anyone could point to my problems!
(... and from a coding point of view, is there a way to set a trace on the code to see what's happening, maybe even some breakpoints?)

Thanks, John

[carlwhat]

submit with submit a form. you need to find the form and what the form action is. that is where it will go next.

when having problems (esp with forms), ensure that your html code validates:

https://validator.w3.org/

as far as tracing, you can always add some:

echo "i'm here";

type statements. i like using this fior debugging as well:

https://github.com/ospinto/dBug

good luck!

[mc12345678]

So here's some of the issues that you have/need to consider:
You have text that you want the customer to enter, preferably one time only otherwise what looks good initially could get rewritten incorrectly in copying/pasting.
The entered text is to be submitted as part of purchasing the product.
The entered text is also to be used for "preview" purposes.

It is not suggested that a "copy" of the one time entered data be done via javascript/jquery in the event the customer has disabled such unless the preview option becomes disabled or provided via an alternate method when the display doesn't support javascript.

The data entered is to be passed to some other operation that will provide a popup image based on the entered content. The merge of those two pieces of data may occur with javascript/jquery or some other overlay process independent of the visitor (ideally independent so that the user's interface doesn't impact the ability of them to be satisfied to purchase). Such passing of information, with a single entry and no javascript/jquery would require a submission button to be placed within the existing form which the intent of the "existing" submit button is to add the product to the cart.

There is however a way to prevent the addition to the cart by adding additional code as an extra_cart_actions processor which is loaded before the shopping_cart's add-to-cart is executed. If the button is provided a "name" or "id", then it could be detected as part of the posting of data to see if it was selected. If it was selected/clicked/active then the goal would be to prevent adding the product to the cart and to provide display of the sample. If it wasn't selected then the new code in the includes/extra_cart_actions would be bypassed and allow the addition of the product to the cart.

So, this field of text to be entered would actually be a text attribute that would be displayed through the "normal" attributes display. Though, it would/could also be possible to add an observer to amplify the attribute's "result" so that your button would be displayed in proximity to the text box and not have to be some "outside" or oddly placed button. Again, good CSS identifiers around the button would make placement/arrangement easier.

Detection of the button within a file possibly called: includes/extra_cart_actions/product_preview_display.php

where the name of the button is "btnPreview" would look something like:

<?php
    if (isset($_POST['btnPreview'])) {
        // Perform preview operation, set values to prevent adding the product to the cart and basically to not redirect to either the cart nor back to the product (ie. don't want to do a page refresh just because they viewed a preview)
        // part of this preview operation would be to detect the value of the submitted option name which could be the same option name applied to all product that are to have this preview operation, sanitize the value entered and then add it to your product as the product expects. 
        // Data "needed" to support this should be submitted as a post (ie. products_id, attribute designator, quantity initially selected, etc..) All that is to be used should be sanitized to prevent any injection.
    }

As for the button: you could call the zen_image_submit function as written with 'name="btnPreview"' as a parameter instead of designing/creating a separate function to do what is already present.

[Foster660]

Thanks for all the input and tips, it's very much appreciated... At the moment, I have more echo's than a long tunnel!
So far, I can get the extra_cart_actions to be called (no surprises there, it's already part of ZenCart) but I'm totally lost now.
It's beyond my skills in PHP coding, so I'll need to toss it in as a bad idea. (Maybe I'll re-visit it at a later time when my head settles a bit!)

John

[Foster660]

As an update on this idea (I hate leaving things half done, so I came back to it again)...
Instead of working against Zencart, I thought it best if I try and use what's already available, so I have gone down the path of custom fonts to the text input of the attributes - here's what I have come up with (This is a general update, not a 'how to')

I have added 3 extra fields the the attribute manager-



... all stored in extra fields in the db for each products attribute...

1) Font - Here I can specify and particular font I need to use, and is included in the stylesheet with each font stored on the server... for example -

@font-face {
  font-family: "EdwardianScript";
  src: url("Edwardian.eot"); /* IE9 Compat Modes */
  src: url("Edwardian.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("Edwardian.otf") format("opentype"), /* Open Type Font */
    url("Edwardian.svg#EdwardianScript") format("svg"), /* Legacy iOS */
    url("Edwardian.ttf") format("truetype"), /* Safari, Android, iOS */
    url("Edwardian.woff") format("woff"), /* Modern Browsers */
    url("Edwardian.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

the hardest part of this was trying to get different browsers to show the same sizes and fonts - that's why there are so many url references to the same font.

2) Font Height - This relates to the actual height I use for engraving, in my case, in mm's

3) Aspect Value - That gives me a little room to play with the font size to fit into the engraving area which allows for the 'aspect' ratio of the selected font.

I have also renamed the existing width to reflect the true width in mm's for the actual size of the label I'm producing.

In the case of the picture above, the label width is 75mm wide, with a line in Cordia Bold in 6mm high font. The aspect of 2.2 resizes the computer fonts to something more relative to the real world application (I play with that number until I get a good fit on the engraved label)
There was a little bit of coding as well, but the main part I had to change was in attributes.php -
Changed from :

$tmp_html = '<input type="text" name="id[' . TEXT_PREFIX . $products_options_names->fields['products_options_id'] . ']" size="' .
 $products_options_names->fields['products_options_size'] .'" maxlength="' . $products_options_names->fields['products_options_length'] . '" value="' .
 stripslashes($value) .'" id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '" />  ';

To:

$tmp_html = '<input style="text-align: center; height: ' . $height . 'mm; width: ' . $products_options_names->fields['products_options_size'] .
 'mm; font-family: ' . $products_options_names->fields['products_options_font'] . '; font-size: ' . $font_height . 'mm;" type="text" name="id[' .
 TEXT_PREFIX . $products_options_names->fields['products_options_id'] . ']' . '" maxlength="' .
 $products_options_names->fields['products_options_length'] . '" value="' . htmlspecialchars($tmp_value, ENT_COMPAT, CHARSET, TRUE) .'" id="' .
 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '" />  ';

Here's what it looks like on the product page -



Now when customers enter the details they need engraved, it will show in the actual font and relative size to the finished product.

I couldn't do this by guessing where and how it all works, so I ended up using NetBeans and xDebug to set breakpoints and trace the code. I also had to heavily learn php coding.
All good in the end, so I'm pretty happy with the end result (using the offline store at least!)

[Foster660]

Sorry, the above code should have been
From this:

$tmp_html = '<input type="text" name="id[' . TEXT_PREFIX . $products_options_names->fields['products_options_id'] . ']" size="' .
 $products_options_names->fields['products_options_size'] .'" maxlength="' . $products_options_names->fields['products_options_length'] . '" value="' .
 htmlspecialchars($tmp_value, ENT_COMPAT, CHARSET, TRUE) .'" id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' .
 $products_options_value_id . '" />  ';

To this:

    $height = $products_options_names->fields['products_options_height'];
    $aspect = $products_options_names->fields['products_options_aspect'];
    $font_height = $height * $aspect;
    $height = $font_height + 4;
    $tmp_html = '<input style="text-align: center; height: ' . $height . 'mm; width: ' . $products_options_names->fields['products_options_size'] . 'mm; font-family: ' .
 $products_options_names->fields['products_options_font'] . '; font-size: ' . $font_height . 'mm;" type="text" name="id[' . TEXT_PREFIX .
 $products_options_names->fields['products_options_id'] . ']' . '" maxlength="' . $products_options_names->fields['products_options_length'] . '" value="' .
 htmlspecialchars($tmp_value, ENT_COMPAT, CHARSET, TRUE) .'" id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' .
 $products_options_value_id . '" />  ';