Please help us to make AbanteCart Ideal Open Source Ecommerce Solution for everyone.

Support AbanteCart eCommerce

Author Topic: How to integrate Pinterest Save button with easyZoom?  (Read 5710 times)

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 153
  • Karma: +28/-3
    • View Profile
How to integrate Pinterest Save button with easyZoom?
« on: November 16, 2017, 03:26:23 PM »
Does anyone know how to successfully integrate the Pinterest Save widget with the easyzoom script on the Product page image viewer?

Pinterest has a widget builder that will produce a script for various types of Pinterest buttons on your site. 

The simplest Pinterest button is the Image-Hover Save button.  You paste a single line of code at the bottom of the footer.tpl file:
<script async defer data-pin-hover="true" data-pin-tall="true" data-pin-round="true" src="//assets.pinterest.com/js/pinit.js"></script>

This script will produce a Pinterest Save It button in the upper left corner of any image that a visitor hovers over.  On mobile, the Save button shows up when customer taps or long-taps an image.

It works quite well on Category and Product List pages, but not on the Product page. 

The problem occurs with the easyzoom function for product images on desktop. 
On hover, the Pinterest Save button will show for an instant, and then disappear as the easyzoom action starts to work. 
The Pinterest button will sometimes then reappear in random places near the image in the viewer, but you can't click it. 
This isn't a problem on mobile devices because easyzoom is disabled on mobile.

Is there a way to integrate the Pinterest Image-Hover Save button with the easyzoom feature so that the Save button remains in the upper left corner of the image viewer, and can be clicked? 

I tried adding the script to the bottom of the Category page only, to see if it could be used only on that page, but it doesn't work.

I tried similar things with the Any-Image style of Pinterest button, but again no success. 

There has to be a good way to use Pinterest Save buttons on AC, but I can't figure it out. 

Thanks!


Offline Geoffrey

  • Full Member
  • ***
  • Posts: 153
  • Karma: +28/-3
    • View Profile
Re: How to integrate Pinterest Save button with easyZoom?
« Reply #1 on: November 17, 2017, 01:29:10 PM »
No one?  Crickets? 

Here's another perspective:

Kids and 20's don't use facebook or twitter.  They use Instagram.  Only old people use facebook or twitter, and the only reason these two companies stayed relevant was new users who "discovered" or "finally joined", then wasted the required year of their life on the app, then dropped out.  Well, the supply of new users is drying up.  Facebook and twitter stats are dwindling.

No one ever used linked-in to sell anything except a job.

Instagram and Pinterest are 'it' for the foreseeable future.   

AbanteCart doesn't include the two pre-eminent social media platforms in the default social media setup.  Ouch. 

AbanteCart uses a powerful easyzoom image viewer that allows PC users to view closeup product images via hover.  Yay!

Pinterest uses a powerful script to add "Pin It" or "Save" buttons to website images.  Cool!

The scripts don't work together.  Ouch. 

The way Pinterest works: Web User A can visit your site and click the Pinterest Save button that you installed on your images, which adds your image to their own fluid Pinterest bulletin board.  People do this as a sort of online status currency of "look what I found!", or as a reminder of "something I want", or as part of a Xmax List gigt board where they assemble 100 gift ideas and then choose from them. 

Other pinterest users can and will see Web User A's "Pin" of your image while cruising around in pinterest looking for items in that general category.  Many of them will re-pin it if your item is catchy.  The pin always links back to your site. 

Or Web User B, who is famous, can pin an image from your site, and everyone who follows User B will visit your site because User B said it's cool.  Web User B can be famous because they are a movie star, or famous as being a finder of cool stuff on the web, etc. 

These two features described above are the "free" and original features that made Pinterest the most important social media platform for ecommerce today.  Because people actually do that stuff, and it works, and Pinterest is now huge. 

You can also buy exposure on Pinterest, and there are a few other planks in it's marketing platform, but you get the idea. 

In Abantecart, if you implement the Pinterest "Save" script in footer.tpl, it works! 
It is so easy!  Just copy a single line of code as the last line of footer.tpl. 
Then all your mobile customers will see the Pinterest button when they tap your images. 
And all your desktop customers will see your pinterest button when they hover over your images on your Category or Product List pages. 
BUT, when they get to a Product page with the easyzoom window, they will see that your site is broken because easyzoom doesn't work with the Pinterest script.

This is not a huge surprise.  Easyzoom is a script.  The Pinterest button is a script. There are bound to be conflicts when 2 scripts are trying to run on the same element. 

The purpose of my post is to point out that Abantecart does not work with the most important social media platform of the day. 

That's a big sentence.  It's powerful.  Searchable.

Maybe someone with coding skills could evaluate the Pinterest script for potential inclusion into or coexistence with the easyzoom script. 

Maybe an AC developer could evaluate AbanteCart compatibility with Pinterest, and then publish a formal position paper on the subject so that the Pinterest capabilities and techniques are know up front.  If the solution is to disable easyzoom, then publish that fact so that AC users know how to proceed.  Instead of sitting around here listening to crickets. 

If the scripts can be combined or made compatible, then the AC platform would gain the distinction of being an e-commerce app that is able to operate with Pinterest [insert superman emoji here],

