Write in Purchase Button - Dynamic "data-item"

chumby · 2020-03-21 14:17:09

Hi all,

I have read the tutorial about creating a Write in Purchase Button at:

http://backlight.theturninggate.net/doc … se_buttons

I would like to include (if possible) and buy now button on a single image page above the text which I include in the single_bottom hook.

The button appears ok if I add the code:

<button class="add-to-cart" data-item="ebook-0001-litportraiture" data-name="Better Portraits with Portable Strobes" data-price="ebook" data-thumbnail="litportraiture-cover.jpg">Buy My New eBook</button>

but I need to include a unique filename for "data-item" (instead of the static example as per above).

Is there anyway I can use some php script to extract the current filename on a single image page and include that name in the data-item field for the button?

Hope that makes sense.

Cheers,
Chumby

chumby · 2020-03-21 14:27:03

Syntax is all wrong, but theorectically something like...??

// Buy now button

function single_bottom(){

   $photo = $this->photo;

   echo' <script>

         <button class="add-to-cart" data-item=$photo data-name=$photo data-price="digitalphoto" data-thumbnail=$photo>Buy 
        this Photo</button>

       </script>

Cheers
Chumby

Daniel Leu · 2020-03-21 16:14:20

Yes, this can be done. I use it on my site: https://danielleu.com/galleries/united_ … single.php

Here is a link that shows you how to get to the photo infos: https://lab.danielleu.com/blog/customiz … page-view/

And regarding your code, the buy button is not javascript, so you don't need the <script> tags.

chumby · 2020-03-21 17:48:56

Thanks Daniel,

Looks good but how do you link this code up to your "But Image" button?

Also, is Filesize include in the photos info? If not - how do I integrate further javascript in my-php-plugins to find this out?

Thank you as always.

Cheers
Chumby

Daniel Leu · 2020-03-22 01:15:56

chumby wrote:

Looks good but how do you link this code up to your "But Image" button?

You already posted your button code. So now you just have to modify the few variables to get what you want.

data-item=$photo->getFilename()

chumby wrote:

Also, is Filesize include in the photos info? If not - how do I integrate further javascript in my-php-plugins to find this out?

You should be able to get the filesize using the php filesize function:

filesize ( $photo->getFilename() )

I don't know if this size is really useful because usually, an image is downscaled for your album and the jpeg quality is reduced as well. So you only get the image size (and dimensions) of the photo used in your gallery and not the original work.

chumby wrote:

If not - how do I integrate further javascript in my-php-plugins to find this out?

I have an example on how to use javascript on the single-page view: https://lab.danielleu.com/blog/adding-k … age-pages/

chumby · 2020-03-22 06:39:54

Thanks Daniel,

That is great. I'll see if you can get the pay button working.

I see what you mean about the filesize. I wonder if you can interegate the download folder path?

Cheers
Chumby

Ben · 2020-03-22 07:19:22

We have renamed the PHPlugins forum to Backlight Customisation. Can you post future customisation topics in there?

chumby · 2020-03-22 07:23:00

Hi Daniel,

Been playing around this morning but, till not quite sure of the code for the button function here...I'm trying below but it is not working.

function single_bottom(){
 
   $photo = $this->photo;
   $album = $this->album;
   data-item = $photo->getFilename();

echo' 

         <button class="add-to-cart" data-item=data-item data-name=data-item data-price="digitalphoto" data-thumbnail=data-item;>Buy this Photo</button>

    ';

}

Am I remotely on track here?

Thanks
Chumby

Daniel Leu · 2020-03-22 09:53:03

The data-item statement belongs in here: <button....

chumby · 2020-03-24 19:04:15

Thanks Daniel,

So I should be good to go with:

function single_bottom(){
 
   $photo = $this->photo;
   $album = $this->album;

echo' 

         <button class="add-to-cart" data-item=$photo->getFilename(); data-name=data-item data-price="digitalphoto" data-thumbnail=data-item;>Buy this Photo</button>

    ';

}

Cheers,
Chumby

Ben · 2020-03-24 21:05:16

The syntax needs to be tightened both for PHP and for properly quoting attributes. See if this works for the 'echo' line:

echo '<button class="add-to-cart" data-item="'.$photo->getFilename().'" data-name="data-item" data-price="digitalphoto" data-thumbnail="'.$photo->getThumbnailURL().'">Buy this Photo</button>';

Last edited by Ben (2020-03-24 21:06:39)

chumby · 2020-03-25 08:11:02

Thanks for helping out, Ben.

Didn't quite work...

"Unexpected error: syntax error, unexpected '<' in my-phplugins.php on line 1633"

My entire single_bottom function looks like: (not sure if this helps)

function single_bottom(){
   // support for left/right arrow key and esc key navigation
   $photo = $this->photo;
   $album = $this->album;

   echo' <script>
      function checkKey(e) {
         switch(e.which) {
            case 37: ';
               if ($album->getPreviousPhoto($photo)) { 
                  echo 'location.href=$("li.single_image_prev a").attr("href");';
               }		
               echo 'break;
            case 39:';
               if ($album->getNextPhoto($photo)) {
                  echo 'location.href=$("li.single_image_next a").attr("href");';
               }				
               echo 'break;
            case 27:';
               echo 'location.href=$("li.single_image_back a").attr("href");';			
               echo 'break;
            default: return; 
         }
         e.preventDefault();
      }
      document.onkeydown = checkKey;
   </script>';
       
    
    // Bottom of Footer Information
 
   echo' 
        <button class="add-to-cart" data-item="'.$photo->getFilename().'" data-name="data-item" data-price="digitalphoto" data-thumbnail="'.$photo->getThumbnailURL().'">Buy this Photo</button>';
    
        <div class="bold-red">Image Information</div>
        <div class="single-image-footer-content">
        Images are downloadable as JPEGs and are available in three sizes: <br />
        </div>
        
        <div class="single-image-footer-content">
        <ul>
            <li><strong>Large:</strong> (As per original size - approximate file size = 10-15 Mb). Suitable for print (posters and pictures).
            
            <li><strong>Medium:</strong> (1200px longest edge - approximate file size = 1-1.5 Mb). Sutiable for small print & web applications.
        
            <li><strong>Small:</strong> (600px longest edge - approximate file size 500 Kb file). Suitable for web applications.
        </ul>

        <p>The originally RAW rendered TIF files (Size > 50 Mb) may be sourced on request. These images are suitable for very large print such as banners or larger pictures. </p>
        </div>
        
        <div class="bold-red">About Tasmania</div>

        <div class="single-image-footer-content">
        <p>Tasmania is an Island State situated to the south of mainland Australia. Tasmania is 64,519 km squared in size and has a number of smaller islands surrouding it. It is a natural state with approximatley 40% of land protected including a large 15,800 km squarded area known as the Tasmanian Wilderness which is World Heritage listed.</p></div>

        <div class="single-image-footer-content">
        <p>The population of Tasmania (as of 2020) is approximately 520,000 people with approximately 225,000 living in the south in and around the capital city, Hobart.</p></div>

        <div class="single-image-footer-content">
        <p>Tasmanians enjoy a relaxed lifestyle and produce such as fruit, seafood and whiskey is produced to the highest standards in the world.</p></div>
    
    ';
}

Cheers
Chumby

chumby · 2020-03-25 08:18:38

Sorry Ben,

Was missing hte } after the first script. Put that in and the first error message now gone...

