Show Posts

Messages - Geoffrey

Pages: 1 [2] 3 4 ... 11
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? 


Hi Barry.

1 - as you can see, the AC devs addressed the mobile Stripe collapsed credit card entry box problem that you identified.  I sympathize with your latest sentiment.  I'm not 100% sure how something like this gets disseminated to existing AC Stripe users; guess I never thought about it until now.   

2 - I don't use firefox much.  Today, it auto-updated when I turned it on.  I'm now on latest version 57.0.  I confirm that on first visit to your homepage, your cart buttons on each product show the wrong icon and do not work.  I confirm that navigating anywhere on your site then returning to homepage, the cart buttons then work as expected.  I cannot say for sure whether this was occurring 2 days ago when i was on vs 56.  Sorry, I wrote my previous reply in a hurry and did not notice.

I can't offer much more help.  If I were you, I'd start with the housecleaning, then ask your host if they think SSL issues are related to odd FF performance, then ask AC devs.  Good luck.

two different footers...?  Would this be that hard to do...?


I looked at your site in Firefox 56.0.2, didn't notice any obvious problems. 

I can't solve your new problem, but i can give you some suggestions for working in that direction.

1 - Housecleaning.  Your entire site is located within one folder on the live server.  FTP that folder down to a backup folder on your PC.  It may take a long time, like hours, because the folder will contain numerous small files, which slows the data rate.  Keep this backup folder intact and safe and unedited. 

Then figure out which "copy or version" of your site on the live server is actually the one driving your website.  Delete the other copies or versions from the live server.  You need to get to a point where the only files and folders on the live server are the ones that are running your site.  Get your host to help you.  If I understand you correctly, there may presently be multiple versions.  That won't help with SSL issues. 

If you break something, restore things from the backup folder on your PC until the site runs.  Keep notes as you clean up.

2 - Read the AC documentation on Developer Tools and cloning the default template.  I doubt that your host-created website clone is the same concept as an AC template clone used for customizations.  If you use AC Developer Tools to create an AC Template clone, you will see the clone in it's own folder within the root/extensions folder, and that folder will have a name that you chose (templatename), and it will contain a cluster of site folders within a /storefront/view/templatename/ hierarchy.  If you can't find this in your site files, then you don't have a template clone.  This is not relevant to your SSL problem, rather just an FYI.  If you study enough to understand my comment, you will begin to understand how AC works. 

3 - Structure.  You need to learn how the site runs from the server.  AC is an application.  There are a small handful of files on your server that tell the AC application how to start up and run.  After that, it just runs.  Study your htaccess file, see what is in it.  In particular, you need to understand the RewriteEngine family of commands that include RewriteCond, RewriteBase, RewriteRule, etc.  There will be several of these rules in htaccess, and the settings specified by these rules basically contribute to either smooth sailing or endless headaches. 

4 - Here is a cut-n-paste from my notes for initial live site setup:
c.   Rename the htaccess.txt file to .htaccess.i.   
ii.   The dot in front of “.htaccess” indicates that this file is ‘invisible’. Therefore you may have to configure your FTP application or hosting file manager to show invisible files in order to edit.  This .htaccess file on an Apache based web server allows you to configure settings for how you’d like your website, or certain files within your website, to behave.
d.   Edit the .htaccess file: if your store is not on the root, you have to configure the RewriteBase/ element to point at the subfolder that contains your store: change it to RewriteBase/subfoldername/  .  The ending slash is important. 
e.   AC Admin control panel - System>Settings>System:   
i.   Scroll to bottom, enable System Check for Admin and Storefront.  Then check the messages that will come up on Admin as you use it.  Resolve the messages.  Delete each after you resolve it. 
ii.   Turn on Retina.
iii.   Turn on SEO URL's
iv.   Note: these all require the mod-rewrite Apache module to be active and .htaccess.txt to be renamed to .htaccess and the RewriteBase/ to be properly configured.

If you read up on the terminology in the snippet 4 above, you should begin to understand what htaccess is doing, which is a step towards getting it set properly. 

My htaccess file includes the following rules that steer all traffic to https :
RewriteCond %{SERVER_PORT} 80
RewriteCond %{REQUEST_URI} !^/[0-9]+\..+\.cpaneldcv$
RewriteCond %{REQUEST_URI} !^/\.well-known/acme-challenge/[0-9a-zA-Z_-]+$
RewriteCond %{REQUEST_URI} !^/\.well-known/pki-validation/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteRule ^(.*)$$1 [R=301,L]