as opposed to its current status of "Yah, our software doesn't work with Pinterest. [doo doo face emoji here].

Thanks!

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 4358
  • Karma: +298/-10
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: How to integrate Pinterest Save button with easyZoom?
« Reply #2 on: November 18, 2017, 10:00:33 AM »
Moving forward there will be no easyzoom in version AbanteCart 2.0. We will find better alternative.
You can disable and remove easyzoom if you want. Will it solve your problem?
 
Please  rate your experience or leave your review
We need your help to build better free open source ecommerce platform for everyone. See how you can help

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 153
  • Karma: +28/-3
    • View Profile
Re: How to integrate Pinterest Save button with easyZoom?
« Reply #3 on: November 18, 2017, 12:13:52 PM »
Yes, it probably will.

But easy zoom is good.  People like easy zoom.  It gives you close-up viewing without filling the whole page with the image.  Amazon uses easy zoom (or equivalent).  So does eBay.  If you drop it, I would suggest replacing it with something similar. 

Here are some ideas for today's problem:
1 - Use two different footers.  All pages except product page use footer1.  Product page uses footer2.  Only footer1.tpl contains pinterest script call.  This is a quickie compromise solution so storeowner can take advantage of Pinterest on category & product list pages, without having broken behavior of Product page. 

Where is footer called?  How can the call be modified so that product page calls footer2.tpl? 

2 - Modify the pinterest script and I guess run it from the storeowner's host.  Put a custom pinterest script call in footer2.tpl.  Tell the main script to place the Pin button on a image-viewer wrapper instead of on the image.  Then put the product page main image in a wrapper.  So the pin button will just sit there on the wrapper while easy zoom is working underneath it? 

If you can tell me how to implement a footer2, i will explore Pinterest custom methods and see what is available. 

Thx. 



Offline Geoffrey

  • Full Member
  • ***
  • Posts: 153
  • Karma: +28/-3
    • View Profile
Re: How to integrate Pinterest Save button with easyZoom?
« Reply #4 on: November 20, 2017, 02:12:07 PM »
two different footers...?  Would this be that hard to do...?

Tips?

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5774
  • Karma: +274/-2
    • View Profile
Re: How to integrate Pinterest Save button with easyZoom?
« Reply #5 on: November 21, 2017, 01:13:22 AM »
two different footers...?  Would this be that hard to do...?

Tips?

Suggestion is change easyzoom script code for your needs or use another script for zoom feature which one have not conflict with your custom 3rd party code.

Also try to add pinterest tags https://developers.pinterest.com/docs/rich-pins/products/?

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 153
  • Karma: +28/-3
    • View Profile
Re: How to integrate Pinterest Save button with easyZoom?
« Reply #6 on: November 21, 2017, 04:39:03 AM »
OK, I disabled easyzoom, but it caused other problems. 

What I did:
In product.tpl, I commented-out L429, L474-491, and L529 in the script section (reference = current file on github). 

What happened:
This disabled easyzoom, but now clicking an image does not work as expected:
1 - if you click the image in the viewer, on desktop it opens a new browser tab with full-size image; a mobile tap does nothing, but you can spread-finger zoom.
2 - if you click any thumbnail, the desktop browser leaves the product page and goes to the url for the full-size image; a mobile tap on a thumb does the same thing.
Note: on desktops, the fullsize image displayed on the new or redirect url has a "zoom cursor" (little magnifying glass with + symbol) which allows you to zoom in. 

So - by disabling easyzoom, the image view window is rendered useless. 
You cannot select other thumbs to view in the window. 
If you click a thumb, it doesn't replace the image in the view window, instead, it navigates to a different url.

Can you tell me how to modify the code so that clicking or tapping a thumbnail will only change the image that is being displayed in the view window?

Can you tell me how to modify the code so that desktop mouse-hovering over the view window will result in the "zoom cursor"?

Summary - Pinterest is important.  The Pinterest Save button is easy to implement and already works with AC category and product-listing images.  But AC product images do not work with Pinterest because easyzoom.  Disabling easyzoom makes the product page view window useless, and also causes AC product image functions behave poorly. 

Is this custom work that must be purchased?

Or is this a cart that doesn't work with pinterest, and should be developed so that the option for disabling easyzoom and using pinterest is a basic feature? 

Thx.

Offline abolabo

  • core-developer
  • Administrator
  • Hero Member
  • *****
  • Posts: 2046
  • Karma: +318/-13
  • web for all, all for web!
    • View Profile
    • AbanteCart
Re: How to integrate Pinterest Save button with easyZoom?
« Reply #7 on: November 22, 2017, 09:58:14 AM »
try to use page/product/product.tpl from attachment. i had changed it a bit.

Also do not forget to remove easyzoom.js from footer.tpl
“No one is useless in this world who lightens the burdens of another.”
― Charles Dickens

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 153
  • Karma: +28/-3
    • View Profile
Re: How to integrate Pinterest Save button with easyZoom?
« Reply #8 on: November 22, 2017, 01:04:48 PM »
Ah, a custom product.tpl! 

Thank you for the support.  I will try this out and report back. 

Also, thank you for the tip about footer.ptl, I would have certainly overlooked it. 

 

Powered by SMFPacks Social Login Mod