Now an error message comes up on the echo' line of the button...

Unexpected error: syntax error, unexpected 'echo' (T_ECHO), expecting function (T_FUNCTION) or const (T_CONST) in my-phplugins.php on line 1631

Cheers
Chumby

Ben · 2020-03-25 08:29:40

I can't see any errors in the above. Which line is line 1631?

chumby · 2020-03-25 09:46:43

Thanks Ben,

Did some more playing around - have it all working now. Think I had an echo or ' out of order somewhere.

Working code below - thank you again very much.

Cheers,
Chumby

function single_bottom(){
   // support for left/right arrow key and esc key navigation
   $photo = $this->photo;
   $album = $this->album;
	
   echo' <script>
      function checkKey(e) {
         switch(e.which) {
            case 37: ';
               if ($album->getPreviousPhoto($photo)) { 
                  echo 'location.href=$("li.single_image_prev a").attr("href");';
               }		
               echo 'break;
            case 39:';
               if ($album->getNextPhoto($photo)) {
                  echo 'location.href=$("li.single_image_next a").attr("href");';
               }				
               echo 'break;
            case 27:';
               echo 'location.href=$("li.single_image_back a").attr("href");';			
               echo 'break;
            default: return; 
         }
         e.preventDefault();
      }
      document.onkeydown = checkKey;
   </script>';
 
    
    // Bottom of Footer Information
    // Pay Now Button
    echo '
    <div align="center">
    <button class="add-to-cart" data-item="'.$photo->getFilename().'" data-name="data-item" data-price="TasmanianPhotos Pricing Scheme Default" data-thumbnail="'.$photo->getThumbnailURL().'"> Buy this Photo</button>
    </div>
    ';
    
    //Summary Information under the single image
    echo'

        <div class="bold-red">Image Information</div>
        <div class="single-image-footer-content">
        Images are downloadable as JPEGs and are available in three sizes: <br />
        </div>
        
        <div class="single-image-footer-content">
        <ul>
            <li><strong>Large:</strong> (As per original size - approximate file size = 10-15 Mb). Suitable for print (posters and pictures).
            
            <li><strong>Medium:</strong> (1200px longest edge - approximate file size = 1-1.5 Mb). Sutiable for small print & web applications.
        
            <li><strong>Small:</strong> (600px longest edge - approximate file size 500 Kb file). Suitable for web applications.
        </ul>

        <p>The originally RAW rendered TIF files (Size > 50 Mb) may be sourced on request. These images are suitable for very large print such as banners or larger pictures. </p>
        </div>
        
        <div class="bold-red">About Tasmania</div>

        <div class="single-image-footer-content">
        <p>Tasmania is an Island State situated to the south of mainland Australia. Tasmania is 64,519 km squared in size and has a number of smaller islands surrouding it. It is a natural state with approximatley 40% of land protected including a large 15,800 km squarded area known as the Tasmanian Wilderness which is World Heritage listed.</p></div>

        <div class="single-image-footer-content">
        <p>The population of Tasmania (as of 2020) is approximately 520,000 people with approximately 225,000 living in the south in and around the capital city, Hobart.</p></div>

        <div class="single-image-footer-content">
        <p>Tasmanians enjoy a relaxed lifestyle and produce such as fruit, seafood and whiskey is produced to the highest standards in the world.</p></div>
      
      ';
    }