If you aren't set up properly in this fashion, that will be the first place that SSL problems start. 

If you get htaccess "right", then your host is going to be the one to help you resolve remianing ssl probs.

Good luck.  I was almost as much a noob as you when i started.  It took me months to sort this stuff out.  There are no shortcuts or quick fixes, other than cash.  If you want a super quick and dead-right fix, contact the AC devs and ask to them to do a contract job to clean this up.  I would imagine they could fix everything for less than the cost of a weekend's entertainment. 

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. 


Hi, I just checked, you have not successfully edited the style.css file that is running your page because I don't see the new rule when i refresh the page and then inspect it. 

If you are using a template clone to customize your site, you need to find style.css located in the root/extensions/templatename/storefront/view/templatename/stylesheet/ folder.  Edit that file to add the complete snippet above, (take care to include all parentheses), then save the file back to the same location on your live server, then clear browser cache.  It will work. 

If you are customizing the default AC template, the file you need to edit will be in root/storefront/view/default/ folder.  Use the same procedure. 

Once you succeed in editing and saving the proper css file, the Stripe box will be limited to a minimum 280px width, which will solve your problem.

FYI - if you are customizing a template clone, you are "doing everything right". 

If you are customizing the default template, then it is probable that your work will be lost during future software updates.  This is okay, don't panic.  Just make a note to never update AbanteCart.  If AbanteCart never develops a security problem with the version you are using, then an update will never be essential. 

You can learn about these concepts in the AC doc stack.  Once you become familiar with Developer Tools and Cloning a template, you can actually migrate your current site customizations to a new clone rather easily, and then be fully ready for future updates without losing your work.  Etc etc.  Have fun coming up the curve!  It won't happen in 1 weekend, so don't stress. 

Edit your style.css file, add this at the bottom:

Code: [Select]
#card-element.StripeElement {
    min-width: 280px;

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].


Feedback on My Store / Re: Anyone here up for some stress testing?
« on: November 17, 2017, 12:50:32 PM »
Hi Earl.  I get what you're saying, but I'd encourage you to take a different approach. 

The sole purpose of a website is to be made public and used by anyone who passes by.

If your site is not completely finished, you can make it live and ask for feedback, then put it back into maintenance mode to keep working on it. 

There is no security risk unless you have really hacked up the core. 

BTW, I'll make a trade with you.  Take a look at my site and I'll take a look at yours.

Customization help / 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="//"></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. 


Payment Modules / PayPal Express Bug
« on: November 09, 2017, 02:15:07 PM »

When customer chooses PayPal Express Checkout, they are redirected to PP page for login etc.

The PP API transmits the customer name and address data back to AbanteCart for order confirm. 

While the customer is on their PP page, they can choose a different shipping address, like for a gift.

When this happens, the PP API transmits the wrong data back to AC:  it sends customer (billing) name + gift (shipping) address.  That is the first problem, and it is the biggest problem. 

You can see it yourself by going to my site and adding something to the cart, then choosing PP Express, then logging in to your PP account, then choosing a different shipping address on the PP page, then clicking Continue on the PP page, which will take you back to the Confirm page on my site where you will see the bug.  As long as you don't click the Confirm button, the transaction will not complete, so you don't have to actually buy something.  FYI - there is a 50 cent Test Product in the Reduced category. 

There are other related problems:

2 - For the AC storeowner, there is no indication that there is a problem with addresses.  This type of transaction looks like any other PP transaction: you get a name and address just like normal, but you have no way of knowing that the address is a gift address with a wrong (billing) name attached to it. 

3 - For the Customer who is buying someone a gift in your store: the customer will see the wrong name with gift address when they are returned to your confirm page, and they will try to fix the problem by using the Back button on the confirm page.  This will restart the PP Express routine, ultimately leaving the customer in an infinite loop of "wrong address-go back-do paypal again-get wrong address-go back-do paypal again" etc.  Obviously, the customer will abandon the transaction, and you lose a sale because AbanteCart does not work. 

3 - AC has fields for Billing address and Shipping address.  These fields are displayed on the Confirm page.  When a PP Express customer chooses a "gift" address on PP, AC is populating BOTH the billing and shipping address fields with the incorrect combination of billing name + gift shipping address. 