Last edited by chumby (2020-03-25 09:48:10)

Daniel Leu · 2020-03-25 10:10:50

For data-name, I would assign something like $photo->getMetadata(Photo::$PHOTO_TITLE)

chumby · 2020-03-25 10:19:39

Thanks Dan,

Updated button now as below:

    echo '
    <div align="center">
    <button class="add-to-cart" data-item="'.$photo->getFilename().'" data-name="'.$photo->getMetadata(Photo::$PHOTO_TITLE).'" data-price="TasmanianPhotos Pricing Scheme Default" data-thumbnail="'.$photo->getThumbnailURL().'"> Buy this Photo</button>
    </div>
    ';

Community @ The Turning Gate

#1 2020-03-21 14:17:09

Write in Purchase Button - Dynamic "data-item"

#2 2020-03-21 14:27:03

Re: Write in Purchase Button - Dynamic "data-item"

#3 2020-03-21 16:14:20

Re: Write in Purchase Button - Dynamic "data-item"

#4 2020-03-21 17:48:56

Re: Write in Purchase Button - Dynamic "data-item"

#5 2020-03-22 01:15:56

Re: Write in Purchase Button - Dynamic "data-item"

#6 2020-03-22 06:39:54

Re: Write in Purchase Button - Dynamic "data-item"

#7 2020-03-22 07:19:22

Re: Write in Purchase Button - Dynamic "data-item"

#8 2020-03-22 07:23:00

Re: Write in Purchase Button - Dynamic "data-item"

#9 2020-03-22 09:53:03

Re: Write in Purchase Button - Dynamic "data-item"

#10 2020-03-24 19:04:15

Re: Write in Purchase Button - Dynamic "data-item"

#11 2020-03-24 21:05:16

Re: Write in Purchase Button - Dynamic "data-item"

#12 2020-03-25 08:11:02

Re: Write in Purchase Button - Dynamic "data-item"

#13 2020-03-25 08:18:38

Re: Write in Purchase Button - Dynamic "data-item"

#14 2020-03-25 08:29:40

Re: Write in Purchase Button - Dynamic "data-item"

#15 2020-03-25 09:46:43

Re: Write in Purchase Button - Dynamic "data-item"

#16 2020-03-25 10:10:50

Re: Write in Purchase Button - Dynamic "data-item"

#17 2020-03-25 10:19:39

Re: Write in Purchase Button - Dynamic "data-item"

Board footer