3a - At a bare minimum, AC should be showing Gift Shipping name with Gift Shipping address in the fields.  At least then you have a better chance that the customer will click confirm to complete the transaction because the correct shipping address is being shown; BUT, they still might not click confirm because they don't like the fact that the gift recipient's NAME and ADDRESS are now showing in both the BILLING and SHIPPING address fields on the AC confirm page.  Because they might worry that the gift reciepient is going to receive some kind of invoice or receipt for the transaction, which gift givers do not want.  The reason they might think this is because ABANTECART IS SAYING THAT THE BILLING AND SHIPPING ADDRESS ARE BOTH THE GIFT RECIPIENT'S ADDRESS.

3b - The best solution would be if AbanteCart worked properly with PayPal, meaning that whenever a PayPal customer chose a different shipping address on their PP page, the PP API would transmit correct billing and shipping data back to AC, and AC would show that data correctly on the Confirm page. 

3c - If AbanteCart cannot work properly with Paypal to distinguish between and properly display billing vs shipping address data for PP transactions where the customer selects a different shipping address, then the least that AbanteCart should be able to do is NOT SHOW a Billing address on the Confirm page at the conclusion of a PayPal transaction.


General Support / Re: Quantity Column Missing in mobile view _BUG REPORT
« on: November 07, 2017, 03:22:33 PM »
Glad it helped. 

Good job spotting the other rule that needed to be changed. 
On the unmodified AC stylesheet as of today, that's line 3788. 

I had made the same change in my own stylesheet, forgot to mention it.  Glad you caught it. 

General Support / Re: Quantity Column Missing in mobile view _BUG REPORT
« on: November 06, 2017, 12:46:46 PM »
Sorry!  My mistake.  I thought you were asking about quantity display on Product pages. 

I discovered that quantity display broke at certain resolutions on my Product page.
Everything I mentioned above was how I fixed that problem on Product pages. 

I understand now that you are talking about the Cart page. 

On your phone, go to my site and add something to the cart and look at my cart page.

Basara's 1st answer was the correct answer: you can only fit so much stuff on a small screen. 

But I agreed with your idea that Quantity was important to display in the table. 
To me, Quantity was more important to display than Total, because the Total value is available elsewhere on the same page.

My solution:
1 - Recognize that small screens only allow small amount of data displayed.
2 - Do not try to crowd more data into the table.
3 - Instead, change which data is displayed in the table. 

Look at about line 4325 in the AC stylesheet.  You will see this:
Code: [Select]
.cart-info.product-list table tr td:nth-child(1), .cart-info.product-list table tr th:nth-child(1),
.cart-info.product-list table tr td:nth-child(3), .cart-info.product-list table tr th:nth-child(3),
.cart-info.product-list table tr td:nth-child(5), .cart-info.product-list table tr th:nth-child(5),
.invoice_products.table tr td:nth-child(2), .invoice_products.table tr th:nth-child(2),
.invoice_products.table tr td:nth-child(3), .invoice_products.table tr th:nth-child(3) {
display: none !important;
visibility: hidden !important;

These rules are hiding certain values on small screens.  The values to be hidden are defined by
Code: [Select]

If you change both (1) values to (2), and change both (5) values to (6), this will change which values are selected to be hidden on small screens, and your cart table will look like my cart table instead of the default AC cart table. 

Hope this helps.

General Support / Re: Quantity Column Missing in mobile view _BUG REPORT
« on: November 04, 2017, 11:49:05 AM »
Hi, all of the changes I described above should be made to the style.css file.  Do not make any changes to the bootstrap.css file. 

I should have made my language more clear:  "around line 2600" is the "bootstrap overwrites" section of style.css.

After you save all these changes to style.css, clear your browser cache and see if it works. 

General Support / Re: Quantity Column Missing in mobile view _BUG REPORT
« on: November 03, 2017, 04:01:51 PM »
I fixed this with css. 


For the .quantitybox variable around line 1590, add:
Code: [Select]
min-width: 250px;
In the bootstrap overwrite section around line 2600, I added new variables:
Code: [Select]
form#product {
margin: 10px 10px 10px 0px;

#product_quantity.form-control, .alert {
width: 55px;

For the .mt20 variable about line 110, I changed the value from 20px to 0px. 
This last bit is more of a spacing preference than a requirement for keeping the quantity box in view on mobile screens. 

I'm pretty sure that's all I did. 

Try it and see if it works. 
If it doesn't, then maybe there is one more change I overlooked for this post, but it should be easy to figure out with CSS Inpsector.

Let me know if it works for you. 

Pages: 1 [2] 3 4 ... 11

Powered by SMFPacks Social Login Mod